/* Smaller pages: exams, about, contact. Tokens and shared pieces come from base.css. */

/* Sınav Hazırlığı: exam → level → section → Teil (js/exams.js). Cards are paper on sand like the exercise hub. */
#page-exams .exam-flow{padding-bottom:0}
#page-exams .exam-steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 clamp(28px,4vw,44px);padding:0;list-style:none}
#page-exams .exam-step{display:flex;align-items:center;gap:8px;min-width:0}
#page-exams .exam-step+.exam-step::before{content:"›";color:var(--ba-muted);font-size:20px;line-height:1}
#page-exams .exam-step :is(a,.exam-step-static){display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px 8px 8px;border-radius:var(--ba-radius-small);color:var(--ba-ink);text-decoration:none}
#page-exams .exam-step a{background:var(--ba-paper);transition:background-color .2s}
#page-exams .exam-step a:hover{background:var(--ba-paper-2)}
#page-exams .exam-step a:hover strong{text-decoration:underline;text-underline-offset:4px}
#page-exams .exam-step-no{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ba-paper-2);font-weight:600;font-size:var(--ba-small);font-variant-numeric:tabular-nums}
#page-exams .exam-step-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#page-exams .exam-step-label{color:var(--ba-muted);font-size:var(--ba-small)}
#page-exams .exam-step strong{font-weight:600;overflow-wrap:anywhere}
#page-exams .exam-step.is-current :is(a,.exam-step-static){background:var(--ba-accent);color:var(--ba-accent-ink)}
#page-exams .exam-step.is-current a:hover{background:var(--ba-accent-hover)}
#page-exams .exam-step.is-current .exam-step-no{background:var(--ba-accent-ink);color:var(--ba-accent)}
#page-exams .exam-step.is-current .exam-step-label{color:var(--ba-accent-ink);font-weight:600}
#page-exams .exam-step.is-todo .exam-step-static{color:var(--ba-muted)}
#page-exams .exam-step.is-todo .exam-step-no{background:transparent;box-shadow:inset 0 0 0 2px var(--ba-line-strong)}
#page-exams .exam-step.is-done .exam-step-static{background:var(--ba-paper)}
#page-exams .exam-step.is-done .exam-step-no{background:var(--ba-accent);color:var(--ba-accent-ink)}

#page-exams .exam-flow-head{margin:0 0 24px}
#page-exams .exam-flow-head h2{margin:0 0 8px}
#page-exams .exam-flow-head .sub{margin:0;max-width:60ch;color:var(--ba-ink)}
#page-exams .exam-back{margin:0 0 20px;padding:0 18px}

#page-exams .exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
#page-exams .exam-grid>li{display:flex;min-width:0}
#page-exams .exam-card{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0;padding:clamp(20px,2.4vw,28px);background:var(--ba-paper);border-radius:var(--ba-radius);color:var(--ba-ink);text-decoration:none;transition:background-color .2s,transform .2s}
#page-exams a.exam-card:hover{background:var(--ba-paper-2)}
#page-exams a.exam-card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
#page-exams a.exam-card:active{transform:scale(.99)}
#page-exams .exam-card h3{margin:0;font-family:var(--ba-serif);font-weight:600;font-size:var(--ba-lead);line-height:1.25;overflow-wrap:anywhere}
#page-exams .exam-card p{margin:0;color:var(--ba-ink);font-size:var(--ba-body);line-height:1.5}
#page-exams .exam-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#page-exams .exam-card-kicker{color:var(--ba-muted);font-size:var(--ba-small);font-weight:500}
#page-exams .exam-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:4px dotted var(--ba-paper-2)}
#page-exams .exam-card-meta-label{color:var(--ba-muted);font-size:var(--ba-small)}
#page-exams .exam-chips{display:flex;flex-wrap:wrap;gap:4px}
#page-exams .exam-chip{padding:2px 8px;border-radius:4px;background:var(--ba-paper-2);font-size:var(--ba-small);font-weight:600;font-variant-numeric:tabular-nums}
#page-exams a.exam-card:hover .exam-chip{background:var(--ba-paper)}
#page-exams .exam-card-action{margin-top:auto;color:var(--ba-accent);font-size:var(--ba-small);font-weight:600}
#page-exams .exam-card-meta+.exam-card-action{margin-top:0}
#page-exams .exam-badge{flex:none;padding:2px 10px;border-radius:999px;background:var(--ba-paper-2);color:var(--ba-ink);font-size:var(--ba-small);font-weight:600}
#page-exams .exam-tag{padding:2px 10px;border-radius:999px;background:var(--ba-accent);color:var(--ba-accent-ink);font-size:var(--ba-small);font-weight:600}
#page-exams .exam-card.is-soon{background:transparent;box-shadow:inset 0 0 0 2px var(--ba-line);cursor:not-allowed}
#page-exams .exam-card.is-soon :is(h3,p,.exam-card-action){color:var(--ba-muted)}
#page-exams .exam-teil.is-soon{cursor:default}

