body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #34496a;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add these styles to your existing CSS file (./style.css) */

/* Style for the main container of the logo and coming soon text */
section {
  position: absolute; /* Necessary for z-index to work as expected */
  z-index: 3;         /* Ensures this section is on top of the SVG and canvas animations (webgl2 has z-index: 2) */
  text-align: center; /* Centers the logo and the .coming-soon block */
  padding: 25px;
  background-color: rgba(30, 56, 85, 0.85); /* Semi-transparent version of your #1e3855 or #34496a for readability */
  border-radius: 15px;
  color: #ffffff;     /* Default text color for this section */
  max-width: 90%;     /* Prevents it from being too wide on large screens */
  width: 650px;       /* A fixed width, adjust as you like */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.25); /* Optional: a subtle cyan glow matching the theme */
  border: 1px solid rgba(0, 255, 255, 0.3); /* Optional: a subtle cyan border */
}

/* Styling for the logo container, if you want to adjust it */
#logo {
  margin-bottom: 20px; /* Adds space between the logo and the "coming soon" heading */
}

#logo img {
  max-width: 170px;    /* Adjust the size of your logo as needed */
  height: auto;
}

/* Styling for the "coming-soon" block */
.coming-soon {
  margin-top: 10px; /* Space above the heading if logo is present, or general top margin */
}

/* Styling for the main heading "Metafor Global Yakında Burada!" */
.coming-soon h2 {
  font-family: 'Arial', 'Helvetica Neue', sans-serif; /* Modern, clean font */
  font-size: 2.4em;   /* Large and impactful size, adjust as needed */
  color: #0ff;         /* Bright cyan to match your theme's accent color */
  margin-top: 0;
  margin-bottom: 15px;
  text-transform: uppercase; /* Makes the heading stand out more */
  letter-spacing: 1.5px;   /* Adds a bit of spacing between letters */
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* Adds a subtle glow to the text */
}

/* Styling for the explanation paragraph */
.coming-soon p.explanation {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 1.15em;  /* Readable size, adjust as needed */
  color: #e0e0e0;     /* Light grey, for good contrast on the dark background */
  line-height: 1.6;   /* Improves readability of longer text */
  margin-bottom: 0;   /* No extra margin at the bottom if it's the last element */
}

#webgl {
  width: 800px;
  height: 600px;
  position: absolute;
  z-index: -1;
}

#webgl2 {
  position: absolute;
  top: 0;
  left: 0;
  outline: none;
  z-index: 2;
}

#bg-box {
  width: 802px;
  height: 602px;
  position: absolute;
  z-index: -1;
}

.svg-box {
  width: 800px;
  height: 600px;
  position: absolute;
  z-index: 1;
}
.svg-box #robot {
  cursor: pointer;
}