/*======================
Tombol topup
======================*/
.back-to-top{
position:fixed;
bottom:32px;
right:32px;
width:41px;
height:41px;

display:none;

align-items:center;
justify-content:center;

background:#4e6bff;
border-radius:6px;
border:none;
cursor:pointer;

z-index:99999;
}

/* muncul saat scroll */
.back-to-top.show{
display:flex;
}

.back-to-top svg{
width:16px;
height:16px;
fill:#fff;
pointer-events:none;
}

/*======================
Matikan bayangan pada form
======================*/
input,
textarea,
select {
  box-shadow: none !important;
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: none !important;
  outline: none !important;
}

.form-control:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: inherit;
}

* {
  box-shadow: none !important;
}

* {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/*======================
Atur nomor perusahaan
======================*/
.wa-link{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
}

.wa-link i{
  color:#25D366;
  font-size:22px;
  margin-top:3px;
}

.wa-info{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.wa-number{
  font-weight:600;
  color:#000;
}

.wa-company{
  font-size:14px;
  color:#777;
}

/* warna nomor whatsapp normal */
.wa-number{
  color: inherit;
}

/* warna saat dark mode aktif */
body.dark .wa-number{
  color: white;
}

/*======================
Instagram
======================*/
svg {
  color:#FFF;
}

/*======================
TIM CENDANA PERMAI
======================*/
/* Twitter / X */
.twitter-icon svg{
  color:#fff;
  transition:0.3s;
}

.twitter-icon:hover svg{
  color:#ff4b5c; /* warna merah seperti instagram */
}

/*======================
Kontak Kami
======================*/
/* Instagram */
.instagram-icon svg{
  fill:#6b7280;
  width:28px;
  height:28px;
  transition:0.3s;
}

.instagram-icon:hover svg{
  fill:#fff;
}

/* TikTok */
.tiktok-icon svg {
  fill: #6b7280;
  transition: 0.3s;
}

.tiktok-icon:hover svg {
  fill: #fff;
}

/*======================
Sosmed Footer
======================*/
/* TikTok */
.tiktok-icon svg{
  color:#d1d8e0;
  transition:0.3s;
}

.tiktok-icon:hover svg{
  color:#4e6bff;
}

/* Instagram */
.instagram-icon svg{
  color:#d1d8e0;
  transition:0.3s;
}

.instagram-icon:hover svg{
  color:#4e6bff;
}

/*======================
Animasi Testimoni
======================*/
.popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;

opacity:0;
visibility:hidden;
transition:all .3s ease;
}

.popup-overlay.active{
opacity:1;
visibility:visible;
}

.popup-box{
background:white;
padding:30px;
border-radius:10px;
width:400px;
max-width:90%;

transform:scale(.8);
transition:all .3s ease;
}

.popup-overlay.active .popup-box{
transform:scale(1);
}

/*======================
Popup Testimoni Modern
======================*/
.popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:flex-start; /* ubah dari center */
justify-content:center;

padding-top:120px; /* jarak dari navbar */

opacity:0;
visibility:hidden;
transition:all .3s ease;
z-index:999;
}

.popup-overlay.active{
opacity:1;
visibility:visible;
}

/* BOX */
.popup-box{
background:#fff;
width:420px;
max-height:90vh;
overflow-y:auto;
border-radius:16px;
box-shadow:0 25px 70px rgba(0,0,0,0.25);
animation:popupAnim .35s ease;
}

