: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; padding: 2rem 1rem;
}
.container { width: 600px; max-width: calc(100dvw - 2rem); margin: 0 auto; background: #fff; padding: 0rem; 
  border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;}
h1 { font-size: 1.7rem; display: flex; color: var(--kizil); padding: 1.5rem; background-color:#eee; 
   margin: 0; justify-content: center;}

.qr-menu ul { display: grid; grid-template-columns: repeat(3, auto); margin: 0; background: #fcfcfc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); place-content: center; gap: .5rem; padding: 1rem 0;}
.qr-menu li {display: list-item; align-items: center;   list-style-position: inside; 
  padding:.1rem .2rem 0rem.5rem}
.qr-menu a { text-decoration: none; padding: 5px 5px 5px 0; color: #666; white-space: nowrap; 
  margin-left: -.5rem; display: inline-block;}
.qr-menu li:has(a.active) { color: var(--kizil); font-weight: bold; background: #f6f6f6; 
  box-shadow: 1px  1px  1px rgba(0, 0, 0, .1);}
.qr-menu li:has(a.active) a {  color: var(--kizil); }
.qr-menu li:has(a.active)::marker {color: var(--kizil);}
.qr-menu a.disabled { color: #ccc; cursor: not-allowed; }
.content-wrapper { display: flex; gap: 40px; flex-wrap: wrap; flex-direction: column; }


  #menu-link { order: 10;  }
  #menu-phone { order: 20;  }
  #menu-event { order: 30;  }
  #menu-wifi { order: 40;  }
  #menu-vcard { order: 50;  }
  #menu-plain { order: 60;  }
  #menu-email { order: 70;  }
  #menu-geo { order: 80;  }

form {text-align: center;}
.form-section, .result-section { flex: 1; max-width: calc(100dvw - 2rem);; padding: 1rem;}
.form-group {  display: inline-grid; grid-template-columns: 6rem auto; margin: 1rem 0; width: 100%;}

.gr6-auto {grid-template-columns: 6rem auto;}
.gr8-auto {grid-template-columns: 8rem auto;}
.gr11-auto {grid-template-columns: 11rem auto;}
.gr12-auto{grid-template-columns: 12rem auto;}
.gr14-auto {grid-template-columns: 8rem auto; }

.form-group label, .inputBox { display: inline-flex; padding: 1rem .5rem 1rem 0; border-bottom: 1px dotted #ccc; 
  white-space: wrap; align-items: start; text-align: left; }
.form-group label {padding-top: calc(1rem + 8px);}
.form-group input { width: 100%; padding: 7px; box-sizing: border-box; border: 1px solid #ccc; 
  border-radius: 4px; }
fieldset {display: grid; grid-template-columns: auto auto; gap: 1rem; padding-top: 1rem;}
input[type=number] { text-align:right; width:60px; }
fieldset > div {text-align: left; }

.form-group label:last-of-type, .form-group .inputBox:last-of-type {border-bottom: none;}
.qrSelectBox {background: #f6f6f6; margin: 1rem 0 0 0; }
.qrSelectBox label{padding-left: .5rem;}
button { background-color: var(--kizil); color: white; padding: 12px 20px; border: none; border-radius: 4px; 
  cursor: pointer; font-size: 16px; width: 100%; }
button:hover { background-color: var(--kirmizi); }
.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(--kizil); 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; }
::placeholder {font-style: italic;}

@media (min-width: 600px) {
  .qr-menu ul { grid-template-columns: repeat(4, auto);}
  #menu-link { order: 10;  }
  #menu-phone { order: 20;  }
  #menu-email { order: 30;  }
  #menu-plain { order: 40;  }
  #menu-wifi { order: 50;  }
  #menu-vcard { order: 60;  }
  #menu-event { order: 70;  }
  #menu-geo { order: 80;  }
  .gr14-auto {grid-template-columns: 14rem auto;}
  .form-group { width: auto; padding-left:1rem; padding-right:1rem; }
  .form-group label {white-space:nowrap;}
}