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

/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  overflow-x: hidden; 
  line-height: 1.6;
  width: 100%;
}

/* ===== MAIN PORTFOLIO SECTION ===== */
.portfolio {
  width: 100%;
  min-height: 100vh;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #c5f0a8 0%, #6abf36 30%, #2e8b14 70%, #1a5e0a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  position: absolute;
  top: 35px;
  left: 0;
  padding: 0 40px;
}

.hero-name {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.6;
}

.hero-email {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.hero-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portfolio-text {
  font-size: 100px;
  font-weight: 800;
  color: #000;
  letter-spacing: -1px;
}

.uiux-text {
  font-size: 100px;
  font-weight: 800;
  color: #ff8c00;
  letter-spacing: -1px;
}

/* ===== CONTENT ===== */
.content {
  margin: 100px auto;
  max-width: 1200px;
}

/* ===== ABOUT ===== */
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-bottom: 70px;
}

.about-photo img {
  width: 260px;
  height: 310px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 4px;
}

.about-content h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.role-badge {
  display: inline-block;
  background: #ff8c00;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.about-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0D793A;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-content p {
  font-size: 14px;
  color: #000000;
  max-width: 580px;
  line-height: 2;
}

/* ===== INFO GRID (SKILL & EDUCATION) ===== */
.info-grid {
  display: flex;
  justify-content: space-around;
  gap: 200px;
  margin-bottom: 60px;
}

.section-title {
  color: #0D793A;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.skill .list-items {
  list-style: none;
}

.skill .list-items li {
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 400;
  color: #000000;
}

.edu-details p {
  font-size: 15px;
  margin-bottom: 6px;
  line-height: 2;
}

.edu-details .university {
  font-weight: 600;
}

.edu-details .year {
  color: #e6a800;
  font-weight: 600;
  margin-top: 4px;
}

/* ===== TOOLS ===== */
.tools {
  margin-bottom: 40px;
  margin-left: 130px;
}

.tools-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.icon-box {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: transform 0.3s ease;
}

.icon-box:hover {
  transform: translateY(-5px);
}

.icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Agar logo tidak terpotong */
  padding: 8px; /* Beri sedikit padding agar tidak mepet */
}

/* ===== SECTION UTAMA ===== */
.greennest-section {
  width: 100%;
  background: #ffffff;
}

/* ===== JUDUL UTAMA ===== */
.main-title {
  text-align: center;
  margin-bottom: 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-title h1 {
  font-size: 100px;
  font-weight: 800;
  color: #0D793A;
  letter-spacing: -2px;
  margin-bottom: 10px;
}

.main-title p {
  font-size: 40px;
  font-weight: 500;
  color: #E5A800;
  letter-spacing: 3px;
}

/* ===== KONTEN PROJECT ===== */
.project-content {
  display: flex;
  gap: 60px;
  align-items: center;
  margin: 0 auto;
  background: #E0F7FA;
  padding: 60px;
  border-radius: 16px;
  margin-bottom: 100px;
}

/* ===== GAMBAR MOCKUP (KIRI) ===== */
.mockup-image {
  flex: 0 0 480px;
  margin-left: 100px;
}

.mockup-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}

/* ===== DESKRIPSI (KANAN) ===== */
.project-description {
  flex: 1;
  padding: 30px 0;
  min-height: 50vh;
  max-width: 600px;
}

.project-description h2 {
  font-size: 28px;
  font-weight: 700;
  color: #E5A800;
  margin-bottom: 8px;
}

.project-description h3 {
  font-size: 16px;
  font-weight: 500;
  color: #0D793A;
  margin-bottom: 30px;
}

.project-description p {
  font-size: 14px;
  color: #000000;
  line-height: 1.8;
  margin-bottom: 18px;
  text-align: justify;
}

.project-description p:last-child {
  margin-bottom: 0;
}

/* ===== ABOUT US DELIVERABLE ===== */
.about-us-deliverable {
  max-width: 1200px;
  margin: 0 auto;
}

.deliverable-title {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  color: #0D793A;
  margin-left: 105px;
  margin-bottom: 50px;
  letter-spacing: 0.5px;
}

.about-us-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.about-us-image img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ===== DESIGN THINKING ===== */
.design-thinking {
  max-width: 1200px;
  margin: 40px auto;
  padding-top: 40px;
}

.dt-title {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #0D793A;
  letter-spacing: 6px;
  margin-bottom: 50px;
  text-transform: uppercase;
}

.dt-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dt-step {
  flex: 1;
  text-align: center;
}

.dt-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
  margin-bottom: 8px;
}

