:root { 
  --kirmizi : #C23B2A;  
  --kizil : #FF5942;  
  
  --yesil: #096;
}
body { font-family: sans-serif; background-color: #f4f6f9; margin: 0; padding: 0px; color: #333; }
*{box-sizing: border-box; font-size: 15px; font-family: 'Roboto', sans-serif;}
#stage {display: flex; justify-content: center; align-items: center; width: 100dvw; overflow-x: hidden;
  min-height: 100dvh; 
}
.container { max-width: calc(100dvw - 2rem); margin: 0 auto; background: #fff; padding: 1rem; 
  border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
h1 { font-size: 1.7rem; line-height: 1.15rem; display: block; color: var(--kizil); margin: 1rem 1rem 2.5rem;
  text-align: center; }
.qr-menu { display: flex; border-bottom: 2px solid #eee; padding: 0; overflow-x: auto; 
  background: #f0f0f0; align-items: center; margin-bottom: 0; justify-content: space-between;
}
.qr-menu a { text-decoration: none; padding: 5px 10px; color: #666; white-space: nowrap; }
.qr-menu a.active { background-color: var(--kirmizi); color: #fff; }
.qr-menu a.disabled { color: #ccc; cursor: not-allowed; }
.content-wrapper { display: flex; gap: 40px; flex-wrap: wrap; flex-direction: column; }
.form-section, .result-section { flex: 1; min-width: 300px; }
.form-group {  display: grid; grid-template-columns: 6rem auto; margin: 1rem 0;}
.form-group label, .inputBox { display: inline-flex; padding: 1rem; border-bottom: 1px dotted #ccc; 
  white-space: pre; align-items: center;}
.form-group input { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; 
  border-radius: 4px; }

.form-group label:last-of-type, .form-group .inputBox:last-of-type {border-bottom: none;}

button { background-color: var(--kirmizi); color: white; padding: 12px 20px; border: none; border-radius: 4px; 
  cursor: pointer; font-size: 16px; width: 100%; }
button:hover { background-color: #218838; }
.qr-result { text-align: center; }
.qr-result img { max-width: 100%; height: auto; border: 1px solid #ddd; padding: 10px; background: #fff; }
.download-btn { display: inline-block; margin-top: 15px; background-color: var(--kirmizi); color: #fff; 
  padding: 10px 20px; text-decoration: none; border-radius: 4px; }
.placeholder { border: 2px dashed #ccc; padding: 40px 20px; text-align: center; color: #999; }
.error-msg { color: #dc3545; margin-top: 15px; }
.qr-result img { width: 400px; max-width: 100%; height: auto; border: 1px solid #ddd; padding: 10px; 
  background: #fff; }

@media (min-width: 600px) {
  .form-group { grid-template-columns: 12rem auto; }

}