/* ===== BASE ===== */
body {
    margin: 0;
    font-family: Roboto;
}

/* ===== LAYOUT ===== */
.master-container {
    width: 100%;
    height: 100%;
    display: flex;
}

/* ===== LEFT PANEL ===== */
.left-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== RIGHT PANEL ===== */
.right-panel {
    background: black;
    flex: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== CENTER CONTAINER ===== */
.center-container {
    color: rgb(235, 232, 232);
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    position: relative;
}

/* ===== HEADINGS ===== */
.heading-title {
    font-size: 60px;
    font-weight: 800;
    letter-spacing: -1px;
}

.heading-subtitle {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1px;
}

/* ===== INPUT GROUP ===== */
.input-group {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
}

.input-username,.input-password {
    background: black;
    color: rgb(235, 232, 232);
    padding: 10px 20px;
    border: 1px solid rgb(128, 128, 128);
    border-radius: 20px;
}

/* ===== BUTTON ===== */
.login-button {
    background: rgb(235, 232, 232);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
    cursor: pointer;
}

/* ===== ERROR NOTIFICATION ===== */
.error-notification {
    /* background: red; */
    position: absolute;
    right: 0;
    bottom: 0;
    left: 10px;
    transform: translateY(25px);
    color: rgb(212, 60, 60);
}

/* ===== UNTUK LAYAR HP ===== */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
  
  .tweet-container, .tweet-display-area {
    padding: 10px;
    width: 100% !important; /* Biar memenuhi layar HP */
  }

  .tweet-input {
    width: 100%;
    border-radius: 20px;
  }

  /* Sembunyikan sidebar yang tidak perlu jika layar terlalu kecil */
  .sidebar {
    display: none; 
  }
}
