/* Mobile */
/* Responsive */
/* ============================================
   MOBILE FIRST APPROACH (Rekomendasi)
   ============================================ */

/* 1. GAYA DEFAULT: Untuk HP (Mobile) */
.form-row {
    flex-direction: column;  /* Default untuk HP */
    gap: 15px;
}

.form-group {
    width: 100%;  /* Default HP: full width */
    padding-right: 0;
}

.form-group-half {
    flex: 1 1 100%;  /* Default HP: full width */
}

.checkbox-inline-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.blklayar {
    background-color: bisque;
    font-size: 14px;  /* Ukuran font untuk HP */
    padding: 15px;
    width: 100%;
    max-width: 100%;
}

/* 2. TABLET: 768px ke atas */
@media (min-width: 768px) {
    .form-row {
        flex-direction: row;  /* Kembali ke row */
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .form-group {
        width: 100%;
        padding-right: 0;
    }
    
    .form-group-half {
        flex: 1 1 calc(50% - 10px);  /* 2 kolom */
        max-width: calc(50% - 10px);
    }
    
    .checkbox-inline-group {
        flex-direction: row;  /* Horizontal di tablet */
        align-items: center;
        gap: 20px;
    }
    
    .blklayar {
        font-size: 16px;
        padding: 20px;
        max-width: 720px;
        margin: 0 auto;
    }
}

/* 3. DESKTOP: 1024px ke atas */
@media (min-width: 1024px) {
    .form-row {
        gap: 30px;
    }
    
    .form-group-half {
        flex: 1 1 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
    
    .blklayar {
        font-size: 18px;  /* Font lebih besar di desktop */
        padding: 30px;
        max-width: 960px;
        background-color: bisque;
    }
}


.img{
  margin-top: 10px;
  height: 30px;
  width: 30px;
}

.imglogin{
  height: 150px;
  width: 160px;
}

.imgtengah{
  margin-top: 150px;
  height: 220px;
  width: 250px;
  margin-left: 550px;
}

.blkmenu {
  border-style:initial; text-align: left;background-color: transparent;max-width:100%;max-height:max-content;
}

.listatas{
 border-color:white;border-style:solid ;border-radius: 8px;background:linear-gradient(95deg,rgba(12,14,0,1)0%,rgba(12,14,0,1)6%,rgba(243, 91, 3, 1)100%);max-width:100%;height:70px;
}


.blklayar {
  border-style: ridge;background-color:white;max-width: 100%;height:210px;margin-right:298px;font-size: large;
}

.blkfoto {
  border-style: solid;border-width:1px;border-color: blue;margin-right: 300px;width: 162px;height: 202px;float:right;margin-top: 30px;
}

.blkfoto1 {
  border-style: solid;border-width:1px;border-color: blue;margin-right: 250px;width: 162px;height: 202px;float:right;image-orientation: 90deg;
}

.thguru { 
  font-size: 14px;width:400px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}

.thprogram { 
  font-size: 14px;width:400px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}

.threg { 
  font-size: 12px;width:400px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}

.thyogi { 
  font-size: 14px;width:600px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}

.thcalon { 
  font-size: 12px;width:1500px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}

.thaktif { 
  font-size: 12px;width:1100px;color: black;background-color: rgb(157, 193, 252);text-align: center;
}


.blkbodyc {
 border-style:inherit;max-width: 100%;max-height:max-content;margin-top: 10px;font-size:large;color:red;padding:40px;
 background:linear-gradient(90deg,rgba(86, 78, 192, 0.8)0%,rgba(110, 90, 228, 0.8)10%,rgba(92, 113, 230, 0.8)100%);
}

.blkbody {
   border-style:inherit;max-width: 100%;max-height:max-content;margin-top: 10px;font-size:large;color:black;padding:40px;
  background:linear-gradient(90deg,rgba(255, 255, 255, 0.8)0%,rgba(255, 255, 255, 0.8)10%,rgba(255, 255, 255, 0.8)100%);
 }


.blkpbody {
  border-style:inherit;max-width: 100%;height: 600px;
  background:linear-gradient(45deg,rgba(12,14,0,1)0%,rgba(12,14,0,1)6%,rgba(0,215,255,1)100%);
 }

.blkdbody {
  border-style:inherit;max-width: 100%;height:100px;
  background:linear-gradient(45deg,rgba(12,14,0,1)0%,rgba(12,14,0,1)6%,rgba(0,215,255,1)100%);
 }

 .tblinfo {
  border-style: ridge;max-width: 820px;height:540px;float: right;margin-top: -1000px;
}

.tblinfobc {
  border-style: ridge;max-width: 820px;height:560px;float: right;margin-top: -1800px;
}

/* .daftarinfo {
  border-style: solid;max-width: 600px;height:260px;margin-left: 30%;background-color: rgb(255, 218, 179);padding: 10px;align-content: center;
} */

.daftarinfo {
  border: 1px solid #e0a855;
  border-radius: 10px;
  max-width: 500px;
  min-height: 260px;
  margin: 40px auto;
  background-color: #fff9f0;
  padding: 25px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.daftarinfo p {
  margin: 12px 0;
  line-height: 1.6;
  color: #333;
  font-size: 16px;
  padding-left: 10px;
  position: relative;
}

.daftarinfo p:before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
  position: absolute;
  left: -15px;
  top: 2px;
}

.daftarinfo p:nth-child(3) {
  background-color: #fff4e6;
  padding: 12px 15px;
  border-radius: 6px;
  border-left: 4px solid #ff9800;
  font-weight: 500;
  margin-top: 20px;
}

.daftarinfo p:nth-child(3):before {
  content: "📱";
  left: -5px;
  top: 12px;
}

.daftarinfo .btn {
  display: inline-block;
  margin-top: 25px;
  padding: 8px 20px;
  background: linear-gradient(to right, #4a6bff, #6a8bff);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 120px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(74, 107, 255, 0.2);
}

.daftarinfo .btn:hover {
  background: linear-gradient(to right, #3a5bef, #5a7bef);
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(74, 107, 255, 0.3);
}



.blklogin {
 border-radius: 5px;border: 5px solid rgb(224, 240, 7) ;border-style:initial;text-align: center;background-color:RGB(159,146,243);width: 30%;height:210px;margin:auto;
}

.banner {
  background: url("https://id.m.wikipedia.org/wiki/Berkas:Pemandangan_Gunung_Bromo.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 20%;
  padding-bottom: 20%;
  color:white;
}

.form{
  border-style:solid;border-radius: 10px;border-width: 1px;border-color:white;background-color:rgb(255, 218, 179);margin-left: 100px;width: 1100px;max-height: fit-content;float:left;padding: 20px;color: black;
}

.form1{
  border-style:solid;border-radius: 10px;border-width: 3px;border-color:white;background-color:rgb(255, 218, 179);margin-left: 50px;width: 1200px;max-height: fit-content;float:left;padding:20px;color:black; font-size:medium;
}

.form2{
  border-style:solid;border-radius: 10px;border-width: 3px;border-color:white;background-color:rgb(255, 218, 179);margin-left: 50px;width: 1200px;max-height: fit-content;float:left;
}

.form3{
  border-style:solid;border-radius: 10px;border-width: 3px;border-color:white;background-color:rgb(255, 218, 179);margin-left: 50px;width: 1200px;max-height: fit-content;float:left;padding:20px;color:black; font-size:medium;
}
.bingkaiguru {
   border-style: solid;border-width:1px;border-color:  black;margin-right: 360px;width: 132px;height: 202px;float:right;margin-top: 30px;
}

.bingkaiyogi {
  border-style: solid;border-width:1px;border-color:  pink;margin-left: 20px;width: 132px;height: 187px; margin-top:-200px;float: left;
}

.bingkaiyogid {
  border-style: solid;border-width:1px;border-color:  black;width: 132px;height: 180px;float:right;margin-right: 242px;
}


/* Child Text Container */
.content_img div{
position: absolute;
bottom: 0;
right: 0;
left: 5px;
background:red;
color:white;
margin-bottom: -60px;
font-family: sans-serif;
font-size:smaller;
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0s, opacity 1.5s linear; 
transition: visibility 0s, opacity 1.5s linear;
}

/* Hover on Parent Container */
.content_img:hover{
cursor: pointer;
}

.content_img:hover div{
width: 150px;
padding: 2px 10px;
visibility: visible;
opacity: 0.5; }

/* 06-02-2026  baris 1*/ 
.device-options {
    display: flex;
    flex-direction: row; /* horizontal */
}


/* tambahan */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
        
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 20px;
}

.form-container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.form-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #e0e0e0;
}

.form-header h1 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 10px;
}

.form-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
border-left: 4px solid #3498db;
}

.section-title {
color: #2c3e50;
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}

.form-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
align-items: center;
}

