:root{
  --mavi:#1070b0;--mavi-koyu:#0b5a90;--mavi-acik:#50c0f0;
  --zemin:#eef3f8;--kart:#fff;--metin:#1f2d3d;--metin-2:#5b6b7b;--cizgi:#d9e1ea;
  --hata:#c0392b;--hata-zemin:#fdecea;--hata-cizgi:#f5c6c0;
  --odak:rgba(16,112,176,.18);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--metin);background:var(--zemin);
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-font-smoothing:antialiased;
}

.kutu{
  display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:960px;min-height:560px;
  background:var(--kart);border-radius:8px;overflow:hidden;
  box-shadow:0 20px 60px rgba(16,40,70,.14),0 2px 8px rgba(16,40,70,.06);
}

.panel{
  position:relative;padding:56px 52px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,var(--mavi-koyu) 0%,var(--mavi) 55%,var(--mavi-acik) 130%);
  display:flex;flex-direction:column;justify-content:center;
}
.panel::before,.panel::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.panel::before{width:420px;height:420px;right:-160px;top:-140px}
.panel::after{width:260px;height:260px;left:-90px;bottom:-110px}
.panel>*{position:relative}
.panel .ust{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:22px}
.panel h1{font-size:36px;line-height:1.15;margin:0 0 16px;font-weight:700;letter-spacing:-.4px}
.panel p{margin:0;font-size:16px;line-height:1.65;color:rgba(255,255,255,.88);max-width:36ch}
.panel ul{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:14px}
.panel li{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.95)}
.panel li::before{
  content:"";flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:16px;
}

.form-alan{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
h2{margin:0 0 6px;font-size:24px;font-weight:700}
.aciklama{margin:0 0 26px;color:var(--metin-2);font-size:15px}
.mesaj{
  padding:12px 14px 12px 42px;border-radius:8px;font-size:14px;line-height:1.5;margin-bottom:18px;
  border:1px solid var(--hata-cizgi);background:var(--hata-zemin) no-repeat 14px 13px/18px;color:var(--hata);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
label{display:block;font-size:14px;font-weight:700;margin:0 0 7px}
.alan{position:relative;margin-bottom:16px}
.alan input,.kod input{
  width:100%;height:48px;border:1px solid var(--cizgi);border-radius:8px;padding:0 14px;
  font-size:15px;color:var(--metin);background:#fbfcfd;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.alan input:focus,.kod input:focus{border-color:var(--mavi);box-shadow:0 0 0 4px var(--odak);background:#fff}
.alan.ikonlu input{padding-left:44px}
.alan.ikonlu::before{content:"";position:absolute;left:14px;top:15px;width:18px;height:18px;background:no-repeat center/18px;pointer-events:none}
.alan.kullanici::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a98a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.alan.sifre::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a98a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.alan.sifre input{padding-right:44px}
.goster{
  position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;border-radius:8px;cursor:pointer;
  background:transparent no-repeat center/18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a98a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.goster.acik{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a98a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='m1 1 22 22'/%3E%3C/svg%3E")}
.goster:hover{background-color:#eef3f8}
.kod{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;margin-bottom:6px}
.kod img{display:block;height:48px;width:auto;border:1px solid var(--cizgi);border-radius:8px;background:#f4f7fa;cursor:pointer}
.kod input{text-transform:uppercase;letter-spacing:2px;font-weight:600}
.yenile{
  width:40px;height:48px;border:1px solid var(--cizgi);border-radius:8px;cursor:pointer;
  background:#fff no-repeat center/18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
}
.yenile:hover{border-color:var(--mavi)}
.not{font-size:13px;color:var(--metin-2);margin:0 0 16px}
.onay{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--metin-2);font-weight:400;font-size:14px;margin:-4px 0 18px;user-select:none}
.onay input{width:16px;height:16px;accent-color:var(--mavi);margin:0;cursor:pointer}
.buton{
  width:100%;height:50px;border:0;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,var(--mavi-koyu),var(--mavi));color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 8px 20px rgba(16,112,176,.28);transition:transform .08s,box-shadow .15s,filter .15s;
}
.buton:hover{filter:brightness(1.05);box-shadow:0 10px 24px rgba(16,112,176,.34)}
.buton:active{transform:translateY(1px)}
.buton:disabled{opacity:.75;cursor:default}
.buton.yukleniyor::before{content:"";width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:don .7s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}
.yenile.donuyor{animation:don .6s linear}

@media (max-width:820px){
  body{padding:16px;align-items:flex-start}
  .kutu{grid-template-columns:1fr;min-height:0;max-width:460px;margin:8px auto}
  .panel{display:none}
  .form-alan{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}