/* 05 · Motivasyon mektubu — artboards 4a (1440) / 4b (375), fluid in between */
#mektup{
  --mk-ink:#17202A; --mk-good:#1F7A4F; --mk-bad:#B3261E; --mk-warn:#B8860B; --mk-lav:#E6E0F8;
  --panel-r:clamp(22px, calc(18.48px + 0.939vw), 32px);
  --panel-pad:clamp(14px, calc(9.07px + 1.315vw), 28px);
  --screen-r:clamp(16px, calc(13.89px + 0.563vw), 22px);
  --fade-h:clamp(90px, calc(79.44px + 2.817vw), 120px);
  position:relative;
  padding:clamp(44px, calc(34.14px + 2.629vw), 72px) 0 clamp(40px, calc(31.55px + 2.254vw), 64px);
  background:#fff;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-body,'Inter',sans-serif);color:var(--mk-ink);
  -webkit-font-smoothing:antialiased;
}
#mektup *,#mektup *::before,#mektup *::after{box-sizing:border-box}
#mektup p{margin:0}

/* heading + CTA */
#mektup .mk-h2{
  margin:0 24px;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;
  font-size:clamp(30px, calc(24.37px + 1.502vw), 46px);line-height:1.1;color:var(--mk-ink);text-align:center;text-wrap:balance;
}
#mektup .mk-cta{margin-top:clamp(18px, calc(16.59px + 0.376vw), 22px)}

/* buttons (scoped copies of the shared pill button) */
#mektup .mk-btn{
  height:clamp(44px, calc(43.30px + 0.188vw), 46px);padding:0 22px;border-radius:var(--radius-pill,999px);
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-size:clamp(14px, calc(13.65px + 0.094vw), 15px);font-weight:600;letter-spacing:-0.01em;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -4px var(--mk-btn-glow),0 1px 2px rgba(0,0,0,.15);
  transition:transform .15s ease,filter .15s ease;
}
#mektup .mk-btn svg{width:12px;height:12px;flex:none}
#mektup .mk-btn-brand{--mk-btn-glow:#0E6B8499;background:linear-gradient(180deg,#0E6B84 0%,#0E6B84 60%,rgba(0,0,0,.12) 100%),#0E6B84}
#mektup .mk-btn-ink{--mk-btn-glow:#17202A99;background:linear-gradient(180deg,#17202A 0%,#17202A 60%,rgba(0,0,0,.12) 100%),#17202A}
#mektup .mk-btn-sm{height:40px;font-size:14px}
#mektup .mk-btn-full{width:100%;justify-content:center}
#mektup a.mk-btn:hover{filter:brightness(1.06)}
#mektup a.mk-btn:active{transform:translateY(1px)}
#mektup a.mk-btn:focus-visible{outline:3px solid #0E6B84;outline-offset:3px}

/* lavender panel */
#mektup .mk-panel{
  margin-top:clamp(24px, calc(19.77px + 1.127vw), 36px);position:relative;
  width:min(1280px, calc(100% - 32px));
  border-radius:var(--panel-r);
  background:radial-gradient(120% 90% at 18% 0%,#F2EEFC 0%,#E6E0F8 55%,#E6E0F8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  padding:var(--panel-pad) var(--panel-pad) 0;
  display:flex;flex-direction:column;gap:12px;
}
#mektup .mk-fade{
  position:absolute;left:0;right:0;bottom:0;height:var(--fade-h);
  background:linear-gradient(180deg,rgba(230,224,248,0),#E6E0F8 70%);
  border-radius:0 0 var(--panel-r) var(--panel-r);z-index:3;pointer-events:none;
}

/* screen (mock app) — shared styles */
#mektup .mk-titlebar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid rgba(20,40,60,.06);background:linear-gradient(180deg,#F7F9FB,#F1F4F7);
}
#mektup .mk-dot{width:9px;height:9px;border-radius:50%;flex:none}
#mektup .mk-dot-r{background:linear-gradient(180deg,#FF8A80,#E5484D)}
#mektup .mk-dot-y{background:linear-gradient(180deg,#FFD866,#E7A800)}
#mektup .mk-dot-g{background:linear-gradient(180deg,#8BE39B,#2FA36B)}
#mektup .mk-titlebar-label{margin-left:8px;font-size:11.5px;font-weight:600;color:#8A94A0;white-space:nowrap}

