/* Ekran goruntuleri sayfasi (screenshots.php). home.css'in .hc-home tokenlarini kullanir. Taslak: mockups/ekran-goruntuleri-2026-10.html */
.hc-home .sh-hero{display:grid;gap:12px;max-width:720px;padding-block:44px 28px}
.hc-home .sh-eyebrow{font:700 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.hc-home .sh-hero h1{font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:0}
.hc-home .sh-hero p{margin:0;color:var(--muted);font-size:18px;max-width:58ch}
.hc-home .sh{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding-block:8px 72px;scroll-margin-top:72px}
.hc-home .sh-nav{position:sticky;top:88px;display:grid;gap:18px;max-height:calc(100vh - 104px);overflow-y:auto;padding:4px 6px}
.hc-home .sh-frame img:not([src]){visibility:hidden}
.hc-home .sh-group{display:grid;gap:2px}
.hc-home .sh-group-h{font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 12px 6px}
.hc-home .sh-item{display:flex;align-items:center;gap:10px;width:100%;text-align:start;font:600 15px/1.3 var(--sans);color:var(--muted);background:none;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.hc-home .sh-item:hover{color:var(--text);background:var(--bg-soft)}
.hc-home .sh-item[aria-current="true"]{color:var(--text);background:var(--surface);box-shadow:inset 3px 0 0 var(--teal),var(--shadow)}
[dir="rtl"] .hc-home .sh-item[aria-current="true"]{box-shadow:inset -3px 0 0 var(--teal),var(--shadow)}
.hc-home .sh-item:focus-visible,.hc-home .sh-btn:focus-visible,.hc-home .sh-seg button:focus-visible,.hc-home .sh-zoom:focus-visible,.hc-home .sh-thumb:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.hc-home .sh-num{font:500 12px/1 var(--mono);color:var(--muted);min-width:18px}
.hc-home .sh-stage{display:grid;gap:18px;min-width:0}
.hc-home .sh-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px}
.hc-home .sh-title{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em}
.hc-home .sh-text{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.55;max-width:66ch}
.hc-home .sh-seg{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.hc-home .sh-seg-l{font:600 13px/1 var(--sans);color:var(--muted);padding-inline:8px 4px}
.hc-home .sh-seg button{font:700 13px/1 var(--sans);color:var(--muted);background:none;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
.hc-home .sh-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.hc-home .sh-frame{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/9}
.hc-home .sh-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.hc-home .sh-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
.hc-home .sh-frame img.is-loading{opacity:.35}
.hc-home .sh-zoom-hint{position:absolute;inset-block-end:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);color:#fff;background:rgba(9,9,11,.72);padding:8px 11px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
.hc-home .sh-frame:hover .sh-zoom-hint,.hc-home .sh-zoom:focus-visible + .sh-zoom-hint{opacity:1}
.hc-home .sh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hc-home .sh-count{font:500 14px/1 var(--mono);color:var(--muted)}
.hc-home .sh-arrows{display:flex;gap:8px}
.hc-home .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;font:700 14px/1 var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .2s var(--ease)}
.hc-home .sh-btn:hover{border-color:var(--line-strong)}
[dir="rtl"] .hc-home .sh-btn svg{transform:scaleX(-1)}
.hc-home .sh-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:14px;color:var(--muted)}
.hc-home .sh-note svg{flex-shrink:0;margin-top:2px}
.hc-home .sh-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:6px}
.hc-home .sh-thumb{display:grid;gap:6px;padding:0;background:none;border:0;cursor:pointer;text-align:start;font:600 12.5px/1.3 var(--sans);color:var(--muted)}
.hc-home .sh-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--line);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.hc-home .sh-thumb:hover img{transform:translateY(-2px)}
.hc-home .sh-thumb[aria-current="true"]{color:var(--text)}
.hc-home .sh-thumb[aria-current="true"] img{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.sh-box{position:fixed;inset:0;width:auto;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:rgba(5,6,8,.92);color:#fff}
.sh-box[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.sh-box::backdrop{background:transparent}
.sh-box-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 16px/1.3 "Manrope",system-ui,sans-serif}
.sh-box-close{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font:700 14px/1 "Manrope",system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:10px;cursor:pointer}
.sh-box-close:hover{background:rgba(255,255,255,.18)}
.sh-box-close:focus-visible{outline:2px solid #4fb6a5;outline-offset:2px}
body:has(.sh-box[open]){overflow:hidden}
.sh-box-img{min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.sh-box-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.sh-box-bot{display:flex;justify-content:center;gap:8px}
.sh-box-bot .sh-box-close svg{width:16px;height:16px}
[dir="rtl"] .sh-box-bot svg{transform:scaleX(-1)}
@media (max-width:980px){
  .hc-home .sh{grid-template-columns:1fr;gap:20px}
  .hc-home .sh-nav{position:static;max-height:none;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;padding-block:2px 6px}
  .hc-home .sh-nav::-webkit-scrollbar{display:none}
  .hc-home .sh-group{display:flex;gap:6px;flex-shrink:0}
  .hc-home .sh-group-h{display:none}
  .hc-home .sh-item{white-space:nowrap;width:auto;border:1px solid var(--line);background:var(--surface);padding:9px 14px}
  .hc-home .sh-item[aria-current="true"],[dir="rtl"] .hc-home .sh-item[aria-current="true"]{box-shadow:none;border-color:var(--teal);color:var(--teal)}
  .hc-home .sh-num{display:none}
  .hc-home .sh-thumbs{display:none}
  .hc-home .sh-zoom-hint{opacity:1}
  .hc-home .sh-hero{padding-block:36px 20px}
}
@media (max-width:560px){
  .hc-home .sh-btn span{display:none}
  .hc-home .sh-btn{padding:0 12px}
  .hc-home .sh-seg-l{display:none}
}
@media (hover:none){
  .hc-home .sh-zoom-hint{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hc-home .sh-frame img,.hc-home .sh-thumb img{transition:none}
}