/* 06-dark — "Takıldığın yerde sor" dark band. Scoped to #dark. 1:1 with artboards 5a (1440) and 5b (375). */
#dark{display:block;box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;background:var(--white,#fff);padding:clamp(20px,10.141px + 2.6291vw,48px) clamp(16px,0.507px + 4.1315vw,60px) clamp(32px,20.732px + 3.0047vw,64px);font-family:var(--font-body,'Inter',system-ui,sans-serif);-webkit-font-smoothing:antialiased;color:#fff}
#dark *,#dark *::before,#dark *::after{box-sizing:border-box}
#dark .dark-sprite{position:absolute;width:0;height:0;overflow:hidden}

#dark .dark-band{position:relative;overflow:hidden;border-radius:clamp(28px,23.775px + 1.1268vw,40px);background:#0B1B22;padding:clamp(64px,52.732px + 3.0047vw,96px) clamp(24px,-2.761px + 7.1362vw,100px) 0;display:flex;flex-direction:column;align-items:center;color:#fff}
#dark .dark-glow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none}
#dark .dark-glow-top{top:-200px;width:900px;height:600px;background:radial-gradient(closest-side,rgba(14,107,132,.55),rgba(14,107,132,0))}
#dark .dark-glow-bottom{bottom:-260px;width:1100px;height:600px;background:radial-gradient(closest-side,rgba(14,107,132,.4),rgba(14,107,132,0))}

/* comet stork: 420×260 at 1440, 240×149 at 375; children scale with the stage width (cqi) */
#dark .dark-comet{position:relative}
#dark .dark-comet-stage{position:relative;width:clamp(240px,176.620px + 16.9014vw,420px);aspect-ratio:420/260;container-type:inline-size}
#dark .dark-comet-tail{position:absolute;left:-2.381cqi;top:14.286cqi;width:80.952cqi;height:28.571cqi;transform:rotate(-24deg);transform-origin:right center;border-radius:14.286cqi;background:linear-gradient(90deg,rgba(14,107,132,0) 0%,rgba(14,107,132,.35) 45%,rgba(72,170,196,.85) 100%);filter:blur(.476cqi)}
#dark .dark-comet-tail2{position:absolute;left:9.524cqi;top:20.238cqi;width:66.667cqi;height:16.667cqi;transform:rotate(-24deg);transform-origin:right center;border-radius:9.524cqi;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35))}
#dark .dark-comet-dot{position:absolute;border-radius:50%}
#dark .dark-comet-dot-1{left:16.667cqi;top:28.095cqi;width:3.81cqi;height:3.81cqi;background:rgba(255,255,255,.35)}
#dark .dark-comet-dot-2{left:30.952cqi;top:22.143cqi;width:5.714cqi;height:5.714cqi;background:rgba(255,255,255,.28)}
#dark .dark-comet-dot-3{left:47.619cqi;top:25.952cqi;width:2.857cqi;height:2.857cqi;background:rgba(255,255,255,.4)}
#dark .dark-comet-star{position:absolute;color:#5EE0C4}
#dark .dark-comet-star-1{left:71.429cqi;top:4.762cqi;width:5.238cqi;height:5.238cqi}
#dark .dark-comet-star-2{left:28.571cqi;top:21.429cqi;width:3.333cqi;height:3.333cqi}
#dark .dark-comet-stork{position:absolute;right:0;top:0;width:54.762cqi;height:52.381cqi;transform:rotate(-26deg);filter:drop-shadow(0 0 6.19cqi rgba(14,107,132,.7));--halo:#0A4A5C}

#dark .dark-title{position:relative;margin:clamp(16px,13.183px + 0.7512vw,24px) 0 0;font-family:var(--font-display,'Manrope',system-ui,sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:clamp(34px,27.662px + 1.6901vw,52px);line-height:1.05;text-align:center;color:#fff}
#dark .dark-sub{position:relative;margin:clamp(10px,8.592px + 0.3756vw,14px) 0 0;font-size:clamp(15px,13.944px + 0.2817vw,18px);line-height:1.5;color:#AEBFC7;text-align:center}
#dark .dark-cta{position:relative;margin-top:clamp(20px,17.887px + 0.5634vw,26px)}

/* brand pill button (shared look, scoped) */
#dark .dark-btn{height:44px;padding:0 22px;border-radius:var(--radius-pill,9999px);background:linear-gradient(180deg,#0E6B84 0%,#0E6B84 60%,rgba(0,0,0,.12) 100%),#0E6B84;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px -4px #0E6B84CC,0 1px 2px rgba(0,0,0,.3);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-0.01em;line-height:1;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
#dark a.dark-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -4px #0E6B84CC,0 1px 2px rgba(0,0,0,.3)}
#dark a.dark-btn:focus-visible{outline:2px solid #5EE0C4;outline-offset:3px}
#dark .dark-btn-lg{height:clamp(44px,42.592px + 0.3756vw,48px);font-size:clamp(15px,14.648px + 0.0939vw,16px)}
#dark .dark-btn-sm{height:40px;font-size:14px;cursor:default}