.form-group {
margin-bottom: 15px;
padding-right: 15px;
}

.form-group.full-width {
width: 100%;
}

.form-label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}

.form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
height: 36px;
}

.form-control:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

textarea.form-control {
height: auto;
min-height: 80px;
resize: vertical;
}

.form-selected {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
height: 36px;
background-color: white;
}

.checkbox-group {
display: flex;
align-items: center;
margin-right: 20px;
}

.checkbox-group label {
margin-left: 5px;
font-weight: normal;
}

.checkbox-inline-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}

.info-text {
font-size: 12px;
color: #666;
margin-top: 5px;
font-style: italic;
}

.warning-text {
color: #e74c3c;
font-weight: bold;
}

.date-range {
display: flex;
align-items: center;
gap: 10px;
}

.btn-submit {
background-color: #3498db;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
display: block;
margin: 30px auto 0;
}

.btn-submit:hover {
background-color: #2980b9;
}

.required::after {
content: " *";
color: #e74c3c;
}


/* Tambahkan ke dalam CSS yang sudah ada 06/02/2026 BARIS 2 */

.agreement-box {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.agreement-text {
  font-size: 14px;
  line-height: 1.6;
  color: #495057;
  margin-bottom: 20px;
  text-align: justify;
}

.agreement-checkbox {
  border-top: 1px dashed #dee2e6;
  padding-top: 20px;
}

.agreement-label {
  font-weight: bold;
  color: #dc3545;
  cursor: pointer;
  margin-left: 10px;
}

.agreement-note {
  font-size: 12px;
  color: #6c757d;
  margin-top: 5px;
  font-style: italic;
}

/* Styling khusus untuk checkbox agreement */
#setuju {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#setuju:checked {
  background-color: #28a745;
  border-color: #28a745;
}

