/* The citizen wizards' shared form stylesheet. It exists twice, as /uyelik/site.css and
   /duvar/site.css, because the uye.kalpturkiye.org gateway passes only /uyelik through.
   Edit /uyelik/site.css and copy it over /duvar/site.css; WizardStyleTests fails when they differ. */
:root{
  /* The brand guide (2026-10-08) and kalpturkiye.org, as the /duvar wall uses them. Ratios are on
     white unless noted; WizardStyleTests checks them. */
  --navy:#024685;        /* actions, links, focus, the current step: 9.47 */
  --navy-dark:#013766;   /* hover on navy: white text 12.07 */
  --navy-off:#4D74A0;    /* a busy or disabled main button: white text 4.86, so "Gönderiliyor…" stays readable */
  --done:#2B61AE;        /* steps already done, the guide's blue: 6.13 */
  --accent:#EF4137;      /* the guide's red: the kicker rule only, never text, never a button (3.83) */
  --danger:#BE2C27;      /* error text and an invalid field's edge, from the guide's red ramp: 5.87 */
  --danger-ink:#8B0F12;  /* text in the error box: 8.80 on --danger-bg */
  --danger-bg:#FDF2F1;
  --on-navy:#D6E2F0;     /* the footer's text on --navy: 7.21 */
  --ink:#111111;         /* headings, labels, what the visitor typed */
  --text:#333333;        /* body text and consent labels: 12.63 */
  --muted:#5C5C5C;       /* hints, notes, counters: 6.69, 6.23 on --soft */
  --placeholder:#6B6B6B; /* 5.33 */
  --field:#8A8F98;       /* every form control's edge: 3.25, WCAG 1.4.11 asks 3 */
  --line:#E5E7EB;        /* decorative hairlines only */
  --soft:#F5F7F9;        /* the page band and the quiet boxes */
  --shadow:0 10px 30px rgba(2,70,133,.08);
  --r:4px; --r-card:6px;
  --h:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --b:'Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
/* A class that sets display (span.err below) must not show an element a script hid, as on the wall. */
[hidden]{display:none!important}
/* Text for screen readers only, such as the spoken form of the kicker's step: out of view, still read. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;text-transform:none}
/* Form controls take the page font (textareas otherwise fall back to monospace) and stay at 16px or
   more: iOS Safari zooms the page in on focus when a field's text is smaller, and the page then
   scrolls sideways. The zoom is prevented here, not by disabling zoom in the viewport. */
input,select,textarea{font-family:inherit;font-size:16px}
/* Column layout so the footer sits at the bottom of short pages instead of hugging the card. */
body{margin:0;background:var(--soft);font-family:var(--b);color:var(--text);line-height:1.5;
     min-height:100vh;display:flex;flex-direction:column;-webkit-text-size-adjust:100%}

/* Site frame. Arriving from kalpturkiye.org should not feel like landing somewhere else, and this form
   asks for a T.C. kimlik numarası, so knowing whose page it is matters. No nav: one purpose, one exit. */
.site-hd{background:#fff;border-bottom:1px solid var(--line);padding:14px 16px;text-align:center}
.site-hd a{display:inline-block;line-height:0}
/* kalpturkiye.org shows its logo 44px tall; its wordmark sits above a small subtitle, so a shorter logo
   makes "KALP" too small to read. */
.site-hd img{height:44px;width:auto}
/* The footer is the site's navy band, as on the /duvar wall. */
.site-ft{padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));background:var(--navy);
         text-align:center;font-size:13.5px;line-height:1.7;color:var(--on-navy)}
.site-ft p{margin:0}
/* The links sit in a wrapping row with no separator, as on the wall (.dw-foot__links): when a phone has
   no room for both, the second link moves down whole and no "·" is left at the end of a line. */
.site-ft__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px}
/* Underlined, as today: on the band, weight alone would not mark a link. */
.site-ft a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--h);font-weight:600;color:#fff;
           text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px}