/* ANIMASI */
@keyframes popupAnim{
from{
transform:translateY(40px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

/* HEADER */
.popup-header{
padding:20px 25px;
border-bottom:1px solid #e5e7eb;
}

.popup-header h3{
margin:0;
font-size:20px;
font-weight:600;
color:#111827;
}

/* BODY */
.popup-body{
padding:20px 25px;
}

/* LABEL */
.popup-body label{
display:block;
font-size:14px;
margin-bottom:6px;
color:#374151;
}

/* INPUT */
.popup-body input,
.popup-body textarea{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #e5e7eb;
margin-bottom:14px;
font-size:14px;
transition:all .2s;
}

.popup-body input:focus,
.popup-body textarea:focus{
outline:none;
border-color:#4e6bff;
box-shadow:0 0 0 3px rgba(78,107,255,0.15);
}

/* TEXTAREA */
.popup-body textarea{
resize:vertical;
min-height:90px;
}

/* FOOTER */
.popup-footer button{
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
font-weight:500;
font-size:14px;
color:white;
}

/* tombol simpan */
.btn-save{
background:#22c55e !important;
}

.btn-save:hover{
background:#16a34a !important;
}

/* tombol batal */
.btn-cancel{
background:#ef4444 !important;
}

.btn-cancel:hover{
background:#dc2626 !important;
}

/* saat loading */
.btn-save.loading{
background:#22c55e;
opacity:0.7;
cursor:not-allowed;
}

/*======================
Upload Foto Modern
======================*/
.upload-icon{
font-size:38px;
display:block;
margin-bottom:10px;
color:#6b7280;
}

.upload-area:hover .upload-icon{
color:#4e6bff;
}

.upload-area{
position:relative;
border:2px dashed #d1d5db;
border-radius:10px;
padding:25px;
text-align:center;
cursor:pointer;
transition:.2s;
background:#fafafa;
margin-bottom:15px;
}

.upload-area:hover{
border-color:#4e6bff;
background:#f5f7ff;
}

/* input disembunyikan */
.upload-area input{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
cursor:pointer;
}

/* isi upload */
.upload-content{
pointer-events:none;
color:#6b7280;
}

.upload-content p{
margin:5px 0;
font-weight:500;
}

.upload-content span{
font-size:12px;
color:#9ca3af;
}

/* preview foto */
.preview-foto{
display:none;
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
margin:auto;
}

/*======================
Notifikasi Testimoni
======================*/
.toast-success{
position:fixed;
bottom:30px;
right:30px;
background:#16a34a;
color:white;
padding:14px 18px;
border-radius:6px;
display:flex;
align-items:center;
gap:10px;
font-size:14px;
opacity:0;
transform:translateY(20px);
transition:all .4s ease;
z-index:9999;
}

.toast-success.show{
opacity:1;
transform:translateY(0);
}

.toast-success.hide{
opacity:0;
transform:translateY(20px);
}

/*======================
Notifikasi Contact Form
======================*/
.toast-contact{
position:fixed;
bottom:30px;
right:30px;
background:#16a34a;
color:white;
padding:14px 18px;
border-radius:6px;
display:flex;
align-items:center;
gap:10px;
font-size:14px;
opacity:0;
transform:translateY(20px);
transition:all .4s ease;
z-index:9999;
}

.toast-contact.show{
opacity:1;
transform:translateY(0);
}

.toast-contact.hide{
opacity:0;
transform:translateY(20px);
}

/*======================
Responsive Popup Mobile
======================*/
/* form popup */
@media (max-width:768px){

.popup-overlay{
padding-top:90px;
padding-left:15px;
padding-right:15px;
}

.popup-box{
width:100%;
max-width:420px;
border-radius:14px;
}

.popup-body{
padding:18px;
}

.popup-header{
padding:18px;
}

/* footer teks */

/* Footer grid jadi 1 kolom di mobile */
footer .tc.uf.ap.gg.fp{
display:block !important;
}

/* Kolom footer full width */
footer .animate_top{
width:100% !important;
max-width:100% !important;
}

}

/* tombol mobile */
.popup-footer{
display:flex;
flex-direction:column;
gap:12px; /* jarak antar tombol */
margin-top:10px;
}

.popup-footer button{
width:100%;
padding:12px;
}

/*======================
Disabled Form Contact
======================*/
button:disabled {
    cursor: not-allowed; /* icon larangan */
    opacity: 0.7;        /* supaya terlihat disabled */
}