html,body{
  height:100%;
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto;
  background:#f3f4f6;
  overflow:hidden;
}

/* ============================= */
/* TOOLBAR */
/* ============================= */
.toolbar{
  width:100%;
  height:56px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:999;
  box-sizing:border-box;
}

.toolbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.toolbar-center{
  display:flex;
  justify-content:center;
  overflow:hidden;
}

.toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.logo{
  max-height:36px;
}

/* ============================= */
/* CONTROLS */
/* ============================= */
.controls-center{
  display:flex;
  gap:6px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:6px;
  background:#fff;

  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

.controls-center button{
  flex:0 0 auto;
}

.controls-center::-webkit-scrollbar{
  height:4px;
}
.controls-center::-webkit-scrollbar-thumb{
  background:#ccc;
  border-radius:4px;
}

.page-info-input{
  background:#f1f3f5;
  padding:6px 12px;
  border-radius:4px;
  font-weight:600;
  min-width:70px;
  text-align:center;
}

/* ============================= */
/* VIEWPORT */
/* ============================= */
.flip-viewport{
  width:100%;
  height: calc(100vh - 56px);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background: radial-gradient(circle,#f5f5f5,#eaeaea);
}

/* ============================= */
/* FLIPBOOK */
/* ============================= */
#flipbook{
  position:relative;
  transform-origin:center center;
  will-change:transform;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.25));
}

/* ============================= */
/* PAGE */
/* ============================= */
#flipbook .page{
  background:#fff center/contain no-repeat;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

/* TABLET */
@media (max-width: 1024px){
  .toolbar{
    padding:0 10px;
  }

  .flip-viewport{
    padding:10px;
  }

  #flipbook{
    max-width:95vw;
    max-height:90vh;
  }
}

/* MOBILE LANDSCAPE */
@media (max-width: 768px){
  .toolbar{
    height:50px;
  }

  .flip-viewport{
    height: calc(100vh - 50px);
    padding:6px;
  }

  .logo{
    max-height:28px;
  }

  .controls-center{
    padding:4px;
    gap:4px;
  }

  #flipbook{
    max-width:98vw;
    max-height:88vh;
  }
}

/* ============================= */
/* MOBILE PORTRAIT (2 BARIS TOOLBAR) */
/* ============================= */
@media (max-width: 480px){

  .toolbar{
    height:auto;
    padding:6px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap:6px;
  }

  .toolbar-left{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .toolbar-right{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .toolbar-center{
    grid-column: 1 / 3;   /* ambil 1 baris penuh */
    grid-row: 2 / 3;
    justify-content:center;
  }

  .controls-center{
    width:100%;
    padding:4px;
    gap:4px;
    border-radius:6px;
  }

  .controls-center button{
    padding:4px 6px !important;
    font-size:12px;
  }

  .page-info-input{
    min-width:50px;
    font-size:12px;
    padding:4px 6px;
  }

  .logo{
    max-height:28px;
  }

  /* karena toolbar jadi lebih tinggi */
  .flip-viewport{
    height: calc(100vh - 96px);
  }

  #flipbook{
    max-width:100vw;
    max-height:82vh;
  }
}

/* SUPER SMALL DEVICE */
@media (max-width: 360px){
  .controls-center{
    transform: scale(0.95);
    transform-origin:center;
  }
}