/* Tombol submit disabled */
.btn-submit:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-submit:enabled {
  background-color: #28a745;
  cursor: pointer;
}

.btn-submit:enabled:hover {
  background-color: #218838;
}


/* Mobile First Styles  120226 */
.mobile-field {
    width: 100% !important;
    max-width: 100%;
    height: 44px !important; /* Ukuran yang nyaman untuk jari */
    font-size: 16px !important; /* Mencegah zoom di iOS */
    margin-bottom: 15px !important;
    padding: 10px 10px !important;
    box-sizing: border-box !important;
    border-radius: 5px !important;
    border: 1px solid #ddd !important;
}

.mobile-checkbox {
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
}

.form-select.mobile-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
}

textarea.mobile-field {
    height: auto !important;
    min-height: 100px;
    resize: vertical;
}

/* Layout untuk form di mobile */
.form-row-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group-mobile {
    flex: 1 1 100%;
    margin-bottom: 15px;
}



/* Checkbox dan label alignment */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.checkbox-label {
    flex: 1;
    margin-bottom: 0;
    font-size: 15px;
}

/* Required field indicator */
.required-field::after {
    content: " *";
    color: #dc3545;
}

/* Media query untuk handphone */
@media screen and (max-width: 480px) {
    div {
        text-align: center !important; /* Memusatkan konten di HP */
        margin-left: 0 !important;
        padding: 10px;
    }
    
    .mobile-logo {
        width: 60px;
        height: auto;
        margin: 0 auto 5px;
    }
    
    .mobile-tagline {
        font-size: 12px;
    }
    
    .mobile-title {
        font-size: 16px;
    }
}