@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  border:none;
  outline:none;
  font-family:"Poppins", sans-serif;
}

:root{
  --bg-color:#081b29;
  --main-color:#ea5f30;
  --text-color:#333;
  --second-text-color:#555;
  --white-color:#fff;
  --cover-color:linear-gradient(45deg,#972f0d,#ea5f30);
  --pages-color:linear-gradient(90deg,#fff,#eeeeee);
  --border:0.125rem solid #ea5f30;
  --box-shadow:0 0 0.6rem rgba(0,0,0,0.2);
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:var(--bg-color);
  color:var(--text-color);
  overflow:hidden;
}

.wrapper{
  position:relative;
  width:66rem;
  height:45rem;
  padding:2rem;
  perspective:250rem;
  animation:show-animate 2s forwards;
}

@keyframes show-animate{
  0%,30%{opacity:0; transform:rotate(-20deg);}
  100%{opacity:1; transform:rotate(0deg);}
}

.cover{
  position:absolute;
  top:0; left:0;
  width:50%;
  height:100%;
  background:var(--cover-color);
  box-shadow:var(--box-shadow);
  border-top-left-radius:0.6rem;
  border-bottom-left-radius:0.6rem;
  transform-origin:right;
}

.cover.cover-left{ z-index:-1; }
.cover.cover-right{
  z-index:100;
  transition:transform 1s cubic-bezier(0.645,0.045,0.355,1);
}
.cover.cover-right.turn{ transform:rotateY(180deg); }

.book{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  perspective:250rem;
}

/* PAGES */
.book .book-page{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background:var(--pages-color);
  box-shadow:0 0 0.6rem rgba(0,0,0,0.1);
  display:flex;
  padding:2rem;
  overflow:hidden;
}

/* ✅ FIX: was .book.page-left (wrong selector) */
.book-page.page-left{
  left:0;
  z-index:2;
  box-shadow:-0.6rem 0.6rem 0.6rem rgba(0,0,0,0.1);
}

.book-page.page-right{
  right:0;
  transform-style:preserve-3d;
  padding:1.5rem 2rem;
  transform-origin:left;
  transition:transform 1s cubic-bezier(0.645,0.045,0.355,1);
  z-index:5;
}

.book-page.page-right.turn{ transform:rotateY(-180deg); }

.book-page .page-front,
.book-page .page-back{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background:var(--pages-color);
  padding:1.5rem 2rem;
  overflow:hidden;
}

.book-page .page-front{ transform:rotateY(0deg) translateZ(1px); }
.book-page .page-back{ transform:rotateY(180deg) translateZ(1px); }

/* PROFILE */
.profile-page{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.profile-page img{
  width:170px;
  height:170px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 6px;
}

.profile-page h1{ font-size:2.7rem; line-height:1; text-align:center; }
.profile-page h3{ font-size:1.3rem; color:var(--main-color); text-align:center; }

.profile-page .social-media{ margin:0.6rem 0 0.8rem; }
.profile-page .social-media a{
  display:inline-flex;
  width:2.5rem;
  height:2.5rem;
  justify-content:center;
  align-items:center;
  background:transparent;
  border:var(--border);
  border-radius:50%;
  font-size:1.3rem;
  color:var(--main-color);
  margin:0.2rem;
  transition:0.5s;
}
.profile-page .social-media a:hover{ background:var(--main-color); color:var(--white-color); }

.profile-page p{ width:100%; text-align:justify; }

.profile-page .btn-box{ margin-top:1.2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

.btn{
  display:inline-flex;
  width:9.5rem;
  height:3rem;
  justify-content:center;
  align-items:center;
  background:var(--main-color);
  border:var(--border);
  border-radius:0.3rem;
  font-size:0.9rem;
  color:var(--white-color);
  font-weight:500;
  transition:0.5s;
}
.btn:hover{ background:transparent; color:var(--main-color); }

/* TYPO + BLOCKS */
.title{ text-align:center; margin-bottom:1rem; }

.edu-box{ border-left:var(--border); }
.edu-box .edu-content{ position:relative; padding-left:1.6rem; margin-bottom:1.2rem; }
.edu-box .edu-content p{ font-size:small; }
.edu-box .edu-content::before{
  content:"";
  position:absolute;
  top:0; left:-0.65rem;
  width:1.2rem; height:1.2rem;
  background:var(--main-color);
  border-radius:50%;
}
.edu-content .year{ color:var(--main-color); }
.edu-content .year i{ margin-right:0.4rem; }

.number-page{
  position:absolute;
  bottom:1.2rem;
  left:50%;
  transform:translateX(-50%);
}

.nextprev-btn{
  position:absolute;
  bottom:0.9rem;
  right:1.5rem;
  width:2rem;
  height:2rem;
  cursor:pointer;
  font-size:2rem;
  color:var(--second-text-color);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  transition:0.5s;
}
.nextprev-btn:hover{ color:var(--main-color); }
.nextprev-btn.back{ left:1.5rem; }

.services-box{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.services-box .services-content{
  flex:1 1 10rem;
  border:var(--border);
  border-radius:0.5rem;
  text-align:center;
  font-size:small;
  padding:0.8rem 0.6rem 1rem;
  transition:0.3s ease;
}
.services-box .services-content:hover{ box-shadow:var(--box-shadow); }
.services-content i{ font-size:1.4rem; color:var(--main-color); }
.services-content h3{ font-size:1.1rem; }

.skill-box{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.skill-box .skill-content{ flex:1 1 20rem; }
.skill-content{ line-height:1.2; margin-bottom:0.6rem; font-size:0.9rem; }
.skill-content .content{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.skill-content .content span{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(234,95,48,0.25);
  transition:0.3s ease;
}
.skill-content .content span i{ font-size:1.2rem; color:var(--main-color); }
.skill-content .content span:hover{ box-shadow:var(--box-shadow); }

.contact-box{ text-align:center; }
.contact-box .field{
  width:100%;
  background:transparent;
  border:var(--border);
  border-radius:0.3rem;
  padding:0.8rem;
  font-size:1rem;
  color:var(--text-color);
  margin-bottom:1rem;
}
.contact-box textarea{ resize:none; height:12rem; }
.contact-box .btn{ cursor:pointer; }
.contact-meta{ margin-top:12px; line-height:1.6; }

/* BACK PROFILE */
.back-profile{
  position:absolute;
  bottom:1.2rem;
  right:2rem;
  width:2rem; height:2rem;
  background:transparent;
  border:var(--border);
  border-radius:0.3rem;
  font-size:1.1rem;
  color:var(--main-color);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  transition:0.5s;
}
.back-profile:hover{ background:var(--main-color); color:var(--white-color); }
.back-profile p{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%) scale(0.5);
  font-size:1rem;
  color:var(--main-color);
  opacity:0;
  transition:0.5s;
}
.back-profile:hover p{
  opacity:1;
  transform:translateX(-50%) scale(1);
  top:-1.8rem;
}

/* =========================
   RESPONSIVE (DESKTOP->TABLET)
========================= */
@media (max-width: 980px){
  body{ overflow:auto; padding:16px; align-items:flex-start; }

  .wrapper{
    width:min(96vw, 900px);
    height:auto;
    padding:12px;
    perspective:180rem;
  }

  .book{
    height:560px;
  }

  .profile-page h1{ font-size:2rem; }
  .profile-page h3{ font-size:1.1rem; }
}

/* =========================
   MOBILE STACK MODE
   controlled by JS: body.mobile
========================= */
body.mobile{
  overflow:auto;
  padding:14px;
  align-items:flex-start;
}

body.mobile .wrapper{
  width:100%;
  height:auto;
  padding:10px;
  perspective:none;
  animation:none;
}

body.mobile .cover{ display:none; }

body.mobile .book{
  display:block;
  height:auto;
}

body.mobile .book .book-page{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:unset !important;
  margin:0 0 14px;
  border-radius:14px;
  overflow:hidden;
}

body.mobile .book-page.page-right{
  transform:none !important;
  transform-style:flat !important;
  transition:none !important;
  padding:0;
}

body.mobile .book-page .page-front,
body.mobile .book-page .page-back{
  position:relative !important;
  transform:none !important;
  height:auto !important;
  padding:16px !important;
  display:block !important;
}

body.mobile .nextprev-btn,
body.mobile .number-page,
body.mobile .back-profile{
  display:none !important;
}

body.mobile .profile-page{
  justify-content:flex-start;
  padding-top:14px;
}

body.mobile .profile-page img{
  width:120px;
  height:120px;
}

body.mobile .profile-page h1{ font-size:1.7rem; }
body.mobile .profile-page h3{ font-size:1.05rem; }
body.mobile .profile-page p{ font-size:0.95rem; line-height:1.55; }

body.mobile .services-box .services-content{
  flex:1 1 100%;
}
body.mobile .skill-box .skill-content{
  flex:1 1 100%;
}
/* =========================================
   ✅ MOBILE FIX (FORCE STACK — NO OVERLAP)
   Works even if JS still flips/z-index
========================================= */
@media (max-width: 900px){

  body{
    overflow: auto !important;
    padding: 14px !important;
    align-items: flex-start !important;
  }

  .wrapper{
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    perspective: none !important;
    animation: none !important;
  }

  /* NOTE: covers make it look messy on mobile */
  .cover{
    display: none !important;
  }

  .book{
    display: block !important;
    height: auto !important;
    perspective: none !important;
  }

  /* ✅ This is the MAIN FIX */
  .book .book-page{
    position: relative !important;     /* was absolute */
    width: 100% !important;           /* was 50% */
    height: auto !important;          /* was 100% */
    min-height: unset !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;        /* kills flip transform */
    transform-style: flat !important;
    transition: none !important;
    margin: 0 0 14px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    z-index: 1 !important;             /* ignore JS stacking */
  }

  /* ✅ Make front/back normal blocks (no absolute layers) */
  .book-page .page-front,
  .book-page .page-back{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    padding: 16px !important;
    display: block !important;
  }

  /* ✅ Even if JS adds .turn, ignore it */
  .book-page.page-right.turn{
    transform: none !important;
  }

  /* Hide flip controls on mobile (optional but recommended) */
  .nextprev-btn,
  .number-page,
  .back-profile{
    display: none !important;
  }

  /* Profile readability */
  .profile-page{
    justify-content: flex-start !important;
    padding-top: 16px !important;
  }

  .profile-page img{
    width: 120px !important;
    height: 120px !important;
  }

  .profile-page h1{
    font-size: 1.8rem !important;
    text-align: center !important;
  }

  .profile-page h3{
    font-size: 1.05rem !important;
    text-align: center !important;
  }

  .profile-page p{
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .btn-box{
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .btn{
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 !important;
  }

  /* Services/skills stack cleanly */
  .services-box .services-content,
  .skill-box .skill-content{
    flex: 1 1 100% !important;
  }

  .contact-box textarea{
    height: 10rem !important;
  }
}