/* Bera Games — "sıcak oyuncak dünyası" tasarım sistemi (2026-10)
   Renkler oyundan: kamyon turuncusu, hurdacının camgöbeği tişörtü, logo laciverti, gün batımı kremi.
   Yönler mantıksal özelliklerle yazıldı (margin-inline, inset-inline…); Arapça (RTL) aynı kurallarla çalışır. */

/* Latin + Türkçe/Portekizce; Kiril (Onest/Inter) ve Arapça (Cairo) aynı aileye unicode-range ile bağlanır, yalnızca gereken sayfada iner */
@font-face{font-family:'Bricolage Grotesque';src:url(/fonts/bricolage-tr.woff2) format('woff2');font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+20BA,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Bricolage Grotesque';src:url(/fonts/onest-kiril.woff2) format('woff2');font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';src:url(/fonts/inter-tr.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+20BA,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Inter';src:url(/fonts/inter-kiril.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cairo';src:url(/fonts/cairo-ar.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'BG Yedek';src:local('Arial Black'),local('Arial');size-adjust:96%;ascent-override:92%;descent-override:24%}
@font-face{font-family:'Inter Yedek';src:local('Segoe UI'),local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%}

:root{
  --krem:#FFF4E4;--krem-2:#FCE8CC;--kagit:#FFFCF7;
  --lacivert:#1A2456;--lacivert-2:#26337A;--gece:#141B44;--gece-2:#0B1032;
  --metin:#2A2F4F;--metin-2:#4F5470;
  --turuncu:#FF7A1A;--turuncu-2:#B84A00;--turuncu-acik:#FFE2C6;
  --teal:#0B7B7E;--teal-2:#0A6467;--teal-3:#084E51;--teal-acik:#D3EEEA;
  --sari:#FFC53D;--sari-acik:#FFF0C4;
  --yesil:#2FA35A;
  --cizgi:rgba(26,36,86,.12);
  --golge:0 1px 0 rgba(26,36,86,.04),0 18px 40px -20px rgba(26,36,86,.30);
  --golge-buyuk:0 2px 0 rgba(26,36,86,.05),0 40px 80px -32px rgba(60,30,10,.45);
  --oyuncak:0 6px 0 rgba(26,36,86,.09),0 22px 44px -22px rgba(26,36,86,.38);
  --r:28px;--r-k:18px;
  --kap:1240px;--kenar:24px;
  --baslik:'Bricolage Grotesque','Cairo','BG Yedek',system-ui,sans-serif;
  --govde:'Inter','Cairo','Inter Yedek',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --yay:cubic-bezier(.34,1.56,.64,1);
  --yon:1;
}
[dir=rtl]{--yon:-1}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--krem);color:var(--metin);font:400 17px/1.6 var(--govde);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--baslik);color:var(--lacivert);margin:0;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
p,li,small,dd{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
main{display:block;overflow:hidden}
[hidden]{display:none!important}
.ik{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[dir=rtl] .ik.yonlu{transform:scaleX(-1)}
[dir=rtl] .karo-ikon{object-position:100% 50%}
.kap{width:100%;max-width:calc(var(--kap) + 2*var(--kenar));margin:0 auto;padding:0 var(--kenar)}
:focus-visible{outline:3px solid var(--turuncu);outline-offset:3px;border-radius:8px}
.atla{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--lacivert);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.atla:focus{top:12px}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Arapça ve Kiril: negatif harf aralığı yok, satırlar biraz daha ferah */
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] .dg,[lang=ar] .balon,[lang=ar] .marka{letter-spacing:0!important}
[lang=ar] h1,[lang=ar] h2{line-height:1.25!important}
[lang=ar] body{line-height:1.75}
[lang=ru] h1,[lang=ru] h2{letter-spacing:-.02em}

/* ---------- vurgu (yalnızca hero başlığında, el çizimi sarı alt çizgi) ---------- */
.vurgu{position:relative;z-index:0;display:inline-block}
.vurgu::after{content:"";position:absolute;inset-inline:.02em .04em;bottom:.04em;height:.32em;z-index:-1;border-radius:.2em;background:var(--sari);transform:rotate(calc(-1.2deg * var(--yon)));opacity:.9}

/* ---------- konuşma balonu ---------- */
.balon{position:relative;display:inline-block;background:#fff;color:var(--lacivert);font:800 22px/1 var(--baslik);letter-spacing:-.01em;
  padding:14px 20px 15px;border:3px solid var(--lacivert);border-radius:22px;box-shadow:0 5px 0 var(--lacivert);white-space:nowrap}
.balon::before,.balon::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.balon::before{inset-inline-end:30px;bottom:-21px;border-width:18px 16px 0 16px;border-color:var(--lacivert) transparent transparent}
.balon::after{inset-inline-end:33px;bottom:-12px;border-width:12px 13px 0 13px;border-color:#fff transparent transparent}

/* bölüm etiketleri de birer küçük balon */
.etiket{position:relative;display:inline-block;background:var(--teal);color:#fff;font:700 14px/1.1 var(--govde);letter-spacing:.01em;
  padding:9px 14px 10px;border-radius:14px;margin-bottom:18px}
.etiket::after{content:"";position:absolute;inset-inline-start:16px;bottom:-8px;border-style:solid;border-width:9px 8px 0 8px;border-color:var(--teal) transparent transparent}
.etiket-turuncu{background:var(--turuncu-2)}.etiket-turuncu::after{border-top-color:var(--turuncu-2)}
.etiket-krem{background:var(--krem);color:var(--teal-3)}.etiket-krem::after{border-top-color:var(--krem)}
.etiket-lacivert{background:var(--lacivert)}.etiket-lacivert::after{border-top-color:var(--lacivert)}

/* ---------- düğmeler ---------- */
.dg{--zemin:var(--turuncu);--kenar-r:var(--turuncu-2);--yazi:var(--lacivert);
  display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:10px 24px 10px 18px;padding-inline:18px 24px;border-radius:18px;border:0;
  background:var(--zemin);color:var(--yazi);text-decoration:none;font:700 19px/1.05 var(--baslik);letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 5px 0 var(--kenar-r),0 16px 28px -12px rgba(200,83,4,.55);transition:transform .18s var(--yay),box-shadow .18s}
.dg .ik{width:26px;height:26px;stroke-width:2.4}
.dg>span{display:flex;flex-direction:column;gap:3px;text-align:start}
.dg small{font:600 12.5px/1.1 var(--govde);letter-spacing:.01em;opacity:.95}
a.dg:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--kenar-r),0 22px 32px -12px rgba(200,83,4,.6)}
a.dg:active{transform:translateY(4px);box-shadow:0 1px 0 var(--kenar-r),0 8px 16px -10px rgba(200,83,4,.5)}
.dg-lacivert{--zemin:var(--lacivert);--kenar-r:var(--gece-2);--yazi:#fff;box-shadow:0 5px 0 var(--gece-2),0 16px 28px -12px rgba(11,16,50,.6)}
a.dg-lacivert:hover{box-shadow:0 7px 0 var(--gece-2),0 22px 32px -12px rgba(11,16,50,.6)}
.dg-beyaz{--zemin:#fff;--kenar-r:rgba(26,36,86,.16);--yazi:var(--lacivert);box-shadow:0 5px 0 rgba(26,36,86,.14),0 16px 28px -16px rgba(26,36,86,.4)}
a.dg-beyaz:hover{box-shadow:0 7px 0 rgba(26,36,86,.14),0 22px 32px -16px rgba(26,36,86,.45)}
/* "yakında": tıklanamaz, kesik çizgili, gölgesiz */
.dg-yakinda{--zemin:transparent;--yazi:var(--metin-2);box-shadow:none;border:2px dashed rgba(26,36,86,.28);cursor:default}
.dg-yakinda small{color:var(--metin-2)}
.dg-yakinda-acik{--yazi:var(--lacivert);border-color:rgba(26,36,86,.4)}
.dg-yakinda-acik small{color:var(--lacivert)}
.dg-kucuk{min-height:44px;padding:8px 16px;padding-inline:12px 16px;border-radius:14px;font:700 15px/1 var(--govde);letter-spacing:0;gap:8px;box-shadow:0 4px 0 var(--turuncu-2)}
.dg-kucuk .ik{width:20px;height:20px}
a.dg-kucuk:hover{box-shadow:0 6px 0 var(--turuncu-2)}
.dg-orta{min-height:52px;font-size:17px;padding-inline:16px 20px}
.magaza{display:flex;flex-wrap:wrap;gap:14px}
.metin-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--turuncu-2);text-decoration:none;padding:8px 0}
.metin-link .ik{transition:transform .25s var(--yay)}
.metin-link:hover .ik{transform:translateX(calc(5px * var(--yon)))}
[dir=rtl] .metin-link:hover .ik.yonlu{transform:scaleX(-1) translateX(5px)}
.fragman-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-weight:700;color:var(--lacivert);text-decoration:none;font-size:16px}
.fragman-link .oynat-k{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lacivert);color:#fff;box-shadow:0 3px 0 var(--gece-2);transition:transform .25s var(--yay)}
.fragman-link .oynat-k .ik{width:16px;height:16px;margin-inline-start:2px}
.fragman-link small{font-weight:500;color:var(--metin-2);font-size:15px}
.fragman-link:hover .oynat-k{transform:scale(1.1)}
.fragman-link:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- üst çubuk ---------- */
.ust{position:sticky;top:0;z-index:50;background:rgba(255,244,228,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .25s}
.ust.golgeli{box-shadow:0 1px 0 var(--cizgi),0 10px 30px -18px rgba(26,36,86,.35)}
.ust-ic{display:flex;align-items:center;gap:24px;height:76px}
.marka{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--lacivert);font:800 21px/1 var(--baslik);letter-spacing:-.02em;flex:none}
.marka img{width:40px;height:40px;border-radius:12px;transition:transform .3s var(--yay)}
.marka:hover img{transform:rotate(-8deg) scale(1.06)}
.marka b{color:var(--turuncu-2)}
.menu{display:flex;gap:2px}
.menu>a{text-decoration:none;font-weight:600;font-size:16px;color:var(--metin);padding:10px 14px;border-radius:12px;transition:background .2s,color .2s;white-space:nowrap}
.menu>a:hover{background:rgba(26,36,86,.06);color:var(--lacivert)}
.menu>a[aria-current]{color:var(--turuncu-2)}
.menu-dil{display:none}
.ust-sag{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.dil-sec{position:relative}
.dil-dugme{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px 0 12px;border:0;border-radius:12px;background:transparent;font:700 14px/1 var(--govde);color:var(--lacivert);cursor:pointer}
.dil-dugme:hover,.dil-sec.acik .dil-dugme{background:rgba(26,36,86,.07)}
.dil-dugme .i-asagi{width:16px;height:16px;transition:transform .2s}
.dil-sec.acik .i-asagi{transform:rotate(180deg)}
.dil-liste{position:absolute;inset-inline-end:0;top:52px;min-width:190px;background:var(--kagit);border-radius:16px;padding:8px;box-shadow:var(--golge-buyuk),0 0 0 1px var(--cizgi);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.dil-sec.acik .dil-liste{opacity:1;visibility:visible;transform:none}
.dil-liste a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:500}
.dil-liste a:hover{background:var(--krem)}
.dil-liste a[aria-current]{font-weight:700;color:var(--turuncu-2)}
.dil-liste .kod{color:var(--metin-2);font-size:13px;font-weight:600}
.menu-dugme{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--lacivert);cursor:pointer}
.menu-dugme .ik{width:26px;height:26px}
.menu-dugme .kapat,.ust.acik .menu-dugme .ac{display:none}
.ust.acik .menu-dugme .kapat{display:block}
.dg-kucuk .kisa{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:28px 0 84px;overflow:hidden}
.isinlar{position:absolute;inset:-30% -10% auto 30%;height:150%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg at 62% 42%,rgba(255,197,61,.22) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side at 62% 42%,#000 20%,transparent 100%);mask:radial-gradient(closest-side at 62% 42%,#000 20%,transparent 100%)}
[dir=rtl] .isinlar{inset:-30% 30% auto -10%}
.hero-ic{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;min-height:min(680px,calc(100svh - 190px))}
.kimlik-satir{display:flex;align-items:center;gap:14px}
.kimlik-satir img{width:56px;height:56px;border-radius:16px;box-shadow:0 4px 0 rgba(26,36,86,.12),0 10px 20px -10px rgba(26,36,86,.4);flex:none}
.kimlik-satir b{display:block;font:800 19px/1.15 var(--baslik);color:var(--lacivert);letter-spacing:-.01em}
.kimlik-satir b span{font:500 15px/1.3 var(--govde);color:var(--metin-2);letter-spacing:0}
.canli{display:inline-flex;align-items:center;gap:8px;margin-top:5px;font-weight:600;font-size:14px;color:#17663A}
.nokta{width:9px;height:9px;border-radius:50%;background:var(--yesil);box-shadow:0 0 0 0 rgba(47,163,90,.5);animation:nabiz 2s infinite;flex:none}
@keyframes nabiz{70%{box-shadow:0 0 0 9px rgba(47,163,90,0)}100%{box-shadow:0 0 0 0 rgba(47,163,90,0)}}
.hero h1{font-size:clamp(52px,7vw,100px);line-height:.94;letter-spacing:-.035em;margin:26px 0 22px}
.hero h1 .satir{display:block}
.giris{font-size:20px;line-height:1.55;color:var(--metin-2);max-width:30em;margin-bottom:30px}
.giris strong{color:var(--lacivert);font-weight:700}
.artilar{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-weight:600;font-size:15px;color:var(--lacivert)}
.artilar li{display:flex;align-items:center;gap:6px}
.artilar .ik{color:var(--teal);width:20px;height:20px;stroke-width:2.8}

.hero-sahne{position:relative;padding-block:34px 40px;padding-inline:36px 0}
.sahne-kart{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:5/4;background:#F4B26A;
  box-shadow:0 0 0 8px var(--kagit),0 8px 0 8px rgba(26,36,86,.08),var(--golge-buyuk);transform:rotate(calc(1.2deg * var(--yon)))}
.sahne-gorsel{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
[dir=rtl] .sahne-gorsel{object-position:68% 50%}
.logo-etiket{position:absolute;inset-inline-start:0;top:0;width:auto;height:auto;max-width:min(330px,50%);max-height:120px;transform:rotate(calc(-6deg * var(--yon)));filter:drop-shadow(0 10px 14px rgba(26,36,86,.35));z-index:3}
.balon-hero{position:absolute;inset-inline-end:4%;top:7%;z-index:3;font-size:clamp(19px,1.9vw,27px);transform:rotate(calc(5deg * var(--yon)));animation:salin 3.2s ease-in-out infinite}
@keyframes salin{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* telefon çerçevesi */
.telefon{position:relative;border-radius:34px;padding:8px;background:var(--lacivert);box-shadow:inset 0 0 0 2px #34418C,var(--golge-buyuk)}
.telefon .ekran{border-radius:27px;overflow:hidden;background:#3a4157;aspect-ratio:9/16;position:relative}
.telefon .ekran::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:14px;margin-left:-15%;border-radius:10px;background:var(--lacivert);z-index:2}
.telefon .ekran>img,.telefon .ekran>video{width:100%;height:100%;object-fit:cover}
.telefon-hero{position:absolute;inset-inline-start:-6px;bottom:0;width:clamp(150px,13vw,196px);z-index:4;transform:rotate(calc(-5deg * var(--yon)))}
.telefon-hero figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;background:var(--teal);color:#fff;
  font:700 12px/1 var(--govde);letter-spacing:.02em;padding:7px 11px;border-radius:999px;box-shadow:0 4px 0 var(--teal-3)}
.yuzen{position:absolute;z-index:2;width:72px;inset-inline-end:-22px;bottom:16%;filter:drop-shadow(0 12px 12px rgba(80,40,10,.25));animation:yuz 6s ease-in-out infinite}
@keyframes yuz{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(-4deg)}}

/* ---------- malzeme bandı (her zaman soldan sağa kayar) ---------- */
.bant{position:relative;z-index:2;background:var(--teal);color:#fff;transform:rotate(-1.4deg);margin:-28px -20px 0;overflow:hidden;direction:ltr;
  box-shadow:0 6px 0 var(--teal-3),0 20px 40px -20px rgba(8,78,81,.6)}
.bant-ic{display:flex;width:max-content;animation:kay 40s linear infinite}
.bant-grup{display:flex;align-items:center;gap:40px;padding:14px 20px 14px 40px}
.bant span{display:inline-flex;align-items:center;gap:12px;font:800 22px/1 var(--baslik);letter-spacing:-.01em;white-space:nowrap}
.bant img{width:40px;height:auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.bant .bant-yazi{color:var(--sari)}
[dir=rtl] .bant span{direction:rtl}
@keyframes kay{to{transform:translateX(-50%)}}

/* ---------- bölümler ---------- */
.bolum{position:relative;padding:112px 0}
.bas{max-width:720px;margin-bottom:52px}
.bas h2{font-size:clamp(36px,4.4vw,60px);line-height:1.02;letter-spacing:-.035em}
.bas>p:not(.etiket){font-size:19px;color:var(--metin-2);margin-top:16px;max-width:34em}
.bas-yan{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.bas-yan>p{max-width:24em;font-size:19px;color:var(--metin-2);margin:0 0 6px}
.orta{text-align:center;margin-inline:auto}
.orta>p:not(.etiket){margin-inline:auto}

/* adımlar */
.adimlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.adim{position:relative;background:var(--kagit);border-radius:var(--r);padding:14px 14px 30px;box-shadow:var(--oyuncak);transition:transform .35s var(--yay),box-shadow .35s}
.adim:hover{transform:translateY(-6px)}
.adim-gorsel{position:relative}
.adim-gorsel>img:first-child{border-radius:20px;aspect-ratio:4/3;width:100%;object-fit:cover;background:#d9c7a8}
.adim-ikon{position:absolute;inset-inline-end:-6px;bottom:-34px;width:84px;filter:drop-shadow(0 10px 10px rgba(26,36,86,.28));transition:transform .4s var(--yay)}
.adim:hover .adim-ikon{transform:rotate(-8deg) scale(1.08)}
.adim-no{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--turuncu);color:var(--lacivert);font:800 22px/1 var(--baslik);
  box-shadow:0 4px 0 var(--turuncu-2);margin-top:-23px;margin-inline-start:18px;position:relative}
.adim h3{font-size:28px;margin:16px 18px 8px}
.adim p{margin:0 18px;color:var(--metin-2);font-size:16.5px}

/* gerçek rakamlar */
.rakamlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px;background:var(--lacivert);border-radius:var(--r);padding:28px 32px;box-shadow:0 6px 0 var(--gece-2),var(--golge-buyuk);color:#fff}
.rakam{display:flex;align-items:baseline;gap:12px;justify-content:center}
.rakam+.rakam{border-inline-start:1px solid rgba(255,255,255,.14)}
.rakam b{font:800 clamp(40px,4.4vw,58px)/1 var(--baslik);color:var(--sari);letter-spacing:-.03em}
.rakam span{font-weight:600;font-size:17px;color:#E4E7F7;line-height:1.25}

/* araç merdiveni */
.yol-bolum{background:var(--krem-2);border-radius:56px 56px 0 0;padding-bottom:104px}
.araclar{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:calc(var(--kap) + 2*var(--kenar));margin:0 auto;padding:0 var(--kenar)}
.araclar::before{content:"";position:absolute;inset-inline:var(--kenar);bottom:50px;height:26px;border-radius:13px;background:#5C5F78;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.araclar::after{content:"";position:absolute;inset-inline:calc(var(--kenar) + 18px);bottom:62px;height:3px;background:repeating-linear-gradient(90deg,#FFE7A6 0 26px,transparent 26px 50px)}
.araclar li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;flex:1 1 0;min-width:0}
.araclar img{height:calc(66px + var(--i)*12px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 6px rgba(26,36,86,.25));transition:transform .35s var(--yay)}
.araclar li:hover img{transform:translateY(-8px) rotate(-3deg)}
[dir=rtl] .araclar img{transform:scaleX(-1)}
[dir=rtl] .araclar li:hover img{transform:scaleX(-1) translateY(-8px) rotate(-3deg)}
.araclar span{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;max-width:150px;font:700 13.5px/1.25 var(--govde);color:var(--lacivert);text-align:center;background:var(--kagit);padding:6px 8px;border-radius:12px;box-shadow:var(--golge)}

/* vitrin (ekran görüntüleri) */
.vitrin{background:linear-gradient(180deg,var(--teal) 0%,var(--teal-2) 100%);color:#fff;overflow:hidden;padding-bottom:80px;margin-top:-48px;border-radius:48px;z-index:1}
.vitrin h2{color:#fff}
.vitrin .bas-yan>p{color:#DDF1EF}
.isinlar-koyu{inset:-40% -20% -40% -20%;height:auto;background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(255,255,255,.06) 0 6deg,transparent 6deg 16deg);
  -webkit-mask:radial-gradient(70% 70% at 50% 0%,#000 30%,transparent 100%);mask:radial-gradient(70% 70% at 50% 0%,#000 30%,transparent 100%)}
[dir=rtl] .isinlar-koyu{inset:-40% -20% -40% -20%}
.vitrin .kap{position:relative;z-index:1}
.vitrin-dugmeler{display:flex;gap:12px}
.yuvarlak{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;border:0;background:var(--krem);color:var(--teal-3);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .2s var(--yay),opacity .2s}
.yuvarlak .ik{width:26px;height:26px;stroke-width:2.6}
.yuvarlak:hover{transform:translateY(-2px)}
.yuvarlak:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.yuvarlak:disabled{opacity:.4;cursor:default;transform:none}
.serit{position:relative;z-index:1;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:16px max(var(--kenar),calc((100vw - var(--kap))/2)) 72px;margin-bottom:-32px;scroll-padding:0 max(var(--kenar),calc((100vw - var(--kap))/2))}
.serit::-webkit-scrollbar{display:none}
.serit .telefon{flex:0 0 clamp(220px,19vw,258px);scroll-snap-align:start;box-shadow:inset 0 0 0 2px #34418C,0 30px 50px -24px rgba(0,0,0,.55);transition:transform .4s var(--yay)}
.serit .telefon:nth-child(odd){transform:rotate(-1.5deg)}
.serit .telefon:nth-child(even){transform:rotate(1.5deg) translateY(14px)}
.serit .telefon:hover{transform:rotate(0) translateY(-8px)}
.serit .telefon .ekran::before{display:none}
.serit figcaption{position:absolute;inset-inline:12px;bottom:-30px;text-align:center;font-size:14px;font-weight:600;color:#E6F5F3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serit-yazili{padding-bottom:64px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.karo{position:relative;background:var(--kagit);border-radius:var(--r);padding:28px 28px 30px;box-shadow:var(--oyuncak);overflow:hidden;transition:transform .35s var(--yay)}
.karo:hover{transform:translateY(-5px)}
.karo h3{font-size:24px;line-height:1.12;margin:0 0 10px}
.karo p{color:var(--metin-2);font-size:16px}
.karo-ikon{width:auto;height:72px;max-width:96px;object-fit:contain;object-position:0 50%;margin-block:-6px 14px;margin-inline-start:-4px;filter:drop-shadow(0 8px 8px rgba(26,36,86,.22));transition:transform .4s var(--yay)}
.karo:hover .karo-ikon{transform:rotate(-8deg) scale(1.08)}
.karo-sari{background:var(--sari-acik)}
.karo-teal{background:var(--teal-acik)}
.karo-turuncu{background:var(--turuncu-acik)}
.bento-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.yol-yuvarlak{border-radius:56px;margin-block:24px}
.karo-svg{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--turuncu-acik);color:var(--turuncu-2);margin-bottom:16px}
.karo-svg .ik{width:30px;height:30px}
/* fragman karosu: lacivert zemin + telefonda dikey kare */
.karo-fragman{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:40px 48px;
  background:radial-gradient(90% 120% at 100% 0%,#2C3B8E 0%,var(--lacivert) 55%,var(--gece) 100%);color:#fff;text-decoration:none}
[dir=rtl] .karo-fragman{background:radial-gradient(90% 120% at 0% 0%,#2C3B8E 0%,var(--lacivert) 55%,var(--gece) 100%)}
.karo-fragman h3{color:#fff;font-size:clamp(30px,3vw,42px);line-height:1.02;margin-bottom:14px}
.karo-fragman p{color:#C9CEEC;font-size:17px;max-width:22em}
.karo-fragman .sure{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:15px;color:var(--sari)}
.karo-fragman .sure .ik{width:18px;height:18px}
.karo-fragman .telefon{width:clamp(170px,15vw,210px);transform:rotate(calc(4deg * var(--yon)));box-shadow:inset 0 0 0 2px #34418C,0 30px 50px -24px rgba(0,0,0,.7);transition:transform .45s var(--yay)}
.karo-fragman:hover .telefon{transform:rotate(0) scale(1.03)}
.oynat{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  background:var(--turuncu);color:var(--lacivert);box-shadow:0 5px 0 var(--turuncu-2),0 0 0 10px rgba(255,255,255,.3);transition:transform .35s var(--yay)}
.oynat .ik{width:32px;height:32px;margin-left:4px}
.karo-fragman:hover .oynat{transform:scale(1.1)}

/* stüdyo + oyun listesi */
.studyo{padding-top:24px}
.studyo-ic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.studyo-metin h2{font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.035em;margin-bottom:20px}
.studyo-metin>p:not(.etiket){font-size:19px;color:var(--metin-2);max-width:31em;margin-bottom:20px}
.oyun-liste{background:var(--kagit);border-radius:var(--r);padding:26px;box-shadow:var(--oyuncak)}
.liste-baslik{font:700 14px/1 var(--govde);letter-spacing:.06em;text-transform:uppercase;color:var(--metin-2);margin-block:2px 14px;margin-inline-start:6px}
[lang=ar] .liste-baslik,[lang=ar] .alt h2{letter-spacing:0;text-transform:none}
.oyun-kart{display:flex;align-items:center;gap:16px;padding:14px;border-radius:20px;text-decoration:none;transition:background .2s}
.oyun-kart+.oyun-kart{margin-top:4px}
.oyun-kart:hover{background:var(--krem)}
.oyun-kart img{width:72px;height:72px;border-radius:18px;box-shadow:0 4px 0 rgba(26,36,86,.10);flex:none}
.oyun-bilgi{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.oyun-bilgi b{font:800 21px/1.1 var(--baslik);color:var(--lacivert);letter-spacing:-.02em}
.oyun-bilgi small{font-size:15px;color:var(--metin-2);line-height:1.4}
.durum{display:inline-flex;align-items:center;gap:7px;flex:none;font:700 13px/1 var(--govde);padding:8px 11px;border-radius:999px;white-space:nowrap}
.durum-yayinda{background:#DDF3E4;color:#17663A}
.durum-yayinda::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yesil)}
.durum-gelistirme,.durum-test,.durum-yakinda{background:var(--sari-acik);color:#6E4A00}
.oyun-liste .metin-link{margin-block:10px 0;margin-inline-start:14px}

/* çağrı */
.cagri-kap{position:relative;z-index:1;padding:32px 0 120px}
.cagri{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px 52px;
  background:radial-gradient(120% 140% at 0% 100%,#FFB04A 0%,var(--turuncu) 45%,#F2620C 100%);color:var(--lacivert);border-radius:44px;padding:48px 52px;padding-inline-start:36px;
  box-shadow:0 8px 0 var(--turuncu-2),0 40px 80px -36px rgba(200,83,4,.7);overflow:hidden}
.cagri::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 12% 100%,rgba(255,255,255,.10) 0 6deg,transparent 6deg 15deg);pointer-events:none}
.cagri>*{position:relative}
.cagri.karaktersiz{grid-template-columns:minmax(0,1fr) auto;padding-inline-start:52px}
.cagri-karakter{width:170px;align-self:end;margin-bottom:-48px}
.cagri-karakter img{width:150px;filter:drop-shadow(0 16px 16px rgba(120,40,0,.35))}
.cagri h2{color:var(--lacivert);font-size:clamp(32px,3.4vw,50px);line-height:1.02;letter-spacing:-.035em;margin-bottom:12px}
.cagri-metin>p{font-size:17px;font-weight:500;margin-bottom:24px;max-width:31em}
.sosyal{align-self:center;background:rgba(255,255,255,.3);border-radius:24px;padding:18px 18px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);min-width:230px}
.sosyal>p{font:700 14px/1 var(--govde);letter-spacing:.04em;margin:2px 0 10px;padding-inline-start:4px}
.sosyal ul{display:flex;flex-direction:column;gap:4px}
.sosyal a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:14px;text-decoration:none;transition:background .2s}
.sosyal a:hover{background:rgba(255,255,255,.4)}
.sosyal .ik{width:22px;height:22px}
.sosyal a span{display:flex;flex-direction:column;line-height:1.15}
.sosyal b{font-weight:700;font-size:15.5px}
.sosyal small{font-size:13px;font-weight:500}

/* ---------- alt bilgi ---------- */
.alt{background:var(--gece);color:#D9DCEF;padding:80px 0 28px;border-radius:56px 56px 0 0;margin-top:-56px;position:relative}
.alt-ic{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px;padding-top:40px}
.marka-acik{color:#fff}
.marka-acik b{color:var(--sari)}
.alt-marka p{margin:18px 0;max-width:22em;font-size:15.5px;line-height:1.6;color:#B9BEDC}
.posta{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;text-decoration:none;font-size:15px;word-break:break-all}
.posta:hover{color:var(--sari)}
.alt h2{font:700 13px/1 var(--govde);letter-spacing:.08em;text-transform:uppercase;color:#9BA1CC;margin:10px 0 16px}
.alt-sutun li+li{margin-top:4px}
.alt-sutun a{display:inline-flex;align-items:center;gap:8px;min-height:34px;color:#E6E8F6;text-decoration:none;font-size:15.5px}
.alt-sutun a:hover{color:var(--sari)}
.alt-sosyal .ik{width:18px;height:18px}
.alt-son{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#A3A9D0}
.alt-dil{display:flex;flex-wrap:wrap;gap:6px 16px}
.alt-dil a{text-decoration:none;color:#C8CCE6;min-height:24px}
.alt-dil a:hover,.alt-dil a[aria-current]{color:#fff}
.alt-dil a[aria-current]{font-weight:700}

/* ---------- iç sayfalar ---------- */
.sayfa-bas{position:relative;padding:56px 0 64px;overflow:hidden}
.sayfa-bas .isinlar{inset:-60% -10% auto 40%;height:220%}
[dir=rtl] .sayfa-bas .isinlar{inset:-60% 40% auto -10%}
.sayfa-bas .kap{position:relative;z-index:1}
.sayfa-bas h1{font-size:clamp(42px,5.6vw,76px);line-height:1;letter-spacing:-.04em;max-width:15em}
.sayfa-bas .giris{margin:20px 0 0;max-width:34em}
.geri{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-weight:600;font-size:15px;color:var(--metin-2);text-decoration:none}
.geri:hover{color:var(--lacivert)}
.geri .ik{width:18px;height:18px}
.ic-bolum{padding:24px 0 112px}

/* zengin metin */
.metin{font-size:17.5px;line-height:1.7;color:var(--metin)}
.metin>*+*{margin-top:1em}
.metin h1{font-size:clamp(32px,3.6vw,44px);line-height:1.08;margin-bottom:.4em}
.metin h2{font-size:clamp(22px,2.2vw,27px);line-height:1.2;margin-top:1.8em;letter-spacing:-.02em}
.metin h2+p,.metin h2+ul{margin-top:.6em}
.metin ul{padding-inline-start:0;display:grid;gap:8px}
.metin ul li{position:relative;padding-inline-start:26px}
.metin ul li::before{content:"";position:absolute;inset-inline-start:6px;top:.62em;width:8px;height:8px;border-radius:3px;background:var(--turuncu)}
.metin a{color:var(--turuncu-2);font-weight:600;text-underline-offset:3px}
.metin em{color:var(--metin-2)}
.metin strong{color:var(--lacivert)}

/* yasal */
.sayfa-bas .kap-yasal{max-width:1120px}
.yasal-kap{max-width:1120px;margin-inline:auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.yasal-nav{position:sticky;top:100px;display:flex;flex-direction:column;gap:4px;background:var(--kagit);border-radius:22px;padding:12px;box-shadow:var(--golge)}
.yasal-nav p{font:700 13px/1 var(--govde);letter-spacing:.06em;text-transform:uppercase;color:var(--metin-2);padding:8px 10px 10px}
[lang=ar] .yasal-nav p{letter-spacing:0}
.yasal-nav a{display:block;padding:11px 12px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--metin)}
.yasal-nav a:hover{background:var(--krem)}
.yasal-nav a[aria-current]{background:var(--lacivert);color:#fff}
.yasal-kart{background:var(--kagit);border-radius:var(--r);padding:clamp(28px,4.5vw,60px);box-shadow:var(--oyuncak);max-width:820px}

/* SSS */
.sss{display:grid;gap:12px}
.sss details{background:var(--kagit);border-radius:20px;box-shadow:var(--golge);transition:box-shadow .2s}
.sss details[open]{box-shadow:var(--oyuncak)}
.sss summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none;font:700 18px/1.3 var(--baslik);color:var(--lacivert);letter-spacing:-.01em}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:var(--turuncu-acik) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C85304' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .25s}
.sss details[open] summary::after{transform:rotate(45deg)}
.sss details>p,.sss details>div{padding:0 24px 22px;color:var(--metin-2);font-size:16.5px}
.sss a{color:var(--turuncu-2);font-weight:600}

/* iletişim kartı */
.iletisim-kart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;background:var(--kagit);border-radius:var(--r);padding:clamp(24px,4vw,44px);box-shadow:var(--oyuncak);margin-bottom:64px}
.iletisim-kart h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.iletisim-kart .metin{font-size:16.5px;margin-bottom:22px}
.ikon-kutu{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--turuncu);color:var(--lacivert);box-shadow:0 5px 0 var(--turuncu-2)}
.ikon-kutu .ik{width:30px;height:30px}

/* kartlar (değerler, özellikler) */
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}

/* oyunlar sayfası: büyük kartlar */
.oyun-buyuk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--kagit);border-radius:36px;overflow:hidden;box-shadow:var(--oyuncak)}
.oyun-buyuk+.oyun-buyuk{margin-top:32px}
.oyun-buyuk-gorsel{position:relative;min-height:340px;background:#F4B26A}
.oyun-buyuk-gorsel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oyun-buyuk-gorsel .logo-k{position:absolute;inset-inline-start:24px;bottom:22px;width:auto;height:auto;max-width:56%;max-height:96px;filter:drop-shadow(0 8px 12px rgba(26,36,86,.45))}
.oyun-buyuk-ic{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.oyun-buyuk-ic .kimlik-satir{margin-bottom:4px}
.oyun-buyuk h2{font-size:clamp(30px,3.2vw,44px);line-height:1.04}
.oyun-buyuk p{color:var(--metin-2);font-size:17px}
.oyun-buyuk .magaza{margin-top:8px}
.ikincil{opacity:.97}
.ikincil .oyun-buyuk-gorsel{min-height:280px}
.yolda{display:flex;gap:18px;align-items:center;margin-top:32px;padding:24px 28px;border-radius:24px;border:2px dashed rgba(26,36,86,.2);color:var(--metin-2)}
.yolda .ik{width:28px;height:28px;color:var(--turuncu-2)}
.yolda a{color:var(--turuncu-2);font-weight:600}

/* oyun sayfası: bilgi tablosu */
.bilgi-izgara{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.bilgi{background:var(--lacivert);color:#fff;border-radius:var(--r);padding:32px;box-shadow:0 6px 0 var(--gece-2),var(--golge-buyuk)}
.bilgi h2{color:#fff;font-size:28px;margin-bottom:18px}
.bilgi dl{margin:0;display:grid;gap:0}
.bilgi dl>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.bilgi dt{color:#AEB4DE;font-weight:600;font-size:15px}
.bilgi dd{margin:0;font-weight:600;font-size:15.5px}
.bilgi .yasal-linkler{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:20px;font-size:14.5px}
.bilgi .yasal-linkler a{color:var(--sari);font-weight:600}
.bilgi-izgara h2.sss-bas{font-size:clamp(28px,3vw,40px);margin-bottom:22px}

/* Mahalle Bakkalı: karakterler */
.karakterler{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.karakter{background:var(--kagit);border-radius:24px;overflow:hidden;box-shadow:var(--golge)}
.karakter img{aspect-ratio:1;width:100%;object-fit:cover}
.karakter figcaption{padding:14px 16px 18px}
.karakter strong{display:block;font:800 18px/1.2 var(--baslik);color:var(--lacivert)}
.karakter span{display:block;font-size:14.5px;color:var(--metin-2);margin-top:4px;line-height:1.45}
.karakter .etiket-k{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;padding:4px 8px;border-radius:8px;background:#FFE0E0;color:#9A1C1C}
.not-kutu{display:flex;gap:14px;align-items:flex-start;background:var(--sari-acik);border-radius:20px;padding:18px 20px;color:#5A4200;font-size:16px;margin-bottom:26px;max-width:34em}
.not-kutu .ik{width:24px;height:24px;color:#9A6B00;margin-top:2px}

/* 404 */
.yok{position:relative;overflow:hidden;min-height:calc(100svh - 76px);display:grid;align-items:center;padding:40px 0 140px}
.yok-ic{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;max-width:980px;margin:0 auto}
.yok-karakter{position:relative;width:220px}
.yok-karakter img{width:200px;filter:drop-shadow(0 16px 16px rgba(80,40,10,.3))}
.yok-karakter .balon{position:absolute;inset-inline-start:120px;top:-20px;font-size:30px}
.yok h1{font-size:clamp(40px,5.4vw,72px);line-height:1;margin-bottom:18px}
.yok p{font-size:19px;color:var(--metin-2);margin-bottom:28px;max-width:30em}
.yok .magaza{gap:12px}

/* dil önerisi çubuğu */
.dil-oneri{position:fixed;inset-inline:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:14px;max-width:560px;margin-inline:auto;background:var(--lacivert);color:#fff;border-radius:18px;padding:12px 12px;padding-inline-start:18px;
  box-shadow:0 20px 50px -18px rgba(11,16,50,.6);transform:translateY(140%);transition:transform .45s var(--yay)}
.dil-oneri.gorun{transform:none}
.dil-oneri p{flex:1;font-size:15px;line-height:1.35}
.dil-oneri a{flex:none;background:var(--turuncu);color:var(--lacivert);text-decoration:none;font-weight:700;font-size:14.5px;padding:10px 14px;border-radius:12px;box-shadow:0 3px 0 var(--turuncu-2)}
.dil-oneri button{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.dil-oneri button .ik{width:20px;height:20px}

/* ---------- görünme (yalnızca JS varken gizlenir) ---------- */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1)}
.js [data-r].gorundu{opacity:1;transform:none}
.js .adimlar [data-r]:nth-child(2),.js .bento [data-r]:nth-child(3n+2){transition-delay:.08s}
.js .adimlar [data-r]:nth-child(3),.js .bento [data-r]:nth-child(3n){transition-delay:.16s}
.js .araclar li{opacity:0;transform:translateY(30px) scale(.9);transition:opacity .5s ease calc(var(--i)*.07s),transform .6s var(--yay) calc(var(--i)*.07s)}
.js .araclar.gorundu li{opacity:1;transform:none}
.js .hero-sahne .sahne-kart{animation:gir .9s cubic-bezier(.2,.75,.25,1) both}
.js .hero-sahne .logo-etiket{animation:zipla .8s var(--yay) .3s both}
.js .hero-sahne .telefon-hero{animation:gir2 .9s var(--yay) .45s both}
@keyframes gir{from{opacity:0;translate:0 30px;scale:.97}}
@keyframes gir2{from{opacity:0;translate:0 40px}}
@keyframes zipla{from{opacity:0;scale:.6}}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .hero-ic{gap:36px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karo-fragman{grid-row:span 1}
  .karo-genis{grid-column:1/-1}
  .bento-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cagri.karaktersiz{grid-template-columns:1fr}
  .cagri{grid-template-columns:auto minmax(0,1fr)}
  .sosyal{grid-column:1/-1}
  .sosyal ul{flex-direction:row;flex-wrap:wrap}
  .alt-ic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alt-marka{grid-column:1/-1}
  .rakamlar{padding:24px}
  .rakam{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .menu>a{padding:10px 10px}
}
@media (max-width:960px){
  .menu{display:none}
  .menu-dugme{display:grid}
  .dil-sec{display:none}
  .ust.acik .menu{display:flex;flex-direction:column;position:absolute;inset-inline:12px;top:70px;background:var(--kagit);border-radius:20px;padding:10px;box-shadow:var(--golge-buyuk),0 0 0 1px var(--cizgi)}
  .ust.acik .menu>a{padding:14px;font:700 20px/1 var(--baslik)}
  .ust.acik .menu-dil{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:10px 6px 4px;border-top:1px solid var(--cizgi);margin-top:6px}
  .menu-dil a{text-align:center;padding:10px 0;border-radius:10px;background:var(--krem);text-decoration:none;font-weight:700;font-size:14px}
  .menu-dil a[aria-current]{background:var(--lacivert);color:#fff}
  .hero{padding:14px 0 76px}
  .hero-ic{grid-template-columns:1fr;min-height:0;gap:6px}
  .hero-sahne{order:-1;padding:22px 6px 30px;width:100%;max-width:640px;margin:0 auto}
  .sahne-kart{aspect-ratio:4/3;border-radius:28px;box-shadow:0 0 0 6px var(--kagit),0 6px 0 6px rgba(26,36,86,.08),var(--golge-buyuk);transform:rotate(calc(.8deg * var(--yon)))}
  .sahne-gorsel{object-position:76% 50%}
  .logo-etiket{max-width:46%;max-height:84px;inset-inline-start:-2px;top:4px}
  .balon-hero{inset-inline-end:3%;top:4%}
  .telefon-hero{width:clamp(92px,17vw,128px);inset-inline-start:auto;inset-inline-end:8px;bottom:0;padding:5px;border-radius:20px;transform:rotate(calc(6deg * var(--yon)))}
  .telefon-hero .ekran{border-radius:16px}
  .telefon-hero .ekran::before{height:8px;top:5px}
  .telefon-hero figcaption{display:none}
  .yuzen{display:none}
  .hero h1{margin:18px 0 14px}
  .hero .geri{display:none}
  .bas-yan{flex-direction:column;align-items:flex-start}
  .studyo-ic,.bilgi-izgara{grid-template-columns:1fr;gap:40px}
  .oyun-buyuk{grid-template-columns:1fr}
  .oyun-buyuk-gorsel{min-height:0;aspect-ratio:16/9}
  .yasal-kap{grid-template-columns:1fr;gap:20px}
  .yasal-nav{position:static;flex-direction:row;flex-wrap:nowrap;padding:8px}
  .yasal-nav p{display:none}
  .yasal-nav a{padding:9px 12px;font-size:15px;white-space:nowrap}
  .yok-ic{grid-template-columns:1fr;gap:28px;text-align:center;justify-items:center}
  .yok p{margin-inline:auto}
  .yok .magaza{justify-content:center}
  /* adımlar: kompakt satırlar */
  .adimlar{grid-template-columns:1fr;gap:16px}
  .adim{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:12px;align-items:start}
  .adim-gorsel{grid-row:1/3}
  .adim-gorsel>img:first-child{aspect-ratio:1;border-radius:16px}
  .adim-ikon{width:52px;bottom:-10px;inset-inline-end:-10px}
  .adim-no{position:absolute;top:8px;inset-inline-start:8px;margin:0;width:32px;height:32px;font-size:17px;border-radius:11px;box-shadow:0 3px 0 var(--turuncu-2)}
  .adim h3{font-size:21px;margin:6px 0 6px}
  .adim p{margin:0;font-size:15px;line-height:1.5}
  .adim:hover{transform:none}
}

/* ---------- telefon ---------- */
@media (max-width:640px){
  :root{--kenar:16px;--r:24px}
  body{font-size:16px}
  .ust-ic{height:64px;gap:10px}
  .marka{font-size:19px;gap:8px}
  .marka img{width:36px;height:36px}
  .ust.acik .menu{top:60px}
  .dg-kucuk{padding:8px 12px;padding-inline:10px 12px;font-size:14px;min-height:42px}
  .dg-kucuk .ik{width:18px;height:18px}
  .hero{padding:6px 0 60px}
  .hero h1{font-size:clamp(44px,13vw,62px)}
  [lang=ru] .hero h1,[lang=es] .hero h1,[lang=pt] .hero h1{font-size:clamp(38px,11vw,56px)}
  .kimlik-satir img{width:46px;height:46px;border-radius:13px}
  .kimlik-satir b{font-size:17px}
  .kimlik-satir b span{font-size:13.5px}
  .canli{font-size:13px;margin-top:3px}
  .giris{font-size:17px;margin-bottom:22px}
  .magaza{gap:12px}
  .magaza .dg{flex:1 1 0;min-width:0;padding-inline:14px;gap:10px;font-size:17px;min-height:58px;justify-content:center}
  .magaza .dg .ik{width:22px;height:22px}
  .fragman-link{margin-top:16px;font-size:15px}
  .artilar{gap:6px 16px;margin-top:16px;font-size:14px}
  .balon{font-size:17px;padding:9px 13px 10px;border-radius:15px;border-width:2.5px;box-shadow:0 4px 0 var(--lacivert)}
  .balon::before{inset-inline-end:20px;bottom:-15px;border-width:13px 11px 0 11px}
  .balon::after{inset-inline-end:23px;bottom:-8px;border-width:8px 8px 0 8px}
  .bant{margin-top:-16px}
  .bant span{font-size:18px;gap:10px}
  .bant img{width:32px}
  .bant-grup{gap:28px;padding:11px 14px 11px 28px}
  .bolum{padding:56px 0}
  .studyo{padding-top:8px}
  .bas{margin-bottom:32px}
  .bas h2{font-size:clamp(32px,9vw,44px)}
  .bas>p:not(.etiket),.bas-yan>p,.studyo-metin>p:not(.etiket){font-size:16.5px}
  .adim{grid-template-columns:104px minmax(0,1fr)}
  .rakamlar{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;padding:16px 6px;gap:4px}
  .rakam b{font-size:32px}
  .rakam span{font-size:12.5px}
  .yol-bolum{border-radius:36px 36px 0 0;padding-bottom:88px}
  .yol-yuvarlak{border-radius:36px;padding-bottom:56px;margin-block:8px}
  .araclar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 8px;align-items:end}
  .araclar::before,.araclar::after{display:none}
  .araclar li{gap:10px}
  .araclar img{height:calc(44px + var(--i)*4px)}
  .araclar span{font-size:12px;padding:4px 5px;line-height:1.15;min-height:36px;border-radius:9px}
  .vitrin{border-radius:32px;margin-top:-32px;padding-bottom:44px}
  .serit{gap:18px;padding-bottom:60px;margin-bottom:-30px}
  .serit .telefon{flex-basis:46vw;border-radius:24px;padding:6px}
  .serit .telefon .ekran{border-radius:19px}
  .vitrin-dugmeler{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .karo{padding:16px 14px 18px;border-radius:20px}
  .karo h3{font-size:17px;margin-bottom:6px}
  .karo p{font-size:13.5px;line-height:1.45}
  .karo-ikon{height:48px;max-width:72px;margin:0 0 10px}
  .karo-fragman{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:22px 18px 22px 22px;padding-inline:22px 18px}
  .karo-fragman h3{font-size:24px}
  .karo-fragman p{font-size:14.5px}
  .karo-fragman .telefon{width:112px;padding:5px;border-radius:18px}
  .karo-fragman .telefon .ekran{border-radius:14px}
  .karo-fragman .telefon .ekran::before{height:7px;top:5px}
  .oynat{width:48px;height:48px;margin:-24px 0 0 -24px;box-shadow:0 4px 0 var(--turuncu-2),0 0 0 6px rgba(255,255,255,.3)}
  .oynat .ik{width:22px;height:22px;margin-left:3px}
  .karo-fragman .sure{margin-top:14px}
  .oyun-liste{padding:16px 10px}
  .oyun-kart{gap:12px;padding:12px 8px;flex-wrap:wrap}
  .oyun-kart img{width:56px;height:56px;border-radius:14px}
  .oyun-bilgi{flex:1 1 150px}
  .oyun-bilgi b{font-size:19px}
  .oyun-kart .durum{margin-inline-start:68px}
  .cagri-kap{padding:8px 0 88px}
  .cagri{grid-template-columns:1fr;padding:32px 20px 22px;border-radius:32px;gap:20px}
  .cagri-karakter{display:none}
  .sosyal{min-width:0;padding:12px}
  .sosyal ul{display:grid;grid-template-columns:1fr;gap:0}
  .sosyal a{min-height:42px;padding:4px 8px}
  .alt{padding-top:48px;border-radius:36px 36px 0 0}
  .alt-marka p{margin:12px 0}
  .alt-sutun a{min-height:30px;font-size:15px}
  .alt h2{margin:4px 0 10px}
  .alt-ic{gap:28px 16px;padding-top:20px}
  .alt-son{margin-top:28px;flex-direction:column;gap:8px}
  .alt-dil{display:grid;grid-template-columns:repeat(3,max-content);gap:6px 20px}
  .yasal-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .yasal-nav a{white-space:normal;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;padding:9px 6px;font-size:14.5px}
  .sayfa-bas{padding:32px 0 40px}
  .ic-bolum{padding:8px 0 96px}
  .metin{font-size:16.5px}
  .sss summary{padding:16px 18px;font-size:16.5px}
  .sss details>p,.sss details>div{padding:0 18px 18px;font-size:15.5px}
  .iletisim-kart{grid-template-columns:1fr;gap:16px}
  .bilgi{padding:24px 20px}
  .bilgi dl>div{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .karakterler{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .karakter figcaption{padding:10px 12px 14px}
  .karakter strong{font-size:16px}
  .karakter span{font-size:13px}
  .yok-karakter{width:180px}
  .yok-karakter img{width:150px}
  .yok-karakter .balon{inset-inline-start:96px;font-size:22px}
  .dil-oneri{flex-wrap:wrap;inset-inline:10px;bottom:10px}
  .dil-oneri p{flex-basis:calc(100% - 60px)}
}
@media (max-width:480px){
  .bento,.bento-4{grid-template-columns:1fr}
  .karo:not(.karo-fragman){display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 16px 18px}
  .karo:not(.karo-fragman)>.karo-ikon,.karo:not(.karo-fragman)>.karo-svg{grid-row:1/3;grid-column:1;justify-self:center;margin:2px 0 0}
  .karo:not(.karo-fragman)>.karo-ikon{height:auto;width:auto;max-width:52px;max-height:56px;object-position:50% 0}
  .karo:not(.karo-fragman)>.karo-svg{width:48px;height:48px;border-radius:15px}
  .karo:not(.karo-fragman)>h3,.karo:not(.karo-fragman)>p{grid-column:2}
  .karo h3{font-size:18px}
  .karo p{font-size:15px;line-height:1.5}
}
@media (max-width:400px){
  .dg-kucuk .uzun{display:none}
  .dg-kucuk .kisa{display:inline}
  .magaza .dg{padding-inline:12px;gap:8px;font-size:16px}
  .karo-fragman .telefon{width:96px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bant-ic{flex-wrap:wrap}
  .js [data-r],.js .araclar li{opacity:1;transform:none}
}
.nota-ceviri{font-size:15px;padding:12px 16px;border-radius:12px;background:var(--krem-2);color:var(--metin-2)}