@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

html { scroll-behavior: auto; }
::selection { background: #dbe7ff; color: #17212f; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }

.ust {
  min-height: 72px;
  padding: 15px clamp(20px, 4vw, 64px);
}
.marka {
  font-size: 22px;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.marka-vurgu { color: var(--vurgu); }
.menu { align-items: center; }
.menu a {
  border: 1px solid transparent;
  border-radius: 8px;
}
.menu a:hover,
.menu a.aktif {
  border-color: #dce6fa;
  background: #f0f5ff;
  color: #1746a6;
}
.demo-serit {
  padding: 11px clamp(20px, 4vw, 64px);
  line-height: 1.5;
}

main {
  max-width: 1120px;
  padding: clamp(36px, 4.5vw, 62px) 28px 88px;
}
h1, h2 { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; }
h1 {
  max-width: 780px;
  margin-bottom: 10px;
  font-size: clamp(30px, 3.3vw, 42px);
  line-height: 1.18;
  letter-spacing: -.045em;
}
h2 {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.alt-yazi {
  max-width: 68ch;
  margin-bottom: 29px;
  color: var(--soluk);
  font-size: 15.5px;
  line-height: 1.65;
}
.kutu {
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--yuzey);
  box-shadow: 0 8px 32px rgba(23, 33, 47, .035);
}
.kutu + .kutu { margin-top: 20px; }

.alan input {
  min-height: 44px;
  border-color: #d7dee7;
  background: #fff;
}
.alan input:hover { border-color: #b7c4d4; }
.alan input:focus {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
.alan .ipucu { color: #596a7b; }

.dgm {
  min-height: 42px;
  border-radius: 9px;
  justify-content: center;
  transition: background .16s ease, border-color .16s ease;
}
.dgm.ana {
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: #fff;
}
.dgm.ana:hover:not(:disabled) {
  border-color: #1f55ce;
  background: #1f55ce;
}
.dgm.tehlike:hover:not(:disabled) { background: #fff5f5; }

.planlar { gap: 16px; }
.plan {
  min-height: 232px;
  padding: 20px;
  background: #fbfcfe;
  transition: border-color .16s ease, background .16s ease;
}
.plan:hover { border-color: #98b7f5; }
.plan .fiyat {
  margin-top: 5px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.plan .fiyat .taslak {
  display: block;
  margin-top: 6px;
  color: #85540f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.plan .ozellik { color: #526375; }
.plan .dgm { margin-top: 7px; }

.yontemler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.yontem { min-width: 156px; }
.odeme-bilgi {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #cbdaf8;
  border-radius: 12px;
  background: #f7faff;
  overflow-wrap: anywhere;
}
.odeme-bilgi p { margin: 10px 0; color: #425369; }
.odeme-bilgi code { color: #1746a6; }
.talep, .yonetim-talep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-top: 1px solid var(--cizgi);
}
.talep:first-child, .yonetim-talep:first-child { border-top: 0; }
.talep b, .yonetim-talep b { display: block; color: var(--metin); }
.talep small, .yonetim-talep small {
  display: block;
  margin-top: 5px;
  color: #5b6b7d;
  overflow-wrap: anywhere;
}
.karar-dgm { display: flex; flex-wrap: wrap; gap: 8px; }
.karar-dgm .dgm + .dgm { margin-left: 0; }
.mini { background: #fbfcfe; }
.kod-satir input { min-width: 0; }

.alt {
  padding: 24px clamp(20px, 4vw, 64px);
  background: #fff;
}
.alt a { color: #1746a6; }
[hidden] { display: none !important; }

@media (max-width: 700px) {
  .ust { align-items: flex-start; flex-direction: column; gap: 10px; }
  .menu { gap: 2px; }
  .menu a { padding: 7px 10px; font-size: 13px; }
  main { padding: 30px 18px 72px; }
  .yontem { flex: 1 1 100%; }
  .talep, .yonetim-talep { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 490px) {
  .planlar { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
  .plan .aciklama { flex: 0 1 auto; }
  .plan .ozellik { margin-top: 9px; }
  .kutu { padding: 20px; }
  .alt { flex-direction: column; gap: 5px; }
  .liste li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dgm, .plan { transition: none; }
}