/* rows */
#dark .dark-row{position:relative;margin-top:clamp(64px,44.282px + 5.2582vw,120px);width:100%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
#dark .dark-row-2 .dark-copy{order:2}
#dark .dark-row-2 .dark-screen-col{order:1}
#dark .dark-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
#dark .dark-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#5EE0C4}
#dark .dark-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#5EE0C4;box-shadow:0 0 10px #5EE0C4;flex:none}
#dark .dark-h3{margin:0;font-family:var(--font-display,'Manrope',system-ui,sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:clamp(30px,25.070px + 1.3146vw,44px);line-height:1.08;color:#fff;text-wrap:balance}
#dark .dark-p{margin:0;font-size:17px;line-height:1.55;color:#AEBFC7;text-wrap:pretty}
#dark .dark-copy-cta{margin-top:8px}
#dark .dark-screen-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}

#dark .dark-pills{display:inline-flex;gap:4px;padding:6px;border-radius:var(--radius-pill,9999px);max-width:100%;background:linear-gradient(180deg,#1A809B,#0E6B84);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 30px rgba(14,107,132,.55)}
#dark .dark-pill{height:32px;padding:0 14px;border-radius:var(--radius-pill,9999px);display:flex;align-items:center;font-size:clamp(12px,11.648px + 0.0939vw,13px);font-weight:600;color:#fff;background:transparent;white-space:nowrap}
#dark .dark-pill.is-on{color:#17202A;background:#fff}

#dark .dark-frame{position:relative;width:100%;border-radius:28px;padding:10px;background:linear-gradient(180deg,#26414B,#132A33);box-shadow:0 0 0 1px rgba(94,224,196,.25),0 0 40px rgba(14,107,132,.55),0 0 90px rgba(14,107,132,.35),inset 0 1px 0 rgba(255,255,255,.15)}
#dark .dark-screen{border-radius:20px;background:linear-gradient(180deg,#FFFFFF,#F5F8FA);padding:22px;display:flex;flex-direction:column;gap:12px;min-height:100%;color:#17202A}

#dark .dark-chat-user{align-self:flex-end;max-width:78%;padding:11px 14px;border-radius:16px 16px 4px 16px;background:linear-gradient(180deg,#EEF2F5,#E4E9EE);font-size:14px;line-height:1.45;color:#17202A}
#dark .dark-chat-who{display:flex;align-items:center;gap:8px;margin-top:4px}
#dark .dark-chat-stork{width:26px;height:25px;--halo:#CFE6ED;flex:none}
#dark .dark-chat-name{font-size:13px;font-weight:700;color:#17202A}
#dark .dark-chat-bot{max-width:88%;padding:12px 14px;border-radius:4px 16px 16px 16px;background:linear-gradient(180deg,#E3EEF2,#D6E7ED);font-size:14px;line-height:1.5;color:#17202A}
#dark .dark-chat-source{align-self:flex-start;height:26px;padding:0 10px;border-radius:var(--radius-pill,9999px);background:#fff;box-shadow:inset 0 0 0 1px rgba(20,40,60,.1);font-size:11.5px;font-weight:600;color:#6B7280;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:100%}
#dark .dark-chat-source-dot{width:6px;height:6px;border-radius:50%;background:#0E6B84;flex:none}

#dark .dark-review-title{font-size:15px;font-weight:700;color:#17202A;letter-spacing:-0.01em}
#dark .dark-steps{display:flex;flex-direction:column;margin-top:4px}
#dark .dark-step{display:flex;gap:12px;align-items:flex-start}
#dark .dark-step-rail{display:flex;flex-direction:column;align-items:center;flex:none}
#dark .dark-step-dot{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #0E6B84;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;line-height:1}
#dark .dark-step-dot.is-done{background:linear-gradient(160deg,#1A809B,#0E6B84);box-shadow:0 2px 6px rgba(14,107,132,.4)}
#dark .dark-step-line{width:2px;height:22px;background:#0E6B84}
#dark .dark-step-label{font-size:14px;font-weight:600;color:#6B7280;padding-top:1px;line-height:1.2}
#dark .dark-step-label.is-current{color:#17202A}
#dark .dark-note{padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,#FDF6E3,#FAEBC8);box-shadow:inset 0 0 0 1px rgba(184,134,11,.2);font-size:13.5px;line-height:1.45;color:#17202A}
#dark .dark-review-cta{margin-top:2px}

