.porto-stack {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@font-face {
  font-family: 'Clemente';
  src: url('ClementePDaj-RegularItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Clemente light italic';
  src: url('ClementePDaf-LightItalic.ttf') format('truetype');
}


@font-face {
  font-family: 'Avant Garde';
  src: url('ITC\ Avant\ Garde\ Gothic\ LT\ Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Avant Garde bold';
  src: url('ITC\ Avant\ Garde\ Gothic\ LT\ Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Avant Garde extra light';
  src: url('ITC\ Avant\ Garde\ Gothic\ LT\ Extra\ Light.ttf') format('truetype');
}


body {
  font-family: 'Clemente', sans-serif;
  font-size: 95px;
  margin: 50px 50px 0px 50px;
  background: #FAFAFA;
}

.judul-portofolio {
  position: relative;
  z-index: 2;
  letter-spacing: 10px;   /* jarak antar huruf */
  line-height: 160px;     /* jarak antar baris */
  text-align: center;
  display: block;
  margin-left: 0px;
  margin-right: 65px;
  margin-top: 125px;
  color: #022966;
}

.folio {
  display: inline-block; /* atau block jika ingin di bawah sendiri */
  margin-left: 300px;     /* geser ke kanan, ubah sesuai kebutuhan */
  
}

.kotak-gradient {
  position: absolute;
  left: -20%;
  top: 63%;
  transform: translateY(-50%);
  width: 350px;
  height: 110px;
  background: linear-gradient(90deg, #FF8A33 10%, #FFC857 40%, #FAFAFA 100%);
  border-radius: 0px;
  opacity: 0.85;
  z-index: 1;
  filter: blur(1.5px);
  display: inline-block;
}

.kotak-gradient1 {
  position: absolute;
  left: 69%;
  top: 37%;
  transform: translateY(-50%);
  width: 350px;
  height: 105px;
  background: linear-gradient(90deg, #FF8A33 10%, #FFC857 40%, #FAFAFA 100%);
  border-radius: 0px;
  opacity: 0.85;
  z-index: 1;
  filter: blur(1.5px);
  display: inline-block;
}

.kotak-gradient2 {
  position: absolute;
  left: 48.5%;
  top: 77.5%;
  transform: translateY(-50%);
  width: 10px;
  height: 20px;
  background: linear-gradient(90deg, #FF8A33 10%, #FFC857 40%, #FAFAFA 100%);
  border-radius: 0px;
  opacity: 0.85;
  z-index: 1;
  display: inline-block;
}

.kotak-gradient3 {
  position: absolute;
  left: -26%;
  top: 70%;
  transform: translateY(-50%);
  width: 7px;
  height: 250px;
  background: linear-gradient(360deg, #FF8A33 10%, #FFC857 40%, #FAFAFA 100%);
  border-radius: 0px;
  opacity: 0.85;
  z-index: 1;
  filter: blur(1px);
  display: inline-block;
}

.kotak-gradient4 {
  position: absolute;
  left: 7%;
  top: 14%;
  transform: translateY(-50%);
  width: 500px;
  height: 50px;
  background: linear-gradient(90deg, #FF8A33 10%, #fd9850 40%, #FAFAFA 100%);
  border-radius: 0px;
  opacity: 0.85;
  z-index: 1;
  filter: blur(4.5px);
  display: inline-block;
}

.circle-gradient5 {
  position: absolute;
  left: -2%;
  top: 18.5%;
  transform: translateY(-50%);
  width: 115px;
  height: 115px;
  background: linear-gradient(90deg, #FF8A33 5%, #FFC857 20%, #FAFAFA 100%);
  border-radius: 100px;
  opacity: 0.85;
  z-index: 2;
  filter: blur(2px);
  display: inline-block;
  opacity: 55%;
}

.circle-gradient6 {
  position: absolute;
  left: 80.5%;
  top: 18.5%;
  transform: translateY(-50%);
  width: 115px;
  height: 115px;
  background: linear-gradient(90deg, #FF8A33 5%, #FFC857 20%, #FAFAFA 100%);
  border-radius: 100px;
  opacity: 0.85;
  z-index: 2;
  filter: blur(2px);
  display: inline-block;
  opacity: 55%;
}

.circle-gradient7 {
  position: absolute;
  left: 93%;
  top: 69%;
  transform: translateY(-50%);
  width: 125px;
  height: 125px;
  background: linear-gradient(90deg, #FF8A33 5%, #FFC857 20%, #FAFAFA 100%);
  border-radius: 100px;
  opacity: 0.85;
  z-index: 2;
  filter: blur(2px);
  display: inline-block;
  opacity: 55%;
  
}

.circle-putih {
  position: absolute;
  left: 61%; /* atur sesuai kebutuhan */
  top: 28%;  /* atur sesuai kebutuhan */
  width: 90px;
  height: 90px;
  background: #fafafa;
  border-radius: 50%;
  z-index: 2;
  opacity: 1;
}

.circle-putih2{
   position: absolute;
  left: 0.1%; /* atur sesuai kebutuhan */
  top: 10%;  /* atur sesuai kebutuhan */
  width: 91px;
  height: 91px;
  background: #fafafa;
  border-radius: 50%;
  z-index: 2;
  filter: blur(4.5px);
  opacity: 1;
}

.nama-landing-page {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 56%;
  font-size: 22px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde', sans-serif;
  text-align: right;
}

.subhead-landing-page {
  position: absolute;
  z-index: 2;
  left: 51%;
  top: 75%;
  font-size: 17px;
  line-height: 40px;
  color: #C4C7CC;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 29px; 
  font-family: 'Avant Garde', sans-serif;
}

.ket-landing-page {
  position: absolute;
  z-index: 2;
  left: -33%;
  top: 75%;
  font-size: 17px;
  line-height: 40px;
  color: #C4C7CC;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 29px; 
  font-family: 'Avant Garde', sans-serif;
  transform: rotate(270deg);
}

.ket-landing-page2 {
  position: absolute;
  z-index: 2;
  left: 15%;
  top: 11.5%;
  font-size: 20px;
  line-height: 40px;
  color: #ffffff;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 29px; 
  font-family: 'Avant Garde bold', sans-serif;
  
}

.tahun-mulai {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 56%;
  font-size: 22px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde', sans-serif;
  text-align: right;
}


.btn-portfolio {
  position: absolute;
  z-index: 2;
  width: 250px;
  height: 60px;
  left: 35%;
  top: 85%;
  font-size: 20px;
  color: #022966;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 29px; 
  font-family: 'Avant Garde bold', sans-serif;
  background: linear-gradient(360deg, #FF8A33 5%, #FFC857 40%);
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Animation */
button:hover {
transform: scale(1.1);
background-color: #b85a12;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
stroke-width: 2px;
}

.thn-pertama {
  position: absolute;
  left: -5%;
  top: 49%;
  transform: translateY(-50%);
  opacity: 30%;
  width: 7px;
  height: 250px;
  z-index: 1;
  font-size: 280px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde extra light', sans-serif;
  text-align: right;
  filter: blur(2px);
}

.thn-kedua {
  position: absolute;
  left: 78%;
  top: 49%;
  transform: translateY(-50%);
  opacity: 20%;
  width: 7px;
  height: 250px;
  z-index: 1;
  font-size: 280px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde extra light', sans-serif;
  text-align: right;
  filter: blur(2px);
}

.thn-ketiga {
  position: absolute;
  left: 4%;
  top: 84%;
  transform: translateY(-50%);
  opacity: 15%;
  width: 7px;
  height: 250px;
  z-index: 1;
  font-size: 280px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde extra light', sans-serif;
  text-align: right;
  filter: blur(2px);
}

.thn-keempat {
  position: absolute;
  left: 91.5%;
  top: 84%;
  transform: translateY(-50%);
  opacity: 18%;
  width: 7px;
  height: 250px;
  z-index: 1;
  font-size: 280px;
  line-height: 40px;
  color: #FF8A33;
  letter-spacing: 0px;   /* jarak antar huruf */
  line-height: 25px; 
  font-family: 'Avant Garde extra light', sans-serif;
  text-align: right;
  filter: blur(2px);
}


/* =========================
   🌐 AUTO SCALE LAYOUT
   ========================= */
.porto-stack {
  transform-origin: top center;
  transition: transform 0.3s ease-in-out;
}

/* Tablet: skala sedikit mengecil */
@media (max-width: 992px) {
  .porto-stack {
    transform: scale(0.8);
  }
}

/* HP besar */
@media (max-width: 768px) {
  .porto-stack {
    transform: scale(0.6);
  }
}

/* HP kecil */
@media (max-width: 576px) {
  .porto-stack {
    transform: scale(0.45);
  }
}

/* =========================
   📱 FIX CENTERING
   ========================= */

/* Pastikan body jadi flex container */
body {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* biar dari atas */
  min-height: 100vh;
  overflow-x: hidden; /* cegah scroll horizontal */
}

/* Pastikan .porto-stack tetap di tengah */
.porto-stack {
  transform-origin: top center;
  margin: 0 auto;
  transition: transform 0.3s ease-in-out;
}

/* Atur skala di tiap device */
@media (max-width: 992px) {
  .porto-stack {
    transform: scale(0.95);
  }
}

@media (max-width: 768px) {
  .porto-stack {
    transform: scale(0.95);
  }
}

@media (max-width: 576px) {
  .porto-stack {
    transform: scale(2);
  }
}

/* =========================
   RESPONSIVE SCALING KHUSUS landing.html
   ========================= */
.porto-stack {
  transform-origin: top center;
  margin: 0 auto;
  transition: transform 0.3s ease-in-out;
}

/* Desktop → normal */
@media (min-width: 993px) {
  .porto-stack { transform: scale(1); }
}

/* Tablet */
@media (max-width: 992px) {
  .porto-stack { transform: scale(0.8); }
}

/* HP besar */
@media (max-width: 768px) {
  .porto-stack { transform: scale(0.8); }
}

/* HP kecil */
@media (max-width: 576px) {
  .porto-stack { transform: scale(0.9); }
}