:root {
  --main-bg: #f5f7fa;
  --box-bg: #fff;
  --primary: #000;
  --secondary: #3949ab;
  --accent: #ffb300;
  --border: #e0e0e0;
  --shadow: 0 4px 24px rgba(26, 35, 126, 0.07);
  --radius: 22px;
}
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: "Roboto", Arial, sans-serif;
  background-color: var(--main-bg);
  transition: background-color 0.4s;
  background-image: url('images/altunngroup_background.png');
  background-repeat: repeat;
  background-size: 200px auto;
}
body.dynamic-bg-yapikredi {
  background-color: #0050a3 !important;
}
body.dynamic-bg-ziraat {
  background-color: #e11a22 !important;
}
body.dynamic-bg-garanti {
  background-color: #00953a !important;
}
body.dynamic-bg-hsbc {
  background-color: #db0011 !important;
}
body.dynamic-bg-paraf {
  background-color: #00b2e3 !important;
}
body.dynamic-bg-kuveytturk {
  background-color: #00796b !important;
}
body.dynamic-bg-akbank {
  background-color: #e6002a !important;
}
body.dynamic-bg-axess {
  background-color: #ffcc00 !important;
}
body.dynamic-bg-isbank {
  background-color: #004b91 !important;
}
body.dynamic-bg-vakifbank {
  background-color: #ffcc00 !important;
}
body.dynamic-bg-qnb {
  background-color: #4e206e !important;
}
.center-box {
  width: 100%;
  max-width: 700px;
  min-width: 0;
  min-height: 600px;
  margin: 5vh auto 5vh auto;
  background: var(--box-bg);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 24px rgba(26, 35, 126, 0.07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px 28px 38px 28px;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.center-box:hover {
  box-shadow: 0 8px 32px rgba(26, 35, 126, 0.1);
}
.title {
  width: 100%;
  text-align: center;
  font-size: 2.2rem;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 32px;
  margin-top: 0;
  letter-spacing: 1.5px;
  color: var(--primary);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.form-group {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}
.form-label {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.13rem;
  font-weight: 500;
  margin-bottom: 7px;
  margin-top: 0;
  color: #222;
  letter-spacing: 0.5px;
}
.input-box,
.select-box {
  width: 100%;
  padding: 13px 15px;
  font-size: 1.12rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  margin-bottom: 0;
  box-sizing: border-box;
  background: #f8fafc;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
  color: #111;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.03);
}
.input-box:focus,
.select-box:focus {
  border: 1.5px solid var(--accent);
  background: #fff;
  box-shadow: 0 4px 16px rgba(255, 179, 0, 0.08);
}
.installment-table-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.installment-table {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  background: #f8fafc;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(26, 35, 126, 0.06);
  font-size: 1.04rem;
}
.installment-table th,
.installment-table td {
  border: none;
  padding: 12px 7px;
  text-align: center;
}
.installment-table th {
  background-color: #fffbe6;
  color: #222;
  font-weight: 700;
  font-size: 1.09rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--accent);
}
.installment-table tr:nth-child(even) td {
  background: #f1f3fa;
}
.installment-table tr:nth-child(odd) td {
  background: #f8fafc;
}
.installment-table td {
  color: #222;
}
.installment-table-container {
  overflow-x: auto;
}
@media (max-width: 700px) {
  .center-box {
    max-width: 97vw;
    padding: 16px 6vw 16px 6vw;
    min-height: 0;
    margin-left: 3vw;
    margin-right: 3vw;
  }
  .title {
    font-size: 1.25rem;
    margin-bottom: 18px;
  }
  .installment-table {
    font-size: 0.97rem;
    max-width: 99vw;
  }
  .form-group {
    max-width: 99vw;
  }
}
@media (max-width: 480px) {
  .center-box {
    padding: 8px 6vw 8px 6vw;
    margin-left: 3vw;
    margin-right: 3vw;
  }
  .title {
    font-size: 1.08rem;
  }
  .installment-table th,
  .installment-table td {
    padding: 7px 2px;
  }
}