*{ box-sizing:border-box; }

:root{
--bg:#f5f6fb;
--card:#ffffff;
--text:#101114;
--muted:rgba(16,17,20,.65);
--shadow:0 14px 30px rgba(0,0,0,.12);
--shadow2:0 10px 18px rgba(0,0,0,.14);
--radius:18px;
}

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:var(--bg);
color:var(--text);
}

.container{
max-width:640px;
margin:0 auto;
padding:12px 12px 18px;
}

.hero{ text-align:center; margin-bottom:10px; }

.siteLogo{
width:64px;
height:auto;
display:block;
margin:0 auto 8px;
}

.badge{
display:inline-block;
font-size:12px;
font-weight:900;
padding:6px 12px;
border-radius:999px;
background:rgba(0,0,0,.06);
color:rgba(0,0,0,.70);
margin-bottom:10px;
}

.title{
margin:0;
font-size:42px;
font-weight:1000;
letter-spacing:1px;
text-transform:uppercase;
text-shadow:0 2px 0 rgba(0,0,0,.06);
}

.subtitle{
margin:10px auto 0;
max-width:620px;
font-size:14px;
line-height:1.55;
color:rgba(0,0,0,.78);
}

.card{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:12px;
}

/* ÜST SAYILAR */
.statsTop{
display:grid;
gap:6px;
text-align:center;
margin:4px 0 12px;
font-size:14px;
line-height:1.5;
color:rgba(0,0,0,.84);
}
.statsTop > div{
background:rgba(0,0,0,.035);
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:8px 10px;
}
.recordTop{
font-weight:1000;
color:rgba(0,0,0,.72);
}

/* VIDEO: 9:16 KESİN, ip gibi uzamasın diye */
.video-wrapper{
position:relative;
width:100%;
background:#111;
border-radius:16px;
overflow:hidden;
aspect-ratio: 9 / 16;
}

/* iki video üst üste */
.video-wrapper video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
background:#111;
opacity:0;
transition:opacity .10s linear;
}
.video-wrapper video.active{ opacity:1; }

/* SES BUTONU */
.sound-gate{
position:absolute;
left:50%;
top:18%;
transform:translate(-50%, -50%);
padding:12px 16px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#111;
font-weight:1000;
cursor:pointer;
box-shadow:0 14px 26px rgba(0,0,0,.24);
backdrop-filter: blur(6px);
z-index:5;
}
.sound-gate.hidden{ display:none; }

/* PAYLAŞ */
.share-btn{
position:absolute;
top:10px;
right:10px;
width:44px;
height:44px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.92);
box-shadow:var(--shadow2);
cursor:pointer;
z-index:6;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:900;
}
.shareIcon{ transform: translateY(-1px); }

/* TOKAT BUTONU */
.slap-in-video{
position:absolute;
left:50%;
bottom:12px;
transform:translateX(-50%);
width:112px;
height:112px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.92);
box-shadow:var(--shadow2);
cursor:pointer;
padding:10px;
user-select:none;
display:flex;
align-items:center;
justify-content:center;
z-index:6;
}
.slap-in-video:active{ transform:translateX(-50%) scale(.96); }
.slap-in-video img{
width:100%;
height:100%;
object-fit:contain;
border-radius:999px;
}

/* EL */
.hand{
position:absolute;
left:-55%;
top:38%;
width:62%;
height:auto;
opacity:0;
transform:translateX(-10%) rotate(-12deg);
z-index:7;
pointer-events:none;
will-change:transform, opacity;
}

.hand.play{
animation: handSlap .28s ease-out forwards;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

@keyframes handSlap{
0% { opacity:0; transform:translateX(-20%) rotate(-12deg) scale(.98); }
20% { opacity:1; transform:translateX(62%) rotate(-2deg) scale(1.02); }
100% { opacity:0; transform:translateX(78%) rotate(2deg) scale(1.00); }
}
/* KÖŞE NOTU */
.corner-note{
position:absolute;
right:10px;
bottom:10px;
font-size:12px;
font-weight:900;
color:rgba(255,255,255,.78);
background:rgba(0,0,0,.35);
padding:6px 10px;
border-radius:999px;
z-index:6;
}

/* ALT BÖLÜM */
.otherTitle{
margin:14px 4px 10px;
font-weight:1000;
color:rgba(0,0,0,.78);
}

.cardsRow{
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.appCard{
position:relative;
display:block;
border-radius:16px;
overflow:hidden;
background:#000;
box-shadow:var(--shadow2);
text-decoration:none;
}
.appCard img{
display:block;
width:100%;
height:auto;
}

.appCard.disabled{
opacity:.9;
filter:grayscale(.15);
}

/* Laila "çok yakında" KARTIN ALTINDA */
.belowTag{
padding:10px 12px;
background:#000;
color:#fff;
font-weight:1000;
letter-spacing:.6px;
text-align:center;
}

/* Store butonları: siyah üstüne beyaz, iki tane yan yana */
.storeRow{
display:flex;
gap:10px;
padding:12px;
background:#000;
}
.storeBadge{
flex:1;
display:inline-flex;
align-items:center;
justify-content:center;
height:46px;
border-radius:12px;
background:#000;
color:#fff;
border:1px solid rgba(255,255,255,.25);
font-weight:1000;
letter-spacing:.2px;
text-decoration:none;
}

/* FOOTER */
.footer{
margin-top:14px;
text-align:center;
font-size:12px;
color:rgba(0,0,0,.55);
}
.footerBrand{
display:flex;
justify-content:center;
margin-bottom:8px;
}
.gagaLogo{
width:110px;
height:auto;
object-fit:contain;
}
.footerLine{
display:flex;
gap:6px;
justify-content:center;
flex-wrap:wrap;
align-items:center;
}
.footer-muted{ font-weight:900; }
.footerLink{
color:rgba(0,0,0,.62);
font-weight:900;
text-decoration:none;
}
.footerLink:hover{ text-decoration:underline; }
.footerTip{
margin-top:8px;
font-weight:900;
color:rgba(0,0,0,.62);
}

/* SHARE PNG */
.shareImg{
width:30px;
height:30px;
object-fit:contain;
}