*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{color:#fff;background:#07163d url("assets/background-mobile-17-agustus-sinardunia88.png") center top/cover fixed no-repeat}
a{text-decoration:none;color:inherit}
.mobile-site{width:100%;max-width:495px;min-height:100vh;margin:0 auto;overflow:hidden;background:rgba(0,0,0,.10);padding-bottom:54px}
/* HOME HEADER: mengikuti screenshot pertama */
.login-header{height:90px;background:#02133e;position:relative;z-index:10}
.header-top{height:47px;display:flex;align-items:center;padding:1px 8px 0 8px}
.main-logo{width:210px;height:auto;display:block}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:7px;height:100%}
.forgot-link{height:43px;min-width:101px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:15px;white-space:nowrap}
.forgot-link img{width:24px;height:24px;object-fit:contain;margin-top:-2px}
.header-btn{height:35px;min-width:124px;padding:0 16px;border:1px solid #6c9cff;border-radius:22px;background:linear-gradient(#245da9,#15336e);box-shadow:inset 0 0 7px rgba(170,205,255,.42),0 0 4px rgba(0,105,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.login-row{height:43px;padding:2px 7px 4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 124px;gap:5px}
.login-field{height:33px;background:#fff;border-radius:14px 3px 14px 5px;display:flex;align-items:center;padding:0 8px;color:#222;overflow:hidden}
.login-field img{width:23px;height:23px;object-fit:contain;margin-right:6px;flex:0 0 auto}
.login-field input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:16px;color:#222}
.login-field input::placeholder{color:#333;opacity:1}
.login-button{height:35px;border:1px solid #6c9cff;cursor:pointer;font-family:inherit}
/* BANNER */
.hero-slider{height:292px;position:relative;overflow:hidden;background:#091c46}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;animation:heroFade 16s infinite}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide:nth-child(1){animation-delay:0s}.hero-slide:nth-child(2){animation-delay:4s}.hero-slide:nth-child(3){animation-delay:8s}.hero-slide:nth-child(4){animation-delay:12s}
@keyframes heroFade{0%,22%{opacity:1}27%,100%{opacity:0}}
.hero-dots{position:absolute;bottom:7px;left:0;right:0;text-align:center;z-index:3;height:10px}
.hero-dots i{display:inline-block;width:7px;height:7px;margin:0 4px;border-radius:50%;background:#ddd;opacity:.9}.hero-dots i:last-child{width:18px;border-radius:8px}
.notice-bar{height:39px;background:rgba(0,0,0,.40);display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;padding:0 10px;font-size:13px}
.notice-icon{font-size:25px;color:#ff9800;line-height:1}.notice-track{display:inline-block;animation:noticeMove 15s linear infinite}
@keyframes noticeMove{from{transform:translateX(8%)}to{transform:translateX(-100%)}}
/* GAME AREA */
.game-area{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:6px 10px 0 10px}
.game-menu-rail{display:flex;flex-direction:column;gap:5px;width:82px}
.game-menu-rail img{display:block;width:82px;height:82px;object-fit:cover;border-radius:12px}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 10px;align-content:start}
.game-card{min-width:0;overflow:hidden;border-radius:13px;background:rgba(0,0,0,.45);box-shadow:0 4px 8px rgba(0,0,0,.5)}
.game-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.game-card div{height:39px;padding:0 10px;display:flex;align-items:center;background:linear-gradient(#ee2930,#bf0d16);font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* BOTTOM NAV */
.bottom-nav{position:fixed;z-index:100;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:495px;height:54px;background:linear-gradient(#1670e9,#073da9);border-radius:25px 25px 0 0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:0 2px 4px}
.bottom-item{position:relative;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;font-size:14px;font-weight:400;line-height:17px}
.bottom-item>img{width:30px;height:30px;object-fit:contain;margin-bottom:0}.bottom-item b{font-weight:400}
.promo-circle{position:absolute;width:62px;height:62px;top:-28px;border-radius:50%;background:#2862d4;border:2px solid #3479ee;box-shadow:0 4px 9px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.promo-circle img{width:35px;height:35px;object-fit:contain}.promo-item b{margin-bottom:0}
/* PROFILE */
.profile-site{padding-bottom:54px}
.profile-header{height:80px;background:#02133e;display:flex;align-items:center;padding:4px 10px;position:relative;z-index:5}
.profile-header .main-logo{width:228px}
.account-area{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:400;min-width:174px}
.account-area>img{width:37px;height:37px;object-fit:contain;border-radius:50%}
.account-area>div{display:flex;flex-direction:column;line-height:20px}.account-area strong{font-size:15px;font-weight:400;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coin-line{font-size:14px;font-weight:400}.account-arrow{font-size:13px;font-weight:400;margin-left:auto}
.share-panel{height:276px;margin:10px 13px 0;border:3px solid #067df4;border-radius:21px;background:#181818;box-shadow:0 0 0 2px #17345f inset,0 0 8px rgba(0,0,0,.6);padding:18px 18px 10px;font-size:10px;font-weight:700}
.share-title{margin-bottom:7px}.share-row{height:37px;display:flex;align-items:center;gap:5px;font-size:16px}.share-row .google{font-size:21px;color:#4285f4}.share-row button{margin-left:auto;height:38px;border:1px solid #3c98ff;border-radius:6px;background:linear-gradient(#286cc1,#073779);color:#fff;font-size:10px;font-weight:800;line-height:11px}.small-link{height:31px;margin-top:2px;padding:3px 5px;background:#19549a;border-radius:5px;font-size:10px}.telegram-title{margin-top:8px}.telegram-box{width:205px;height:49px;margin-top:3px;border-radius:7px;background:linear-gradient(#e9f3ff,#fff);color:#333;font-size:15px;padding:3px 8px;line-height:18px}.telegram-box span{font-size:11px;margin-left:30px}.share-apk{margin-top:8px;font-size:14px}.share-button{width:205px;height:28px;margin-top:4px;border-radius:5px;background:#e8edf2;color:#333;font-size:12px;display:flex;align-items:center;justify-content:center}.profile-notice{margin-top:0}.profile-games{padding-top:6px}
/* RULES: pertahankan struktur tampilan rules yang sebelumnya */
.rules-page{background:#02133e;min-height:100vh;padding:20px 23px 92px}
.rules-title{text-align:center;font-size:24px;margin:4px 0 18px}.rules-box{background:#174b78;padding:18px 19px;color:#fff}.intro{text-align:center;font-style:italic;line-height:1.65;margin:0 0 26px;font-size:14px}.rule-title{font-size:20px;color:#ffd400;border-bottom:2px solid #ffd400;padding:0 0 12px;margin:24px 0 18px}.rule-list{list-style:none;margin:0;padding:18px 18px 12px;background:rgba(0,0,0,.16);border-radius:9px}.rule-list li{position:relative;padding-left:31px;line-height:1.6;margin:9px 0;font-size:14px}.rule-list li:before{content:"▶";position:absolute;left:0;color:#ffd400}.rule-list.green{border:1px solid #4caf50}.rule-list.blue{border:1px solid #2196f3}.rule-list.orange{border:1px solid #ff9800}.rule-list.red{border:1px solid #f44336}.hl{color:#ffd400;font-weight:800}.important{border-left:3px solid red!important;padding-left:28px!important}.rules-footer{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;margin-top:18px}.rules-footer a,.rules-footer button{height:48px;border:0;border-radius:6px;background:#369be0;color:#fff;font-weight:700;font-size:15px;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
@media(max-width:380px){.header-top{padding-left:6px;padding-right:6px}.main-logo{width:190px}.forgot-link{min-width:92px;font-size:12px}.header-btn{min-width:110px;font-size:14px}.login-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 110px}.login-field{height:33px}.login-field input{font-size:14px}.hero-slider{height:250px}.game-area{grid-template-columns:76px minmax(0,1fr);gap:7px;padding-left:7px;padding-right:7px}.game-menu-rail,.game-menu-rail img{width:76px}.game-menu-rail img{height:76px}.game-grid{gap:8px}.game-card div{font-size:12px}.profile-header .main-logo{width:205px}.account-area{min-width:160px}.share-panel{margin-left:9px;margin-right:9px}}

/* =========================================================
   REVISI FINAL - HANYA PENYESUAIAN YANG DIMINTA
   1. Tombol DAFTAR dan MASUK dibuat benar-benar sejajar
   2. Logo pada header PROFILE diperkecil
   3. Bottom navigation dibuat biru seperti contoh, tanpa kuning
   4. Teks bottom navigation dinaikkan sedikit
   Tidak mengubah struktur HTML.
   ========================================================= */

/* LOGIN: DAFTAR & MASUK harus memiliki ukuran dan posisi yang sama */
.login-header .header-top{
  padding-left:7px;
  padding-right:7px;
  gap:5px;
}
.login-header .main-logo{
  width:160px;
  flex:0 0 160px;
}
.login-header .header-actions{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 101px;
  align-items:center;
  gap:5px;
}
.login-header .forgot-link{
  min-width:0;
  width:100%;
  font-size:12px;
}
.login-header .header-actions .header-btn{
  width:101px;
  min-width:101px;
  height:35px;
  padding:0;
}
.login-header .login-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 101px;
  gap:5px;
}
.login-header .login-row .login-button{
  width:101px;
  min-width:101px;
}

/* PROFILE: logo lebih kecil agar tidak menekan area akun */
.profile-header{
  height:68px;
  padding:4px 9px;
}
.profile-header .main-logo{
  width:180px;
  flex:0 0 180px;
}
.profile-header .account-area{
  min-width:0;
  margin-left:auto;
  gap:5px;
  font-size:15px;
  line-height:18px;
}
.profile-header .account-area>img{
  width:30px;
  height:30px;
}
.profile-header .account-area>div{
  line-height:18px;
  min-width:0;
}
.profile-header .account-area strong,
.profile-header .account-area span:first-child{
  display:block;
  font-size:15px;
  line-height:18px;
  max-width:82px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-header .coin-line{
  display:block;
  font-size:13px;
  line-height:16px;
  white-space:nowrap;
}
.profile-header .account-arrow{
  font-size:11px;
  margin-left:2px;
}

/* BOTTOM NAV: biru seperti contoh, tanpa warna kuning */
.bottom-nav{
  height:60px;
  background:linear-gradient(180deg,#1975e8 0%,#0751c9 55%,#063da7 100%);
  border-radius:22px 22px 0 0;
  padding:0 2px 6px;
  align-items:stretch;
}
.bottom-item{
  height:60px;
  justify-content:flex-end;
  padding-bottom:2px;
  gap:1px;
  color:#fff;
  font-size:12px;
  line-height:15px;
}
.bottom-item>img{
  width:27px;
  height:27px;
  margin-bottom:2px;
}
.bottom-item b{
  font-size:12px;
  line-height:15px;
  color:#fff;
  transform:translateY(-1px);
}
.promo-circle{
  width:58px;
  height:58px;
  top:-25px;
  background:#1c60d7;
  border:2px solid #5a9cff;
  box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.promo-circle img{
  width:32px;
  height:32px;
}
.promo-item b{
  margin-bottom:0;
}
.profile-site{
  padding-bottom:60px;
}

/* Ukuran layar Android kecil: tetap sejajar dan tidak saling menekan */
@media (max-width:380px){
  .login-header .main-logo{
    width:150px;
    flex-basis:150px;
  }
  .login-header .header-actions{
    grid-template-columns:minmax(0,1fr) 96px;
  }
  .login-header .header-actions .header-btn,
  .login-header .login-row .login-button{
    width:96px;
    min-width:96px;
  }
  .login-header .login-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 96px;
  }
  .profile-header .main-logo{
    width:165px;
    flex-basis:165px;
  }
  .profile-header .account-area>img{
    width:29px;
    height:29px;
  }
  .bottom-item>img{
    width:25px;
    height:25px;
  }
  .bottom-item b{
    font-size:11px;
  }
}


/* ===== SMALL PROFILE LOGO + NAME ADJUSTMENT ===== */
/* Sedikit dibesarkan dari revisi sebelumnya, tanpa mengubah struktur */
.profile-header .profile-logo,
.profile-header .logo,
.profile-header img.avatar {
    width: 44px !important;
    height: 44px !important;
}

.profile-header .profile-name,
.profile-header .username,
.profile-header h1 {
    font-size: 17px !important;
    line-height: 1.2 !important;
}

/* Jika header memakai class header-profile */
.header-profile img.avatar,
.header-profile .profile-logo {
    width: 44px !important;
    height: 44px !important;
}

.header-profile .profile-name,
.header-profile .username {
    font-size: 17px !important;
}


/* PROFILE USERNAME - disesuaikan dengan contoh, tanpa mengubah elemen lain */
.profile-header #profileUsername{
  display:block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:18px !important;
  max-width:82px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
}
.profile-header .account-area .coin-line{
  display:block;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:16px !important;
}