:root {
  --kostu-navy: #023b58;
  --kostu-navy-deep: #012b42;
  --kostu-green: #17a84b;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.maintenance-page {
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 32px 20px;
  position: relative;
  background: var(--kostu-navy-deep);
}

.maintenance-page__backdrop, .maintenance-page__network {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.maintenance-page__backdrop {
  z-index: -2;
  background-image: linear-gradient(115deg, rgba(1, 43, 66, .97), rgba(2, 59, 88, .9) 48%, rgba(13, 129, 55, .68)), url("https://kocaelisaglik.edu.tr/wp-content/uploads/2022/04/kostu_giris_foto.jpg");
  background-position: center;
  background-size: cover;
}

.maintenance-page__network {
  z-index: -1;
  opacity: .42;
  background-image: radial-gradient(circle at 12% 18%, var(--kostu-green) 0 3px, transparent 4px), radial-gradient(circle at 84% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 91% 74%, var(--kostu-green) 0 4px, transparent 5px), linear-gradient(31deg, transparent 49.7%, rgba(255, 255, 255, .25) 50%, transparent 50.3%), linear-gradient(148deg, transparent 49.7%, rgba(23, 168, 75, .42) 50%, transparent 50.3%);
  background-size: 180px 180px, 230px 230px, 260px 260px, 280px 280px, 360px 360px;
}

.maintenance-card {
  width: min(100%, 620px);
  padding: 44px 52px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(2, 59, 88, .88), rgba(1, 43, 66, .8));
  box-shadow: 0 28px 80px rgba(0, 19, 31, .48), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(13px);
}

.maintenance-card__logo {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: -8px auto 28px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2));
  object-fit: contain;
}

.maintenance-card__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: rgba(23, 168, 75, .18);
  color: #82e8a3;
  font-size: 34px;
  line-height: 1;
  animation: maintenance-spin 5s linear infinite;
}

h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.035em; line-height: 1.12; }
.maintenance-card__message { max-width: 470px; margin: 18px auto 0; color: rgba(255,255,255,.85); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.maintenance-card__divider { width: 72px; height: 2px; margin: 32px auto 24px; background: linear-gradient(90deg, transparent, var(--kostu-green), transparent); }
.maintenance-card__university, .maintenance-card__team { margin: 0; }
.maintenance-card__university { font-size: 16px; font-weight: 700; }
.maintenance-card__team {
  margin-top: 6px;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
}
@keyframes maintenance-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .maintenance-page { padding: 20px 14px; }
  .maintenance-card { padding: 34px 24px 32px; border-radius: 22px; }
  .maintenance-card__logo { width: min(100%, 250px); margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) { .maintenance-card__icon { animation: none; } }