#mektup .mk-letter{
  padding:22px 24px;font-size:clamp(12.5px, calc(11.97px + 0.141vw), 14px);line-height:1.65;color:var(--mk-ink);position:relative;
}
#mektup .mk-letter-title{font-size:clamp(14.5px, calc(13.97px + 0.141vw), 16px);font-weight:700;letter-spacing:-0.01em;margin-bottom:14px;line-height:1.5}
#mektup .mk-p{margin:0 0 12px;position:relative}
#mektup .mk-p-tight{margin:0}
#mektup .mk-p-tail{margin:12px 0 0}
#mektup .mk-mark{color:var(--mk-ink);padding:1px 3px;border-radius:4px}
#mektup .mk-mark-good{background:linear-gradient(180deg,#D7F2E2,#C4EBD4);box-shadow:inset 0 -1.5px 0 var(--mk-good)}
#mektup .mk-mark-bad{background:linear-gradient(180deg,#FCE0E4,#F8CDD3);box-shadow:inset 0 -1.5px 0 var(--mk-bad)}
#mektup .mk-mark-warn{background:linear-gradient(180deg,#FDF1C4,#F8E4A0);box-shadow:inset 0 -1.5px 0 var(--mk-warn)}

/* margin notes (desktop) */
#mektup .mk-note{
  display:none;position:absolute;right:-138px;top:0;width:120px;box-sizing:content-box;
  font-size:11.5px;line-height:1.35;font-weight:600;padding:6px 9px;border-radius:8px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--mk-note-c-33),0 2px 6px rgba(20,40,60,.08);color:var(--mk-note-c);
}
#mektup .mk-note-first{top:6px}
#mektup .mk-note-tick{position:absolute;left:-6px;top:10px;width:6px;height:1.5px;background:var(--mk-note-c)}
#mektup .mk-note-good{--mk-note-c:#1F7A4F;--mk-note-c-33:#1F7A4F33}
#mektup .mk-note-bad{--mk-note-c:#B3261E;--mk-note-c-33:#B3261E33}
#mektup .mk-note-warn{--mk-note-c:#B8860B;--mk-note-c-33:#B8860B33}

/* legend (mobile) */
#mektup .mk-legend{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;line-height:1.65}
#mektup .mk-legend-good{color:var(--mk-good)}
#mektup .mk-legend-bad{color:var(--mk-bad)}
#mektup .mk-legend-warn{color:var(--mk-warn)}

/* score column */
#mektup .mk-score{
  display:flex;flex-direction:column;gap:10px;padding:20px 18px;
  background:linear-gradient(180deg,#FFFFFF,#F8FAFC);
}
#mektup .mk-score-head{display:flex;align-items:baseline;justify-content:space-between}
#mektup .mk-score-label{font-size:13px;font-weight:600;color:#6B7280}
#mektup .mk-score-val{font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:26px;color:var(--mk-ink);line-height:normal}
#mektup .mk-bar{height:8px;border-radius:4px;background:linear-gradient(180deg,#E9EDF1,#F4F6F8);box-shadow:inset 0 1px 2px rgba(20,40,60,.10)}
#mektup .mk-bar-fill{width:70%;height:100%;border-radius:4px;background:linear-gradient(90deg,#E0357A,#F5A623 45%,#1F7A4F);box-shadow:0 2px 6px rgba(31,122,79,.3)}
#mektup .mk-item{
  display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  background:linear-gradient(180deg,#FBFCFD,#F3F5F8);box-shadow:inset 0 0 0 1px rgba(20,40,60,.07);
  font-size:13px;line-height:1.4;color:var(--mk-ink);
}
#mektup .mk-item-dot{flex:none;margin-top:5px;width:8px;height:8px;border-radius:50%}
#mektup .mk-item-dot-good{background:#1F7A4F;box-shadow:0 0 0 3px #1F7A4F22}
#mektup .mk-item-dot-bad{background:#B3261E;box-shadow:0 0 0 3px #B3261E22}
#mektup .mk-item-dot-brand{background:#0E6B84;box-shadow:0 0 0 3px #0E6B8422}
#mektup .mk-apply{margin-top:6px}

/* stickers + mascot overlapping the panel edge */
#mektup .mk-stickers{position:absolute;left:0;right:0;bottom:0;height:0;z-index:4;pointer-events:none}
#mektup .mk-stork{
  position:absolute;left:50%;bottom:clamp(-78px, calc(-33.38px + -3.099vw), -45px);
  width:clamp(150px, calc(111.27px + 10.329vw), 260px);aspect-ratio:461/441;height:auto;
  transform:translateX(-50%) rotate(-6deg);--halo:#FFFFFF;filter:drop-shadow(0 12px 18px rgba(20,40,60,.18));
}
#mektup .mk-stk{position:absolute;filter:drop-shadow(0 6px 10px rgba(20,40,60,.18))}
#mektup .mk-stk-pencil{left:clamp(83px, calc(59.41px + 6.291vw), 150px);bottom:clamp(-10px, calc(-3.24px + -0.469vw), -5px);width:clamp(35px, calc(24.79px + 2.723vw), 64px);height:auto;aspect-ratio:1;transform:rotate(-28deg)}
#mektup .mk-stk-star{left:clamp(165px, calc(117.46px + 12.676vw), 300px);bottom:clamp(-14px, calc(-5.89px + -0.563vw), -8px);width:clamp(29px, calc(20.90px + 2.160vw), 52px);height:auto;aspect-ratio:1;transform:rotate(12deg)}
#mektup .mk-stk-clip{right:clamp(83px, calc(59.41px + 6.291vw), 150px);bottom:clamp(-12px, calc(-5.24px + -0.469vw), -7px);width:clamp(31px, calc(22.20px + 2.347vw), 56px);height:auto;aspect-ratio:1;transform:rotate(30deg)}

