.white {
    color: white;
}
a {
    color: inherit;
    text-decoration: none;
}
.card-danger{
    background: #e90000;
  color: #ffffff;
}
.table-small {
   
    max-width: 100%;
    font-size: 14px;
    table-layout: auto;
}

.table-small td {
    white-space: nowrap;
    padding: 6px 8px;
    line-height: 1.2;
}

td.side {
     width: 200px;
    background-color: rgb(231, 231, 231);
}
.device-image {
    max-width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.stretch-card {
    margin-top : 20px;
}

.evidence img {
    width:500px;
    height: 300px;
    display: block; /* supaya tidak ada gap bawah */
   border: 1px solid rgb(71, 71, 71);
   padding: 10px;
   margin: 5px;
}
.evidence2 img {
    width:500px;
    height: 300px;
    display: block; /* supaya tidak ada gap bawah */
   padding: 10px;
     margin: 5px auto;  /* auto kiri-kanan -> center */
}
.desc {
    line-height: 1.5;
    text-align: justify;
}
.tambah {
    color: white;
}
.footer-login  {
  margin-top: 20px;
}
.photo img{
    /* width: 100px; */
    padding: 30px;
    border-radius: 50%;
}
.calendar img {
    padding: 30px;
}
.img_fluid2 {
    display: block;          /* bikin img jadi block */
    margin: 0 auto;          /* center horizontal */
    padding: 30px;
    max-width: 200px;
    /* background-color: #e0e0e0; abu-abu */
    border-radius: 10px;     /* opsional, biar sudutnya halus */
}
.profil img {
    max-width: 150px;      /* batas lebar max 150px */
    width: 100%;           /* biar responsive */
    height: auto;          /* jaga proporsi */
    border-radius: 50%;    /* bikin bulat */
    object-fit: cover;     /* crop biar proporsional */
    display: block;        /* biar bisa margin auto */
    margin: 0 auto;        /* center */
}
.desc {
    margin-top: 5px;
}
.kotak {
    border: black 1px solid;
    padding: 30px;
    /* margin: 5px; */
}
.kotak h3{
    text-align: center;
}
 .grayscale {
        filter: grayscale(100%);
    }
.pp {
  display: flex;
  justify-content: center; /* posisi horizontal di tengah */
  align-items: center;     /* posisi vertical di tengah (jika tinggi ditentukan) */
}

.pp img {
  width: 100%;
  max-width: 300px;
  height: 300px;              /* buat kotak */
  object-fit: cover;          /* biar gambar tetap proporsional dan isi kotak */
  border-radius: 8px;         /* opsional, biar sudut sedikit melengkung */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.carousel-item-winner {
    height: 520px; 
   
    align-items: center;
  position: none;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  }
 .note {
        height: 70px;        /* atur tinggi sesuai kebutuhan */
       
    }

/* Ukuran default (desktop) sudah sesuai dari HTML */

/* Saat diakses di layar kecil (mobile) */
@media (max-width: 768px) {
  .carousel-item h1 {
    font-size: 1.2rem; /* lebih kecil dari H1 normal */
    line-height: 1.4;
  }

  .carousel-item h3 {
    font-size: 1rem;
    line-height: 1.4;
  }

  .carousel-item .card-title {
    font-size: 0.9rem;
  }
}

/* DEFAULT (Mobile) */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.icon {
    font-size: 22px;
    color: #fff;
}

small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}


/* DESKTOP (>= 992px) */
@media (min-width: 992px) {
    .icon-circle {
        width: 80px;     /* icon-circle lebih besar */
        height: 80px;
    }

    .icon {
        font-size: 35px; /* icon lebih besar */
    }

    small {
        font-size: 14px;
    }

    .menu-icons-wrapper {
        margin-top: 50px;
    }
}
.left {
    width: 60px;
}

.wrap {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
}
.uppercase td:not(.table-secondary) {
    text-transform: uppercase;
}
/*preview kop surat*/
.preview-wrapper{
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
   
    
    padding: 10px;
}

.preview-img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;        /* gambar tidak kepotong */
    
}
@media(max-width: 576px){
    .preview-wrapper{
        
        padding: 5px;
    }
}
.isi-surat{
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    line-height: 1.6;
    text-align: justify;
    margin-top: 10px;
}
.isi-surat p{
    font-family: "Times New Roman", Times, serif;
    font-size: 13pt;
    line-height: 1.6;
    text-align: justify;
    margin-top: 10px;
}
/* Font tabel pemohon */
.menjorok td{
    font-size:13pt;       /* ukuran utama */
}

/* HP biar tetap proporsional */
@media (max-width:576px){
    .menjorok td{
        font-size:14px;
    }
}


.no_surat {
    margin-top: -10px;
}
.detail_surat {
    margin: 20px;
}#preview h4{
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    margin: -1px;
}
.menjorok{
    margin-left: 20px;
}
.menu-icons-wrapper h4 {
    font-size: clamp(0.85rem, 2vw, 1.25rem);
    margin-bottom: 0.25rem;
}

.menu-icons-wrapper p {
    font-size: clamp(0.7rem, 1.6vw, 0.95rem);
    margin-bottom: 0;
}
.news-img{
    height:200px;
    object-fit:cover;
    border-radius:12px 12px 0 0;
}

.news-card{
    border-radius:14px;
    transition:0.25s;
}

.news-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.news-desc{
    font-size:14px;
    line-height:1.6;
}
.gallery-img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:14px 14px 0 0;
}
.gallery-card{
    border-radius:14px;
    transition:.3s;
}
.gallery-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.15);
}