.site-ft a:hover{text-decoration-color:#fff}

/* One keyboard ring for every focusable element, navy like the wall's; white on the navy footer.
   Defined here, not in duvar.css, because /uyelik pages cannot load duvar.css. */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.site-ft :focus-visible{outline-color:#fff}

.wrap{max-width:440px;width:100%;margin:0 auto;padding:24px 16px;flex:1;display:flex;flex-direction:column}
/* auto margins rather than justify-content: they centre the card on a tall desktop viewport and
   collapse to zero when the content is taller than the screen, so nothing is ever clipped. */
.wrap>.card{margin-block:auto}
/* A form always taller than the screen starts at the top. Centred, it would first be drawn lower while
   the page is still arriving (half a card is shorter than the screen) and then jump up. */
.wrap>.card--long{margin-top:0}
/* overflow:hidden keeps the corners round, so nothing in the card may be wider than it: break-word
   (inherited by every heading, notice and error) breaks a word that cannot fit on a line of its own,
   for example "tamamlayın" at 200 % text on a phone. It does not change how anything is sized. */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;
      overflow-wrap:break-word}

/* The card head: the wall's kicker with its short red rule, then the title. The kicker names the step
   in words; the bars under it only echo that and are hidden from screen readers. */
.hero{background:none;color:var(--ink);padding:24px 24px 0}
.hero h1{font-family:var(--h);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.hero p{font-size:14px;line-height:1.55;margin:0;color:var(--text)}
/* :is(.hero,.ok) keeps this above ".hero p" and ".ok p", which would otherwise restyle the kicker. */
:is(.hero,.ok) .kicker{margin:0 0 12px;font-family:var(--h);font-weight:600;font-size:12px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-wrap:balance}
.kicker::after{content:"";display:block;width:24px;height:2px;margin-top:10px;background:var(--accent)}
.ok .kicker::after{margin-inline:auto}
.steps{display:flex;gap:6px;padding:16px 24px 0}
.st{flex:1;height:4px;border-radius:2px;background:var(--line)}
.st.on{background:var(--navy)} .st.done{background:var(--done)}
.body{padding:20px 24px 28px}
label.lbl{display:block;font-family:var(--h);font-weight:500;font-size:14px;color:var(--ink);margin:0 0 6px}

/* Every control's edge is --field (3.25:1): WCAG 1.4.11 asks 3:1 for the edge that shows where a
   field is. A field shows the focus ring on any focus, also after a tap; other controls only for
   the keyboard (the :focus-visible rule above). */
.fld{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--field);border-radius:var(--r);
     background:#fff;color:var(--ink);font-size:16px;line-height:1.4}
.fld::placeholder{color:var(--placeholder);opacity:1}
.fld:hover{border-color:var(--muted)}
.fld:focus,.otp input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
textarea.fld{min-height:0;resize:vertical}
/* The browser's own arrow is removed for one look on every phone; this navy chevron replaces it. */
select.fld{appearance:none;-webkit-appearance:none;padding-right:40px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23024685' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
/* The tag helpers add input-validation-error to a field the server refused: the edge turns error red
   and doubles, without moving the layout. */
.fld.input-validation-error{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
/* The birth date is one answer in three selects, but the server files its error under the day only.
   All three take the error edge, so a missing month is not shown as a wrong day. */
.grp:has(> .two > select.input-validation-error) > .two > select.fld{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.grp{margin-bottom:18px}
.hint{font-size:13px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.note{font-size:13px;line-height:1.55;color:var(--muted);margin:4px 0 14px}
.err{font-size:13px;line-height:1.45;color:var(--danger);margin:6px 0 0}
/* The tag helpers write field errors as spans: as blocks they take the margin and line height above
   and sit under their field, not on the line of whatever follows. */
span.err{display:block}
.err:empty{margin:0}
/* Page-level messages: the restart message at the top of a start page and the form-wide summary get
   a box with a red rule; the neutral notice gets the same box with a navy rule. Chosen by position,
   not by a class, because tests read these elements' class attribute exactly (the rate-limit page's
   message is the first child of its div.body). The code pages'
   "Kod hatalı…" line sits in form.otp-form under the boxes and stays plain field-level text. */
form.body>p.err,.body>p.err:first-child,.validation-summary-errors{margin:0 0 16px;padding:10px 12px;border-left:3px solid var(--danger);
  border-radius:0 var(--r) var(--r) 0;background:var(--danger-bg);color:var(--danger-ink);font-size:13.5px;line-height:1.5}
.validation-summary-errors ul{margin:0;padding:0;list-style:none}
p.note[role=status]{padding:10px 12px;border-left:3px solid var(--navy);border-radius:0 var(--r) var(--r) 0;
  background:var(--soft);color:var(--text)}
/* Links in the form and notice text are the site's navy and stay underlined. */
.card a:not(.btn){color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.card a:not(.btn):hover{color:var(--navy-dark);text-decoration-thickness:2px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px}
.chk input{margin:1px 0 0;width:20px;height:20px;accent-color:var(--navy);flex:none}
/* min-width:0 and break-word: at 200 % text on a phone a long word of the consent ("veritabanının") would
   otherwise run past the card's edge and be cut off. */
.chk label{min-width:0;overflow-wrap:break-word;font-size:13.5px;line-height:1.55;color:var(--text)}
/* A consent's error sits close under its box (16 - 10 = 6px, as under a field) and keeps the box's
   distance from what follows, so it does not read as part of the next note. */
.chk+.err:not(:empty){margin:-10px 0 16px}
/* Six boxes in a row; with no room for a digit in each (200 % text on a phone) they wrap to two rows
   rather than shrinking until the digits are cut off. */
.otp{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.otp input{flex:1 0 1.2em;min-width:0;min-height:56px;text-align:center;padding:0;font-family:var(--h);font-weight:600;
           font-size:22px;color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:var(--r)}
.sent{font-size:13.5px;color:var(--text);margin:0 0 14px}
.sent b{color:var(--ink);font-family:var(--h)}
.ref{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);
     border-radius:var(--r);padding:11px 13px;margin-bottom:16px;font-size:13px;color:var(--text)}
.ref b{font-family:var(--h);color:var(--navy)}
.two{display:flex;gap:12px}.two>*{flex:1;min-width:0}
/* The three date selects share a row while each one is at least as wide as its longest option, so no
   month is cut off: with no room (320px, 200 % text) they wrap to the next line instead of shrinking. */
.grp>.two{gap:8px;flex-wrap:wrap}
.grp>.two>select.fld{flex:1 1 0;width:auto;min-width:auto}
/* On a phone a chevron closer to the edge keeps the three on one row ("Temmuz" at 390px); wider, they
   keep every field's inset, so they line up with the selects under them. */
@media (max-width:439px){
  .grp>.two>select.fld{padding-left:8px;padding-right:22px;background-position:right 8px center}
}
.opt{font-family:var(--b);font-weight:400;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0}
/* The photo field stays the browser's own file input (its behaviour is tested on Android); only its
   button takes the outlined navy look. */
input[type=file].fld{padding:8px;color:var(--text)}
input[type=file].fld::file-selector-button{margin-right:12px;min-height:40px;padding:8px 16px;border:1px solid var(--navy);
  border-radius:var(--r);background:#fff;color:var(--navy);font-family:var(--h);font-weight:600;font-size:15px;cursor:pointer}
input[type=file].fld::file-selector-button:hover{background:var(--soft)}

/* Buttons as on kalpturkiye.org: the main action filled navy, every other one outlined in navy. Red is
   never a button. Full width and 48px tall: one thumb, one target. */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px;
     border:1px solid transparent;border-radius:var(--r);font-family:var(--h);font-weight:600;font-size:15px;
     line-height:1.25;text-align:center;text-decoration:none;color:#fff;background:var(--navy);cursor:pointer;
     transition:background-color .15s,border-color .15s}
.btn:hover{background:var(--navy-dark)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--navy);margin-top:10px}
.btn.ghost:hover{background:var(--soft)}
/* After the hover rules, so a busy button does not light up. */
.btn:disabled{background:var(--navy-off);cursor:default}
.btn.ghost:disabled{background:#fff;color:var(--muted);border-color:var(--line)}
.btn+.btn{margin-top:10px}
/* Air between a hint (the attempts left on the code pages) and the button under it. */
.hint+.btn{margin-top:14px}
.ok{text-align:center;padding:36px 24px 32px}
/* A check in the site's navy: green is not in the party's palette. */
.ok .mark{width:56px;height:56px;border-radius:50%;background:#E8EEF6;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.ok .mark div{position:relative;width:26px;height:26px;border-radius:50%;background:var(--navy)}
/* The check mark is two borders of a rotated box, so it needs no icon font or image. */
.ok .mark div::after{content:"";position:absolute;left:10px;top:6px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ok h2{font-family:var(--h);font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.ok p{font-size:14px;line-height:1.6;color:var(--text);margin:0 0 20px}
/* A note under the success message (the wall's withdrawal text): quieter, and as legal text it reads from the left. */
.ok p.note{margin:0 0 20px;font-size:13px;line-height:1.55;color:var(--muted);text-align:left}
/* Duvar's success page fills its fourth step (R15); the bars sit under the kicker, full width. */
.ok .steps{padding:0 0 20px}

/* Desktop gets more air; the card itself keeps the width it was designed at. */
@media (min-width:720px){
  .site-hd{padding:18px 16px}
  .site-hd img{height:48px}
  .wrap{padding:40px 16px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Forced colours do not recolour background images, so the navy chevron would almost vanish in a dark
   contrast theme. The browser's own arrow comes back instead, drawn in the system's text colour. */
@media (forced-colors:active){select.fld{appearance:auto;-webkit-appearance:auto;background-image:none}}

/* The aydinlatma page's layout, as classes because the wall's security policy forbids inline style. */
.legal{font-size:13.5px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.legal .legal-title{font-family:var(--h);font-weight:600;color:var(--navy);margin-bottom:4px}
.legal .legal-meta{font-size:12.5px;color:var(--muted);margin-top:0}
.legal .legal-h{font-family:var(--h);font-weight:600;margin:18px 0 6px}
.legal ul{margin:6px 0 10px;padding-left:20px}