/* Alpi Diş · bank accounts page (banka-hesaplari.html), 2026-10-16. Builds on site.css (and tedavi.css for the
   breadcrumb). An operating page: the recipient on the film, the accounts on the light box, one currency at a time,
   each IBAN set large and copied with one tap. Generated by tools/banka-sayfasi.py. */

/* ---------- masthead: the title and the recipient name ---------- */
.bnk-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 120% at 50% 30%, #0B1068 0%, var(--navy) 38%, var(--navy-deep) 76%, var(--film) 100%)}
.bnk-hero .hero-vignette{z-index:0}
.bnk-in{position:relative;z-index:1;padding-top:clamp(18px, 2.2vw, 32px);padding-bottom:clamp(36px, 4.5vw, 64px)}
.bnk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px, 4vw, 64px);align-items:end}
.bnk-head h1{margin-top:14px;font-size:clamp(2.3rem, 1rem + 2.9vw, 3.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;color:var(--white)}
.bnk-head h1 b{font-weight:640}
.bnk-sub{margin-top:14px;max-width:44rem;color:var(--on-film-2);font-size:clamp(1.0625rem, .95rem + .35vw, 1.2rem);line-height:1.5}
.rcp{padding:20px 22px 22px;transition:box-shadow .3s}
.rcp-k{font-size:.86rem;font-weight:700;color:var(--on-glass-2)}
.rcp-n{text-wrap:balance;margin-top:6px;font-family:var(--display);font-size:1.18rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--navy)}
.rcp-h{margin-top:6px;font-size:.9rem;line-height:1.4;color:var(--on-glass-2)}
.rcp .cp{margin-top:14px}