/* ending */
#dark .dark-title-end{margin-top:clamp(72px,48.056px + 6.3850vw,140px)}
#dark .dark-finale{position:relative;margin-top:clamp(24px,19.775px + 1.1268vw,36px);width:100%}
#dark .dark-finale-stage{position:relative;width:100%;max-width:560px;height:clamp(230px,198.310px + 8.4507vw,320px);margin:0 auto;container-type:inline-size}
#dark .dark-finale-stork{position:absolute;left:50%;bottom:0;width:46.429cqi;height:44.464cqi;transform:translateX(-50%);filter:drop-shadow(0 0 30px rgba(14,107,132,.7));--halo:#0A4A5C}
#dark .dark-obj{position:absolute}
#dark .dark-obj-passport{left:7.143cqi;top:7.143cqi;transform:rotate(-12deg)}
#dark .dark-obj-plane{left:75cqi;top:3.571cqi;transform:rotate(8deg)}
#dark .dark-obj-stamp{left:81.429cqi;top:32.143cqi}
#dark .dark-obj-cal{left:12.5cqi;top:37.5cqi;transform:rotate(10deg)}
#dark .dark-passport{width:64px;height:84px;border-radius:8px;background:linear-gradient(160deg,#B8433B,#7E1F1A);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#dark .dark-passport-ring{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #E8C67A}
#dark .dark-passport-line{width:34px;height:4px;border-radius:2px;background:#E8C67A}
#dark .dark-passport-line-2{width:22px;opacity:.7}
#dark .dark-plane{width:76px;height:57px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
#dark .dark-stamp{width:74px;height:74px;border-radius:50%;box-shadow:inset 0 0 0 3px #F28A3A,0 0 24px rgba(242,138,58,.35);display:flex;align-items:center;justify-content:center;transform:rotate(-14deg)}
#dark .dark-stamp-inner{width:58px;height:58px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #F28A3A;display:flex;align-items:center;justify-content:center;font-family:var(--font-display,'Manrope',system-ui,sans-serif);font-weight:800;font-size:11px;letter-spacing:.08em;color:#F28A3A;text-align:center;line-height:1.2}
#dark .dark-cal{width:70px;height:74px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.4)}
#dark .dark-cal-top{height:20px;background:linear-gradient(180deg,#1A809B,#0E6B84)}
#dark .dark-cal-day{display:flex;align-items:center;justify-content:center;height:54px;font-family:var(--font-display,'Manrope',system-ui,sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:26px;color:#17202A}

/* mobile stage (5b): stork 190×182, passport + plane only */
@container (max-width: 360px){
  #dark .dark-finale-stork{width:190px;height:182px}
  #dark .dark-obj-passport{left:10px;top:30px}
  #dark .dark-obj-plane{left:auto;right:10px;top:24px}
  #dark .dark-obj-stamp,#dark .dark-obj-cal{display:none}
}