/* ---- mobile / stacked layout (below 960) ---- */
@media (max-width:959.98px){
  #mektup .mk-screen{display:contents}
  #mektup .mk-letter-card,#mektup .mk-score{
    position:relative;z-index:2;border-radius:16px;background:#fff;overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,40,60,.06),0 2px 4px rgba(20,40,60,.04),0 14px 30px -10px rgba(20,40,60,.18),0 40px 70px -30px rgba(20,40,60,.25);
  }
  #mektup .mk-score{
    border-radius:16px 16px 0 0;padding:20px 18px 150px;
    background:linear-gradient(180deg,#FFFFFF,#F8FAFC) top/100% calc(100% - 130px) no-repeat,#fff;
  }
}

/* ---- desktop split-screen layout ---- */
@media (min-width:960px){
  #mektup .mk-panel{gap:0}
  #mektup .mk-screen{
    position:relative;z-index:2;border-radius:var(--screen-r) var(--screen-r) 0 0;background:#fff;overflow:hidden;height:640px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,40,60,.06),0 2px 4px rgba(20,40,60,.04),0 14px 30px -10px rgba(20,40,60,.18),0 40px 70px -30px rgba(20,40,60,.25);
    display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr);
  }
  #mektup .mk-letter-card{display:contents}
  #mektup .mk-titlebar{grid-column:1 / -1}
  #mektup .mk-letter{grid-column:1;grid-row:2;padding-right:170px;min-width:0}
  #mektup .mk-score{grid-column:2;grid-row:2;width:360px;border-left:1px solid rgba(20,40,60,.06)}
  #mektup .mk-note{display:block}
  #mektup .mk-legend{display:none}
}

/* three feature cards */
#mektup .mk-cards{
  margin-top:clamp(70px, calc(55.92px + 3.756vw), 110px);width:min(1280px, calc(100% - 32px));
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px, calc(13.18px + 0.751vw), 24px);
}
#mektup .mk-card{
  display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;margin:0;
  box-shadow:0 0 0 1px rgba(20,40,60,.08),0 2px 6px rgba(20,40,60,.04);
}
#mektup .mk-card-art{
  height:200px;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(180deg,#F8FAFC,#FFFFFF);border-bottom:1px solid rgba(20,40,60,.06);
}
#mektup .mk-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px}
#mektup .mk-card-title{margin:0;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:22px;line-height:normal;color:var(--mk-ink)}
#mektup .mk-card-text{margin:0;font-size:14.5px;line-height:1.5;color:#4B5563}
#mektup .mk-card-cta{margin-top:10px}

/* card 1 — checklist */
#mektup .mk-list{width:100%;display:flex;flex-direction:column;gap:6px;padding:0 6px}
#mektup .mk-list-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:linear-gradient(180deg,#FFFFFF,#F8FAFB);box-shadow:inset 0 0 0 1px rgba(20,40,60,.06)}
#mektup .mk-list-row-on{background:linear-gradient(180deg,#E3EEF2,#D6E7ED)}
#mektup .mk-check{flex:none;width:16px;height:16px;border-radius:5px;background:linear-gradient(180deg,#fff,#F1F3F6);box-shadow:inset 0 0 0 1.5px #C3CAD3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;line-height:1}
#mektup .mk-check-on{background:linear-gradient(160deg,#1A809B,#0E6B84);box-shadow:0 2px 5px rgba(14,107,132,.35)}
#mektup .mk-list-label{font-size:13px;font-weight:600;color:var(--mk-ink);line-height:1.2}
#mektup .mk-list-label-on{color:#0E6B84}

/* card 2 — gauge */
#mektup .mk-gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
#mektup .mk-gauge{position:relative;width:170px;height:96px}
#mektup .mk-gauge svg{width:170px;height:96px;display:block}
#mektup .mk-gauge-val{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:30px;line-height:normal;color:var(--mk-ink)}
#mektup .mk-gauge-cap{font-size:12px;font-weight:600;color:#6B7280}