/* Level cards: the big badge from the exercise hub's level tabs */
#page-exams .exam-level-card{flex-direction:row;align-items:flex-start;gap:18px}
#page-exams .exam-level-badge{flex:none;min-width:2.2ch;font-family:var(--ba-serif);font-size:clamp(2rem,1.5rem + 1.4vw,2.75rem);font-weight:600;line-height:1}
#page-exams .exam-level-body{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;align-self:stretch}
#page-exams .exam-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:6px}
#page-exams .exam-card-foot .exam-card-action{margin-top:0}
#page-exams .exam-stars{color:var(--ba-accent);font-size:18px;letter-spacing:2px;line-height:1}
#page-exams .exam-stars-off{color:var(--ba-line-strong);opacity:.55}
#page-exams .exam-translation{display:block;margin-top:2px;font-family:var(--ba-sans);font-size:var(--ba-body);font-weight:500;color:var(--ba-muted)}

/* Teil cards and their exercise sets */
#page-exams .exam-teil h3{font-size:clamp(1.5rem,1.2rem + .9vw,1.875rem);font-weight:400;letter-spacing:-.015em}
#page-exams .exam-teil-title{font-weight:600}
#page-exams .exam-teil-empty{color:var(--ba-muted)!important;font-size:var(--ba-small)!important}
#page-exams .exam-teil>.exam-start{margin-top:auto;align-self:flex-start}
#page-exams .exam-sets{display:grid;gap:0;margin:auto 0 0;padding:0;list-style:none}
#page-exams .exam-set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:4px dotted var(--ba-paper-2)}
#page-exams .exam-set-title{min-width:0;overflow-wrap:anywhere}
#page-exams .exam-start{flex:none;min-height:44px;padding:0 20px}

#page-exams .exam-plan{padding:0;display:block;color:var(--ba-ink)}
#page-exams .exam-plan-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;padding:clamp(28px,5vw,64px)}
#page-exams .exam-plan h2{margin:0 0 12px;max-width:16em}
#page-exams .exam-plan p{margin:0;max-width:48ch;color:var(--ba-ink)}
@media(max-width:1020px){
  #page-exams .exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  #page-exams .exam-grid{grid-template-columns:1fr}
  #page-exams .exam-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #page-exams .exam-step+.exam-step::before{display:none}
  #page-exams .exam-step :is(a,.exam-step-static){width:100%}
  #page-exams .exam-plan-body{grid-template-columns:1fr}
  #page-exams .exam-plan .btn{width:100%}
}