/* ---------- the copy button: one navy action per account; done shows a check, not a colour ---------- */
.cp{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border:0;border-radius:5px;background:var(--navy);color:var(--white);font-weight:650;font-size:.95rem;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(9,13,95,.9), inset 0 0 0 1px rgba(87,134,232,.4);transition:background-color .2s, color .2s, box-shadow .2s}
.cp:hover{background:var(--navy-deep);box-shadow:0 12px 26px -10px rgba(87,134,232,.75), inset 0 0 0 1px rgba(87,134,232,.9)}
.cp:active{transform:translateY(1px)}
.cp .icon{width:19px;height:19px}
.cp-ok{display:none}
.cp.is-done{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.cp.is-done .cp-i{display:none}
.cp.is-done .cp-ok{display:block;stroke-width:2.4}
.cp.is-fail{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 2px var(--peri-ink)}

/* ---------- the accounts ---------- */
.bnk-main{padding:clamp(44px, 5.5vw, 80px) 0 clamp(64px, 8vw, 112px)}
.bnk-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.bnk-bar h2{font-size:clamp(1.9rem, 1.2rem + 1.6vw, 2.7rem);font-weight:340;letter-spacing:-.03em;line-height:1.08;color:var(--navy)}
.bnk-bar h2 b{font-weight:620}
.cur{display:inline-flex;gap:4px;padding:5px;border-radius:9px;background:var(--white);box-shadow:0 12px 26px -20px rgba(9,13,95,.6), inset 0 0 0 1px rgba(9,13,95,.08)}
.cur [role="tab"]{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:112px;min-height:56px;padding:0 18px;border:0;border-radius:6px;background:none;color:var(--navy);text-align:left;transition:background-color .2s, color .2s}
.cur [role="tab"] b{font-family:var(--display);font-size:1.1rem;font-weight:650;letter-spacing:-.01em}
.cur [role="tab"] span{font-size:.82rem;color:var(--on-glass-2);font-variant-numeric:tabular-nums}
.cur [role="tab"]:hover{background:var(--lav)}
.cur [role="tab"][aria-selected="true"]{background:var(--navy);color:var(--white)}
.cur [role="tab"][aria-selected="true"] span{color:#C4D4F7}
.bnk-panels{margin-top:22px}
.accts{border-radius:8px;background:var(--white);box-shadow:0 18px 40px -26px rgba(9,13,95,.45), inset 0 0 0 1px rgba(9,13,95,.06)}
.acct{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.7fr) auto;grid-template-areas:"b i c";align-items:center;gap:14px clamp(18px, 2.4vw, 36px);padding:20px clamp(18px, 2.2vw, 28px);border-top:1px solid var(--line-glass);transition:background-color .6s var(--ease-out)}
.acct:first-child{border-top:0;border-radius:8px 8px 0 0}
.acct:last-child{border-radius:0 0 8px 8px}
.acct-b{grid-area:b}
.acct-b b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--navy)}
.acct-b>span{display:block;margin-top:4px;font-size:.9rem;color:var(--on-glass-2)}
.acct-i{grid-area:i;min-width:0}
.acct-k{display:block;font-size:.76rem;font-weight:650;letter-spacing:.04em;color:var(--on-glass-2)}
/* the IBAN in four-character groups, large and tabular; a click selects all of it */
.iban{display:flex;flex-wrap:wrap;gap:0 .55ch;margin-top:3px;font-family:var(--display);font-size:clamp(1.15rem, .95rem + .55vw, 1.4rem);font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--navy);font-variant-numeric:tabular-nums;cursor:text;-webkit-user-select:all;user-select:all}
.iban span:first-child{font-weight:650}
.acct-no{display:block;margin-top:5px;font-size:.88rem;color:var(--on-glass-2)}
.acct-no b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.acct .cp{grid-area:c}
.acct.is-flash,.rcp.is-flash{animation:bk-flash 1.4s var(--ease-out)}
@keyframes bk-flash{0%{background-color:#E3EAFB}100%{background-color:transparent}}
.rcp.is-flash{animation:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 2px var(--peri-ink), 0 22px 48px -26px rgba(87,134,232,.55)}
.bnk-note{margin-top:12px;font-size:.9rem;color:var(--on-glass-2)}

/* ---------- how to pay ---------- */
.steps{margin-top:clamp(48px, 6vw, 80px)}
.steps h2{font-size:clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem);font-weight:340;letter-spacing:-.025em;color:var(--navy)}
.steps h2 b{font-weight:620}
.st{margin-top:20px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.st li{display:flex;flex-direction:column;padding:22px;border-radius:8px;background:var(--white);box-shadow:0 18px 40px -26px rgba(9,13,95,.45), inset 0 0 0 1px rgba(9,13,95,.06)}
.st-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:5px;background:var(--navy);color:var(--white);font-family:var(--display);font-weight:650;font-size:.95rem}
.st p{margin-top:14px;font-size:1.02rem;line-height:1.5;color:var(--navy)}
.st-act{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.st-act .btn-primary{min-height:48px;font-size:.95rem;padding:0 16px;text-decoration:none}
.bnk-card{margin-top:24px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 22px;border-radius:8px;background:var(--white);color:var(--navy);text-decoration:none;box-shadow:0 12px 26px -20px rgba(9,13,95,.6), inset 0 0 0 1px rgba(9,13,95,.08);transition:box-shadow .2s}
.bnk-card:hover{box-shadow:0 14px 28px -18px rgba(9,13,95,.7), inset 0 0 0 1.5px var(--navy)}
.bnk-card .icon{width:24px;height:24px;color:var(--peri-ink)}
.bnk-card b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600}
.bnk-card span span{display:block;margin-top:3px;font-size:.95rem;color:var(--on-glass-2)}
.bnk-card .bnk-go{width:20px;height:20px}

@media (max-width:1100px){
  .bnk-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .rcp{max-width:560px}
  .acct{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b c" "i i"}
}
@media (max-width:759px){
  .bnk-in{padding-top:16px;padding-bottom:32px}
  .bnk-head h1{margin-top:10px}
  .cur{display:flex;width:100%}
  .cur [role="tab"]{flex:1 1 0;min-width:0;padding:0 12px}
  .acct{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "i" "c";gap:10px;padding:18px}
  .acct .cp,.rcp .cp{width:100%}
  /* the IBAN on one line at phone width: its set width is about 19.6 times the font size, the row about 100vw - 70px */
  .iban{font-size:clamp(12.5px, calc((100vw - 72px) / 19.9), 16.6px);letter-spacing:0;gap:0 .45ch}
  .st{grid-template-columns:minmax(0,1fr)}
  .bnk-card{grid-template-columns:auto minmax(0,1fr);}
  .bnk-card .bnk-go{display:none}
}