/* card 3 — paper stack + stork */
#mektup .mk-stack{position:relative;width:180px;height:130px}
#mektup .mk-sheet{position:absolute;width:120px;height:110px;border-radius:8px}
#mektup .mk-sheet-back{left:28px;top:14px;background:linear-gradient(180deg,#FFFFFF,#F4F6F8);box-shadow:0 0 0 1px rgba(20,40,60,.08),0 6px 14px rgba(20,40,60,.08);transform:rotate(-7deg)}
#mektup .mk-sheet-front{left:40px;top:6px;background:linear-gradient(180deg,#FFFFFF,#F8FAFC);box-shadow:0 0 0 1px rgba(20,40,60,.08),0 8px 18px rgba(20,40,60,.10);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
#mektup .mk-sheet-front span{display:block;height:4px;border-radius:2px;background:#E1E6EC}
#mektup .mk-ready{position:absolute;right:4px;top:0;height:26px;padding:0 10px;border-radius:999px;background:linear-gradient(180deg,#5BC98A,#1F7A4F);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;box-shadow:0 4px 10px rgba(31,122,79,.35);white-space:nowrap}
#mektup .mk-stack-stork{position:absolute;left:0;bottom:-8px;width:64px;height:61px;--halo:#CFE6ED}

/* ---- motion (ANIM-D). Transform / opacity / clip-path only; everything below is skipped under reduced motion ---- */
#mektup .mk-stk-pencil{--rot:-28deg}
#mektup .mk-stk-star{--rot:12deg}
#mektup .mk-stk-clip{--rot:30deg}
#mektup .mk-eyelid{transform-box:view-box;transform-origin:262px 79px;transform:scaleY(0)}
@media (prefers-reduced-motion:no-preference){
  /* letter highlights sweep in one after another (green → red → yellow, 300 ms each).
     The marks are inline text that wraps, and Chrome applies clip-path to the first line fragment only,
     so the sweep is a paint-only background-size reveal of the highlight fill (no layout, follows the wrapped text). */
  #mektup .mk-panel[data-reveal] .mk-mark{background-repeat:no-repeat;background-size:0% 100%;transition:background-size .3s cubic-bezier(.2,.7,.2,1)}
  #mektup .mk-panel.is-in .mk-mark{background-size:100% 100%}
  #mektup .mk-panel.is-in .mk-mark-good{transition-delay:.35s}
  #mektup .mk-panel.is-in .mk-mark-bad{transition-delay:.65s}
  #mektup .mk-panel.is-in .mk-mark-warn{transition-delay:.95s}
  /* margin notes slide in from the right after their highlight lands */
  #mektup .mk-panel[data-reveal] .mk-note{opacity:0;transform:translateX(18px);transition:opacity .45s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
  #mektup .mk-panel.is-in .mk-note{opacity:1;transform:none}
  #mektup .mk-panel.is-in .mk-note-good{transition-delay:.6s}
  #mektup .mk-panel.is-in .mk-note-bad{transition-delay:.9s}
  #mektup .mk-panel.is-in .mk-note-warn{transition-delay:1.2s}
  /* score bar fills to 7/10 */
  #mektup .mk-panel[data-reveal] .mk-bar-fill{transform-origin:0 50%;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1) 1.25s}
  #mektup .mk-panel.is-in .mk-bar-fill{transform:scaleX(1)}
  /* stickers on the panel edge float with different phases; paused while the panel is off screen */
  #mektup .mk-stk{will-change:transform}
  #mektup .mk-panel.is-in .mk-stk{animation:mk-bob 4s ease-in-out infinite;animation-play-state:paused}
  #mektup .mk-panel.is-in.is-live .mk-stk{animation-play-state:running}
  #mektup .mk-panel.is-in .mk-stk-star{animation-delay:-1.4s;animation-duration:4.4s}
  #mektup .mk-panel.is-in .mk-stk-clip{animation-delay:-2.6s;animation-duration:3.7s}
  @keyframes mk-bob{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-4px) rotate(var(--rot))}}
  /* stork blink: white eyelids drawn over the pupils, scaled down from the top */
  #mektup .mk-stork.is-blink .mk-eyelid{animation:mk-blink .24s ease-in-out}
  @keyframes mk-blink{0%{transform:scaleY(0)}40%{transform:scaleY(1)}60%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  /* card 2: gauge arc draws from 0 to 7/10 on first view */
  #mektup .mk-card[data-reveal] .mk-gauge-arc{stroke-dasharray:1 1.5;stroke-dashoffset:1.1;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1) .35s}
  #mektup .mk-card.is-in .mk-gauge-arc{stroke-dashoffset:0}
  /* card 3: "Hazır ✓" badge pops */
  #mektup .mk-card[data-reveal] .mk-ready{opacity:0;transform:scale(.55);transition:opacity .2s ease-out .55s,transform .5s cubic-bezier(.34,1.56,.64,1) .55s}
  #mektup .mk-card.is-in .mk-ready{opacity:1;transform:none}
}