body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background:#0b0b0c; color:#eaeaea; }

.container { max-width: 920px; margin: 24px auto; padding: 0 16px; }

.card { background:#141416; padding: 16px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }

label { display:block; margin-top:10px; font-size: 14px; color:#9aa0a6; }

input { width:100%; padding:10px; margin-top:6px; border-radius:8px; border:1px solid #2a2f36; background:#0f1114; color:#eaeaea; }

.row { display:flex; gap:12px; }

button { margin-top:18px; padding:12px 16px; border:0; border-radius:10px; background:#2f6fed; color:white; cursor:pointer; font-weight:600; }

button:hover { filter:brightness(1.1); }

.muted { font-size:12px; color:#9aa0a6; margin-top:8px; }

hr { border:0; border-top:1px solid #252a31; margin:16px 0; }

/* Kapsayıcı ve kutu modeli */

*,

*::before,

*::after { box-sizing: border-box; }



.pay-form {

  max-width: 640px;       /* form genişliğini sınırla */

  width: 100%;

  margin-inline: auto;    /* ortala */

}



.pay-form input,

.pay-form button {

  width: 100%;            /* inputlar sığsın */

  min-width: 0;           /* grid/flex shrink olabilsin */

}



/* 3 kolonlu küçük grid */

.three-col {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}



/* Küçük ekranlarda tek kolona düşür */

@media (max-width: 640px) {

  .three-col { grid-template-columns: 1fr; }

}



/* Taşmaları engellemek için */

.card { overflow: hidden; }

.container { overflow-x: hidden; }