/* Bağlan hikayeleri: akışın üstünde ince satır + tam ekran izleyici.
   Halka: görülmemiş lacivert, görülmüş açık gri. Yeşil yalnızca "Hikayen"in
   artısında (eylem), indirimde ve "Deneyimi gör"de. */
.hk-row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:14px 16px 12px;border-bottom:1px solid var(--line);overscroll-behavior-x:contain}
.hk-row::-webkit-scrollbar{display:none}
.hk{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.hk-c{position:relative;width:66px;height:66px;border-radius:50%;padding:2.5px;box-shadow:inset 0 0 0 2px var(--navy)}
.hk.seen .hk-c{box-shadow:inset 0 0 0 1.5px var(--line)}
.hk-in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;overflow:hidden;color:#fff;position:relative}
.hk-in.m::before{content:"";position:absolute;inset:0;background:rgba(10,14,30,.18)}
.hk-in svg{position:relative;width:24px;height:24px;stroke-width:1.9}
.hk-in .ava{width:100%;height:100%;font-size:var(--fs-base)}
.hk-n{max-width:100%;font-size:var(--fs-xs);font-weight:var(--fw-semi);line-height:var(--lh-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk.seen .hk-n{color:var(--mute);font-weight:var(--fw-medium)}
/* Mola360'ın hikayesi: halkanın altında beyaz logo hapı */
.hk-logo{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);display:flex;padding:2px 6px;border-radius:var(--r-pill);background:#fff;box-shadow:0 0 0 1.5px var(--line),0 2px 6px rgba(12,18,40,.12)}
.hk-logo img{display:block;height:12px;width:auto}
/* Hikayen: halkasız, sağ altta yeşil artı */
.hk.me .hk-c{box-shadow:none}
/* hikayen varsa halkası görünür */
.hk.me[data-hk] .hk-c{box-shadow:inset 0 0 0 2px var(--navy)}
.hk.me.seen[data-hk] .hk-c{box-shadow:inset 0 0 0 1.5px var(--line)}
.hk-plus{position:absolute;right:1px;bottom:1px;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--navy);border:2.5px solid #fff;display:grid;place-items:center}
.hk-plus svg{width:12px;height:12px;stroke-width:3}
.hk.me .hk-n{color:var(--mute)}

/* ---- tam ekran izleyici ---- */
.sv{position:fixed;inset:0;z-index:70;max-width:440px;margin:0 auto;background:#0B1020;color:#fff;opacity:0;transform:scale(.96);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);touch-action:none;user-select:none;-webkit-user-select:none}
.sv.in{opacity:1;transform:none}
.sv-m{position:absolute;inset:0;transition:background var(--t) var(--ease)}
.sv-m::before,.sv-m::after{content:"";position:absolute;left:0;right:0}
.sv-m::before{top:0;height:160px;background:linear-gradient(180deg,rgba(8,12,26,.5),transparent)}
.sv-m::after{bottom:0;height:52%;background:linear-gradient(0deg,rgba(8,12,26,.72),rgba(8,12,26,.28) 55%,transparent)}
.sv-bars{position:absolute;z-index:3;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;gap:4px}
.sv-bars span{flex:1;height:2.5px;border-radius:var(--r-pill);background:rgba(255,255,255,.35);overflow:hidden}
.sv-bars i{display:block;height:100%;background:#fff;transform-origin:left}
.sv-hd{position:absolute;z-index:3;left:12px;right:6px;top:calc(22px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:9px;min-height:44px}
.sv-hd .ava{line-height:var(--lh-none);box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.sv-hd .x{flex:1;min-width:0;line-height:var(--lh-snug);display:flex;align-items:baseline;gap:8px}
.sv-hd b{font-size:var(--fs-md);font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-hd small{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:rgba(255,255,255,.78);flex:none}
.sv-hd .vf .vf-c{stroke:#fff}
.sv-logo{display:block;height:24px;width:auto;flex:none}
.sv-x{width:44px;height:44px;display:grid;place-items:center;color:#fff;flex:none}
.sv-x svg{width:24px;height:24px;stroke-width:2.2}
.sv-tap{position:absolute;z-index:1;top:80px;bottom:150px;-webkit-tap-highlight-color:transparent}
.sv-tap.prev{left:0;width:34%}
.sv-tap.next{right:0;width:66%}
.sv-body{position:absolute;z-index:2;inset:0;pointer-events:none}
.sv-body a,.sv-body .went{pointer-events:auto}
/* Mola360'ın hikayesi: altta editoryal başlık */
.sv-ed{position:absolute;left:16px;right:16px;bottom:calc(150px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px}
.sv-ed .ov{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:rgba(255,255,255,.82)}
.sv-ed h2{font-size:var(--fs-2xl);font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.sv-ed p{font-size:var(--fs-md);line-height:var(--lh-body);color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* alt satır: yanıt, beğen, paylaş */
.sv-ft{position:absolute;z-index:3;left:12px;right:6px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:flex-end;gap:2px;min-height:46px}
.sv-rep{flex:1;min-width:0;margin-right:6px}
.sv-rep input{width:100%;height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:inherit;font-size:var(--fs-input);outline:none}
.sv-rep input::placeholder{color:rgba(255,255,255,.8);font-size:var(--fs-md)}
.sv-act{width:44px;height:44px;display:grid;place-items:center;color:#fff}
.sv-act svg{width:25px;height:25px}
.sv-act[aria-pressed="true"] svg{fill:#E0464B;stroke:#E0464B}
@media (max-width:374px){.hk-row{gap:10px}.hk,.hk-c{width:62px}.hk-c{height:62px}}
@media (prefers-reduced-motion:reduce){.sv,.sv-m{transition:none}}