/* Canlı demo kabuğu: sitenin gece mavisi dili (styles.css) üstüne sahne, tahta çerçevesi, telefon ve tarayıcı penceresi. */
:root{--bezel:#15181e;--bezel-edge:#2a2f38;--stage:#071226;--ok-dot:#34d399;--off-dot:#f87171;--warn-soft:#f59e0b1f}
.demo-page{background:var(--bg)}
.demo-header .header-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.demo-header .text-link{color:#ccd4df}
.demo-intro{padding-top:56px;padding-bottom:28px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
.demo-intro h1{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.12;letter-spacing:-.05em;margin-top:14px}
.demo-intro p{color:var(--muted);max-width:560px}
.demo-intro .safety{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#0a162b}
.demo-intro .safety svg{flex:none;width:22px;height:22px;color:var(--brand2);margin-top:2px}

/* ---------- rehber ---------- */
.tour{margin-top:8px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#0a162b,#081224);padding:18px 20px 16px}
.tour-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tour-head h2{font-size:1.1rem;letter-spacing:-.02em}
.tour-progress{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tour-bar{height:3px;border-radius:3px;background:#1b2a44;margin:12px 0 14px;overflow:hidden}
.tour-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tour-steps{list-style:none;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;margin:0}
.tour-step{flex:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 8px;border:1px solid #243654;border-radius:999px;background:transparent;color:var(--muted);font-size:.8125rem;font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.tour-step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#15243d;color:#9fb3cc;font-size:.75rem;font-variant-numeric:tabular-nums}
.tour-step:hover{border-color:#3c5a82;color:var(--ink)}
.tour-step[data-state="done"]{color:#b9e6cf;border-color:#1f4a3b}
.tour-step[data-state="done"] .n{background:#12382c;color:var(--ok-dot)}
.tour-step[data-state="current"]{color:var(--ink);border-color:var(--blue);background:#0f2744}
.tour-step[data-state="current"] .n{background:var(--blue);color:#051322}
.tour-step[aria-pressed="true"]{box-shadow:0 0 0 2px #7dd3fc55}
.tour-hint{margin-top:12px;display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:#d6e2f2;min-height:48px}
.tour-hint b{color:var(--blue);font-weight:600}
.tour-hint .pulse{flex:none;margin-top:8px;width:8px;height:8px;border-radius:50%;background:var(--brand2);box-shadow:0 0 0 0 #22d3ee88;animation:hint 1.8s ease-out infinite}
@keyframes hint{70%,100%{box-shadow:0 0 0 10px #22d3ee00}}

/* ---------- sahne ---------- */
.stage{padding-top:22px;padding-bottom:56px}
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:28px;align-items:start;margin-top:22px}
.board-wrap,.phone-wrap{margin:0;min-width:0}
.board-bezel{position:relative;padding:14px 14px 30px;border-radius:14px;background:linear-gradient(180deg,#1b1f27,var(--bezel));border:1px solid var(--bezel-edge);box-shadow:0 30px 80px #0009,inset 0 1px 0 #ffffff12}
.board-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:3px}
.board-screen iframe{position:absolute;left:0;top:0;width:1600px;height:900px;border:0;transform-origin:0 0;transform:translate(var(--x,0),var(--y,0)) scale(var(--s,.5))}
.board-screen:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.board-chin{position:absolute;left:0;right:0;bottom:7px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 10px/1 var(--body);letter-spacing:.2em;color:#5d6877;text-transform:uppercase}
.board-power{position:absolute;right:18px;bottom:5px;width:22px;height:22px;border-radius:50%;border:1px solid #3a414d;background:#101318;display:grid;place-items:center;color:#8b95a3}
.board-power:hover{color:#fff;border-color:#6b7482}
.board-power svg{width:12px;height:12px}
.board-led{position:absolute;left:18px;bottom:12px;width:6px;height:6px;border-radius:50%;background:var(--off-dot);box-shadow:0 0 8px var(--off-dot)}
.board-led[data-on="true"]{background:#60a5fa;box-shadow:0 0 8px #60a5fa}
.power-overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#0c1a33 0,#000 70%);border:0;color:#eaf1fb;cursor:pointer}
.power-overlay span{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--heading);font-weight:600;font-size:clamp(.95rem,1.6vw,1.25rem);letter-spacing:-.02em}
.power-overlay i{width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);border-radius:50%;display:grid;place-items:center;border:1px solid #7dd3fc66;background:#0f2744;box-shadow:0 0 0 0 #7dd3fc55;animation:hint 2s ease-out infinite}
.power-overlay svg{width:40%;height:40%}
.power-overlay small{font-family:var(--body);font-weight:400;font-size:.8125rem;color:var(--muted);letter-spacing:0}
.board-caption{margin-top:14px;display:flex;gap:10px;align-items:flex-start;min-height:48px;font-size:.9375rem;color:#d6e2f2}
.board-caption .tag{flex:none;margin-top:1px;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#051322;background:var(--blue);border-radius:4px;padding:3px 6px}
.board-controls{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ctl{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid #29405f;background:#0c1b31;color:#dbe6f5;font-size:.8125rem;font-weight:600;transition:background .15s,border-color .15s,opacity .15s}
.ctl:hover:not(:disabled){background:#12294a;border-color:#3f6592}
.ctl:disabled{opacity:.42;cursor:not-allowed}
.ctl svg{width:16px;height:16px}
.ctl .dot{width:8px;height:8px;border-radius:50%;background:var(--ok-dot)}
.ctl[aria-pressed="false"] .dot{background:var(--off-dot)}
.ctl.is-accent{border-color:#7dd3fc88;background:#0f2e4d}
.ctl-sep{width:1px;align-self:stretch;background:#1f3150;margin:0 4px}
.demo-note{margin-top:14px;font-size:.8125rem;color:var(--muted)}
.phone-frame{position:relative;width:100%;aspect-ratio:390/844;border-radius:46px;padding:12px;background:linear-gradient(160deg,#2a2f38,#101216);border:1px solid #3a404b;box-shadow:0 30px 70px #000a,inset 0 0 0 2px #0b0d10}
.phone-screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:#fffffe}
.phone-screen iframe{position:absolute;left:0;top:calc(44px * var(--s,.8));width:390px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--s,.8))}
.phone-status{position:absolute;z-index:2;left:0;right:0;top:0;height:calc(44px * var(--s,.8));display:flex;align-items:center;justify-content:space-between;padding:0 calc(26px * var(--s,.8)) 0 calc(34px * var(--s,.8));background:#fffffe;color:#1e170f;font:600 calc(15px * var(--s,.8))/1 -apple-system,"Segoe UI",system-ui,sans-serif;pointer-events:none}
.phone-status svg{height:calc(12px * var(--s,.8));width:auto}
.phone-status span{display:flex;gap:calc(5px * var(--s,.8));align-items:center}
@media(prefers-color-scheme:dark){.phone-status{background:#1e1a13;color:#edebe4}}
.phone-notch{position:absolute;z-index:3;left:50%;top:calc(9px * var(--s,.8));width:calc(110px * var(--s,.8));height:calc(30px * var(--s,.8));transform:translateX(-50%);border-radius:999px;background:#050506;pointer-events:none}
.phone-wrap figcaption{margin-top:12px;font-size:.8125rem;color:var(--muted);text-align:center}

/* ---------- panel ---------- */
.panel-section{padding-top:24px;padding-bottom:80px}
.browser{margin-top:10px;border:1px solid #2a3b57;border-radius:14px;overflow:hidden;background:#f2f2f7;box-shadow:0 30px 80px #0008}
.browser-bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:#0d1a2e;border-bottom:1px solid #22324d}
.browser-bar .dots{display:flex;gap:6px}
.browser-bar .dots i{width:10px;height:10px;border-radius:50%;background:#34425a}
.browser-bar .url{flex:1;max-width:520px;margin:0 auto;height:26px;border-radius:7px;background:#07111f;border:1px solid #22324d;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:.78rem;color:#9fb0c6;overflow:hidden;white-space:nowrap}
.browser-bar .url svg{flex:none;width:12px;height:12px}
.browser iframe{display:block;width:100%;height:clamp(620px,82vh,880px);border:0;background:#f2f2f7}

.demo-contact{padding-bottom:72px}
@media(max-width:1100px){.stage-grid{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.demo-intro{grid-template-columns:1fr;gap:22px}}
@media(max-width:899px){
  .stage-grid{grid-template-columns:1fr}
  .phone-wrap{width:min(320px,86vw);margin-inline:auto}
  .demo-intro{padding-top:32px}
  .board-bezel{padding:8px 8px 22px;border-radius:10px}
  .board-chin{bottom:5px;font-size:8px}
  .board-power{bottom:3px;right:10px;width:18px;height:18px}
  .board-led{left:12px;bottom:9px}
  .browser iframe{height:640px}
  .demo-header .header-actions .text-link{display:none}
  .ctl-sep{display:none}
  .ctl{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tour-hint .pulse,.power-overlay i{animation:none}}

/* Mobilde tahtayı büyüt: dikey ekranda tahta yatay çevrilip ekranı doldurur, dokunma hedefleri büyür. */
.zoom-close{position:fixed;z-index:120;right:12px;top:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #ffffff55;background:#050b19e6;color:#fff;font-weight:600}
/* Üstte 56 px'lik şerit Kapat düğmesine ayrılır; tahta kalan alana sığar, düğme hiçbir tahta öğesinin üstüne binmez. */
body.board-zoomed::before{content:'';position:fixed;z-index:105;inset:0;background:#000}
.board-screen.is-zoomed{position:fixed;z-index:110;left:0;top:56px;width:100vw;height:calc(100vh - 56px);height:calc(100dvh - 56px);aspect-ratio:auto;border-radius:0}
@media (orientation:portrait){.board-screen.is-zoomed{left:50%;top:calc(50% + 28px);width:calc(100vh - 56px);width:calc(100dvh - 56px);height:100vw;transform:translate(-50%,-50%) rotate(90deg)}}
body.board-zoomed{overflow:hidden}