/* ========== [0] RESET & BODY ========== */
*{box-sizing:border-box}
body{
    margin:0;
    background:#120c1c;
    color:#fff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    /* Memberi ruang di bawah header tetap agar isi tidak tertutup */
    padding-top: var(--header-h);
}

/* ========== [0b] PENGATURAN (ubah angka di sini) ========== */
:root{
    --header-h: 135px;  /* tinggi header tetap */
    --btn-size: 70px;   /* ukuran tombol Kembali & Lonceng */
    --btn-top: 20px;    /* jarak tombol dari atas header */
    --btn-side: 20px;   /* jarak tombol dari kiri / kanan header */
}

/* ========== [1] HEADER TETAP DI ATAS ========== */
.top-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: var(--header-h) !important;
    background-color: #120c1c !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* Gambar banner mengisi header */
.header-img{
    display: block;
    width: 100%;
    height: var(--header-h);
    object-fit: cover;
    object-position: top center;
}

/* ========================================================
   TOMBOL TRANSPARAN (Menimpa gambar panah & lonceng)
   ======================================================== */
.btn-header-3d {
    position: absolute !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform 0.1s !important;
    border-radius: 20px !important;
}
.btn-header-3d:active {
    transform: scale(0.92) !important;
}

/* Posisi tombol Kembali (kiri atas) */
.btn-back-pos {
    top: var(--btn-top) !important;
    left: var(--btn-side) !important;
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
}

/* Posisi tombol Lonceng (kanan atas) */
.btn-bell-pos {
    top: var(--btn-top) !important;
    right: var(--btn-side) !important;
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
}

/* Badge notifikasi merah */
#notifCount {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: #ff3b30 !important;
    color: #fff !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border: 2px solid #120c1c !important;
}

/* ========== [2] PROFIL - KARTU GLASSMORPHISM ========== */
.profil-box{
    position: relative !important;
    z-index: 10 !important;
    background: rgba(45, 29, 77, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px !important;
    padding: 15px 16px !important;
    margin: 12px 12px 20px 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Nama pengirim di feed */
.nama-user{
    color: #78ffd6;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 2px;
}

/* Nama akun di profil: di tengah, di atas baris foto + status */
.profil-box .nama-user{
    text-align: center;
    font-size: 15px;
    margin-bottom: 12px;
}

/* Baris: foto di kiri (rata tengah vertikal), kolom status di kanan */
.profil-row{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Foto profil: background tidak dikunci !important agar foto dari script bisa tampil */
.avatar{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg,#a8ff78,#78ffd6);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #120c1c;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(120, 255, 214, 0.4);
    overflow: hidden;
}

/* Kolom status: kotak tulis + baris ikon di bawahnya */
.status-input-container{
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 8px 10px 6px 10px !important;
}

.input-stts{
    width: 100% !important;
    min-height: 50px !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 6px 4px !important;
    outline: none !important;
    resize: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Baris ikon: kamera di kiri, kirim di kanan */
.status-bar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Ikon kamera */
.btn-upload-icon{
    cursor: pointer !important;
    color: #ff9a44 !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s !important;
}
.btn-upload-icon:active{
    transform: scale(0.9) !important;
}
.btn-upload-icon input{
    display: none !important;
}

/* Tombol kirim: bulat berisi panah */
.btn-kirim{
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #ff9a44, #fc6076) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(252, 96, 118, 0.4) !important;
    transition: transform 0.1s !important;
}
.btn-kirim:active{
    transform: scale(0.92) !important;
}

/* ========== [3] TOMBOL KEMBALI BIASA (untuk halaman lain) ========== */
.btn-back {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.title {
    color: white !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-left: 10px !important;
}

/* ========== [4] FEED ========== */
.feed{flex:1;padding:0 12px 20px 12px;}
.item{
    background: rgba(30, 17, 51, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 16px;
}
.box-stts{
    border-radius: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(122, 92, 255, 0.3);
    margin-top: 6px;
}
.box-stts img{max-width:100%;max-height:320px;object-fit:contain;display:block;margin:8px auto 0 auto;border-radius:12px}
.text-stts{color:#fff;font-size:14px;white-space:pre-wrap; line-height: 1.4;}
.meta{color:#a0a0b0;font-size:12px;margin-top:12px;display:flex;gap:16px; align-items: center;}
.meta span{cursor:pointer; display: flex; align-items: center; gap: 4px;}
.meta span:active { color: #ff9a44; }

/* ========== [5] KOMEN ========== */
.komen-wrap{display:none;margin-top:12px;border-top:1px solid rgba(255,255,255,0.1);padding-top:10px}
.komen-wrap.show{display:block}
.komen-item{
    color:#fff;font-size:13px;
    margin-top:8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px;
}
.row-komen-mini{display:flex;gap:8px;margin-top:12px}
.row-komen-mini input{
    flex:1;
    background:rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius:50px;
    padding:10px 16px;
    color:#fff;
    outline:none;
}
.btn-kecil{
    color:#120c1c;
    background:#78ffd6;
    border:none;
    border-radius:50px;
    padding:8px 16px;
    font-weight: 700;
    cursor:pointer;
}

/* ========== [6] FOTO POSTING: PRATINJAU, JUMLAH, GRID ========== */
.preview-foto{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 2px 2px}
.preview-foto:empty{display:none}
.preview-foto .thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.2)}
.preview-foto .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.preview-foto .thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;line-height:18px;padding:0;cursor:pointer}
.btn-upload-icon{display:flex !important;align-items:center !important;gap:4px !important}
.btn-upload-icon.ada-foto{color:#78ffd6 !important}
.jumlah-foto{font-size:12px;font-weight:700;color:#78ffd6}
.foto-satu img{max-width:100%;max-height:320px;object-fit:contain;display:block;margin:8px auto 0 auto;border-radius:12px}
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
.foto-grid img{width:100%;aspect-ratio:1/1;max-height:none;object-fit:cover;border-radius:10px;display:block;margin:0}