html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100vh;
	min-height:100vh;
	background: transparent url('../img/background.jpg') no-repeat center center;
	background-size: cover;
}

body:has(dialog[open]) {
    overflow: hidden;
}

main {
	display:flex;
	background: transparent url('../img/background.jpg') no-repeat center center;
	background-size: cover;
	width:100%;
	height:100%;
	position:relative;
}

.lenovo-logo {
	position:absolute;
	right:0;
	bottom:3rem;
	max-width:10%;
}

.legion-logo {
	position:absolute;
	left:3rem;
	top:2rem;
}

.instagram-logo {
	position:absolute;
	left:0;
	bottom:0;
	max-width:20%;
}

.container {
  	display: grid;
  	gap: 1rem;
  	padding: 0 1rem;
  	width:100%;
  	margin-top:1rem;
}

.box {
	height: auto;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.couple {
	width:70%;
}

.form-container {
	background-color: rgba(255, 255, 255, .5);
	width:70%;
	border-radius: 3rem;
	padding:1rem 2rem 2rem 2rem ;
	box-sizing: border-box;
}

h1 {
	font-family: "Montserrat", sans-serif;
	color:#FFF;
	text-align: center;
	font-weight: 900;
	font-size:2.5rem;
}

h2 {
	font-family: "Montserrat", sans-serif;
	text-align: center;
	font-weight: 600;
	font-size:2rem;
	margin:0;
}

h3 {
	font-family: "Montserrat", sans-serif;
	color:#FFF;
	text-align: center;
	font-weight: 500;
	font-size:1.5rem;
	margin:0;
}

label {
	font-family: "Montserrat", sans-serif;
	font-size:.8em;
	cursor:pointer;
}

label.required::before {
	content: "*";
	margin-right: .3em;
	color:#e1251a;
}

label a {
	color:#00f;
	font-weight: 600;
}

#participation_form {
	display:flex;
	flex-direction: column;
	gap:.5em;
}

.form-field {
	display:flex;
	flex-direction: column;
	gap:.2em;
}

.form-field label {
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
	font-size:1.2em;
	color: #222;
}

.form-field input[type=text], .form-field input[type=email] {
	border: 1px solid #FFF;
	padding:.7em 1em;
	outline: none;
	border-radius:4px;
	box-shadow:0 3px 0 #666;
	font-family: "Montserrat", sans-serif;
	font-size: .9em;
}

.form-field textarea {
	border: 1px solid #FFF;
	padding:.7em 1em;
	outline: none;
	border-radius:4px;
	box-shadow:0 3px 0 #666;
	resize: none;
	height:60px;
	font-family: "Montserrat", sans-serif;
	font-size: .9em;
}

.form-field input.invalid, .form-field textarea.invalid {
	box-shadow:0 3px 0 #e1251a;
	border:1px solid #e1251a;
	background-color: #ffd6d4;
}

button.submit {
	border: 1px solid #e1251a;
	background-color: #e1251a;
	color:#FFF;
	font-family: "Montserrat", sans-serif;
	font-size:1.2em;
	font-weight: 700;
	padding:.7em 1em;
	border-radius: 10px;
	box-shadow:0 3px 0 #333;
	cursor:pointer;
}

button.submit[disabled] {
	border: 1px solid #666;
	background-color: #666;
	box-shadow:0 3px 0 #999;
}

button.close-modal {
	border: 1px solid #e1251a;
	background-color: #e1251a;
	color:#FFF;
	font-family: "Montserrat", sans-serif;
	font-size:1em;
	font-weight: 700;
	padding:.1em 3em;
	border-radius: 10px;
	box-shadow:0 3px 0 #333;
	cursor:pointer;
}

dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  padding:1 em;
  box-sizing: border-box;
}

dialog#result-modal {
	font-family: "Montserrat", sans-serif;
	padding:1em;
  box-sizing: border-box;
}

dialog#result-modal div {
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

dialog h2 {
	padding: 1em 2em;
	margin: 0;
	border-bottom: 1px solid #eee;
	font-size: 1.25rem;
}

.dialog-content {
	padding: 20px 30px;
	max-height: calc(80vh - 120px); /* Başlık ve buton payını çıkarıyoruz */
	overflow-y: auto; /* Dikeyde içerik uzunsa scroll çıkar */
	line-height: 1.6;
	color: #333;
	font-family: "Montserrat", sans-serif;
	font-size:.8rem;
}

.dialog-content::-webkit-scrollbar {
  	width: 6px;
}
.dialog-content::-webkit-scrollbar-thumb {
  	background: #ccc;
  	border-radius: 10px;
}

.close-x {
	position: absolute;
	top: 15px;
	right: 15px;
	background: white; /* Başlığın üzerinde belirgin dursun */
	border: none;
	font-size: 24px;
	cursor: pointer;
	z-index: 10; /* Her zaman üstte kalsın */
}

.close-x:hover {
  color: #000;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.close-btn {
  margin-top: 15px;
  cursor: pointer;
}

@media (min-width: 769px) {
	.container {
	    grid-template-columns: 1fr 1fr;
	    grid-template-rows: min-content min-content; 
	    align-items: start;
	}

	.box-1 { grid-area: 1 / 1 / 2 / 2; margin-top:7rem }
	.box-2 { grid-area: 2 / 1 / 3 / 2; margin-top:1rem }
	  
	.box-3 { 
	    grid-area: 1 / 2 / 3 / 3; 
	    align-self: stretch;
	}
}

@media (max-width: 768px) {
	html, body {
		height: auto;
	}

	.legion-logo {
		left:2rem;
		top:1rem;
		max-width:40%;
	}

	.container {
	    grid-template-columns: 1fr;
	    margin-top:5rem;
	}

	.box-1 { order: 1; }
	.box-3 { order: 2; }
	.box-2 { order: 3; }

	h1 {
		font-size:1.5rem;
	}

	h2 {
		font-size:1.2rem;
	}

	h3 {
		font-size:.9rem;
	}

	.form-container {
		width: 100%;
	}

	.form-field label {
		font-size: 1em;
	}

	.dialog-content {
		padding:0 1em;
	}
}