@font-face {
    font-family: lonely-coffee;
    src: url(Font/Lonely\ Coffee.otf);
}

@font-face {
    font-family: arial-rounded;
    src: url(Font/arialroundedmtbold.ttf);
}

.font-external {
font-family: lonely-coffee;
color: #ff5f91;
}

.font-lonely {
font-family: lonely-coffee;
color: #1d3382;
}

.font-body {
    font-family: arial-rounded;
    color: #1d3382;
}

.font-ending {
    font-family: arial-rounded;
    color: #f9f2eb;
}

.font-point{
    font-family: arial-rounded;
    color: #1d3382;
    margin: 0;
}

.main-content-bg {
    background-image: url(img/BG_MainSectionsOld.jpg)  ; 
    background-size: cover;
    background-position: center-top;
    background-repeat: no-repeat;
    margin-top: -40px;
    
 }
                   
.year-box {
  display: inline-block;
  font-family: arial-rounded;
  padding: 2px 14px;
  background-color: #ff5f91;   
  color: #f9f2eb;
  border-radius: 6px;         /* bikin sudut membulat */
  font-size: 14px;
  font-weight: 600;
  margin-left: 20px;   /* <— tambah jarak DARI SMAK */
}

.int-box {
  display: inline-block;
  font-family: arial-rounded;
  padding: 2px 14px;
  background-color: #1d3382;   
  color: #f9f2eb;
  border-radius: 6px;         /* bikin sudut membulat */
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px; 
  margin-bottom: 10px;  /* <— tambah jarak DARI SMAK */
}

#about, #skills, #projects, #contact {
  scroll-margin-top: 70px;
}

.navbar-nav .nav-link.active {
    color: #ff5f91 !important;
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:hover span {
    color: #ff5f91 !important;
}

.about-header-custom {
    text-align: left; /* Rata kiri */
    padding-top: 50px;
    max-width: 280px; /* Sesuaikan ukuran */
    height: auto;
}

.about-folder {
  position: relative;
  background-color: #f9f2eb; /* warna cream */
  box-shadow: 9px 9px 0 #1d3382; /* bayangan biru */
  border: 3px solid #1d3382;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 60px 40px;
  transform: translateY(80px);
  width: 90%;
  margin: 40px auto;
  max-width: 1100px;
}

.about-folder-tab {
  position: absolute;
  top: -50px;
  left: -3px;
  width: 250px;
  height: 50px;
  background-image: url("img/AboutMeHeader.png");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center 10px;
  background-color: #f9f2eb;
  border: 3px solid #1d3382; /* outline biru sama */
  border-bottom: none; /* biar nyatu sama folder */
  border-top-left-radius: 20px;
  border-top-right-radius: 40px;
  z-index: 2;
}

.folder-image-aboutme {
    width: 150%; /* Lebih kecil */
    max-width: 400px; /* Batas maksimal */
    height: auto;
    display: block;
    margin-left: 10px;
    transform: translateY(-80px);
    
}


.social-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 3px 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none; 
    display: flex; 
    align-items: center;
    color: #1d3382;
}

.social-username {
    margin-left: 15px;
    
}

.social-item:hover {
    color: #ff5f91;
}

.project-folder {
  position: relative;
  background-color: #f9f2eb; /* warna cream */
  box-shadow: 9px 9px 0 #ff5f91; /* bayangan biru */
  border: 3px solid #ff5f91;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 60px 40px;
  transform: translateY(80px);
  width: 90%;
  margin: 40px auto;
  max-width: 1100px;
}

.project-folder-tab {
  position: absolute;
  top: -50px;
  left: -3px;
  width: 250px;
  height: 50px;
  background-image: url("img/ProjectsHead.png");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center 10px;
  background-color: #f9f2eb;
  border: 3px solid #ff5f91; /* outline biru sama */
  border-bottom: none; /* biar nyatu sama folder */
  border-top-left-radius: 20px;
  border-top-right-radius: 40px;
  z-index: 2;
}

.btn-primary{
    display: inline-block;
    font-family: arial-rounded;
    padding: 2px 14px;
    background-color: #1d3382;   
    color: #f9f2eb;
    border-radius: 6px;      
    border-color: #1d3382;   /* bikin sudut membulat */
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px; 
    margin-bottom: 10px;  
    text-decoration: none; 
}

.btn-pink{
    display: inline-block;
    font-family: arial-rounded;
    padding: 2px 14px;
    background-color: #ff5f91;   
    color: #f9f2eb;
    border-radius: 6px;      
    border-color: #1d3382;   /* bikin sudut membulat */
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px; 
    margin-bottom: 10px;  
    text-decoration: none; 
}

.btn-pink:hover {
    background-color: #f6457d !important;
}

.card {
  border: 2px solid #1d3382; /* ganti warna sesukamu */
  border-radius: 12px;        /* opsional */
  background-color: #f9f2eb;
}

.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: #f9f2eb; /* cream background */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.btn-primary:hover {
    background-color: #ff5f91 !important;
}

/* BOX popup warna + border biru */
.popup-box {
  background: #f9f2eb; /* biar isi popup tetap keliatan */
  padding: 25px;
  border-radius: 12px;
  width: 360px;

  border: 3px solid #1d3382; /* border biru */

  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* CLOSE BUTTON */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;

  color: #1d3382;   /* warna button close */
  font-weight: bold;
}


.button-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 95, 145, 0.1);
    border-radius: 8px;
    padding: 0 15px;
    margin-top: 0;
}

.btn-special:hover ~ .button-details {
    opacity: 1;
    max-height: 150px;
    padding: 15px;
    margin-top: 10px;
}

.button-details:hover {
    opacity: 1;
    max-height: 150px;
    padding: 15px;
    margin-top: 10px;
}