/* /self-servis-kasa-yazilimi — ankara-server-companies.css (.asr) üzerine self servis kasaya özel bileşenler */



/* ---- Hero: kiosk maketi ---- */
.ssk-kiosk{display:flex;flex-direction:column;align-items:center}
.ssk-kiosk__screen{display:flex;flex-direction:column;gap:12px;width:100%;padding:18px;border:10px solid #1b2236;border-radius:8px;background-color:#f8fafc}
.ssk-kiosk__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ssk-kiosk__store{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-size-14);font-weight:var(--font-weight-700);color:var(--slate-800)}
.ssk-kiosk__store i{width:20px;height:20px;border-radius:6px;background-color:var(--azure-radiance-500)}
.ssk-kiosk__scan{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:100px;background-color:var(--success-bg);font-size:var(--font-size-12);font-weight:var(--font-weight-600);line-height:var(--line-height-20);color:var(--success-text)}
.ssk-kiosk__title{font-size:var(--font-size-18);font-weight:var(--font-weight-700);line-height:var(--line-height-24);color:var(--slate-900)}
.ssk-kiosk__items{display:flex;flex-direction:column;gap:6px}
.ssk-kiosk__items li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;background-color:var(--white);box-shadow:0 1px 0 var(--slate-200)}
.ssk-kiosk__items li span{display:flex;flex-direction:column;font-size:var(--font-size-12);line-height:var(--line-height-16);color:var(--slate-400)}
.ssk-kiosk__items li strong{font-size:var(--font-size-14);font-weight:var(--font-weight-600);line-height:var(--line-height-20);color:var(--slate-800)}
.ssk-kiosk__items li i{width:44px;height:10px;border-radius:4px;background-color:var(--slate-200)}
.ssk-kiosk__items li.is-new{outline:2px solid var(--azure-radiance-500);outline-offset:-2px;animation:ssk-new 2.4s ease-in-out infinite}
@keyframes ssk-new{0%,100%{background-color:var(--white)}50%{background-color:var(--azure-radiance-100)}}
.ssk-kiosk__total{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 0;border-top:2px dashed var(--slate-200);font-size:var(--font-size-16);font-weight:var(--font-weight-700);color:var(--slate-900)}
.ssk-kiosk__total i{width:80px;height:16px;border-radius:4px;background-color:var(--slate-800)}
.ssk-kiosk__pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ssk-kiosk__pay b{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:8px;font-size:var(--font-size-14);font-weight:var(--font-weight-600);color:var(--white);background-color:var(--azure-radiance-500)}
.ssk-kiosk__pay b+b{background-color:var(--slate-800)}
.ssk-kiosk__base{display:flex;align-items:center;justify-content:space-between;width:80%;height:40px;padding:0 20px;border-radius:0 0 8px 8px;background-color:#1b2236}
.ssk-kiosk__scanner{width:56px;height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(255,40,58,.2),rgba(255,40,58,.9),rgba(255,40,58,.2));animation:ssk-scan 1.6s ease-in-out infinite}
@keyframes ssk-scan{0%,100%{opacity:.5}50%{opacity:1}}
.ssk-kiosk__printer{width:64px;height:8px;border-radius:4px;background-color:#0b1020}
.ssk-hero-visual{--asr-mock:360px}

/* ---- Kuyruk karşılaştırması ---- */
.asr .ssk-queue{background-color:var(--white)}
/* Kuyruk karşılaştırması: solda metin (.asr-local__text), sağda üst üste iki kart */

.ssk-queue__compare{display:flex;flex-direction:column}
.ssk-lane{display:flex;flex-direction:column;gap:20px;padding:32px;border:1px solid transparent;border-radius:8px;background-color:var(--slate-50)}
.ssk-lane--self{border-color:var(--azure-radiance-500)}
.ssk-lane__title{font-size:var(--font-size-24);font-weight:var(--font-weight-600);line-height:var(--line-height-32);letter-spacing:-.02em;color:var(--slate-800)}
.ssk-lane__points{display:flex;flex-direction:column;gap:14px}
.ssk-lane__points li{display:flex;align-items:center;gap:10px;font-size:var(--font-size-16);line-height:var(--line-height-24);color:var(--slate-500)}
.ssk-lane--self .ssk-lane__points li{color:var(--slate-700)}
.ssk-x{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:100px;background-color:var(--slate-200);color:var(--slate-500)}
/* Kartlar arası 'vs' yuvarlağı: iki kartın kesişiminde */
.ssk-queue__vs{position:relative;z-index:1;align-self:center;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-14px 0;border:4px solid var(--white);border-radius:100px;background-color:var(--slate-800);font-size:var(--font-size-12);font-weight:var(--font-weight-600);line-height:1;color:var(--white)}

@media (max-width:767px){.ssk-lane{padding:24px}}

/* ---- Adım akışı ve modüller: ortak .asr-flow / .asr-modules ---- */
.asr .ssk-flow,.asr .ssk-modules{background-color:var(--white)}

/* ---- Kayıp önleme (koyu bant, kamera maketi) ---- */
.asr .ssk-loss{background-color:var(--slate-950)}
.ssk-cam{display:flex;flex-direction:column;gap:12px}
.ssk-cam__frame{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid hsla(0,0%,100%,.08);border-radius:16px;background:radial-gradient(ellipse at 50% 120%,#24304d,#0b1020 70%);background-color:#0b1020}
.ssk-cam__frame:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,hsla(0,0%,100%,.03) 0,hsla(0,0%,100%,.03) 1px,transparent 1px,transparent 4px);pointer-events:none}
.ssk-cam__frame:after{content:"";position:absolute;left:10%;right:10%;bottom:12%;height:30%;border-radius:12px;background-color:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.08)}
.ssk-cam__rec{position:absolute;top:14px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-12);color:var(--slate-300)}
.ssk-cam__rec i{width:8px;height:8px;border-radius:100px;background-color:var(--red-200);box-shadow:0 0 8px rgba(255,40,58,.8);animation:ssk-scan 1.2s ease-in-out infinite}
.ssk-cam__box{position:absolute;z-index:1;border:2px solid var(--success);border-radius:6px;background-color:rgba(92,225,92,.06)}
.ssk-cam__box em{position:absolute;top:-24px;left:-2px;padding:1px 8px;border-radius:4px 4px 4px 0;background-color:var(--success);font-size:var(--font-size-12);font-style:normal;font-weight:var(--font-weight-600);line-height:var(--line-height-20);white-space:nowrap;color:var(--success-text)}
.ssk-cam__box--ok{bottom:22%;left:16%;width:18%;height:26%}
.ssk-cam__box--2{left:40%;width:14%;height:20%}
.ssk-cam__box--warn{bottom:20%;right:16%;width:20%;height:32%;border-color:#ff9f43;background-color:rgba(255,159,67,.1);animation:ssk-warn 1.6s ease-in-out infinite}
.ssk-cam__box--warn em{background-color:#ff9f43;color:#3d1f00}
@keyframes ssk-warn{0%,100%{box-shadow:0 0 0 0 rgba(255,159,67,.5)}50%{box-shadow:0 0 0 8px rgba(255,159,67,0)}}
.ssk-cam__corner{position:absolute;inset:12px;border:2px solid transparent;border-image:linear-gradient(hsla(0,0%,100%,.25),hsla(0,0%,100%,.25)) 1;-webkit-mask:linear-gradient(#000 0 0) top left/24px 24px no-repeat,linear-gradient(#000 0 0) top right/24px 24px no-repeat,linear-gradient(#000 0 0) bottom left/24px 24px no-repeat,linear-gradient(#000 0 0) bottom right/24px 24px no-repeat;mask:linear-gradient(#000 0 0) top left/24px 24px no-repeat,linear-gradient(#000 0 0) top right/24px 24px no-repeat,linear-gradient(#000 0 0) bottom left/24px 24px no-repeat,linear-gradient(#000 0 0) bottom right/24px 24px no-repeat;pointer-events:none}
.ssk-cam__alert{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid rgba(255,159,67,.3);border-radius:14px;background-color:rgba(255,159,67,.08)}
.ssk-cam__alert-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background-color:rgba(255,159,67,.18);color:#ffb469}
.ssk-cam__alert>span:last-child{font-size:var(--font-size-12);line-height:var(--line-height-18);color:var(--slate-400)}
.ssk-cam__alert strong{display:block;font-size:var(--font-size-14);font-weight:var(--font-weight-600);line-height:var(--line-height-20);color:var(--white)}
.ssk-loss__text .h1{color:var(--white)}
.ssk-loss__text>p{margin:24px 0 32px;font-size:var(--font-size-18);line-height:var(--line-height-30);color:var(--slate-400)}
.ssk-loss__link{margin-top:32px;color:var(--azure-radiance-400)}

/* ---- Donanım ve entegrasyon şeması ---- */
.asr .ssk-stack{background-color:var(--white)}
.ssk-stack__map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);gap:48px;align-items:center;width:100%;max-width:1000px;margin-top:64px}
.ssk-stack__map:before{content:"";position:absolute;top:50%;left:12%;right:12%;z-index:0;height:2px;background-image:linear-gradient(90deg,var(--azure-radiance-300) 50%,transparent 50%);background-size:12px 2px}
.ssk-stack__group{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid transparent;border-radius:8px;background-color:var(--slate-50)}
.ssk-stack__group ul{display:flex;flex-direction:column;gap:8px}
.ssk-stack__group li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;background-color:var(--slate-50);font-size:var(--font-size-16);font-weight:var(--font-weight-500);line-height:var(--line-height-24);color:var(--slate-700)}
.ssk-stack__group li svg{flex-shrink:0;color:var(--azure-radiance-600)}
.ssk-stack__core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 20px;border-radius:8px;background-color:var(--azure-radiance-500);text-align:center;color:var(--white)}
.ssk-stack__core-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:100px;background-color:hsla(0,0%,100%,.16)}
.ssk-stack__core strong{font-size:var(--font-size-20);font-weight:var(--font-weight-600);line-height:var(--line-height-28)}
.ssk-stack__core>span:last-child{font-size:var(--font-size-14);color:hsla(0,0%,100%,.8)}
@media (max-width:1023px){.ssk-stack__map{grid-template-columns:1fr;gap:20px;margin-top:40px}.ssk-stack__map:before{top:8%;bottom:8%;left:50%;right:auto;width:2px;height:auto;background-image:linear-gradient(180deg,var(--azure-radiance-300) 50%,transparent 50%);background-size:2px 12px}}

@media (prefers-reduced-motion:reduce){
  .ssk-kiosk__items li.is-new,.ssk-kiosk__scanner,.ssk-cam__rec i,.ssk-cam__box--warn{animation:none}
}