.dt-box {
  display: inline-block;
  background: #0D793A;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

.dt-step p {
  font-size: 14px;
  color: #000;
  line-height: 2;
  text-align: center;
}

.dt-arrow {
  font-size: 24px;
  color: #156B33;
  margin-top: 16px;
  flex-shrink: 0;
  align-self: center;
}

/* ===== PROBLEM & SOLUTION ===== */
.problem-solution {
  width: 100%;        
  margin: 80px 0 0;   
  padding: 0;       

}

/* Trik agar gambar full width melewati padding section */
.mockup-laptop {
  width: calc(100% + 200px); 
  margin-left: -100px;       
  margin-right: -100px;   
  margin-bottom: 60px;
}

.mockup-laptop img {
  width: 100%;
  max-width: none;    
  display: block;
  border-radius: 0;     
  box-shadow: none;    
}

.ps-content {
  display: flex;
  gap: 120px;
  justify-content: space-between;
  max-width: 1200px;    
  margin: 0 auto;       
  padding: 0 80px;      
}

.ps-box {
  flex: 1;
}

.ps-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0D793A;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.ps-box p {
  font-size: 14px;
  color: #000;
  line-height: 1.8;
  text-align: justify;
  max-width: 400px;
}

/* ===== COMMON STYLES ===== */
.section-green-title {
  color: #0D793A;
  font-size: 22px;
  text-align: left;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.sub-title {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #000;
  line-height: 1.5;
}

ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000;
  font-weight: bold;
}

/* ===== TARGET USERS ===== */
.target-users {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 80px;
}

.users-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.user-col {
  flex: 1;
}

/* ===== RESEARCH SECTION ===== */
.research-section {
  background-color: #E0F7FA;
  padding: 60px 240px;
  margin: 80px 0;
}

.research-section h2.section-green-title {
  text-align: left;
  margin-bottom: 40px;
}

.research-item {
  max-width: 100%; 
  margin: 0 0 30px 0; 
  padding-left: 0;
  text-align: left;
}

.research-item h3.sub-title {
  margin-left: 0; 
  font-weight: 700;
}

.research-item p {
  margin-left: 0; 
  max-width: 800px; 
}

/* ===== QUANTITATIVE RESEARCH ===== */
.quantitative-section {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 80px;
}

.section-desc {
  font-size: 14px;
  color: #000;
  margin-bottom: 60px;
}

.stats-container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.stat-item {
  flex: 1;
  text-align: left;
}

/* Staggered alignment untuk efek visual seperti gambar */
.stat-item:nth-child(1) { margin-top: 0; }
.stat-item:nth-child(2) { margin-top: 40px; }
.stat-item:nth-child(3) { margin-top: 100px; }

.stat-number {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: #0D793A;
  margin-bottom: 10px;
  line-height: 1;
}

.stat-text {
  font-size: 14px;
  color: #000;
  line-height: 1.5;
  max-width: 240px;
}

/* ===== QUALITATIVE RESEARCH ===== */
.qualitative-research {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 80px;
}

.qr-description {
  font-size: 15px;
  color: #000;
  line-height: 1.8;
  margin-bottom: 50px;
  max-width: 800px;
}

.questions-section {
  margin-top: 40px;
}

.questions-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

.questions-list {
  list-style: none;
  padding: 0;
}

.questions-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #000;
  line-height: 1.6;
}

.questions-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #156B33;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
}

/* ===== USER PERSONA ===== */
.user-persona-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 80px;
}

.persona-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* LEFT CARD */
.persona-left {
  flex: 0 0 320px;
  background-color: #C8F7C5;
  border-radius: 24px;
  padding: 30px;
  text-align: center;
}

.persona-photo img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  background: #fff;
}

.persona-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.persona-role {
  font-size: 14px;
  color: #000;
  margin-bottom: 20px;
}

.persona-details {
  text-align: left;
  margin-bottom: 24px;
}

.persona-details p {
  font-size: 13px;
  color: #000;
  margin-bottom: 6px;
  line-height: 1.4;
}

.persona-details strong {
  color: #1a1a1a;
}

.persona-bio {
  text-align: left;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 20px;
}

.persona-bio h4 {
  font-size: 15px;
  font-weight: 600;
  color: #0D793A;
  margin-bottom: 10px;
}

.persona-bio p {
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* RIGHT CARDS */
.persona-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.persona-box {
  background-color: #F8F8F8;
  border-radius: 16px;
  padding: 24px;
}

.persona-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0D793A;
  margin-bottom: 12px;
}

.persona-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.persona-box ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #000;
  line-height: 1.5;
}

.persona-box ul li:last-child {
  margin-bottom: 0;
}

.persona-box ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000;
  font-weight: bold;
}

/* ==========================================================================
   DESIGN SYSTEM SECTION
   ========================================================================== */

.design-system-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 80px;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 30px;
}

.ds-item {
  margin-bottom: 20px;
}

.ds-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 16px;
}

