@media (max-width: 1366px) {
body{font-size:18px !important;}
}

@media (max-width: 1366px) {
body{font-size:16px !important;}
}

@media (max-width: 1280px) {
body{font-size:15px !important;}
.margin-master{margin:0 4vw !important;}
}

@media (max-width: 1200px) {
.margin-master{margin:0 2vw !important;}
}

@media (max-width: 1024px) {
body{font-size:14px !important;}
}

@media (max-width: 768px) {
body{font-size:15px !important;}	
.margin-master{margin:0 15px !important;}
.headpage{background:linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);}
.headpage .margin-master.difle-l{display:block !important;margin:0 auto;}
.headpage .margin-master{margin:0 !important;}
.logo{height:auto;position:relative;overflow:hidden;display:flex !important;justify-content: center;align-items: center;margin:0 auto;}
.logo.difle-l{display:flex !important;justify-content: center;align-items: center;margin:15px auto;padding:0 15px 15px;border-bottom:rgba(255,255,255,0.3) 1px solid;}
.logo img{height:12vh;margin:0 10px 0 0;}
.logo h1{font-size:120%;letter-spacing:-0.8px;}
.logo p{font-size:90%;}
.right-btn{float:none;}
.datetime{margin:0 0 10px;}
.headright.difle-r{display:flex !important;justify-content: center;align-items: center;width:100%;text-align:center;margin:0 0 20px;}
.area-title{width:calc(100% - 2vw);margin:0 1vw 15px;}
.area-content{width:calc(100% - 2vw);margin:0 1vw 30px;}
.area-title-inner{margin:7px;height:auto;}
.area-title:before, .area-content:before{margin:7px;}
.area-title-inner h2{margin:15px 0 10px;}
.bukutamu-title{padding:0 15% 15px;}
.intro img{width:50%;}
.intro h3{font-size:160%;margin:0 auto 20px;}
.area-content-inner{margin:7px;z-index:20;padding:15px 15px 30px;}
.content-form{width:100%;margin:15px 0 15px;height:auto;}
.capture{width:100%;margin:15px 0 0;}
.head-content{height:40px;}
.head-content h1{font-size:100%;}
.head-content-icon{width:30px;height:30px;margin:0 5px 0 0;}
.head-content-icon svg{height:25px;}
.col-input{width:calc(100% - 2vh);}
.form-control {height:34px;}
.knob, .knob-block{height:34px;}
textarea{height:60px !important;}
.capture-box{width:25vh;height:25vh;margin:0 auto 0;}
.capture-bottom .d-grid{display:flex !important;justify-content: center;align-items: center;}
.capture-bottom .knob{margin:0 5px !important;}
.capture-image{margin:5px;}
.get-image{position:relative;margin:-20px 0 15px;}
}

