/* Sayfa iskeleti, gökyüzü katmanı ve orta sütun (köpek, başlık, rozet) */
/* ---------- Yerleşim ---------- */
.page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #FBF7F0; color: #3d2c20;
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun { position: absolute; top: 6%; right: 8%; width: 130px; height: 130px; }
.sun svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.sun .core {
  position: absolute; inset: 29%; border-radius: 50%; background: #F2C98A;
  box-shadow: 0 0 0 14px rgba(242,201,138,.22), 0 0 0 30px rgba(242,201,138,.10);
  animation: glow 5s ease-in-out infinite;
}
.cloud { position: absolute; left: 0; color: #fff; }
.cloud.c1 { top: 9%; width: 150px; filter: drop-shadow(0 4px 10px rgba(60,40,25,.05)); animation: drift 70s linear -12s infinite; }
.cloud.c2 { top: 22%; width: 100px; opacity: .85; animation: drift 95s linear -55s infinite; }
.cloud.c3 { top: 4%; width: 120px; opacity: .9; animation: drift 82s linear -30s infinite; }
.birds { position: absolute; top: 16%; left: 0; width: 70px; height: 30px; animation: fly 26s linear 3s infinite; }
.birds path { transform-box: fill-box; transform-origin: center; animation: flap .45s ease-in-out infinite alternate; }
.leaf { position: absolute; top: -30px; width: 16px; height: 16px; }

main {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 48px 20px 40px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.hero-dog {
  position: relative; width: 260px; height: 260px; max-width: 70vw; max-height: 70vw;
  display: grid; place-items: center; margin-bottom: 8px;
  animation: pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-dog .halo { position: absolute; inset: 10%; border-radius: 50%; background: rgba(138,74,36,.08); }
.hero-dog .ring { position: absolute; inset: 3%; border-radius: 50%; border: 1.5px dashed rgba(138,74,36,.30); }
.hero-dog .shadow { position: absolute; bottom: 8.5%; width: 58%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,40,25,.18), transparent); }
.hero-dog > svg { position: relative; z-index: 1; width: 92%; height: auto; overflow: visible; }

h1 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(48px, 13vw, 96px); line-height: 1; letter-spacing: -.02em;
  color: #2c1e14; margin: 0; animation: rise .6s ease-out .25s both;
}
.tagline {
  font-size: clamp(15px, 4.2vw, 17px); line-height: 1.5; color: rgba(60,40,25,.6);
  max-width: 34ch; margin: 14px 0 0; text-wrap: pretty;
  animation: rise .6s ease-out .35s both;
}
.status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  padding: 10px 16px 10px 13px; border-radius: 999px;
  background: #8a4a24; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(138,74,36,.28);
  animation: rise .6s ease-out .45s both;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #F3D9B8; animation: ping 2.4s ease-out 1.4s infinite; }
.features {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 0; margin: 28px 0 0; max-width: 440px;
  animation: rise .6s ease-out .55s both;
}
.features li { padding: 7px 12px; border-radius: 8px; background: rgba(138,74,36,.09); color: #7a3f1d; font-size: 13px; font-weight: 600; }