/* B / Kalkış panosu — application form (basvuru.php). Loaded after b.css. */
.form-body{background:var(--paper)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-shell{padding-block:40px 96px}

/* Gate progress: six boarding gates, the current one lit in cobalt. */
.gate{margin-bottom:24px}
.gate-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.gate-step{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 14px;border:0;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);text-align:left;font:500 15px/1.25 var(--body);transition:background .2s,color .2s}
.gate-no{flex-shrink:0;font:700 24px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--muted)}
.gate-name{min-width:0;overflow-wrap:anywhere}
.gate-check{display:none;width:20px;height:20px;margin-left:auto;color:var(--blue);stroke-width:2.2}
.gate-step.complete{background:var(--white)}
.gate-step.complete .gate-check{display:block}
.gate-step.complete .gate-no{color:var(--blue)}
.gate-step.active{background:var(--blue);box-shadow:none;color:var(--paper)}
.gate-step.active .gate-no{color:var(--paper)}
.gate-step:disabled{opacity:1;cursor:default;color:var(--muted);box-shadow:inset 0 0 0 1px #9c9d94}
.gate-step:not(:disabled):not(.active):hover{background:#e3e7fb}
.gate-compact{display:none}
.gate-compact p{display:flex;flex-wrap:wrap;gap:0 6px;font-size:16px;font-weight:600;max-width:none}
#progress-text{color:var(--blue)}
.gate-bar{height:4px;margin-top:10px;background:#d9d9cf;border-radius:2px;overflow:hidden}
.gate-bar>div{height:100%;width:100%;background:var(--blue);transform:scaleX(.16666);transform-origin:left center;transition:transform .25s var(--ease)}

/* The form itself: a white dossier with ink rules. */
.form-panel{background:var(--white);border:1px solid #111;border-radius:3px;scroll-margin-top:112px}
.form-intro{padding:36px 40px 28px}
.form-intro h2{font-size:46px;line-height:1;letter-spacing:-.015em;margin-bottom:12px}
.form-intro p{font-size:17px;color:var(--muted)}
.form-intro .form-required-note{margin-top:12px;font-size:15px}
.form-required-note span{color:var(--red-surface);font-weight:600}
#form-step-title:focus{outline:3px solid var(--blue);outline-offset:6px}
#form-step-title:focus:not(:focus-visible){outline:0}
.form-error-summary{margin:0 40px 28px;padding:16px 20px;border:1px solid var(--red-surface);border-radius:3px;background:#fff1f3;color:var(--red-surface);font-size:16px;font-weight:500;line-height:1.5}
.form-fields{padding:0 40px 8px}
.form-section{padding-top:28px;border-top:1px solid var(--line)}
.form-section+.form-section{margin-top:36px}
.form-section h3{font-size:28px;line-height:1.1;margin-bottom:22px;scroll-margin-top:120px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px}
.field{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0}
.field.wide{grid-column:1/-1}
.js-wizard .field[hidden],.field [data-required-star][hidden]{display:none!important}
.field[data-show-if]{padding:18px;border:1px solid var(--line);border-radius:3px;background:#f5f6fb}
.field[data-show-if] textarea{background:var(--white)}
.field>label:not(.check-single),.field legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:600;line-height:1.4}
.field legend{width:100%}
.field-num{margin-right:5px;font-weight:500;color:var(--muted)}
.required-star{margin-left:3px;color:var(--red-surface)}
.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid #111;border-radius:3px;background:var(--white);color:var(--ink);font-size:16px;line-height:1.4}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:#6c6e66;opacity:1}
.field input[readonly]:not([type=checkbox]):not([type=file]){background:var(--paper);color:var(--muted)}
.field small{margin-top:7px;font-size:14px;line-height:1.5;color:var(--muted)}
.field .field-error{margin-top:7px;font-size:14px;font-weight:500;line-height:1.5;color:var(--red-surface)}
.field.has-error input:not([type=checkbox]):not([type=file]),.field.has-error select,.field.has-error textarea{border-color:var(--red-surface);box-shadow:inset 0 0 0 1px var(--red-surface)}
.field.has-error .choice,.field.has-error .check-single,.field.has-error .file-drop{border-color:var(--red-surface)}

/* Multi-choice groups as an even pill grid; cobalt marks a selection. */
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.choice{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 16px;border:1px solid #111;border-radius:999px;background:var(--white);font-size:15px;line-height:1.3;cursor:pointer;transition:background .15s,border-color .15s}
.choice input{flex-shrink:0;width:18px;height:18px;margin:0;accent-color:var(--blue)}
.choice:hover{background:#f0f2fc}
.choice:has(input:checked){background:#e6ebff;border-color:var(--blue);color:var(--blue);font-weight:500}
.choice:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.check-single{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid #111;border-radius:3px;background:var(--white);font-size:16px;line-height:1.55;cursor:pointer}
.check-single input{flex-shrink:0;width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue)}
.check-single strong{display:block;margin-top:4px;font-size:15px;font-weight:600}
.check-single:has(input:checked){background:#f2f4fd;border-color:var(--blue)}
.check-single:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.legal-link{align-self:flex-start;margin-bottom:10px;font-size:15px;font-weight:500;color:var(--blue)}
.file-drop{display:grid;justify-items:center;gap:10px;padding:26px 20px;border:1px dashed #111;border-radius:3px;background:var(--paper);text-align:center}
.file-drop .icon{width:30px;height:30px;color:var(--blue)}
.file-drop input{width:100%;max-width:380px;font-size:15px}
.file-drop input::file-selector-button{margin-right:12px;min-height:44px;padding:10px 16px;border:0;border-radius:3px;background:var(--blue);color:var(--paper);font:600 15px var(--body);cursor:pointer}
.file-drop small{margin:0;overflow-wrap:anywhere}

/* Step controls. */
.form-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:36px;padding:26px 40px;border-top:1px solid var(--line)}
.form-navigation .nav-hint{margin-right:auto;font-size:15px;color:var(--muted)}
#previous-step{margin-right:auto}
.form-navigation .button{min-height:52px}
.form-step.is-entering{animation:b-step .28s var(--ease) both}
@keyframes b-step{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form-privacy{display:flex;gap:12px;align-items:flex-start;max-width:72ch;margin-top:22px;font-size:15px;color:var(--muted)}
.form-privacy .icon{width:20px;height:20px;margin-top:2px;color:var(--blue)}
.form-privacy a{color:var(--blue)}

/* Without JavaScript every step stays visible and the gate hides. */
.js-wizard .form-step[hidden]{display:none!important}
body:not(.js-wizard) .gate,body:not(.js-wizard) #previous-step,body:not(.js-wizard) #next-step,body:not(.js-wizard) .nav-hint{display:none!important}
body:not(.js-wizard) #complete-form{display:inline-flex!important}
body:not(.js-wizard) .form-step{display:block!important}
body:not(.js-wizard) .form-step+.form-step{margin-top:36px}

@media(max-width:1100px){
  .gate-step{flex-direction:column;align-items:flex-start;gap:6px;min-height:84px;font-size:14px}
  .gate-check{position:absolute;top:10px;right:10px}
}
@media(max-width:760px){
  .gate-list{display:none}
  .gate-compact{display:block}
  .form-shell{padding-block:28px 72px}
  .form-intro{padding:28px 22px 22px}
  .form-intro h2{font-size:38px}
  .form-error-summary{margin-inline:22px}
  .form-fields{padding-inline:22px}
  .form-navigation{padding:22px}
  .field-grid{grid-template-columns:1fr;gap:22px}
  .form-section h3{font-size:25px}
}
@media(max-width:560px){
  .form-intro h2{font-size:34px}
  .form-intro p{font-size:16px}
  .form-intro,.form-fields,.form-navigation{padding-inline:18px}
  .form-error-summary{margin-inline:18px}
  .choices{grid-template-columns:1fr}
  .form-navigation .nav-hint{width:100%}
  .form-navigation .button{flex:1 1 auto;justify-content:space-between}
  #previous-step{flex:0 0 auto;margin-right:0}
}
@media(prefers-reduced-motion:reduce){.form-step.is-entering{animation:none}}

/* Passport stamps: a finished gate gets its stamp (decorative, never shifts layout). */
.gate-stamp{position:absolute;top:-36px;right:-8px;z-index:1;width:64px;height:auto;pointer-events:none;mix-blend-mode:multiply;opacity:1;image-rendering:auto;transform:rotate(var(--r,0deg))}
.gate-step.is-stamped .gate-check{visibility:hidden}
.gate-compact{position:relative;padding-right:52px}
.gate-compact-stamp{top:-12px;right:0;width:40px}
.stamp-in{animation:stamp-land .18s ease-out both}
@keyframes stamp-land{
  0%{opacity:0;transform:rotate(var(--r,0deg)) scale(1.25)}
  55%{opacity:1;transform:rotate(var(--r,0deg)) scale(1) translate(2px,-1px)}
  78%{opacity:1;transform:rotate(var(--r,0deg)) scale(1) translate(-2px,1px)}
  100%{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
}

/* Thank-you page: passport spread + story card generator. */
.passport-section{padding-bottom:96px}
.passport-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.passport-block h2,.story-share h2{font-size:46px;line-height:1;letter-spacing:-.015em;margin-bottom:24px}
.passport{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.42;max-width:780px;padding:8px 8px 8px 18px;background:var(--blue);border-radius:14px;box-shadow:0 20px 40px -26px rgb(23 25 30 / .55)}
.passport-page{position:relative;background:repeating-linear-gradient(180deg,transparent 0 31px,rgb(23 25 30 / .07) 31px 32px),#f7f1e3;box-shadow:inset 0 0 0 14px #f7f1e3,inset 0 0 0 15px rgb(23 25 30 / .14)}
.passport-page:first-child{border-radius:8px 2px 2px 8px;background-image:linear-gradient(90deg,transparent 86%,rgb(23 25 30 / .09)),repeating-linear-gradient(180deg,transparent 0 31px,rgb(23 25 30 / .07) 31px 32px)}
.passport-page:last-child{border-radius:2px 8px 8px 2px;background-image:linear-gradient(270deg,transparent 86%,rgb(23 25 30 / .09)),repeating-linear-gradient(180deg,transparent 0 31px,rgb(23 25 30 / .07) 31px 32px)}
.passport-stamp{position:absolute;left:var(--x);top:var(--y);width:var(--w);mix-blend-mode:multiply;opacity:1;transform:rotate(var(--r))}
.js .passport:not(.is-in) .passport-stamp{opacity:0}
.passport.is-in .passport-stamp{animation:stamp-land .18s ease-out both;animation-delay:calc(var(--i) * 140ms)}
.passport-no{position:absolute;bottom:20px;font-size:12px;color:var(--muted)}
.passport-page:first-child .passport-no{left:24px}
.passport-page:last-child .passport-no{right:24px}
.passport-caption{margin-top:20px;font:700 28px/1.1 var(--display);color:var(--blue)}
.story-share>p{font-size:15px;color:var(--muted)}
.story-canvas{display:block;width:270px;max-width:100%;height:auto;aspect-ratio:9/16;margin-top:20px;border-radius:10px;background:var(--blue);box-shadow:0 18px 36px -24px rgb(23 25 30 / .6)}
.story-field{margin-top:22px}
.story-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.story-actions .button{min-height:52px}
@media(max-width:900px){
  .passport-layout{grid-template-columns:1fr;gap:56px}
  .story-share{max-width:420px}
}
@media(max-width:560px){
  .passport-section{padding-bottom:72px}
  .passport-block h2,.story-share h2{font-size:38px}
  .passport{padding:5px 5px 5px 12px;border-radius:10px}
  .passport-page{box-shadow:inset 0 0 0 8px #f7f1e3,inset 0 0 0 9px rgb(23 25 30 / .14)}
  .passport-no{bottom:12px;font-size:10px}
  .passport-caption{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .stamp-in,.passport.is-in .passport-stamp{animation:none}
  .js .passport:not(.is-in) .passport-stamp{opacity:1}
}