/* yougamearea.com ana sayfa: BACKROOMS tanitim karti (Claude, 2026-10-10)
   Kaynak: work/web/site/embed/ (cs.yougamearea.com/embed/, deploy_web.sh ile yayinlanir)
   Gorsel ve yazi tipleri cs.yougamearea.com'dan gelir (orada /assets/ icin CORS acik). */
@font-face{font-family:"YGA Bebas";font-style:normal;font-weight:400;font-display:swap;src:url(https://cs.yougamearea.com/assets/fonts/bebas-neue-latin-400-normal.woff2?e=1) format("woff2")}
@font-face{font-family:"YGA Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(https://cs.yougamearea.com/assets/fonts/ibm-plex-mono-latin-500-normal.woff2?e=1) format("woff2");unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:"YGA Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(https://cs.yougamearea.com/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2?e=1) format("woff2");unicode-range:U+0100-0130,U+0132-02BA}

.ygabr{padding:8px 0 80px}
.ygabr__card{position:relative;overflow:hidden;display:flex;align-items:center;min-height:360px;border-radius:8px;background:#16140c;color:#eee5c6;box-shadow:0 22px 60px rgba(22,20,12,.28);isolation:isolate}
.ygabr__media{position:absolute;inset:0;z-index:-1;background:#16140c url(https://cs.yougamearea.com/assets/media/hall_poster.webp) 72% 58%/cover no-repeat;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ygabr__media::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  linear-gradient(90deg,#16140c 0%,rgba(22,20,12,.93) 36%,rgba(22,20,12,.4) 72%,rgba(22,20,12,.12) 100%)}
.ygabr__card:hover .ygabr__media{transform:scale(1.03)}
.ygabr__body{position:relative;max-width:720px;padding:46px 52px}
.ygabr__eyebrow{display:inline-block;margin:0 0 16px;padding:4px 9px;border-radius:3px;background:#ebc458;color:#1a1506;font-size:13px;font-weight:700;line-height:1.2}
.ygabr__title{margin:0;font-family:"YGA Bebas","Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(60px,8vw,104px);line-height:.84;letter-spacing:.01em;color:#eee5c6}
.ygabr__sub{margin:12px 0 0;font-family:"YGA Plex Mono",ui-monospace,Consolas,monospace;font-weight:500;font-size:13px;letter-spacing:.42em;color:#b8af90}
.ygabr__lede{margin:20px 0 0;max-width:44ch;font-size:17px;line-height:1.55;color:#ddd3b2}
.ygabr__facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;font-weight:700}
.ygabr__facts li{display:flex;align-items:center;gap:9px}
.ygabr__dot{flex:none;width:9px;height:9px;border-radius:50%;background:#8a8470}
.ygabr__facts .is-on .ygabr__dot{background:#5fd068;box-shadow:0 0 0 4px rgba(95,208,104,.16)}
.ygabr__facts .is-off .ygabr__dot{background:#e2492f}
.ygabr__phase{color:#ebc458}
.ygabr__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ygabr__btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:4px;background:#ebc458;color:#1a1506 !important;font-weight:700;text-decoration:none !important;transition:background-color .2s,box-shadow .25s}
.ygabr__btn:hover{background:#f6d777;box-shadow:0 0 28px rgba(235,196,88,.35)}
.ygabr__cmd{display:inline-flex;align-items:stretch;min-height:48px;padding:0;border:1px solid rgba(238,229,198,.3);border-radius:4px;background:rgba(12,11,6,.6);color:#eee5c6;font:inherit;cursor:pointer;max-width:100%}
.ygabr__cmd code{display:flex;align-items:center;padding:0 14px;background:none;color:#eee5c6;font-family:"YGA Plex Mono",ui-monospace,Consolas,monospace;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ygabr__copy{display:flex;align-items:center;padding:0 15px;border-left:1px solid rgba(238,229,198,.3);font-size:14px;font-weight:700;transition:color .2s}
.ygabr__cmd:hover .ygabr__copy,.ygabr__cmd.is-done .ygabr__copy{color:#f6d777}
.ygabr a:focus-visible,.ygabr button:focus-visible{outline:2px solid #ebc458;outline-offset:3px}
@media (max-width:767px){
  .ygabr{padding:0 0 56px}
  .ygabr__card{display:block;min-height:0}
  .ygabr__media{position:relative;inset:auto;height:190px;background-position:62% 60%}
  .ygabr__media::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),linear-gradient(0deg,#16140c 0%,rgba(22,20,12,.25) 65%,rgba(22,20,12,.05))}
  .ygabr__body{padding:0 22px 30px;margin-top:-34px}
  .ygabr__actions{flex-direction:column;align-items:stretch}
  .ygabr__btn{justify-content:center}
  .ygabr__cmd code{font-size:13px;padding:0 12px;flex:1}
}
@media (prefers-reduced-motion:reduce){.ygabr__media,.ygabr__btn{transition:none}.ygabr__card:hover .ygabr__media{transform:none}}