/* stack the rows below tablet width (5b layout) */
@media (max-width: 860px){
  #dark .dark-row{display:flex;flex-direction:column;gap:22px;align-items:stretch}
  #dark .dark-row-2 .dark-copy{order:1}
  #dark .dark-row-2 .dark-screen-col{order:2}
  #dark .dark-row-1 .dark-screen-col{align-items:center;gap:12px}
  #dark .dark-pills{display:flex;flex-wrap:wrap;justify-content:center;border-radius:24px}
  #dark .dark-finale-stage{max-width:311px}
}
@media (prefers-reduced-motion: reduce){#dark .dark-btn{transition:none}}

/* ---------- animation (ANIM-E). Transform/opacity/filter only; all gated behind no-preference. ---------- */
#dark .dark-chat-bot{position:relative}
#dark .dark-chat-text{display:block}
#dark .dark-typing{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;gap:5px;opacity:0;pointer-events:none}
#dark .dark-typing i{width:7px;height:7px;border-radius:50%;background:#0E6B84;opacity:.45;display:block}
#dark .dark-orbit{display:block}
@media (prefers-reduced-motion:no-preference){
  /* teal glow drifts slowly (translate only; the -50% keeps it centred) */
  #dark .dark-glow-top{animation:dark-glow-a 25s ease-in-out infinite;will-change:transform}
  #dark .dark-glow-bottom{animation:dark-glow-b 25s ease-in-out infinite;will-change:transform}
  @keyframes dark-glow-a{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-44%,18px)}}
  @keyframes dark-glow-b{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-55%,-14px)}}

  /* comet: JS flies the stage in (Motion.animate), then .is-idle takes over with a gentle drift */
  #dark .dark-comet-stage.is-idle{animation:dark-comet-idle 6s ease-in-out infinite;will-change:transform}
  @keyframes dark-comet-idle{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-6px) rotate(1deg)}}
  #dark .dark-comet-star{transform-origin:center}
  #dark .dark-comet-stage.is-idle .dark-comet-star-1{animation:dark-twinkle 3.2s ease-in-out infinite}
  #dark .dark-comet-stage.is-idle .dark-comet-star-2{animation:dark-twinkle 4.1s ease-in-out -1.5s infinite}
  @keyframes dark-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

  /* device frames: reveal via [data-reveal="scale"], plus a one-shot glow bloom on the frame's halo */
  #dark .dark-frame::before{content:"";position:absolute;inset:-6px;border-radius:34px;background:radial-gradient(closest-side,rgba(94,224,196,.45),rgba(14,107,132,.35) 60%,rgba(14,107,132,0));opacity:0;pointer-events:none;z-index:-1}
  #dark .dark-frame.is-in::before{animation:dark-bloom 1.3s ease-out .25s 1 both}
  @keyframes dark-bloom{0%{opacity:0;transform:scale(.96)}35%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.08)}}

  /* chat sequence: armed by JS, then stepped with .is-s1 (question) .is-s2 (typing) .is-s3 (answer) */
  #dark .dark-chat.is-armed .dark-chat-user,#dark .dark-chat.is-armed .dark-chat-who,#dark .dark-chat.is-armed .dark-chat-bot,#dark .dark-chat.is-armed .dark-chat-source{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
  #dark .dark-chat.is-armed .dark-chat-user{transform-origin:right bottom}
  #dark .dark-chat.is-armed .dark-chat-bot{transform-origin:left top}
  #dark .dark-chat.is-armed .dark-chat-text{opacity:0;transition:opacity .4s ease}
  #dark .dark-chat.is-armed .dark-typing{opacity:1;transition:opacity .2s ease}
  #dark .dark-chat.is-armed .dark-typing i{animation:dark-typing 1s ease-in-out infinite}
  #dark .dark-chat.is-armed .dark-typing i:nth-child(2){animation-delay:.15s}
  #dark .dark-chat.is-armed .dark-typing i:nth-child(3){animation-delay:.3s}
  @keyframes dark-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
  #dark .dark-chat.is-s1 .dark-chat-user{opacity:1;transform:none}
  #dark .dark-chat.is-s2 .dark-chat-who,#dark .dark-chat.is-s2 .dark-chat-bot{opacity:1;transform:none}
  #dark .dark-chat.is-s3 .dark-chat-text{opacity:1}
  #dark .dark-chat.is-s3 .dark-typing{opacity:0}
  #dark .dark-chat.is-s3 .dark-typing i{animation:none}
  #dark .dark-chat.is-s3 .dark-chat-source{opacity:1;transform:none;transition-delay:.25s}

  /* expert timeline: ticks pop, rails draw top-down, labels fade; stepped by JS with .is-on per .dark-step */
  #dark .dark-review.is-armed .dark-review-title,#dark .dark-review.is-armed .dark-note,#dark .dark-review.is-armed .dark-review-cta{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
  #dark .dark-review.is-armed.is-on .dark-review-title{opacity:1;transform:none}
  #dark .dark-review.is-armed .dark-step-dot{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  #dark .dark-review.is-armed .dark-step-line{transform:scaleY(0);transform-origin:top center;transition:transform .4s ease-out .2s}
  #dark .dark-review.is-armed .dark-step-label{opacity:0;transform:translateX(-6px);transition:opacity .4s ease-out .1s,transform .4s ease-out .1s}
  #dark .dark-review.is-armed .dark-step.is-on .dark-step-dot{transform:scale(1)}
  #dark .dark-review.is-armed .dark-step.is-on .dark-step-line{transform:scaleY(1)}
  #dark .dark-review.is-armed .dark-step.is-on .dark-step-label{opacity:1;transform:none}
  #dark .dark-review.is-armed.is-done .dark-note,#dark .dark-review.is-armed.is-done .dark-review-cta{opacity:1;transform:none}
  #dark .dark-review.is-armed.is-done .dark-review-cta{transition-delay:.15s}

  /* "Yalnız değilsin": the four objects orbit slowly around the stork (40 s, transform only, phase-shifted) */
  #dark .dark-orbit{animation:dark-orbit 40s ease-in-out infinite;will-change:transform}
  #dark .dark-obj-passport .dark-orbit{animation-delay:0s}
  #dark .dark-obj-plane .dark-orbit{animation-delay:-10s}
  #dark .dark-obj-stamp .dark-orbit{animation-delay:-20s}
  #dark .dark-obj-cal .dark-orbit{animation-delay:-30s}
  @keyframes dark-orbit{0%{transform:translate(0,0)}25%{transform:translate(22px,-14px)}50%{transform:translate(0,-26px)}75%{transform:translate(-22px,-14px)}100%{transform:translate(0,0)}}
  #dark .dark-finale-stork{animation:dark-finale-bob 4s ease-in-out infinite;will-change:transform}
  @keyframes dark-finale-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
}