*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:#dff5ff;

display:flex;

justify-content:center;

padding:30px;

}

.container{

width:500px;

max-width:100%;

background:white;

padding:20px;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.header{

text-align:center;

margin-bottom:20px;

}

.logo{

width:90px;

}

.editor{

position:relative;

width:100%;

aspect-ratio:1/1;

overflow:hidden;

background:#ececec;

border-radius:20px;

}

#photo{

position:absolute;

left:50%;

top:50%;

width:auto;

height:auto;

max-width:none;

max-height:none;

display:none;

cursor:grab;

user-select:none;

transform-origin:center center;

}
#frame{

position:absolute;

left:0;

top:0;

width:100%;

pointer-events:none;

z-index:10;

}

.toolbar{

margin-top:20px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

}

button{

flex:1;

padding:15px;

border:none;

background:#0b8dff;

color:white;

font-size:17px;

border-radius:15px;

cursor:pointer;

}

button:hover{

background:#0070d4;

}
.controls{

margin-top:15px;

display:flex;

justify-content:center;

gap:8px;

}

.controls button{

width:55px;

height:50px;

font-size:22px;

border-radius:12px;

background:#2c7be5;

}

.controls button:hover{

background:#1864d8;

}
.music-box{

margin:20px 0;

text-align:center;

}

.music-box button{

padding:12px 24px;

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

}

.join-box{

margin-top:30px;

padding:20px;

background:white;

border-radius:15px;

box-shadow:0 4px 12px rgba(0,0,0,.12);

text-align:center;

}

.qr{

width:220px;

max-width:90%;

border-radius:12px;

}

#waBtn{

margin-top:10px;

padding:12px 24px;

font-size:16px;

cursor:pointer;

border:none;

border-radius:10px;

background:#25D366;

color:white;

font-weight:bold;

}
/* ===========================
   LAYOUT 3 KOLOM
=========================== */

.container{

    width:1400px;
    max-width:95%;

}

.main-layout{

    display:flex;
    gap:25px;
    align-items:flex-start;
    margin-top:20px;

}

.left-panel{

    width:300px;

}

.center-panel{

    flex:1;

}

.right-panel{

    width:260px;

}

.left-panel,
.right-panel{

    background:#fff;
    padding:18px;
    border-radius:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.left-panel h3,
.right-panel h3{

    margin-bottom:15px;
    text-align:center;
    color:#0b8dff;

}

.ig-button{

    display:block;
    text-align:center;
    text-decoration:none;
    background:#E1306C;
    color:white;
    padding:12px;
    border-radius:12px;
    margin-top:15px;
    font-weight:bold;

}

.ig-button:hover{

    background:#C2185B;

}

@media(max-width:1000px){

.main-layout{

    flex-direction:column;

}

.left-panel,
.right-panel,
.center-panel{

    width:100%;

}

}
.join-box{
    display:none;
}
.frame-download{

    margin-top:25px;
    background:#fff;
    border-radius:18px;
    padding:18px;
    text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.frame-download h3{

    color:#0b8dff;
    margin-bottom:15px;

}

.frame-preview{

    width:100%;
    border-radius:15px;
    margin-bottom:15px;

}

.download-frame-btn{

    display:inline-block;
    background:#0b8dff;
    color:#fff;
    padding:12px 22px;
    border-radius:12px;
    text-decoration:none;
    font-weight:bold;

}

.download-frame-btn:hover{

    background:#0070d4;

}