/* "Nerede çalışır" bölümü: telefon, masaüstü uygulaması, web. Süs görseller (aria-hidden), yalnız CSS.
   Uygulama taklidi olduğu için renkler sabit (miniapp.css ile aynı mantık); marka renkleri değişkenlerden. */

.works{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:clamp(22px,3.4vw,48px);align-items:start}
.works__item{display:grid;grid-template-rows:340px auto 1fr;gap:8px;min-width:0}
.works__item .wframe{align-self:end;margin-bottom:14px}
.works__item h3{margin:0;font:600 18px/1.3 var(--font-body);color:var(--on-dark)}
.works__item>p{margin:0;max-width:36ch;font-size:15px;line-height:1.5;color:var(--on-dark-soft)}
.works__soon{margin-top:48px;grid-column:auto;font-size:15px;color:var(--on-dark-soft)}
.works__soon a{color:var(--on-dark);text-decoration-color:var(--brand-accent-text);text-underline-offset:4px;text-decoration-thickness:2px}

.wframe{--w-blue:#3a8fdc;--w-line:#e6e9ed;--w-bar:#c9d1d9;position:relative;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.wframe--phone{display:flex;width:min(100%,184px);height:326px;padding:8px;border-radius:30px;background:#0b0f17;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.7)}
.wframe--phone .wchat{border-radius:23px;overflow:hidden}
.wframe--window{width:100%;height:262px;border-radius:12px;display:flex;flex-direction:column}
.wframe__bar{flex:none;display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;background:#e9ecef}
.wframe__bar>i{width:8px;height:8px;border-radius:50%;background:#bcc4cc}
.wframe__url{flex:1;max-width:210px;height:17px;margin-inline-start:12px;border-radius:9px;background:#fff;font:500 10.5px/17px var(--font-body);color:#5d6b78;text-align:center}
.wwin{flex:1;min-height:0;display:flex}
.wwin__list{flex:none;display:grid;align-content:start;gap:8px;width:58px;padding:10px 0;border-right:1px solid var(--w-line);justify-items:center;background:#fff}
.wwin__list>i{width:30px;height:30px;border-radius:50%;background:var(--w-bar)}
.wwin__list>i:first-child{background:var(--w-blue)}

.wchat{flex:1;min-width:0;display:flex;flex-direction:column;background:#e6ebee}
.wchat__bar{flex:none;display:flex;align-items:center;gap:8px;height:38px;padding:0 11px;background:#fff;border-bottom:1px solid var(--w-line)}
.wchat__av{width:22px;height:22px;border-radius:50%;background:var(--w-blue)}
.wchat__line{width:54px;height:6px;border-radius:3px;background:var(--w-bar)}
.wchat__body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 10px 12px}
.wmsg{margin:0;max-width:86%;padding:6px 10px;border-radius:12px;font:12px/1.35 var(--font-body);color:#14202b;background:#fff}
.wmsg--out{align-self:flex-end;background:#d4eafc;border-bottom-right-radius:4px}
.wmsg--in{align-self:flex-start;border-bottom-left-radius:4px}

.wpanel{flex:none;display:grid;align-content:start;gap:8px;width:34%;padding:11px;border-left:1px solid var(--w-line);background:#f6f7f9}
.wpanel>b{font:600 12px/1.2 var(--font-body);color:#14202b}
.wpanel>i{height:8px;border-radius:4px;background:#d7dde3}
.wpanel>i:nth-of-type(1){width:92%}
.wpanel>i:nth-of-type(2){width:70%}
.wpanel>i:nth-of-type(3){width:82%;background:var(--w-blue);opacity:.75}

@media (max-width:860px){
  .works{grid-template-columns:1fr;max-width:540px;margin-inline:auto;gap:40px}
  .works__item{grid-template-rows:auto auto 1fr}
  .works__item--phone .wframe{margin-inline:auto}
  .works__item--phone>h3,.works__item--phone>p{text-align:center;margin-inline:auto}
}