/* Hakkımda: portrait beside a letter, then the record on a slip, work on green, method on the ground */
#page-about .about-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:stretch}
#page-about .about-photo{margin:0;min-height:0;border-radius:var(--ba-radius);overflow:hidden;background:var(--ba-paper-2);box-shadow:none;aspect-ratio:4/5}
#page-about .about-photo img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 32%;display:block}
#page-about .about-text{padding:0;border:0;box-shadow:none;display:flex;flex-direction:column}
#page-about .about-letter{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,72px)}
#page-about .about-letter h2{margin:0 0 4px}
#page-about .about-role{margin:0 0 24px;color:var(--ba-muted);font-size:var(--ba-body)}
#page-about .founder-bio{margin:0 0 16px;padding:0;border:0;background:none;border-radius:0;font-size:var(--ba-lead);line-height:1.55;color:var(--ba-ink);max-width:40ch}
#page-about .section-head{margin:0 0 28px;max-width:760px}
#page-about .section-head h2{margin:0 0 12px}
#page-about .section-head .sub{color:var(--ba-ink);max-width:44ch}
#page-about .about-item{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
#page-about .about-item h3{font-size:var(--ba-lead);margin:0 0 8px}
#page-about .about-item p{margin:0;color:inherit}
#page-about .about-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px;padding-left:clamp(22px,4vw,56px);padding-right:clamp(22px,4vw,56px);max-width:none}
#page-about .about-work{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;padding:clamp(28px,5vw,64px)}
#page-about .about-work h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
#page-about .about-method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px}
@media(max-width:1020px){
  #page-about .about-box{grid-template-columns:1fr}
  #page-about .about-photo{aspect-ratio:auto;height:min(70svh,560px)}
  #page-about .about-journey,#page-about .about-method{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  #page-about .about-photo{height:56svh}
  #page-about :is(.about-journey,.about-method,.about-work){grid-template-columns:1fr}
}

/* İletişim: what to write on a slip, the form on a reply card */
#page-contact .contact-form-shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;max-width:none;margin:0;align-items:start}
#page-contact .contact-guide{display:grid;gap:12px}
#page-contact .contact-mail-row{display:flex;align-items:center;gap:14px;width:auto;margin:0;padding:22px clamp(22px,3vw,40px);background:var(--ba-paper);border:0;border-radius:var(--ba-radius)}
#page-contact .contact-mail-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--ba-accent);color:var(--ba-accent-ink);border-radius:0;font-size:20px}
#page-contact .contact-mail-row small{display:block;font-size:var(--ba-small);font-weight:500;color:var(--ba-muted);letter-spacing:0;text-transform:none}
#page-contact .contact-mail-row a{display:inline-block;color:var(--ba-ink);font-weight:600;font-size:var(--ba-lead);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
#page-contact .contact-guide-title{margin:0 0 16px;font-family:var(--ba-serif);font-weight:600;font-size:var(--ba-lead);color:var(--ba-ink)}
#page-contact .contact-guide-list{margin:0;font-size:var(--ba-body);color:var(--ba-ink)}
#page-contact .contact-main-card{padding:0;border:0;box-shadow:none}
#page-contact .contact-card-body{padding:clamp(24px,4vw,56px)}
#page-contact .contact-heading-row{display:block;margin:0 0 24px}
#page-contact .contact-heading-line{display:none}
#page-contact .contact-heading-row h2{margin:0}
#page-contact .contact-message-form{border:0;padding:0}
#page-contact .contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
#page-contact .field{display:grid;gap:8px;margin-bottom:18px}
#page-contact .field :is(input,textarea){width:100%;padding:13px 14px;min-height:52px}
#page-contact .field textarea{min-height:160px;resize:vertical}
#page-contact .contact-submit{width:auto;min-width:200px}
#page-contact .contact-form-status{margin-top:16px;padding:14px 16px;border:0;border-radius:var(--ba-radius-small);font-weight:500}
#page-contact .contact-form-status.success{background:var(--ba-right-bg);color:var(--ba-right)}
#page-contact .contact-form-status.error{background:var(--ba-wrong-bg);color:var(--ba-wrong)}
#page-contact .contact-form-status.success::before{content:"✓ ";font-weight:700}
#page-contact .contact-form-status.error::before{content:"! ";font-weight:700}
@media(max-width:1020px){#page-contact .contact-form-shell{grid-template-columns:1fr}}
@media(max-width:620px){
  #page-contact .contact-form-grid{grid-template-columns:1fr}
  #page-contact .contact-submit{width:100%}
}