/* Tablet landscape */
@media (max-width: 1100px) {
  body { font-size: 15px !important; }
  .margin-master { margin: 0 18px !important; }
  .headpage > .margin-master { min-height: 110px; }
  .logo { min-height: 110px; }
  .logo img { height: 72px; }
  .logo h1 { font-size: 1.55rem; }
  .logo p { font-size: .95rem; }
  .mainmargin { display: block; }
  .area-title, .area-content { width: 100%; margin: 0 0 16px; }
  .area-title { flex: none; }
  .area-title:before, .area-content:before { margin: 8px; }
  .area-title-inner { min-height: 0; height: auto; margin: 8px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .area-title-inner h2 { margin: 0; font-size: 1rem; text-align: left; white-space: nowrap; }
  .area-title-center { display: none !important; }
  .area-title-bottom { margin: 0; padding: 0; flex: 1; justify-content: flex-end; }
  .area-title-bottom .knob { flex: 0 1 auto; min-width: 150px; }
  .area-content-inner { margin: 8px; padding: 18px; }
  #mainform > .grider { grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; }
  .capture { width: 200px; }
  .capture-disabled { min-height: 200px; }
}

/* Tablet portrait and phones */
@media (max-width: 820px) {
  .full-container { padding-bottom: 20px; }
  .headpage { background: linear-gradient(to bottom, rgba(0,0,0,.52), rgba(0,0,0,.12)); }
  .headpage > .margin-master { min-height: 0; display: block !important; padding: 12px 14px; }
  .logo { min-height: 0; justify-content: flex-start; margin: 0; padding: 0; border: 0; }
  .logo img { height: 56px; max-width: 64px; }
  .logo h1 { font-size: 1.15rem; line-height: 1.15; }
  .logo p { font-size: .78rem; line-height: 1.25; }
  .headright.difle-r { width: auto; justify-content: flex-start; margin: 8px 0 0 66px; text-align: left; }
  .datetime { margin: 0; font-size: .82rem; }
  #thistime { margin-left: 8px; }
  .margin-master { margin: 0 12px !important; }
  .area-title-inner { display: block; padding: 12px; text-align: center; }
  .area-title-inner h2 { text-align: center; margin: 0 0 10px; white-space: normal; }
  .area-title-bottom { justify-content: center; gap: 8px; }
  .area-title-bottom .knob { min-width: 0; width: auto; }
  .area-content-inner { padding: 15px; }
  #mainform > .grider { display: block; }
  .content-form > .grider { grid-template-columns: 1fr; gap: 13px; }
  #alamat, #lainnya { grid-column: auto; width: auto !important; }
  .capture { width: 100%; margin-top: 18px; }
  .capture-box { width: min(260px, 100%); max-height: none; margin: 0 auto; }
  .capture-disabled { width: min(320px, 100%); min-height: 150px; margin: 0 auto; }
  #capture { width: min(260px, 100%); margin: 0 auto; }
  .capture-bottom { width: min(320px, 100%); margin: 4px auto 0; }
  .capture-bottom .d-grid { display: grid !important; grid-template-columns: 1fr 1fr; }
  .form-control, .form-select { min-height: 42px; height: 42px; }
}

@media (max-width: 520px) {
  .logo img { height: 48px; max-width: 54px; margin-right: 8px; }
  .logo h1 { font-size: .98rem; }
  .logo p { font-size: .7rem; }
  .headright.difle-r { margin-left: 56px; }
  .datetime { font-size: .73rem; }
  .area-title-bottom { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .area-title-bottom .knob { width: 100%; height: 38px; padding: 0 8px !important; font-size: .78rem; }
  .area-content-inner { padding: 12px; }
  .head-content { margin-bottom: 14px; }
  .head-content h1 { font-size: 1.12rem; }
  .head-content-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .head-content-icon svg { height: 25px; }
  textarea.form-control { min-height: 84px !important; height: 84px !important; }
}

/* OpenSID Buku Tamu - responsive refinement */
html, body { min-height: 100%; }
body { overflow-x: hidden; }
.full-container { position: relative; min-height: 100vh; padding-bottom: 32px; }
.headpage { z-index: 30; }
.headpage > .margin-master { min-height: 132px; }
.logo { height: auto; min-height: 132px; }
.logo img { height: 88px; max-width: 100px; object-fit: contain; }
.logo h1 { font-size: clamp(1.35rem, 2.1vw, 2.25rem); letter-spacing: -0.4px; }
.logo p { font-size: clamp(.9rem, 1.15vw, 1.2rem); }
.datetime { font-size: clamp(.9rem, 1.1vw, 1.1rem); white-space: nowrap; }
.mainmargin { margin-left: 0; margin-right: 0; gap: 20px; flex-wrap: nowrap; align-items: stretch; }
.area-title { width: min(300px, 28%); margin: 0; flex: 0 0 min(300px, 28%); }
.area-content { width: auto; margin: 0; flex: 1 1 auto; min-width: 0; }
.area-title-inner { height: auto; min-height: 610px; margin: 12px; }
.area-content-inner { margin: 12px; padding: 24px; }
.head-content { height: auto; min-height: 48px; margin-bottom: 18px; }
.head-content h1 { font-size: 1.35rem; }
.head-content-icon { width: 42px; height: 42px; flex: 0 0 42px; }
.head-content-icon svg { height: 30px; }
#mainform > .grider { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; align-items: stretch; }
.content-form { width: 100%; height: auto; margin: 0; display: block; }
.content-form > .grider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; }
.col-input { width: auto; margin: 0; min-width: 0; }
.content-form .form-group { margin: 0 !important; }
.content-form label { display: block; margin-bottom: 7px; font-weight: 600; color: #272727; }
.form-control, .form-select { min-height: 44px; height: 44px; padding: 8px 12px; font-size: 15px; }
textarea.form-control { min-height: 92px !important; height: 92px !important; resize: vertical; }
#alamat { grid-column: 1 / -1; width: auto !important; }
#lainnya { width: auto !important; }
.capture { width: 220px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.capture-box { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 220px; overflow: hidden; }
.capture-image { margin: 6px; }
.get-image { border: 0; width: 100%; height: 42px; margin: 0; justify-content: center; cursor: pointer; }
.get-image svg { height: 25px; }
.capture-disabled { width: 100%; min-height: 220px; padding: 22px 14px; border-radius: 6px; background: linear-gradient(160deg, rgba(0,179,119,.96), rgba(0,137,181,.95)); color: #fff; text-align: center; }
.capture-disabled > div { width: 100%; }
.capture-disabled svg { display: block; width: 56px; height: 56px; margin: 0 auto 12px; fill: rgba(255,255,255,.92); }
.capture-disabled strong { display: block; font-size: 15px; line-height: 1.3; }
.capture-disabled span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; opacity: .88; }
.capture-bottom { margin-top: auto; }
.capture-bottom .d-grid { gap: 8px; }
.capture-bottom .knob { width: 100%; min-height: 42px; margin: 0 !important; }
.area-title-bottom { gap: 8px; padding: 0 12px; }
.area-title-bottom .knob { flex: 1 1 0; white-space: normal; }