/* ---------- 02b The problem ----------
   Right after the hero (and the placeholder logo strip), for people who have lived it. Little text: a headline, one line, one scene.
   The scene: a crowded browser (every tool in its own tab), the expert's by-hand checks in front of it, and the result
   below it (Thursday ... 4 days ... Monday). Dark, continuing the hero. Only the late-week line animates, once. */
.problem{background:var(--ink);color:var(--cream);padding:clamp(96px,14vh,144px) 24px}
.problem-inner{max-width:1200px;margin:0 auto}
.problem-head{max-width:820px}
.problem h2{margin:0;font-size:clamp(34px,3.9vw,56px);line-height:1.05;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.problem-head p{margin:20px 0 0;max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--text-inv-3)}

/* the scene: browser at the back, checks in front on the right, the late week below both */
.pb-scene{position:relative;margin:56px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);grid-template-rows:auto auto}
.pb-browser{grid-column:1/-1;grid-row:1;margin-right:18%;padding:10px 10px 16px;border-radius:18px;background:var(--ink-2);border:1px solid var(--ink-3)}
.tabbar{display:flex;gap:3px;overflow:hidden}
.tab{flex:1 1 0;min-width:0;height:34px;padding:0 10px;display:flex;align-items:center;gap:7px;border-radius:9px 9px 0 0;background:var(--ink-3);
  font-size:12px;color:var(--text-inv-muted);white-space:nowrap;overflow:hidden}
.tab.is-on{background:#322836;color:var(--cream)}
.tab i,.file i{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--ink-4);font-style:normal;font-size:9px;font-weight:700;color:var(--text-inv-2)}
.tab i.sq,.file i.sq{background:rgba(131,208,160,.22)}
.tab-body{height:190px;display:flex;flex-direction:column;gap:12px;padding:26px 18px;border-radius:0 0 12px 12px;background:#322836}
.sk{height:8px;border-radius:4px;background:rgba(251,247,242,.08)}
.sk.w70{width:52%}.sk.w45{width:34%}.sk.w60{width:44%}.sk.w35{width:26%}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0 6px}
.file{height:30px;padding:0 12px 0 8px;display:flex;align-items:center;gap:8px;border-radius:8px;border:1px solid var(--line-dark);font-size:12px;color:var(--text-inv-2)}

.pb-checks{grid-column:2;grid-row:1;align-self:end;margin:0 0 -28px;padding:18px 20px 8px;border-radius:18px;background:var(--cream);color:var(--text);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85);position:relative}
.checks-title{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--text)}
.pb-checks ul{margin:0;padding:0;list-style:none}
.pb-checks li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(20,15,21,.08)}
.pb-checks b{font-size:12px;font-weight:600;color:var(--text-muted)}
.pb-checks span{font-size:14px;line-height:1.35;color:var(--text)}

/* the late week, in big type */
.pb-late{grid-column:1/-1;grid-row:2;margin-top:72px;display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:20px}
.late-end{display:flex;flex-direction:column;gap:6px}
.late-end b{display:flex;align-items:center;gap:12px;font-size:clamp(30px,3.2vw,44px);line-height:1;font-weight:600;letter-spacing:-.03em}
.late-end span{font-size:14px;color:var(--text-inv-muted)}
.late-found{text-align:right}
.late-found b{justify-content:flex-end}
.late-dot{width:12px;height:12px;border-radius:50%;background:var(--red-on-dark);box-shadow:0 0 0 6px rgba(232,96,108,.18)}
.late-gap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.late-gap span{font-size:15px;font-weight:600;color:var(--text-inv-2)}
.late-gap i{display:block;width:100%;height:2px;border-radius:2px;background:rgba(251,247,242,.28);transform-origin:0 50%}
.late-gap i{transform:scaleX(0);transition:transform 1.4s var(--ease-soft) .3s}
.late-found,.late-gap span{opacity:0;transition:opacity .48s var(--ease-expo) 1.5s}
.late-gap span{transition-delay:.6s}
.pb-late.is-in .late-gap i{transform:none}
.pb-late.is-in .late-found,.pb-late.is-in .late-gap span{opacity:1}

.problem-turn{margin:56px 0 0;max-width:34em;font-size:clamp(20px,1.7vw,24px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--cream)}

@media (max-width: 959px){
  .pb-scene{grid-template-columns:minmax(0,1fr)}
  .pb-browser{margin-right:0}
  .tab-body{height:120px}
  .pb-checks{grid-column:1;grid-row:2;margin:-40px 16px 0 auto;max-width:400px}
  .pb-late{grid-row:3;margin-top:48px}
}
@media (max-width: 719px){
  .problem{padding:80px 20px}
  .problem h2{font-size:clamp(28px,7.7vw,32px)} /* phone H2: one clear step under the H1 (36 px) */
  .pb-scene{margin-top:40px}
  .problem-turn{margin-top:48px}
  /* a crowded browser: the tabs keep their desktop width and run off both edges of the window instead of shrinking to
     squares; the strip is shifted so the open tab (the 4th) sits in view with a cut tab on each side */
  .pb-browser{overflow:hidden}
  .tabbar{margin:0 -10px;overflow:visible}
  .tab{flex:0 0 112px}
  .tab:first-child{margin-left:-180px}
  .pb-checks{margin:-28px 0 0 12px;max-width:none}
  .pb-checks li{grid-template-columns:96px minmax(0,1fr)}
  .pb-late{gap:12px;grid-template-columns:auto minmax(36px,1fr) auto;align-items:start}
  .late-gap{margin:-15px 0 0}
  .late-end b{font-size:28px;gap:10px}
  .late-end span{font-size:13px}
  .late-found span{max-width:8.5em;margin-left:auto}
}
@media (prefers-reduced-motion: reduce){
  .late-gap i{transform:none}
  .late-found,.late-gap span{opacity:1}
}
/* narrowest phones (320 px): the two day names and the gap between them must fit one row ("Perşembe … Pazartesi" is wider than the English) */
@media (max-width: 359px){
  .late-end b{font-size:22px;gap:8px}
}