/* ----- Color Swatches ----- */
.color-swatches {
  display: flex;
  gap: 40px;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.circle.primary-color {
  background-color: #00793A;
}

.circle.secondary-color {
  background-color: #A7F1CC;
}

.hex {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

.label {
  font-size: 12px;
  color: #000;
}

/* ----- Typography ----- */
.typo-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.font-normal,
.font-bold {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: #000;
}

.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

/* ----- Icons ----- */
.icons-row {
  display: flex;
  gap: 24px;
  align-items: center;
  color: #0D793A;
  font-size: 24px;
}

/* ----- Components (Buttons) ----- */
.components-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.btn-filled,
.btn-outline {
  padding: 10px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  font-family: 'Poppins', sans-serif;
}

.btn-filled {
  background: #0D793A;
  color: #fff;
  border: none;
}

.btn-outline {
  background: transparent;
  color: #0D793A;
  border: 2px solid #0D793A;
}

/* ==========================================================================
   BUSINESS IMPACT & METRICS SECTION
   ========================================================================== */

.impact-section {
  max-width: 1200px;
  margin: 100px auto 80px;
  padding: 0 80px;
}

.impact-grid {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.impact-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.impact-icon-circle {
  width: 72px;
  height: 72px;
  background-color: #F5F5F5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact-badge {
  background-color: #C8F7C5;
  color: #0D793A;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 50px;
}

.impact-desc {
  background-color: #F8F8F8;
  padding: 24px 20px;
  border-radius: 14px;
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  width: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== FOOTER BAR ===== */
.footer-bar {
  width: 100%;
  background-color: #0D793A;
  padding: 16px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

/* ===== MAIN SECTION ===== */
.podcast-section {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}

/* ===== HERO SECTION ===== */
.podcast-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 100px;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-content {
  flex: 1;
}

.hero-title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -2px;
}

.title-black {
  color: #1a1a1a;
}

.title-green {
  color: #0D793A;
}

.hero-subtitle {
  font-size: 32px;
  font-weight: 600;
  color: #E5A800;
  letter-spacing: 1px;
}

.hero-mockup {
  flex: 0 0 320px;
}

.hero-mockup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  background: none;
}

/* ===== ABOUT APPLICATION ===== */
.about-application {
  display: flex;
  align-items: center;
  gap: 150px;
  padding: 80px 100px;
  background: #DAFBFF;
  border-radius: 32px;
  margin: 60px auto;

}

.about-content {
  flex: 1;
  max-width: 580px;
}

.about-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.text-green {
  color: #0D793A;
}

.about-text {
  font-size: 14.5px;
  color: #000;
  line-height: 1.85;
  margin-bottom: 18px;
  text-align: justify;
}

/* ===== MOCKUP CONTAINER (DIPERBESAR) ===== */
.about-mockups {
  flex: 0 0 520px; /* Lebar фикс lebih besar */
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-mockup {
  width: 100%;
  max-width: 520px;
}

.phone-mockup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  transition: transform 0.3s ease;
}

/* ===== PROBLEM & SOLUTION ===== */
.ps-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
}

.ps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 80px;
}

.ps-text {
  flex: 1;
}

.ps-title {
  font-size: 24px;
  font-weight: 700;
  color: #0D793A;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ps-desc {
  font-size: 14.5px;
  color: #000000;
  line-height: 1.8;
  text-align: justify;
}

.ps-image {
  flex: 0 0 45%;
  max-width: 450px;
}

.ps-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ps-row:nth-child(2) {
  flex-direction: row-reverse;
}

/* ===== GOALS ===== */
.goals-section {
  margin-bottom: 60px;
}

.goals-title {
  margin-bottom: 20px;
}

.goals-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
}

.goals-list li {
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.goals-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0D793A;
  font-size: 20px;
  line-height: 1;
}

/* ===== SHOWCASE WRAPPER (TANPA SECTION BARU) ===== */
.podcast-showcase-wrapper {
  width: 100%;
  margin-top: 60px;
  background: #0D793A; /* Hijau untuk bar */
}

.green-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 60px;
}

