/* ===== Reset & base ===== */
:root{
    --fb-blue: #1877f2;
    --bg: #f0f2f5;
    --card: #fff;
    --muted: #65676b;
    --surface: #e9edf2;
    --accent: #1a73e8;
    --shadow: rgba(0,0,0,0.08);
    --dark-bg: #111214;
    --dark-card: #1c1c1e;
}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{background:var(--bg);padding:0;margin:0;color:#111}
a{color:inherit;text-decoration:none}

/* ===== Container ===== */
.page {
    max-width:1100px;
    margin:0 auto;
    padding:12px;
}

/* ===== Header / Navbar ===== */
header.app-header {
    position:sticky;
    top:0;
    z-index:40;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
    border-bottom:1px solid rgba(0,0,0,0.06);
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    max-width:1100px;
    margin:0 auto;
    padding:10px 12px;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { font-weight:800; color:var(--fb-blue); font-size:20px; }
.brand .tag { font-size:13px; color:var(--muted); }

/* right nav (items from right-to-left visually as requested) */
.nav-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-item { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; color:var(--fb-blue); }
.nav-item:hover{ background: rgba(24,119,242,0.06); }

.hamburger-btn { background:transparent;border:0;padding:8px;border-radius:8px;font-size:18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.icon-circle{ width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(0,0,0,0.04);}

/* theme toggle */
.theme-toggle { padding:6px 8px;border-radius:8px; font-weight:600; cursor:pointer; border:1px solid rgba(0,0,0,0.06); }

/* ===== Search bar ===== */
.search-row { display:flex; justify-content:center; padding:10px 12px; }
.search-box { width:100%; max-width:820px; display:flex; gap:8px; align-items:center; background:var(--card); padding:8px;border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.04); }
.search-box input[type="search"]{ width:100%; padding:10px 12px;border:0;outline:none;font-size:15px;background:transparent; }
.search-box button{ background:var(--fb-blue); color:#fff;padding:8px 12px;border-radius:999px;border:0; cursor:pointer; font-weight:700;}

/* ===== Layout columns ===== */
.layout { display:flex; gap:18px; align-items:flex-start; padding:12px; }
.col-left{ width:260px; }
.col-main{ flex:1; max-width:640px; }
.col-right{ width:260px; }

/* ===== Cards ===== */
.card { background:var(--card); padding:12px; border-radius:12px; box-shadow:0 1px 3px var(--shadow); border:1px solid rgba(0,0,0,0.03); }

/* composer */
.composer textarea{ width:100%; border:1px solid #e6e9ef; padding:10px;border-radius:8px; resize:none; min-height:68px; font-size:15px;}
.composer .controls{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; }
.upload-actions{ display:flex; gap:8px; align-items:center; }
.upload-btn{ background:transparent;border:1px solid rgba(0,0,0,0.06); padding:8px 10px;border-radius:8px; cursor:pointer; }
.post-btn{ background:var(--fb-blue); color:#fff; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }

/* feed */
.feed{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.post { padding:12px; border-radius:12px; background:var(--card); box-shadow:0 1px 3px var(--shadow); border:1px solid rgba(0,0,0,0.03); }
.post .post-top{ display:flex; gap:12px; align-items:center; }
.avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,0,0,0.04); }
.post .user-meta{ display:flex; flex-direction:column; }
.post .user-meta .name{ font-weight:700; }
.post .user-meta .time{ font-size:13px; color:var(--muted); }
.post .post-content{ margin-top:10px; white-space:pre-wrap; font-size:15px; }
.media img, .media video{ width:100%; border-radius:10px; margin-top:8px; max-height:520px; object-fit:cover; background:#000; }

.post .meta-actions{ display:flex; gap:8px; align-items:center; margin-top:12px; }
.meta-btn{ background:transparent;border:0;padding:8px 10px;border-radius:8px; cursor:pointer; color:var(--muted); font-weight:700; display:inline-flex; align-items:center; gap:8px;}
.meta-btn.like-active{ color:var(--fb-blue); }

.post-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 padding-top: 8px;
}

.post-actions button {
 background: #1877f2;
 color: white;
 border: none;
 padding: 6px 10px;
 border-radius: 6px;
 cursor: pointer;
 font-size: 14px;
 transition: background .2s;
}

.post-actions button:hover {
 background: #0f5ec4;
}

.post-actions .delete-btn {
 background: #e74c3c;
}

.post-actions .delete-btn:hover {
 background: #c0392b;
}

.post-actions .edit-btn {
 background: #2ecc71;
}

.post-actions .edit-btn:hover {
  background: #27ae60;
}

/* === LIVE STATUS === */
.live-led {
  display:inline-block;
  font-size:18px;
  color:#999;
  margin-left:8px;
  transition:color 0.3s;
}
.live-led.on {
  color:#ff2b2b;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50%, 100% { opacity:1; }
  25%, 75% { opacity:0.3; }
}


/* hamburger overlay */
.overlay { position:fixed; top:0; right:0; height:100vh; width:0; background:linear-gradient(180deg,#fff,#f7f9fb); box-shadow:-8px 0 24px rgba(0,0,0,0.12); z-index:60; overflow:hidden; transition:width .25s ease; border-left:1px solid rgba(0,0,0,0.04);}
.overlay.open{ width:320px; }
.overlay .menu { padding:18px; display:flex; flex-direction:column; gap:12px; }
.overlay .menu a{ padding:10px;border-radius:8px;color:var(--fb-blue); font-weight:700;}
.overlay .menu .danger{ color:#c0392b; border:1px solid rgba(192,57,43,0.06); }

/* responsive */
@media(max-width:980px){
    .layout{ flex-direction:column; padding:12px; }
    .col-left, .col-right{ width:100%; }
    .overlay.open{ width:100%; }
    .header-inner{ padding:10px; }
}

/* dark mode */
body.dark{
    background: #0f1720;
    color: #e6eef6;
}
body.dark .card, body.dark .post, body.dark .search-box {
    background: var(--dark-card);
    border-color: rgba(255,255,255,0.04);
}
body.dark header.app-header {
    background: linear-gradient(180deg, rgba(12,12,14,0.85), rgba(18,18,20,0.75));
    border-bottom:1px solid rgba(255,255,255,0.04);
}
body.dark a{ color: #8ab4ff; }
/* ====== 📱 Mobile Responsive Fix ====== */
@media(max-width:768px){
  /* Navbar lebih ringkas */
  header.app-header {
    position: sticky;
    top: 0;
    padding: 6px 10px;
  }
  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .brand .logo {
    font-size: 18px;
  }
  .nav-right {
    gap: 6px;
  }
  .nav-item {
    font-size: 14px;
    padding: 6px 8px;
  }

  /* Hamburger & overlay */
  .overlay {
    width: 0;
    left: 0;
    right: auto;
    box-shadow: 8px 0 16px rgba(0,0,0,0.15);
    transition: width .3s ease;
  }
  .overlay.open {
    width: 100%;
  }
  .overlay .menu {
    padding: 16px;
  }

  /* Kolom pencarian */
  .search-box {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
  }
  .search-box input[type="search"] {
    font-size: 14px;
    padding: 8px;
  }
  .search-box button {
    padding: 6px 10px;
    font-size: 14px;
  }

  /* Composer (posting) */
  .composer textarea {
    font-size: 14px;
    min-height: 60px;
  }
  .composer .controls {
    flex-direction: column;
    align-items: stretch;
  }
  .upload-actions {
    justify-content: space-between;
  }
  .upload-btn, .post-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 15px;
  }

  /* Feed */
  .feed {
    gap: 10px;
    margin-top: 10px;
  }
  .post {
    padding: 10px;
  }
  .avatar {
    width: 40px;
    height: 40px;
  }
  .post .user-meta .name {
    font-size: 15px;
  }
  .post .post-content {
    font-size: 14px;
  }

  /* Layout jadi 1 kolom */
  .layout {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  .col-left, .col-right {
    display: none;
  }
  .col-main {
    width: 100%;
    max-width: 100%;
  }

  /* Tombol tema */
  .theme-toggle {
    font-size: 14px;
    padding: 6px 8px;
  }
}
/* --- Perbaikan tombol di mobile --- */
@media (max-width: 768px) {
  .post {
    padding: 10px;
    margin: 10px auto;
    width: 95%;
    box-sizing: border-box;
  }

  .post-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .post-actions button {
    flex: 1 1 calc(48% - 4px);
    min-width: 45%;
    box-sizing: border-box;
  }

  .post-actions .delete-btn {
    order: 99; /* Supaya tombol hapus selalu di bawah */
    width: 100%;
  }

  .post img.post-image {
    width: 100%;
    height: auto;
  }
}

/* === Fix tombol hapus dan edit di HP === */
@media (max-width: 768px) {
  .meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .meta-actions .meta-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 48%;
    text-align: center;
    box-sizing: border-box;
  }

  .meta-actions .meta-btn:nth-child(4),
  .meta-actions .meta-btn:nth-child(5) {
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* small helper styles */
.link { color: #1877f2; text-decoration: none; }
#liveAlwaysBtn:hover {
  background: #c0392b;
  transition: 0.3s;
}