/* Referanslar sayfası — h5.css'in üstüne gelir. Seçici ön eki: h5r- */
.h5r-hero{position:relative;min-height:88vh;min-height:88svh;padding:calc(var(--h5-nav-h) + clamp(56px,9vh,110px)) var(--h5-pad) clamp(40px,6vw,72px);display:flex;flex-direction:column;justify-content:flex-end;
  background-image:linear-gradient(90deg,var(--h5-rule) 1px,transparent 1px),linear-gradient(0deg,var(--h5-rule) 1px,transparent 1px);background-size:8.3333vw 100%,100% 10vh}
.h5r-hero-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 11.5px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:auto}
.h5r-hero-meta b{color:var(--h5-scream);font-weight:600}
.h5r-hero h1{font-weight:900;font-stretch:62%;font-size:clamp(64px,13.5vw,250px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase}
.h5r-hero h1 em{font-style:normal;color:var(--h5-scream)}
.h5r-hero-sub{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1.5px solid var(--h5-ink)}
.h5r-hero-sub p{font:400 14px/1.65 var(--h5-mono);letter-spacing:.02em;max-width:52ch}

/* Logo duvarı: kenarlıklı hücreler, her hücre ilgili vakaya atlar */
.h5r-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--h5-ink);border-left:1.5px solid var(--h5-ink)}
.h5r-wall a{display:flex;align-items:center;justify-content:center;height:clamp(120px,15vw,200px);border-right:1.5px solid var(--h5-ink);border-bottom:1.5px solid var(--h5-ink);padding:24px;position:relative;transition:background-color .3s}
.h5r-wall a::after{content:attr(data-no);position:absolute;left:14px;top:12px;font:600 11px var(--h5-mono);letter-spacing:.12em;opacity:.55}
.h5r-wall a:hover,.h5r-wall a:focus-visible{background:var(--h5-scream);outline:none}
.h5r-wall img,.h5r-wall svg{height:clamp(30px,3.4vw,46px);width:auto;max-width:78%;object-fit:contain;transition:transform .4s var(--h5-ease)}
.h5r-wall a:hover img,.h5r-wall a:hover svg{transform:scale(1.06)}
.h5r-wall-text{font-weight:900;font-stretch:66%;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.03em;text-transform:uppercase;text-align:center}
/* Görünümü henüz çekilmemiş mağaza */
.h5r-browser.is-pending{height:clamp(260px,34vh,380px);background-image:linear-gradient(90deg,var(--h5-rule) 1px,transparent 1px),linear-gradient(0deg,var(--h5-rule) 1px,transparent 1px);background-size:40px 100%,100% 40px}
.h5r-pending{position:absolute;inset:34px 0 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:600 12px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.6)}
.h5r-pending b{color:var(--h5-ink);border:1.5px solid var(--h5-ink);padding:10px 16px;font-weight:600}
.h5r-browser.is-pending:hover .h5r-pending b{background:var(--h5-scream)}

/* Vaka: sol sabit metin sütunu + sağda kaydırdıkça akan sayfa görünümleri */
.h5r-case{position:relative;padding:clamp(72px,9vw,140px) var(--h5-pad);border-top:1.5px solid currentColor;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.h5r-case.is-dark{background:var(--h5-ink);color:var(--h5-paper)}
.h5r-info{position:sticky;top:calc(var(--h5-nav-h) + 40px)}
.h5r-no{font-weight:900;font-stretch:62%;font-size:clamp(84px,11vw,190px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px currentColor}
.h5r-case h2{margin-top:24px;font-weight:900;font-stretch:66%;font-size:clamp(40px,5.6vw,96px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.h5r-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.h5r-tags span{font:600 11px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid currentColor;padding:6px 10px}
.h5r-case p{margin-top:22px;font:400 14px/1.65 var(--h5-mono);letter-spacing:.02em;max-width:44ch}
.h5r-open{margin-top:28px}
.h5r-case.is-dark .h5-btn{background:var(--h5-scream);color:var(--h5-ink)}
.h5r-case.is-dark .h5-btn:hover,.h5r-case.is-dark .h5-btn:focus-visible{box-shadow:3px 3px 0 var(--h5-paper)}
.h5r-domain{display:block;margin-top:14px;font:500 12px var(--h5-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.h5r-shots{position:relative;padding-bottom:14vw}
/* Tarayıcı çerçevesi: görünüm, kaydırdıkça içinde akar (JS translateY) */
.h5r-browser{display:block;position:relative;border:1.5px solid currentColor;background:var(--h5-paper);color:var(--h5-ink);height:clamp(420px,62vh,760px);overflow:hidden}
.h5r-browser .h5r-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-bottom:1.5px solid var(--h5-ink);font:500 11px var(--h5-mono);letter-spacing:.08em;background:var(--h5-paper);position:relative;z-index:2}
.h5r-bar i{width:9px;height:9px;border:1.5px solid var(--h5-ink)}
.h5r-bar i:first-child{background:var(--h5-scream)}
.h5r-bar span{margin-left:8px;flex:1;height:20px;line-height:20px;padding:0 8px;border:1.5px solid rgba(10,10,10,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h5r-bar b{font-weight:600;color:var(--h5-scream);white-space:nowrap}
.h5r-scroller{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden}
.h5r-scroller img{width:100%;height:auto;will-change:transform}
.h5r-browser:hover .h5r-bar b,.h5r-browser:focus-visible .h5r-bar b{text-decoration:underline}
/* Telefon çerçevesi: tarayıcının sol altına biner */
.h5r-phone{display:block;position:absolute;left:-6%;bottom:0;width:clamp(150px,22%,220px);aspect-ratio:9/19;border:1.5px solid currentColor;border-radius:22px;background:var(--h5-paper);color:var(--h5-ink);overflow:hidden;box-shadow:8px 8px 0 var(--h5-scream)}
.h5r-phone .h5r-scroller{top:0;border-radius:20px}
.h5r-case.is-dark .h5r-browser,.h5r-case.is-dark .h5r-phone{border-color:var(--h5-paper)}

/* Kapanış */
.h5r-end{padding:clamp(88px,12vw,180px) var(--h5-pad);border-top:1.5px solid var(--h5-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.h5r-end h2{font-weight:900;font-stretch:62%;font-size:clamp(48px,9vw,170px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.h5r-end h2 em{font-style:normal;color:var(--h5-scream)}
.h5r-end-cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.h5r-end-cta small{font:500 11.5px/1.6 var(--h5-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}

@media (max-width:860px){
  .h5r-hero{min-height:74svh}
  .h5r-hero h1{font-size:19vw}
  .h5r-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h5r-wall a{height:104px;padding:18px}
  .h5r-wall img,.h5r-wall svg{height:26px;max-width:82%}
  .h5r-case{grid-template-columns:1fr;gap:26px}
  .h5r-info{position:static}
  .h5r-no{font-size:26vw}
  .h5r-case h2{font-size:12vw}
  .h5r-shots{padding-bottom:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
  .h5r-browser{height:58svh}
  .h5r-phone{position:relative;left:auto;bottom:auto;width:56%;margin:0 auto;box-shadow:6px 6px 0 var(--h5-scream)}
  .h5r-end{grid-template-columns:1fr}
  .h5r-end h2{font-size:15vw}
}