:root{
  --bg:#071124;
  --panel:#0c1730cc;
  --panel-2:#111b37cc;
  --line:#24395d;
  --line-hot:#70306a;
  --text:#f5f7ff;
  --muted:#9aa7bf;
  --pink:#ff315c;
  --pink-2:#b21478;
  --blue:#1ea5ff;
  --green:#23d898;
  --violet:#8f5cff;
  --shadow:0 28px 90px rgba(0,0,0,.44);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#030a18;color:var(--text)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 88% 28%,rgba(221,0,120,.22),transparent 30%),
    radial-gradient(circle at 35% 55%,rgba(14,83,172,.16),transparent 34%),
    linear-gradient(145deg,#071128 0%,#050c1d 55%,#071024 100%);
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.shell{
  width:min(1280px,calc(100% - 32px));
  margin:18px auto;
  min-height:calc(100vh - 36px);
  border:1px solid rgba(255,47,106,.45);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(7,14,34,.95),rgba(6,15,32,.96));
  box-shadow:0 0 0 1px rgba(82,30,125,.32) inset,var(--shadow);
  position:relative;
}
.shell:after{
  content:"";
  position:absolute;right:-90px;top:80px;width:430px;height:430px;pointer-events:none;opacity:.45;
  background:
    radial-gradient(circle,rgba(255,0,106,.24) 0 1px,transparent 2px) 0 0/11px 11px;
  transform:rotate(17deg);
  mask-image:radial-gradient(circle at center,black,transparent 68%);
}
header{
  height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 46px;border-bottom:1px solid rgba(255,255,255,.09);
  position:relative;z-index:2;
  background:rgba(7,14,31,.65);backdrop-filter:blur(18px);
}
.logo{font-size:29px;font-weight:800;letter-spacing:-1.7px}.logo .qr{color:#ff244e}.logo .matik{color:#fff}
.secure-pill{
  min-width:310px;height:42px;border-radius:14px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:10px;
  color:#bbc5d7;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.04);font-size:14px
}
.actions{justify-self:end;display:flex;gap:10px}
.circle-btn,.lang-btn{
  height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.035);color:#e8edfa;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;cursor:pointer;transition:.2s ease
}
.circle-btn{width:44px;padding:0}.circle-btn:hover,.lang-btn:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
main{
  padding:32px 52px 18px;
  display:grid;grid-template-columns:318px minmax(0,1fr);gap:44px;position:relative;z-index:2
}
.card{
  background:linear-gradient(145deg,rgba(16,28,55,.88),rgba(8,17,35,.88));
  border:1px solid rgba(116,140,181,.2);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)
}
.summary{padding:24px 24px 22px;align-self:start}
.summary-title{display:flex;align-items:center;gap:11px;font-weight:750}
.order-id{font-size:12px;color:#99a6bb;margin:11px 0 22px 34px;display:flex;align-items:center;justify-content:space-between}
.amount-block{border-top:1px solid rgba(255,255,255,.07);padding-top:22px}
.amount-label{font-size:14px;color:#aab5c8;margin-bottom:4px}
.amount{font-size:45px;line-height:1;font-weight:800;letter-spacing:-1.6px;margin:8px 0 22px;text-shadow:0 0 26px rgba(255,46,92,.18)}
.notice{
  border:1px solid rgba(255,48,96,.44);background:rgba(92,9,32,.12);border-radius:12px;padding:16px 15px;display:flex;gap:12px
}
.notice.blue{margin-top:16px;border-color:rgba(35,145,255,.38);background:rgba(0,68,124,.11)}
.notice strong{display:block;font-size:13px;color:#ff3a64;margin-bottom:5px}.notice.blue strong{color:#dbe9ff;font-weight:500}
.notice p{font-size:12px;line-height:1.55;color:#aab4c8;margin:0}.notice.blue p em{font-style:normal;color:#ff3b62;font-weight:700}
.trust-list{margin-top:24px;display:grid;gap:22px}
.trust-row{display:flex;gap:13px;align-items:flex-start}
.trust-row .ico{margin-top:1px}
.trust-row b{display:block;font-size:12px;margin-bottom:4px}.trust-row span{font-size:11px;color:#9aa7bb}
.content{padding-top:8px}
.content-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.title-wrap{display:flex;align-items:center;gap:18px}
.bank-icon{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,#e23177,#6e134c 68%,#360d34);
  border:1px solid rgba(255,90,156,.5);box-shadow:0 0 34px rgba(255,23,117,.28),inset 0 0 18px rgba(255,255,255,.1)
}
h1{font-size:31px;line-height:1.05;margin:0 0 9px;letter-spacing:-.7px} .subtitle{color:#b2bdd0;font-size:15px}
.secure-mini{
  margin-top:7px;min-width:195px;border:1px solid rgba(255,60,122,.2);border-radius:12px;padding:13px 15px;
  background:linear-gradient(145deg,rgba(255,18,106,.06),rgba(255,255,255,.015));display:flex;gap:10px;align-items:center
}
.secure-mini b{display:block;font-size:12px}.secure-mini span{font-size:10px;color:#a6b1c5}
.bank-list{display:grid;gap:12px}
.bank-row{
  width:100%;border:1px solid rgba(67,100,151,.45);border-radius:13px;padding:13px 18px;min-height:88px;color:#fff;
  background:linear-gradient(105deg,rgba(13,31,60,.8),rgba(20,28,65,.72) 58%,rgba(106,17,83,.43));
  display:grid;grid-template-columns:62px 1fr 24px;align-items:center;gap:16px;cursor:pointer;transition:.22s ease;position:relative;overflow:hidden;text-align:left
}
.bank-row:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);transform:translateX(-120%);transition:.45s ease
}
.bank-row:hover{border-color:rgba(255,48,114,.48);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.bank-row:hover:before{transform:translateX(120%)}
.bank-logo{
  width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#111;font-size:11px;font-weight:900;
  box-shadow:0 6px 20px rgba(0,0,0,.2)
}
.ziraat{color:#d81924;font-size:27px}.garanti{color:#149c4a;font-size:27px}.yk{color:#999;font-size:19px}.ak{color:#e12424}.is{color:#0e6cc3;font-size:26px}
.bank-name{font-size:16px;font-weight:760;margin-bottom:8px}
.limits{display:flex;gap:9px;flex-wrap:wrap}
.tag{font-size:10px;color:#cbd5e5;padding:4px 8px;border-radius:6px;background:rgba(1,9,22,.5);border:1px solid rgba(255,255,255,.035)}
.arrow{font-size:30px;color:#c6cfde;font-weight:200}
.footerbar{
  margin:22px 52px 20px;height:66px;border:1px solid rgba(81,107,150,.26);border-radius:13px;
  display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 24px;position:relative;z-index:2;background:rgba(11,22,43,.58)
}
.foot-left,.foot-right{display:flex;align-items:center;gap:12px}.foot-left{font-size:11px;color:#a9b5c8}.foot-right{gap:36px}
.foot-feature{display:flex;align-items:center;gap:9px;color:#aab5c6;font-size:11px}
svg{display:block}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(1,6,18,.74);backdrop-filter:blur(9px);display:none;place-items:center;z-index:30;padding:20px
}
.modal-backdrop.open{display:grid}
.modal{
  width:min(520px,100%);border:1px solid rgba(255,66,126,.34);border-radius:20px;padding:25px;background:linear-gradient(145deg,#0d1932,#111329);
  box-shadow:0 30px 120px rgba(0,0,0,.6)
}
.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal h2{margin:0;font-size:21px}
.close{border:0;background:rgba(255,255,255,.06);color:#fff;border-radius:10px;width:36px;height:36px;cursor:pointer}
.form-grid{display:grid;gap:14px}
.field label{display:block;font-size:12px;color:#abb7ca;margin:0 0 7px}
.field input{
  width:100%;height:48px;border-radius:11px;border:1px solid #2a3f63;background:#081226;color:#fff;padding:0 14px;outline:none
}
.field input:focus{border-color:#d82a76;box-shadow:0 0 0 3px rgba(216,42,118,.1)}
.confirm{
  height:49px;border:0;border-radius:12px;color:#fff;font-weight:760;cursor:pointer;margin-top:4px;
  background:linear-gradient(90deg,#ff315d,#b0157c);box-shadow:0 12px 28px rgba(223,35,101,.21)
}
.microcopy{color:#8997ae;font-size:11px;line-height:1.5}
.toast{
  position:fixed;right:24px;bottom:24px;padding:13px 16px;border-radius:12px;background:#0b1b2f;border:1px solid rgba(57,222,163,.3);
  color:#c8ffeb;font-size:13px;opacity:0;transform:translateY(10px);transition:.25s;z-index:50;pointer-events:none
}
.toast.show{opacity:1;transform:none}


.inline-bank-form{animation:fadeSlide .28s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.selected-bank-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.back-bank{
  border:1px solid rgba(100,126,168,.28);background:rgba(255,255,255,.035);color:#dbe3f1;
  border-radius:10px;padding:10px 13px;cursor:pointer;font-weight:650
}
.back-bank:hover{border-color:rgba(255,49,93,.45);background:rgba(255,255,255,.06)}
.selected-bank-title{font-size:18px;font-weight:800}
.selected-bank-card{
  min-height:92px;border:1px solid rgba(67,100,151,.45);border-radius:14px;padding:15px 18px;margin-bottom:18px;
  background:linear-gradient(105deg,rgba(13,31,60,.85),rgba(20,28,65,.75) 58%,rgba(106,17,83,.42));
  display:flex;align-items:center;gap:16px
}
.selected-logo{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#172238;font-weight:900;font-size:11px
}
.selected-name{font-size:18px;font-weight:800;margin-bottom:5px}
.selected-sub{font-size:13px;color:#aab6ca}
.inline-grid{
  padding:22px;border:1px solid rgba(81,107,150,.25);border-radius:14px;
  background:linear-gradient(145deg,rgba(15,27,52,.82),rgba(8,17,35,.82))
}
body.light .back-bank{background:#f3f6fb;color:#435169;border-color:#d7e0eb}
body.light .selected-bank-card{
  background:linear-gradient(105deg,#fff,#f6f9fe 58%,#fff0f7);border-color:rgba(61,93,137,.17)
}
body.light .selected-name{color:#172238}
body.light .selected-sub{color:#6f7d92}
body.light .inline-grid{background:linear-gradient(145deg,#fff,#f7f9fd);border-color:rgba(55,84,126,.12)}

body.light{
  --bg:#eef3fb;--panel:#ffffffee;--panel-2:#f7f9fd;--line:#d7e0ee;--line-hot:#e8a8c4;
  --text:#172238;--muted:#65738a;--shadow:0 24px 70px rgba(37,56,88,.13);
  background:
    radial-gradient(circle at 88% 24%,rgba(255,70,145,.12),transparent 29%),
    radial-gradient(circle at 32% 52%,rgba(38,126,235,.10),transparent 35%),
    linear-gradient(145deg,#f7f9fd 0%,#edf3fb 56%,#f8f5fb 100%);
}
body.light:before{opacity:.35}
body.light .shell{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,248,253,.98));
  border-color:rgba(231,74,139,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,var(--shadow)
}
body.light header{background:rgba(255,255,255,.72);border-bottom-color:rgba(39,62,96,.10)}
body.light .logo .matik{color:#172238}
body.light .secure-pill,body.light .circle-btn,body.light .lang-btn{
  color:#53627a;background:rgba(36,62,103,.045);border-color:rgba(36,62,103,.07)
}
body.light .card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,248,253,.94));border-color:rgba(55,84,126,.13)}
body.light .summary-title,body.light .amount,body.light h1,body.light .bank-name{color:#172238}
body.light .order-id,body.light .amount-label,body.light .subtitle{color:#69778e}
body.light .amount-block{border-top-color:rgba(36,62,103,.09)}
body.light .notice{background:#fff5f8}
body.light .notice.blue{background:#f2f8ff}
body.light .notice p,body.light .notice.blue strong{color:#53627a}
body.light .trust-row b{color:#27354c}
body.light .trust-row span{color:#718096}
body.light .secure-mini{background:linear-gradient(145deg,#fff5f9,#fff);border-color:rgba(230,69,137,.18)}
body.light .secure-mini b{color:#27354c}
body.light .secure-mini span{color:#7a879a}
body.light .bank-row{
  color:#172238;border-color:rgba(61,93,137,.17);
  background:linear-gradient(105deg,rgba(255,255,255,.96),rgba(246,249,254,.96) 58%,rgba(255,239,248,.84));
  box-shadow:0 5px 18px rgba(49,70,104,.045)
}
body.light .bank-row:hover{border-color:rgba(230,50,124,.36);box-shadow:0 14px 30px rgba(48,66,96,.10)}
body.light .tag{color:#53627a;background:#edf2f8;border-color:rgba(42,66,103,.06)}
body.light .arrow{color:#718096}
body.light .footerbar{background:rgba(255,255,255,.7);border-color:rgba(55,84,126,.12)}
body.light .foot-left,body.light .foot-feature{color:#66758c}
body.light .modal{background:linear-gradient(145deg,#fff,#f4f7fc);border-color:rgba(231,68,135,.24)}
body.light .modal h2{color:#172238}
body.light .close{background:#edf2f8;color:#394960}
body.light .field label{color:#5f6e84}
body.light .field input{background:#fff;color:#172238;border-color:#ced9e8}
body.light .microcopy{color:#728096}

@media (max-width:900px){
  header{grid-template-columns:1fr auto;padding:0 22px}.secure-pill{display:none}
  main{grid-template-columns:1fr;padding:24px 20px;gap:24px}.summary{order:2}.content{order:1}
  .content-head{align-items:center}.secure-mini{display:none}.footerbar{margin:0 20px 20px;grid-template-columns:1fr;height:auto;padding:18px}
  .foot-right{display:none}.shell{width:min(100% - 16px,1280px);margin:8px auto;min-height:calc(100vh - 16px)}
}
@media (max-width:560px){
  header{height:66px;padding:0 16px}.logo{font-size:24px}.lang-btn span{display:none}.actions{gap:6px}
  main{padding:20px 14px}.bank-icon{width:54px;height:54px}h1{font-size:25px}.subtitle{font-size:13px}
  .bank-row{grid-template-columns:52px 1fr 16px;padding:12px;min-height:76px}.bank-logo{width:50px;height:50px}.bank-name{font-size:15px}
  .tag{font-size:9px}.summary{padding:20px}.amount{font-size:39px}
}