.green-bar span {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

.showcase-img-box {
  width: 100%;
  line-height: 0; /* Hapus celah default di bawah gambar */
  background-color: #e8e4d9; /* Fallback warna dinding */
}

.showcase-img-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== INSIGHTS & PERSONA WRAPPER ===== */
.insights-persona-wrapper {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 80px;
  margin-bottom: 180px;
}

.block-title {
  color: #0D793A;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
}

/* ===== USER INSIGHTS (CHAT) ===== */
.insights-block { margin-bottom: 80px; }

.chat-flow {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: 85%;
}

.chat-bubble.left { align-self: flex-start; }
.chat-bubble.right { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bubble-content {
  padding: 20px 24px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.bubble-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.bubble-content.gray {
  background-color: #F2F2F2;
  color: #000;
  border-top-left-radius: 4px;
}

.bubble-content.green {
  background-color: #0D793A;
  color: #fff;
  border-top-right-radius: 4px;
}

/* ===== USER PERSONA ===== */
.persona-block { margin-bottom: 80px; }

/* Top Card */
.persona-top-card {
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: #E8F5E9;
  border: 2px solid #0D793A;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.persona-main-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.persona-details { flex: 1; }

.detail-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  font-size: 15px;
  padding : 5px;
  color: #000;
}
.detail-row:last-child { margin-bottom: 0; }
.detail-row p strong { color: #0D793A; font-weight: 600; }

/* Bottom Grid */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}

.p-card {
  padding: 24px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.p-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}

.p-card ul {
  list-style: none;
  padding: 0;
}

.p-card ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}

.p-card ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Card Variants */
.bio-card {
  grid-row: span 2;
  background-color: #0D793A;
  color: #fff;
}
.bio-card h3 { color: #fff; }
.bio-card p { color: #e0e0e0; }
.bio-card ul li { color: #e0e0e0; }
.bio-card ul li::before { color: #fff; }

.goals-card, .frustrations-card, .behaviors-card, .needs-card {
  background-color: #F8F8F8;
  color: #333;
}

.goals-card h3, .frustrations-card h3, .behaviors-card h3, .needs-card h3 {
  color: #0D793A;
}

.goals-card ul li::before, .frustrations-card ul li::before, 
.behaviors-card ul li::before, .needs-card ul li::before {
  color: #0D793A;
}

/* ===== WIREFRAME & DESIGN SYSTEM ===== */
.podcast-wireframe-ds {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}

.ds-title {
  color: #0D793A;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* --- Wireframe Block --- */
.wireframe-block {
  width: 100vw;              /* ✅ PENTING: Lebar penuh viewport */
  max-width: 100vw;          /* ✅ Pastikan tidak lebih dari viewport */
  margin-left: calc(50% - 50vw); /* ✅ Trik agar tetap center tapi full width */
  
  background-color: #E0F7FA;
  padding: 60px 0;           /* Padding atas-bawah saja, kiri-kanan 0 */
  margin-bottom: 80px;
}

.wireframe-block .ds-title {
  max-width: 1200px;         /* Judul tetap rapi di tengah */
  margin: 0 auto 30px;       /* Center judul */
  padding: 0 80px;           /* Padding kiri-kanan untuk judul */
}

.wireframe-img-wrap {
  max-width: 1200px;         /* Batasi lebar konten agar tidak terlalu lebar */
  margin: 0 auto;            /* Center gambar */
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.wireframe-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Design System Grid --- */
.design-system-block { margin-bottom: 80px; }

.ds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 40px 50px;
}

.ds-item { display: flex; flex-direction: column; }

.ds-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 14px;
}

/* Icons */
.icons-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ds-icon {
  width: 28px;       /* Ukuran konsisten agar rapi */
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Color */
.color-swatches { display: flex; gap: 30px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.circle { width: 46px; height: 46px; border-radius: 50%; }
.circle.primary { background-color: #00A7C1; }
.circle.secondary { background-color: #F0F0F0; border: 1px solid #e0e0e0; }
.hex { font-size: 13px; font-weight: 600; color: #000; }
.label { font-size: 12px; color: #666; }

/* Typography */
.typo-list p { margin-bottom: 8px; font-size: 15px; color: #000; }
.font-normal { font-family: 'Khula', sans-serif; font-weight: 400; }
.font-bold { font-family: 'Khula', sans-serif; font-weight: 700; }
.font-italic { font-family: 'Khula', sans-serif; font-style: italic; }

/* Cards Image */
.card-single-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Icons */
.icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* Components */
.components-wide { grid-column: span 2; }

.comp-label {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  margin: 8px 0 6px;
}
.comp-label:first-child { margin-top: 0; }

.comp-row { display: flex; gap: 12px; align-items: center; }

.btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  border: none;
  font-family: inherit;
}
.btn-primary { background: #00A7C1; color: #fff; }
.btn-disabled { background: #EAEAEA; color: #A0A0A0; }
.btn-sec.outline { background: #fff; color: #00A7C1; border: 1.5px solid #00A7C1; }
.btn-sec.filled { background: #00A7C1; color: #fff; opacity: 0.85; }

.input-box {
  padding: 8px 12px;
  border: 1.5px solid #E0E0E0;
  border-radius: 6px;
  font-size: 13px;
  color: #999;
  background: #fff;
  font-family: inherit;
}

/* ===== MOCKUP & RESULT SECTION ===== */
.mockup-result-wrapper {
  margin: 0 auto;
  padding: 0 80px;
  background-color: #E0F7FA; 
  padding-top: 60px;
  padding-bottom: 60px;
}

.podcast-subtitle {
  color: #156B33;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

/* Grid Mockup */
.mockup-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Agar rapi di tengah */
  gap: 30px;
  margin-bottom: 80px;
}

.mockup-item {
  width: 240px; /* Lebar fix agar bentuk HP konsisten */
  overflow: hidden;
  transition: transform 0.3s ease;
}

.mockup-item:hover {
  transform: translateY(-5px);
}

.mockup-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Result Section */
.result-block {
  margin: 100px;
}

.result-content p {
  font-size: 15px;
  color: #000;
  line-height: 1.7;
  margin-bottom: 16px;
}

.result-content p:last-child {
  margin-bottom: 0;
}

/* ===== MAIN SECTION ===== */
.rental-section {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}

/* ===== HERO SECTION ===== */
.rental-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 100px;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-content {
  flex: 1;
}

.hero-title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -2px;
}

.title-black {
  color: #1a1a1a;
}

.title-green {
  color: #0D793A;
}

.hero-subtitle {
  font-size: 32px;
  font-weight: 600;
  color: #E5A800;
  letter-spacing: 1px;
}

.hero-mockup {
  flex: 0 0 320px;
}

.hero-mockup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ===== ABOUT APPLICATION ===== */
.about-rental-app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 200px;
  padding: 80px 100px;
  background: #E0F7FA;
  margin: 60px auto;
}

.about-mockup-left {
  flex: 0 0 320px;
}

.about-mockup-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.about-content-right {
  flex: 1;
  max-width: 600px;
}

.about-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.text-green {
  color: #0D793A;
}

.about-text {
  font-size: 14.5px;
  color: #000000;
  line-height: 1.85;
  margin-bottom: 18px;
  text-align: justify;
}

.about-text:last-child {
  margin-bottom: 0;
}

/* ===== PROBLEM, SOLUTION, GOALS, TARGET USERS ===== */
.rental-problem-solution {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
}

/* Problem & Solution Grid */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

.ps-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ps-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-bottom: 24px;
  display: block;
}

.ps-title {
  font-size: 22px;
  font-weight: 700;
  color: #0D793A;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ps-desc {
  font-size: 14.5px;
  color: #000;
  line-height: 1.7;
  text-align: justify;
}

/* Goals Block */
.goals-block {
  margin-bottom: 80px;
}

.goals-desc {
  font-size: 15px;
  color: #000;
  line-height: 1.7;
  max-width: 900px;
}

/* Target Users Block */
.target-users-block {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.target-users-image {
  flex: 0 0 320px;
}

.target-users-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
  object-fit: cover;
}

.target-users-list {
  flex: 1;
  background-color: #F8F8F8;
  padding: 40px;
  border-radius: 20px;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
}

.user-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.user-number {
  font-size: 32px;
  font-weight: 700;
  color: #0D793A;
  min-width: 40px;
}

.user-text {
  font-size: 15px;
  color: #000;
  line-height: 1.5;
}

/* ===== RENTAL USER FLOW SECTION ===== */
.rental-userflow-section {
  width: 100%;
  background-color: #ffffff; /* Background putih agar gambar menyatu */
  padding: 60px 0;
  margin-bottom: 80px;
  box-sizing: border-box;
}

.userflow-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}

.userflow-title {
  color: #156B33;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}

.userflow-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  /* Opsional: Beri shadow tipis jika section ini nanti di atas background warna lain */
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.05); */
  text-align: center;
}

.userflow-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== SHOWCASE WITH GREEN BARS ===== */
.rental-showcase-wrapper {
  width: 100%;
  background-color: #0D793A;
  margin-top: 60px;
}

.green-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 80px;
  background-color: #0D793A;
}

.green-bar span {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

.showcase-main-image {
  width: 100%;
  line-height: 0;
  background-color: #e0e0e0;
}

.showcase-main-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== USER PERSONA SECTION ===== */
.persona-section-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
}

.section-title {
  color: #0D793A;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* --- Top Card --- */
.persona-top-card {
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: #ffffff;
  border: 2px solid #0D793A;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 40px;
}

.persona-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.persona-info-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #000;
}

.info-row p strong {
  color: #0D793A;
}

/* --- Bottom Layout --- */
.persona-bottom-layout {
  display: flex;
  gap: 20px;
}

/* Bio Card */
.bio-card {
  flex: 0 0 35%; /* Lebar sekitar 35% */
  background-color: #0D793A;
  color: #fff;
  padding: 24px;
  border-radius: 16px;
}

.bio-card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.bio-card p {
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
}

/* Details Grid */
.persona-details-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Kolom */
  gap: 20px;
}

.detail-card {
  background-color: #F8F8F8;
  padding: 20px;
  border-radius: 16px;
}

.detail-card h3 {
  color: #0D793A;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}

.detail-card ul {
  list-style: none;
  padding: 0;
}

.detail-card ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: #000;
  line-height: 1.5;
}

.detail-card ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0D793A;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4;
}

/* ===== USER PERSONA: JASON WOODS ===== */
.persona-jason-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
}

/* Top Card */
.jason-top-card {
  display: flex;
  align-items: center;
  gap: 30px;
  border: 2px solid #0D793A;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  background: #fff;
}

.jason-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.jason-details-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #000;
}

.detail-row p strong {
  color: #000;
}

.highlight {
  color: #0D793A;
  font-weight: 600;
}

/* Bottom Layout */
.jason-bottom-content {
  display: flex;
  gap: 24px;
}

/* Bio Card */
.jason-bio-card {
  flex: 0 0 35%;
  background-color: #0D793A;
  color: #fff;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.jason-bio-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.jason-bio-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #e0e0e0;
}

/* Details Cards Grid */
.jason-details-cards {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-box {
  background-color: #F8F9FA;
  padding: 20px;
  border-radius: 16px;
}

.info-box h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0D793A;
  margin-bottom: 12px;
}

.info-box ul {
  list-style: none;
  padding: 0;
}

.info-box ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #000;
  line-height: 1.5;
}

.info-box ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0D793A;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

/* ===== DESIGN SYSTEM: RENTAL APP ===== */
.ds-rental-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
}

.ds-rental-title {
  color: #0D793A;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.ds-rental-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
}

.ds-card {
  display: flex;
  flex-direction: column;
}

.ds-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
}

/* Color Swatches */
.color-row {
  display: flex;
  gap: 35px;
}

.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.circle.teal { background-color: #0D9488; }
.circle.purple { background-color: #7C3AED; }
.circle.light-gray { 
  background-color: #EFEFEF; 
  border: 1px solid #e0e0e0;
}

.hex-code {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

.color-label {
  font-size: 12px;
  color: #000;
  text-align: center;
}

/* Typography */
.typo-examples p {
  margin-bottom: 10px;
  font-size: 15px;
  color: #000;
}

.font-normal { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; }
.font-bold { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
.font-italic { font-family: 'Plus Jakarta Sans', sans-serif; font-style: italic; }

/* Icons */
.icons-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  justify-items: center;
}

/* Components */
.components-wide {
  grid-column: span 2;
}

.components-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comp-label {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}

.btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-primary-normal { background-color: #0D9488; color: #fff; }
.btn-disabled { background-color: #D1D5DB; color: #9CA3AF; }
.btn-secondary { background-color: #7C3AED; color: #fff; }

.input-box {
  padding: 8px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #6B7280;
}

.input-box[disabled] {
  background-color: #F9FAFB;
  color: #9CA3AF;
}

/* ===== UX DECISION SECTION ===== */
.ux-decision-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 100px;
  background: #ffffff;
}

.ux-decision-title {
  color: #0D793A;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 40px;
}

.decision-block {
  margin-bottom: 90px;
}

.decision-block:last-child {
  margin-bottom: 0;
}

.decision-number {
  font-size: 42px;
  font-weight: 800;
  color: #0D793A;
  margin-bottom: 8px;
  line-height: 1;
}

.decision-heading {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 24px;
}

.decision-content {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* Membalik urutan untuk block ke-2 */
.decision-block.reverse .decision-content {
  flex-direction: row-reverse;
}

.decision-image {
  flex: 0 0 48%;
  max-width: 480px;
}

.decision-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background-color: #f8f9fa; /* Fallback jika gambar transparan */
}

.decision-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.text-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dot Indicators */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot.challenge { background-color: #E53935; } /* Merah */
.dot.decision { background-color: #2E7D32; } /* Hijau */
.dot.why      { background-color: #F9A825; } /* Kuning/Oranye */

.text-item p {
  font-size: 14px;
  color: #000;
  line-height: 1.65;
  margin: 0;
}

/* ===== MOCKUP BLOCK ===== */
.rental-mockup-wrapper {
  background-color: #E0F7FA; /* Background biru muda sesuai gambar */
  padding: 60px 80px;
  margin: 0 auto 60px;
}

.mockup-title {
  color: #0D793A;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}

.mockup-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.mockup-phone {
  width: 250px;
  border-radius: 24px;
  padding: 10px;
  transition: transform 0.3s ease;
}

.mockup-phone:hover {
  transform: translateY(-6px);
}

.mockup-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* ===== RESULT & LEARNING GROWTH ===== */
.rental-result-wrapper {
  margin: 0 auto;
  padding: 80px 100px;
}

/* Result Block */
.result-block {
  margin-bottom: 80px;
}

.result-title {
  color: #0D793A;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}

.result-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0D793A;
}

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-list li {
  font-size: 14.5px;
  color: #000;
  line-height: 1.8;
  margin-bottom: 14px;
  padding-left: 20px;
  position: relative;
}

.result-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0D793A;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
}

/* Learning & Growth Block */
.learning-block {
  margin-top: 60px;
}

.learning-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 30px;
}

.learning-box {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e0e0e0;
  padding: 40px 60px;
  margin-top: 20px;
}

.learning-box p {
  font-size: 15px;
  color: #000;
  line-height: 1.7;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Corner Squares */
.corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #0D793A;
}

.corner.top-left {
  top: -6px;
  left: -6px;
}

.corner.top-right {
  top: -6px;
  right: -6px;
}

.corner.bottom-left {
  bottom: -6px;
  left: -6px;
}

.corner.bottom-right {
  bottom: -6px;
  right: -6px;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* ===== LAPTOP & SMALL DESKTOP (Max 1200px) ===== */
@media screen and (max-width: 1200px) {
  .hero-title { font-size: 80px; }
  .portfolio-text, .uiux-text { font-size: 80px; }
  
  .main-title h1 { font-size: 80px; }
  .main-title p { font-size: 32px; }
  
  .project-content { padding: 40px; }
  .mockup-image { flex: 0 0 400px; }
  
  .about-application, .about-rental-app { gap: 80px; }
  .ps-content { gap: 60px; padding: 0 60px; }
}

/* ===== TABLET (Max 992px) ===== */
@media screen and (max-width: 992px) {
  /* Hero */
  .hero-title { font-size: 60px; }
  .portfolio-text, .uiux-text { font-size: 60px; }
  .hero-email { font-size: 16px; }
  .hero-name { font-size: 16px; }
  
  /* Main Title */
  .main-title h1 { font-size: 60px; }
  .main-title p { font-size: 24px; }
  
  /* About */
  .about { flex-direction: column; gap: 40px; }
  .about-photo img { width: 200px; height: 240px; }
  
  /* Info Grid */
  .info-grid { flex-direction: column; gap: 40px; }
  
  /* Project Content */
  .project-content { 
    flex-direction: column; 
    padding: 40px 30px;
  }
  .mockup-image { 
    flex: 0 0 100%; 
    margin-left: 0;
    max-width: 500px;
    margin: 0 auto;
  }
  .project-description { 
    max-width: 100%; 
    padding: 20px 0;
  }
  
  /* Design Thinking */
  .dt-flow { flex-direction: column; gap: 20px; }
  .dt-arrow { transform: rotate(90deg); margin: 10px 0; }
  
  /* Problem Solution */
  .ps-content { 
    flex-direction: column; 
    gap: 40px;
    padding: 0 30px;
  }
  .ps-box p { max-width: 100%; }
  
  /* Target Users */
  .users-grid { flex-direction: column; gap: 30px; }
  
  /* Research */
  .research-section { padding: 40px 30px; }
  
  /* Quantitative */
  .quantitative-section { padding: 0 30px; }
  .stats-container { flex-direction: column; gap: 40px; }
  .stat-item:nth-child(2),
  .stat-item:nth-child(3) { margin-top: 0; }
  
  /* Qualitative */
  .qualitative-research { padding: 0 30px; }
  
  /* User Persona */
  .user-persona-section,
  .persona-section-wrapper,
  .persona-jason-wrapper,
  .ds-rental-wrapper,
  .ux-decision-wrapper,
  .rental-result-wrapper { padding: 60px 30px; }
  
  .persona-layout { flex-direction: column; }
  .persona-left { flex: 0 0 100%; }
  
  .persona-grid { grid-template-columns: 1fr; }
  .bio-card { grid-row: span 1; }
  
  /* Podcast Hero */
  .podcast-hero { 
    flex-direction: column; 
    text-align: center;
    padding: 60px 30px;
  }
  .hero-content { flex: 0 0 100%; }
  .hero-title { font-size: 50px; }
  .hero-mockup { flex: 0 0 auto; }
  
  /* About Application */
  .about-application,
  .about-rental-app { 
    flex-direction: column; 
    gap: 40px;
    padding: 40px 30px;
  }
  .about-mockups,
  .about-mockup-left { flex: 0 0 100%; }
  
  /* PS Container */
  .ps-container { padding: 60px 30px; }
  .ps-row { 
    flex-direction: column; 
    gap: 30px;
  }
  .ps-row:nth-child(2) { flex-direction: column; }
  .ps-image { flex: 0 0 100%; max-width: 400px; }
  
  /* Green Bar */
  .green-bar { 
    flex-wrap: wrap; 
    padding: 12px 20px;
    gap: 10px;
  }
  .green-bar span { font-size: 13px; }
  
  /* Chat Flow */
  .chat-bubble { max-width: 100%; }
  
  /* Wireframe */
  .wireframe-block { padding: 40px 0; }
  .wireframe-block .ds-title { padding: 0 30px; }
  .wireframe-img-wrap { padding: 20px; }
  
  /* DS Grid */
  .ds-grid { grid-template-columns: 1fr; gap: 30px; }
  .components-wide { grid-column: span 1; }
  
  /* Impact Grid */
  .impact-grid { flex-direction: column; gap: 30px; }
  
  /* Mockup Grid */
  .mockup-grid { justify-content: center; }
  .mockup-item { width: 200px; }
  
  /* Rental Mockup */
  .mockup-phone { width: 200px; }
  
  /* UX Decision */
  .decision-content { 
    flex-direction: column; 
    gap: 30px;
  }
  .decision-block.reverse .decision-content { 
    flex-direction: column; 
  }
  .decision-image { flex: 0 0 100%; max-width: 100%; }
  
  /* Footer */
  .footer-content { 
    flex-direction: column; 
    gap: 8px;
    padding: 0 30px;
    text-align: center;
  }
}

/* ===== MOBILE (Max 768px) ===== */
@media screen and (max-width: 768px) {
  /* Hero */
  .hero { padding: 30px 20px; }
  .hero-top { 
    flex-direction: column; 
    gap: 10px;
    padding: 0 20px;
    position: relative;
    top: 20px;
  }
  .hero-name, .hero-email { 
    font-size: 14px; 
    text-align: center;
  }
  .hero-title { 
    flex-direction: column;
    gap: 5px;
  }
  .portfolio-text, .uiux-text { 
    font-size: 40px;
    text-align: center;
  }
  
  /* Main Title */
  .main-title { min-height: 60vh; padding: 40px 20px; }
  .main-title h1 { font-size: 40px; }
  .main-title p { font-size: 18px; }
  
  /* Content */
  .content { margin: 60px 20px; }
  
  /* About */
  .about-photo img { 
    width: 160px; 
    height: 200px;
  }
  .about-content h1 { font-size: 28px; }
  .about-content h2 { font-size: 16px; }
  .about-content p { font-size: 13px; }
  
  /* Section Title */
  .section-title { font-size: 16px; }
  
  /* Tools */
  .tools { margin-left: 0; }
  .tools-icons { gap: 12px; }
  .icon-box { 
    width: 60px; 
    height: 60px;
  }
  
  /* Project Content */
  .project-content { 
    padding: 30px 20px;
    margin-bottom: 60px;
  }
  .project-description h2 { font-size: 22px; }
  .project-description h3 { font-size: 14px; }
  .project-description p { font-size: 13px; }
  
  /* Deliverable */
  .deliverable-title { 
    font-size: 18px;
    margin-left: 0;
    text-align: center;
  }
  
  /* Design Thinking */
  .dt-title { 
    font-size: 20px;
    letter-spacing: 3px;
  }
  .dt-box { font-size: 12px; padding: 6px 12px; }
  .dt-step p { font-size: 12px; }
  
  /* Problem Solution */
  .mockup-laptop { 
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
  .ps-box h3 { font-size: 16px; }
  .ps-box p { font-size: 13px; }
  
  /* Section Green Title */
  .section-green-title { 
    font-size: 18px;
    text-align: center;
  }
  
  /* Target Users */
  .target-users { padding: 0 20px; }
  
  /* Research */
  .research-section { padding: 30px 20px; }
  .research-item h3 { font-size: 14px; }
  .research-item p { font-size: 13px; }
  
  /* Quantitative */
  .quantitative-section { padding: 0 20px; }
  .stat-number { font-size: 36px; }
  .stat-text { font-size: 13px; max-width: 100%; }
  
  /* Qualitative */
  .qualitative-research { padding: 0 20px; }
  .qr-description { font-size: 13px; }
  .questions-list li { font-size: 13px; }
  
  /* User Persona */
  .user-persona-section,
  .persona-section-wrapper,
  .persona-jason-wrapper,
  .ds-rental-wrapper,
  .ux-decision-wrapper,
  .rental-result-wrapper,
  .rental-problem-solution { padding: 40px 20px; }
  
  .persona-top-card { 
    flex-direction: column;
    text-align: center;
  }
  .persona-main-avatar,
  .persona-avatar,
  .jason-avatar { 
    width: 60px; 
    height: 60px;
  }
  
  .detail-row { 
    flex-direction: column;
    gap: 5px;
  }
  
  .persona-bottom-layout,
  .jason-bottom-content { flex-direction: column; }
  
  .bio-card,
  .jason-bio-card { 
    flex: 0 0 100%;
    padding: 20px;
  }
  
  .persona-details-grid,
  .jason-details-cards { 
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .p-card,
  .detail-card,
  .info-box { padding: 15px; }
  .p-card h3,
  .detail-card h3,
  .info-box h3 { font-size: 15px; }
  .p-card ul li,
  .detail-card ul li,
  .info-box ul li { font-size: 12px; }
  
  /* Design System */
  .ds-item { margin-bottom: 30px; }
  .ds-subtitle { font-size: 14px; }
  .color-swatches { gap: 20px; }
  .circle { width: 40px; height: 40px; }
  
  /* Impact */
  .impact-section { padding: 0 20px; }
  .impact-badge { font-size: 14px; }
  .impact-desc { font-size: 13px; }
  
  /* Footer */
  .footer-bar { padding: 12px 0; }
  .footer-text { font-size: 14px; }
  
  /* Podcast */
  .podcast-hero { padding: 40px 20px; }
  .hero-title { font-size: 40px; }
  .hero-subtitle { font-size: 24px; }
  
  .about-application { padding: 30px 20px; }
  .about-title { font-size: 22px; }
  .about-text { font-size: 13px; }
  
  .ps-container { padding: 40px 20px; }
  .ps-title { font-size: 20px; }
  .ps-desc { font-size: 13px; }
  
  .goals-list li { font-size: 13px; }
  
  .showcase-img-box img { border-radius: 0; }
  
  .insights-persona-wrapper { 
    padding: 40px 20px;
    margin-bottom: 100px;
  }
  .block-title { font-size: 18px; }
  
  .chat-avatar { 
    width: 40px; 
    height: 40px;
  }
  .bubble-content { 
    padding: 15px 18px;
    font-size: 13px;
  }
  .bubble-content h4 { font-size: 14px; }
  
  /* Wireframe */
  .wireframe-block { padding: 30px 0; }
  .wireframe-block .ds-title { padding: 0 20px; }
  
  /* Mockup */
  .mockup-result-wrapper { padding: 40px 20px; }
  .mockup-item { width: 160px; }
  
  .result-block { margin: 60px 0 0; }
  
  /* Rental */
  .rental-hero { padding: 40px 20px; }
  .rental-hero .hero-title { font-size: 40px; }
  .rental-hero .hero-subtitle { font-size: 24px; }
  
  .about-rental-app { padding: 30px 20px; }
  
  .ps-grid { 
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .goals-block { margin-bottom: 60px; }
  
  .target-users-block { 
    flex-direction: column;
    gap: 30px;
  }
  .target-users-image { flex: 0 0 100%; }
  
  .userflow-inner { padding: 0 20px; }
  
  .rental-showcase-wrapper { margin-top: 40px; }
  
  .result-title { font-size: 20px; }
  .result-list li { font-size: 13px; }
  
  .learning-box { 
    padding: 30px 20px;
  }
  .learning-box p { font-size: 13px; }
  
  .mockup-grid { gap: 20px; }
  .mockup-phone { width: 160px; }
}

/* ===== SMALL MOBILE (Max 480px) ===== */
@media screen and (max-width: 480px) {
  /* Hero */
  .portfolio-text, .uiux-text { font-size: 32px; }
  
  /* Main Title */
  .main-title h1 { font-size: 32px; }
  .main-title p { font-size: 16px; }
  
  /* About */
  .about-photo img { 
    width: 140px; 
    height: 170px;
  }
  .about-content h1 { font-size: 24px; }
  
  /* Project */
  .project-description h2 { font-size: 20px; }
  
  /* DT */
  .dt-title { font-size: 18px; }
  
  /* Section */
  .section-green-title { font-size: 16px; }
  
  /* Persona */
  .persona-name { font-size: 16px; }
  .persona-role { font-size: 13px; }
  .persona-details p { font-size: 12px; }
  .persona-bio p { font-size: 12px; }
  
  /* Chat */
  .chat-bubble { 
    flex-direction: column;
    gap: 8px;
  }
  .chat-avatar { 
    width: 32px; 
    height: 32px;
  }
  
  /* Buttons */
  .btn-filled,
  .btn-outline { 
    padding: 8px 24px;
    font-size: 12px;
  }
  
  /* Mockup */
  .mockup-item { width: 140px; }
  .mockup-phone { width: 140px; }
  
  /* UX Decision */
  .decision-number { font-size: 32px; }
  .decision-heading { font-size: 18px; }
  .text-item h4 { font-size: 14px; }
  .text-item p { font-size: 12px; }
  .dot { width: 8px; height: 8px; }
  
  /* Green Bar */
  .green-bar { 
    flex-direction: column;
    text-align: center;
  }
  
  /* Footer */
  .footer-content { gap: 5px; }
  .footer-text { font-size: 12px; }
}

/* ===== EXTRA SMALL MOBILE (Max 320px) ===== */
@media screen and (max-width: 320px) {
  .portfolio-text, .uiux-text { font-size: 28px; }
  .main-title h1 { font-size: 28px; }
  .hero-title { font-size: 32px; }
  
  .mockup-item,
  .mockup-phone { width: 120px; }
  
  .icon-box { 
    width: 50px; 
    height: 50px;
  }
}