/* ===================================================
   BAGIAN 1: STRUKTUR UTAMA DAN TATA LETAK HALAMAN
   =================================================== */

.home-screen {
  background: radial-gradient(circle at top, #ffe3e3 0%, #fbfcff 45%, #f5f7fb 100%);
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
}

.home-screen .page-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home-navbar {
  width: 100%;
  padding: 24px 40px;
  box-sizing: border-box;
}

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

.text-logo-pasti {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: 'Arial Black', Impact, sans-serif;
  text-align: left;
}

.text-logo-pasti .pasti-kecil {
  font-size: 11px;
  color: #111111;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-style: italic;
}

.text-logo-pasti .pasti-besar {
  font-size: 34px;
  color: #c80d22;
  font-weight: 900;
  letter-spacing: -1.5px;
  font-style: italic;
  margin: -4px 0 2px 0;
}

.text-logo-pasti .pasti-subtext {
  font-size: 6px;
  color: #111111;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: bold;
  letter-spacing: 0.2px;
  font-style: italic;
  white-space: nowrap;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.home-nav a {
  color: #33343a;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-nav a:hover {
  color: #c80d22;
}

.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 320px;
  overflow: hidden;
}

.home-content {
  width: min(100%, 1040px);
  text-align: center;
  z-index: 2;
}
/* ===================================================
   BAGIAN 2: LOGO IASC, TOMBOL, DAN BACKGROUND PANCING
   =================================================== */

.iasc-official-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto 48px;
  text-align: left;
}

.iasc-logo-container {
  display: flex;
  align-items: center;
  gap: 14px;
}

.iasc-grid-mark {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 4px;
  flex-shrink: 0;
}

.iasc-grid-mark span {
  width: 34px;
  height: 34px;
  background: #e01229;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border-radius: 4px;
  animation: pulseLogo 2.5s infinite ease-in-out;
}

.iasc-grid-mark span.dark-box {
  background: #7a0916;
}

.iasc-grid-mark span:nth-child(1) { animation-delay: 0s; }
.iasc-grid-mark span:nth-child(2) { animation-delay: 0.3s; }
.iasc-grid-mark span:nth-child(3) { animation-delay: 0.6s; }
.iasc-grid-mark span:nth-child(4) { animation-delay: 0.9s; }

.iasc-text-mark h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  color: #212529;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.iasc-official-logo .iasc-subtext {
  margin: 5px 0 0 0;
  font-size: 6.5px;
  letter-spacing: 0.2px;
  color: #111111;
  font-weight: bold;
  white-space: nowrap;
}

.main-title {
  font-size: clamp(32px, 5vw, 56px);
  color: #111111;
  font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: -1px;
  line-height: 1.15;
}

.subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: #555555;
  margin: 0 0 48px;
  line-height: 1.5;
}

.home-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.home-btn {
  min-width: 180px;
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.home-btn-primary {
  background: #c80d22;
  color: #ffffff;
  border: 2px solid #c80d22;
}

.home-btn-primary:hover {
  background: #a50a1b;
  border-color: #a50a1b;
  transform: translateY(-2px);
}

.home-btn-outline {
  background: #ffffff;
  color: #333333;
  border: 2px solid #cccccc;
}

.home-btn-outline:hover {
  background: #f8f9fa;
  border-color: #999999;
  transform: translateY(-2px);
}

.home-screen #form-laporan {
  display: none;
  width: min(1180px, calc(100% - 32px));
  margin: 30px auto 70px;
}

.home-screen #form-laporan:target {
  display: block;
}

.home-footer {
  padding: 32px 24px;
  text-align: center;
  color: #727780;
  font-size: 15px;
  background: #ffffff;
  z-index: 5;
  position: relative;
}

@keyframes pulseLogo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.fishing-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 360px;
  z-index: 1;
  pointer-events: none;
}

.city-skyline {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to top, rgba(255,210,210,0.5), rgba(255,255,255,0));
  clip-path: polygon(0% 100%, 0% 75%, 4% 60%, 7% 60%, 7% 75%, 12% 50%, 18% 50%, 18% 75%, 24% 40%, 30% 40%, 30% 75%, 45% 75%, 45% 15%, 47% 15%, 47% 0%, 53% 0%, 53% 15%, 55% 15%, 55% 75%, 68% 75%, 68% 45%, 74% 45%, 74% 75%, 82% 55%, 88% 30%, 93% 30%, 93% 75%, 100% 60%, 100% 100%);
}

.monas-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 160px;
  background: rgba(255, 190, 190, 0.4);
  clip-path: polygon(45% 100%, 45% 30%, 48% 25%, 48% 5%, 50% 0%, 52% 5%, 52% 25%, 55% 30%, 55% 100%);
}

.hook-item {
  position: absolute;
  top: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: swingHook 4.5s infinite ease-in-out;
  transform-origin: top center;
}

.hook-item .line {
  width: 1px;
  height: 220px;
  background: linear-gradient(to bottom, rgba(200,13,34,0.05), rgba(200,13,34,0.5));
}

.hook-item .hook {
  width: 10px;
  height: 15px;
  border: 1.5px solid #c80d22;
  border-top: none;
  border-left: none;
  border-bottom-right-radius: 8px;
  transform: rotate(28deg);
  margin-top: -2px;
}

.vector-item {
  width: 65px;
  height: auto;
  margin-top: 8px;
  filter: drop-shadow(0 8px 16px rgba(24,30,42,0.08));
}

.hook-gembok   { left: 18%; animation-delay: 0.0s; }
.hook-gembok .vector-item { transform: rotate(-5deg); width: 55px; }

.hook-folder   { left: 32%; animation-delay: 0.7s; }
.hook-folder .vector-item { transform: rotate(15deg); width: 68px; }

.hook-id       { left: 44%; animation-delay: 0.3s; }
.hook-id .vector-item     { transform: rotate(-8deg); width: 50px; }

.hook-card     { left: 58%; animation-delay: 1.1s; }
.hook-card .vector-item   { transform: rotate(22deg); width: 65px; }

.hook-mail     { left: 70%; animation-delay: 0.5s; }
.hook-mail .vector-item   { transform: rotate(-12deg); width: 55px; }

.hook-envelope { left: 82%; animation-delay: 1.4s; }
.hook-envelope .vector-item { transform: rotate(10deg); width: 60px; }

@keyframes swingHook {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(8px); }
}

.center-bottom-logo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: 'Arial Black', Impact, sans-serif;
  font-style: italic;
  opacity: 0.8;
}

.center-bottom-logo .pasti-kecil { font-size: 7px; color: #444; font-weight: 900; }
.center-bottom-logo .pasti-besar { font-size: 20px; color: #c80d22; font-weight: 900; margin: -2px 0 2px 0; }
.center-bottom-logo .pasti-subtext { font-size: 4px; color: #111111; font-style: italic; font-family: system-ui, sans-serif; font-weight: bold; }

@media (max-width: 680px) {
  .home-navbar { padding: 16px 20px; }
  .navbar-container { flex-direction: column; gap: 16px; }
  .iasc-official-logo { align-items: center; }
  .iasc-logo-container { flex-direction: column; text-align: center; }
  .iasc-text-mark h2 { font-size: 24px; }
  .home-btn { width: 100%; }
  .fishing-background { display: none; }
}