/* sipnik Kiosk 3B demo (eski /kiosk sayfasından, açık temaya çevrildi; 2026-10-30) */
.ks-hero{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:28px; align-items:center; padding:28px 0 0; }
.ks-sag{ position:relative; min-width:0; }
.ks-sahne{ position:relative; height:min(84vh,860px); min-height:620px; border-radius:32px; overflow:hidden;
    background:radial-gradient(70% 60% at 50% 38%,rgba(255,138,92,.16),rgba(255,138,92,0) 70%),linear-gradient(180deg,var(--kart),var(--kart) 78%); border:1px solid var(--cizgi); }
.ks-sahne::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.85)); pointer-events:none; }
.ks-gl, .ks-css{ position:absolute; inset:0; }
.ks-gl{ cursor:grab; touch-action:pan-y; }
.ks-surukle .ks-gl{ cursor:grabbing; }
.ks-css{ pointer-events:none; z-index:1; }
.ks-css-ekran, .ks-css-pos{ pointer-events:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ks-css-ekran{ width:1080px; height:1920px; overflow:hidden; border-radius:16px; background:var(--kart); }
.ks-ekran{ width:1080px; height:1920px; transform-origin:0 0; }
.ks-css-pos{ width:360px; height:640px; overflow:hidden; border-radius:10px; }
.ks-yukleniyor{ position:absolute; inset:0; display:grid; place-items:center; color:var(--gri); font-size:14px; z-index:0; }
.ks-hazir .ks-yukleniyor{ display:none; }
.ks-ipucu{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; width:calc(100% - 32px); }
.ks-ipucu span{ font-size:13px; padding:7px 12px; border-radius:99px; background:rgba(255,255,255,0.85); border:1px solid var(--cizgi); color:var(--gri); backdrop-filter:blur(6px); }
.ks-yakin{ font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:99px; border:1px solid rgba(255,138,92,.5); background:rgba(255,90,54,.18); color:var(--mur); cursor:pointer; }
.ks-yakin[aria-pressed="true"]{ background:var(--vurgu); border-color:var(--vurgu); }
.ks-duz ~ .ks-ipucu .ks-yakin{ display:none; }
.ks-duz ~ .ks-ipucu{ position:static; transform:none; width:auto; margin-top:4px; }
.ks-pos{ width:360px; height:640px; background:linear-gradient(180deg,#20242C,#121419); color:var(--mur); font-family:Outfit,system-ui,sans-serif; position:relative; cursor:default; user-select:none; }
.ks-pos > div{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px; }
.ks-pos[data-d="bos"] .ks-pos-bos, .ks-pos[data-d="ode"] .ks-pos-ode, .ks-pos[data-d="isl"] .ks-pos-isl, .ks-pos[data-d="onay"] .ks-pos-onay{ display:flex; }
.ks-pos svg{ width:120px; height:120px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ks-pos-bos{ color:rgba(45,47,54,0.42); font-size:26px; }
.ks-pos[data-d="ode"]{ cursor:pointer; }
.ks-pos-ode small{ font-size:26px; color:rgba(45,47,54,0.6); }
.ks-pos-ode b{ font-size:64px; letter-spacing:-.02em; line-height:1; }
.ks-pos-ode span{ font-size:24px; font-weight:600; }
.ks-pos-dalga{ color:var(--vurgu2); animation:ksDalga 1.2s ease-in-out infinite; }
.ks-pos-isl i{ width:90px; height:90px; border-radius:50%; border:8px solid rgba(45,47,54,0.15); border-top-color:#FF8A5C; animation:ksDon 1s linear infinite; }
.ks-pos-isl span, .ks-pos-onay span{ font-size:30px; font-weight:600; }
.ks-pos-onay{ color:#3DDBB0; }
.ks-pos-onay svg{ stroke-width:2.6; }
.ks-duz{ height:auto; min-height:0; padding:22px 0 26px; display:flex; justify-content:center; }
.ks-cerceve{ width:min(100%,360px); border-radius:26px 26px 18px 18px; background:#EFE9DF; padding:12px 12px 0; box-shadow:0 40px 80px rgba(45,47,54,0.18); position:relative; z-index:1; }
.ks-cam{ position:relative; border-radius:16px; overflow:hidden; background:#1E2A44; box-shadow:0 0 0 2px #FF5A36, 0 0 0 9px #1E2A44; margin:9px; }
.ks-cam .ks-ekran{ position:absolute; left:0; top:0; }
.ks-panel{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:16px 18px 18px; }
.ks-yazici{ height:4px; border-radius:2px; background:#1E2A44; opacity:.7; width:60%; }
.ks-qr{ cursor:pointer; justify-self:end; width:30px; height:30px; border-radius:7px; background:#1E2A44; box-shadow:inset 0 0 0 6px #2B3A5C; }
.ks-yazici{ position:relative; }
.ks-fis{ position:absolute; left:50%; top:2px; width:62px; height:0; overflow:hidden; transform:translateX(-50%); z-index:3; box-shadow:0 8px 16px rgba(45,47,54,0.112);
    transition:height 1.8s linear, opacity .7s ease, transform .7s ease; }
.ks-fis canvas{ display:block; width:62px; height:auto; }
.ks-fis.ks-fis-ac{ height:142px; }
.ks-fis.ks-fis-kop{ opacity:0; transform:translate(-50%,40px) rotate(8deg); }
.ks-pos-kutu{ width:96px; height:171px; border-radius:12px; background:#2A2E36; padding:5px; box-shadow:0 8px 18px rgba(45,47,54,0.12); }
.ks-pos-kutu .ks-pos{ transform:scale(.2389); transform-origin:0 0; border-radius:8px; overflow:hidden; }
.ks-adimlar{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:adim; }
.ks-adim{ border-radius:22px; padding:22px 20px; border:1px solid var(--cizgi); background:var(--kart); min-width:0; counter-increment:adim; }
.ks-adim::before{ content:counter(adim); display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--vurgu); color:#fff; font-weight:700; font-size:17px; }
.ks-adim h3{ font-size:18px; margin:14px 0 6px; }
.ks-adim p{ color:var(--gri); font-size:14.5px; }
.ks-donanim{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center; padding-top:88px; }
.ks-donanim img{ width:100%; height:auto; border-radius:28px; display:block; background:#E9E6E1; }
.ks-liste{ list-style:none; display:grid; gap:10px; margin-top:18px; }
.ks-liste li{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--kart); border:1px solid var(--cizgi); font-size:15px; color:var(--gri); }
.ks-liste b{ color:var(--mur); display:block; font-size:15.5px; }
.ks-liste svg{ width:22px; height:22px; flex:none; margin-top:2px; stroke:var(--vurgu2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:960px){.ks-hero, .ks-donanim{ grid-template-columns:minmax(0,1fr); }.ks-adimlar{ grid-template-columns:repeat(2,minmax(0,1fr)); }.ks-sahne:not(.ks-duz){ height:78vh; }}
@media (max-width:560px){.ks-adimlar{ grid-template-columns:minmax(0,1fr); }}
@media (prefers-reduced-motion:reduce){.ks-pos-dalga, .ks-pos-isl i{ animation:none; }}
@keyframes ksDalga{ 50% { transform:scale(1.12); opacity:.7; } }
@keyframes ksDon{ to { transform:rotate(360deg); } }
/* sade tasarım: sahne kasa demosuyla aynı koyu zeminde */
.ks-sahne{background:radial-gradient(70% 60% at 50% 38%,#33363F,#1F2126 75%);border:0}
.ks-sahne::after{display:none}
.ks-yukleniyor{color:rgba(255,255,255,.6)}
.b-demo3b .ks-sag{margin-top:8px}