/* ---------- Sayfa iskeleti ---------- */
.ret h1{ text-align:center; margin:16px 0 }
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow-1);
  backdrop-filter: saturate(160%) blur(8px);
}
.grid{ display:grid; grid-template-columns:360px 1fr; gap:22px }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr } }

.row{ margin-top:12px }
.muted{ color:var(--muted) }
.res.hidden{ display:none }
.or{ margin:8px 0; font-size:12px; color:var(--muted); text-align:center }

/* ---------- Form kontrolleri ---------- */
label{
  display:block; font-size:12px; font-weight:600;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
  margin-bottom:6px; letter-spacing:.01em;
}
input, select, textarea{
  width:100%; color:inherit;
  background: var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:14px; padding:12px 14px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans), transform var(--trans);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
input::placeholder, textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
input:hover, select:hover, textarea:hover{
  border-color: color-mix(in srgb, var(--tint) 35%, var(--field-border));
  background: color-mix(in srgb, var(--field-bg) 88%, white);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--tint); box-shadow: var(--ring);
  background: color-mix(in srgb, var(--field-bg) 85%, white);
}
textarea{ resize:vertical }

/* Telefon alanı kapsül */
.phone{
  display:flex; align-items:center; gap:10px;
  background: var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:14px; padding:8px 12px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.phone:focus-within{ border-color:var(--tint); box-shadow:var(--ring); background: color-mix(in srgb, var(--field-bg) 85%, white) }
.flag{ font-size:18px; width:22px; text-align:center }
.phone input{ border:0; background:transparent; padding:6px 4px; width:100% }

/* ---------- Butonlar ---------- */
.btn{
  -webkit-tap-highlight-color:transparent; appearance:none; cursor:pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 96%, white), var(--tint));
  color:#fff; font-weight:700;
  border:1px solid color-mix(in srgb, var(--tint) 55%, var(--border));
  border-radius:12px; padding:12px 16px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tint) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(0);
  transition: transform var(--trans), filter var(--trans), box-shadow var(--trans);
}
.btn:hover{ filter: brightness(1.04) }
.btn:active{ transform: translateY(1px) scale(.998) }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none }
.btn.outline{
  background:transparent; color:var(--tint);
  border-color: color-mix(in srgb, var(--tint) 45%, var(--field-border));
  box-shadow:none;
}

/* ---------- Ürün seçimi ---------- */
.card.slim{ padding:12px }
.box-title{ font-weight:800; margin-bottom:8px }

.o-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width: 700px){ .o-two{ grid-template-columns:1fr } }

.r-items{ display:grid; gap:10px }
.r-item{
  display:grid; grid-template-columns:72px 1fr auto 120px;
  gap:12px; align-items:center; border:1px solid var(--border);
  border-radius:12px; padding:10px; background:var(--panel);
}
.r-item img{
  width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--border)
}
.r-item .name{ font-weight:700 }
.qty{
  width:100%; border-radius:10px; padding:10px 12px;
  background: var(--field-bg); border:1px solid var(--field-border); color:inherit;
}
.qty:focus{ outline:none; border-color:var(--tint); box-shadow:var(--ring) }

/* Mobil uyarlamalar */
@media (max-width: 680px){
  .grid{ grid-template-columns:1fr }
  .r-item{ grid-template-columns:56px 1fr; }
  .r-item img{ width:56px; height:56px }
}