/* Anılar — storefront gallery, reel viewer, member compose */

.sf-stories{background:#071018}
.st-page{color:#fff;padding-bottom:4rem}
.st-hero{
  position:relative;
  padding:4.4rem 0 3.2rem;
  background:
    radial-gradient(1200px 420px at 12% -10%,rgba(255,90,10,.34),transparent 60%),
    radial-gradient(900px 380px at 90% 0%,rgba(18,90,140,.28),transparent 55%),
    linear-gradient(180deg,#071018 0%,#0b1c2e 100%);
  overflow:hidden;
}
.st-hero::after{
  content:"";
  position:absolute;inset:auto 0 0;height:80px;
  background:linear-gradient(180deg,transparent,#071018);
  pointer-events:none;
}
.st-hero-inner{position:relative;z-index:1;max-width:42rem}
.st-kicker{
  display:inline-flex;align-items:center;gap:.4rem;
  margin:0 0 .7rem;color:#ffb48a;font-size:11px;font-weight:800;letter-spacing:.16em
}
.st-kicker .icon{width:15px;height:15px}
.st-hero h1,.st-copy h1{
  margin:0;font:800 clamp(2.4rem,6vw,4.4rem)/.95 Manrope,'Segoe UI',sans-serif;letter-spacing:-.04em
}
.st-hero p,.st-copy .st-body{margin:.85rem 0 0;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.65;max-width:38rem}
.st-hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.st-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:46px;padding:.7rem 1.15rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;font-weight:750;text-decoration:none;cursor:pointer
}
.st-grid-wrap{padding:1.2rem 0 0}
.st-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1rem;
}
.st-grid-sm{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.st-card{
  position:relative;display:flex;flex-direction:column;gap:.65rem;
  color:#fff;text-decoration:none;border-radius:26px
}
.st-card-media{
  position:relative;display:block;aspect-ratio:9/16;border-radius:26px;overflow:hidden;
  background:#122033;box-shadow:0 18px 40px rgba(0,0,0,.28)
}
.st-card-media img,.st-frame-media{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease
}
.st-card:hover .st-card-media img{transform:scale(1.05)}
.st-card-fade{
  position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(5,12,22,.88))
}
.st-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff
}
.st-play .icon{width:20px;height:20px;margin-left:2px}
.st-card-who{position:absolute;left:.85rem;right:.85rem;bottom:3.1rem;display:flex;align-items:center;gap:.5rem;z-index:1}
.st-card-who b{display:block;font-size:13px}
.st-card-who small{display:block;color:#ffb48a;font-size:11px;font-weight:700}
.st-card > strong{padding:0 .2rem;font-size:15px;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-ava,.st-ava-sm{
  flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff5a0a,#ffb48a);color:#fff;font-weight:800
}
.st-ava{width:42px;height:42px;font-size:13px}
.st-ava-sm{width:32px;height:32px;font-size:11px}
.st-ava img,.st-ava-sm img{width:100%;height:100%;object-fit:cover}
.st-empty,.st-empty-ac{text-align:center;padding:3.2rem 1rem 4rem;color:rgba(255,255,255,.7)}
.st-empty-ac{color:var(--ink);padding:1.4rem}
.st-empty-orb{
  width:72px;height:72px;margin:0 auto 1rem;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff5a0a,#12385e);color:#fff
}
.st-empty h2{margin:.2rem 0 .5rem;color:#fff}
.st-pages{display:flex;gap:.4rem;justify-content:center;margin:1.6rem 0 0}
.st-pages a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-weight:750}
.st-pages a.is-on{background:#ff5a0a}
.st-detail{padding-top:2.4rem}
.st-detail-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:2rem;align-items:center}
.st-frame{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:9/16;max-height:78vh;cursor:pointer;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.st-frame-meta{position:absolute;left:1rem;right:1rem;bottom:1.1rem;display:flex;gap:.7rem;align-items:center;z-index:1}
.st-tour{display:flex;align-items:center;gap:.35rem;color:#ffb48a;font-weight:700}
.st-more{margin-top:3rem}
.st-more h2{margin:0 0 1rem;font-size:1.5rem}
.st-mine-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.st-mine-row{display:grid;grid-template-columns:88px 1fr;gap:.9rem;padding:.85rem 0;border-top:1px solid var(--line)}
.st-mine-thumb{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:#122033}
.st-mine-thumb img{width:100%;height:100%;object-fit:cover}
.st-mine-thumb span{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.st-pill-pending{background:#fff1e8;color:#c2410c}
.st-pill-published{background:#ecfdf3;color:#16865b}
.st-pill-rejected{background:#fef2f2;color:#e83446}
.st-pill-draft{background:#f1f4f8;color:#5e6a79}
.st-compose{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.2rem;align-items:start}
.st-phone{
  position:sticky;top:1rem;
  padding:14px;border-radius:36px;background:linear-gradient(180deg,#1b2430,#0b121b);
  box-shadow:0 24px 50px rgba(7,27,53,.18)
}
.st-phone-notch{width:88px;height:10px;margin:4px auto 10px;border-radius:999px;background:#000}
.st-phone-screen{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#0b1c2e}
.st-phone-screen img,.st-phone-screen video{width:100%;height:100%;object-fit:cover;display:block}
.st-phone-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.4rem;color:rgba(255,255,255,.55);font-weight:750}
.st-phone-cap{position:absolute;left:.8rem;right:.8rem;bottom:.9rem;color:#fff}
.st-phone-cap strong{display:block;font-size:14px}
.st-form h2{margin:.2rem 0 .8rem}
.st-drops{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.st-drop{
  display:flex;flex-direction:column;gap:.2rem;padding:1rem .9rem;border-radius:18px;
  border:1px dashed var(--line);background:var(--paper);cursor:pointer
}
.st-drop input{margin-bottom:.35rem}
.st-drop strong{font-size:14px}
.st-drop small{color:var(--muted);font-size:12px}
.st-consent{display:flex;gap:.55rem;align-items:flex-start;margin:1rem 0;font-size:13.5px;line-height:1.45}
.st-consent input{margin-top:.2rem}
.st-form-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.st-verified{display:flex;gap:.4rem;align-items:center;color:#16865b;font-weight:750;font-size:13.5px}
.st-err{color:#e83446;font-size:13px;margin:.4rem 0}
.st-reel{
  position:fixed;inset:0;z-index:80;background:rgba(3,8,16,.92);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem;
  padding:max(.8rem,env(safe-area-inset-top)) .6rem max(.8rem,env(safe-area-inset-bottom))
}
.st-reel-stage{display:grid;place-items:center}
.st-reel[hidden],.st-reel [hidden],.st-phone-screen [hidden]{display:none}
.st-reel-phone{
  position:relative;width:min(380px,100%);aspect-ratio:9/16;max-height:92dvh;
  border-radius:28px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.st-reel-img,.st-reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-reel-vid[hidden],.st-reel-img[hidden]{display:none}
.st-reel-shade{position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.st-reel-progress{position:absolute;top:.7rem;left:.7rem;right:.7rem;height:3px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;z-index:2}
.st-reel-progress i{display:block;height:100%;width:0;background:#fff;transform-origin:left}
.st-reel-ui{position:absolute;left:1rem;right:1rem;bottom:1.1rem;z-index:2;color:#fff}
.st-reel-who{display:flex;gap:.6rem;align-items:center;margin-bottom:.55rem}
.st-reel-ui p{margin:0 0 .7rem;font-weight:800;letter-spacing:-.02em}
.st-reel-link{color:#fff;font-weight:750;font-size:13px}
.st-reel-close,.st-reel-nav,.st-reel-mute{
  width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center
}
.st-reel-close{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:.8rem;z-index:3}
.st-reel-prev .icon{transform:rotate(90deg)}
.st-reel-next .icon{transform:rotate(-90deg)}
.st-reel-mute{position:absolute;top:.7rem;right:.7rem;width:40px;height:40px;z-index:2}
.ac-ava.has-photo{padding:0;overflow:hidden;background:#122033}
.ac-ava.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.ac-ava-upload{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.ac-ava-upload img{width:72px;height:72px;border-radius:22px;object-fit:cover}

@media (max-width:900px){
  .st-detail-grid,.st-compose{grid-template-columns:1fr}
  .st-phone{position:static;max-width:260px;margin:0 auto}
  .st-frame{max-width:360px;margin:0 auto}
  .st-drops{grid-template-columns:1fr}
}
@media (max-width:640px){
  .st-hero{padding:3rem 0 2.2rem}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .st-card-media,.st-card{border-radius:18px}
  .st-reel{grid-template-columns:1fr}
  .st-reel-nav{display:none}
}
