:root{
  --bg:#ffffff; --ink:#0d0d0d; --muted:#8a8a86; --line:rgba(0,0,0,0.14);
  --ring-bg:#f4f3f1;
  --font:"Helvetica Neue","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --mx:2.4em;
  --header-h:64px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
em{ font-style:italic; }

/* ===== Page transition overlay ===== */
.page-fade{ position:fixed; inset:0; background:var(--bg); z-index:99990; pointer-events:none;
  opacity:1; transition:opacity .5s ease; }
body.is-ready .page-fade{ opacity:0; }
body.is-leaving .page-fade{ opacity:1; pointer-events:all; }

/* ===== Header ===== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; padding:1.5em var(--mx); font-size:13px; letter-spacing:0.02em;
  mix-blend-mode:difference; color:#fff; }
.site-header a, .site-header .brand{ color:#fff; }
.header-left{ display:flex; align-items:center; gap:3em; }
.brand{ font-weight:600; font-size:16px; letter-spacing:0.06em; }
.brand-dot{ font-size:9px; vertical-align:super; margin-left:2px; }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav-item{ position:relative; }
.nav-item > a{ position:relative; opacity:0.7; transition:opacity .3s ease; padding:0.4em 0; display:inline-block; }
.nav-item > a:hover, .nav-item.is-active > a{ opacity:1; }
.nav-item.is-active > a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; }
.submenu{ position:absolute; top:100%; left:0; display:flex; flex-direction:column; gap:0.5em;
  padding-top:0.8em; opacity:0; visibility:hidden; transform:translateY(-4px); transition:all .28s ease; }
.nav-item:hover .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{ opacity:0.7; font-size:12px; white-space:nowrap; }
.submenu a:hover{ opacity:1; }
.lang{ display:flex; gap:0.5em; font-weight:500; align-items:center; }
.lang .sep{ opacity:0.4; }
.lang .muted{ opacity:0.45; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:18px;
  padding:0; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:100%; height:1.5px; background:#fff; transition:transform .3s ease, opacity .3s ease; }

/* ===== Corner controls (projects) ===== */
.corner{ position:fixed; bottom:2em; z-index:55; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid var(--ink); transition:opacity .3s ease; }
.corner:hover{ opacity:0.55; }
.corner i{ font-style:normal; margin-left:0.4em; }
.corner--left{ left:var(--mx); }
.corner--right{ right:var(--mx); }

/* ===== Custom cursor ===== */
.custom-cursor{ display:none; }
@media (pointer:fine) and (hover:hover){
  body.cursor-on{ cursor:none; }
  .custom-cursor{ display:block; position:fixed; top:0; left:0; width:13px; height:13px;
    border-radius:999px; background:#000; pointer-events:none; z-index:99999; will-change:transform; transition:opacity .3s ease; }
  .custom-cursor.is-hidden{ opacity:0; }
}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--line); padding:4em var(--mx) 2.4em; margin-top:6em;
  display:flex; flex-wrap:wrap; gap:2em; justify-content:space-between; align-items:flex-end; font-size:13px; }
.footer-brand{ font-size:clamp(40px,9vw,140px); font-weight:600; letter-spacing:-0.03em; line-height:0.9; }
.footer-cols{ display:flex; gap:3.5em; flex-wrap:wrap; }
.footer-cols h4{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1em; font-weight:500; }
.footer-cols ul{ list-style:none; display:flex; flex-direction:column; gap:0.5em; }
.footer-cols a{ opacity:0.7; transition:opacity .3s; }
.footer-cols a:hover{ opacity:1; }
.footer-meta{ width:100%; display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap;
  padding-top:2em; color:var(--muted); font-size:12px; }

/* ===== Reveal ===== */
[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

/* ===== Section primitives ===== */
.section{ padding:0 var(--mx); }
.eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.display{ font-size:clamp(40px,7.5vw,120px); font-weight:500; line-height:0.98; letter-spacing:-0.03em; }
.display em{ font-weight:400; }
.h-lead{ font-size:clamp(26px,3.4vw,52px); font-weight:500; line-height:1.08; letter-spacing:-0.02em; }
.lead-copy{ font-size:clamp(17px,1.5vw,22px); line-height:1.5; max-width:46ch; }

/* ============================================================
   HOME — ring hero + editorial content
   ============================================================ */
.ring-hero{ position:relative; height:300vh; background:var(--ring-bg); }
.scene{ position:sticky; top:0; height:100vh; overflow:hidden; perspective:1600px; perspective-origin:50% 50%; }
.gallery{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }
.item{ position:absolute; top:0; left:0; width:78px; height:60px; transform-style:preserve-3d; }
.item-card{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  border:1px solid rgba(255,255,255,0.65); transition:box-shadow .4s ease; }
.item-card img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) brightness(0.99); }
.item-card.is-active{ box-shadow:0 6px 16px -10px rgba(0,0,0,0.35); }
.ring-center{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:min(560px,46vw);
  text-align:center; pointer-events:none; z-index:5; }
.ring-center .eyebrow{ margin-bottom:1.3em; }
.ring-center h1{ font-size:clamp(34px,4.6vw,62px); font-weight:500; line-height:1.02; letter-spacing:-0.02em; }
.ring-center h1 em{ font-style:italic; font-weight:400; }
.ring-center .sub{ margin-top:1.2em; font-size:14px; color:var(--muted); }
.ring-default,.ring-project{ transition:opacity .55s ease; }
.ring-project{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content;
  display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; }
.ring-center.show-project .ring-default{ opacity:0; }
.ring-center.show-project .ring-project{ opacity:1; }
.ring-project .pimg{ display:block; flex-shrink:0; width:clamp(300px,32vw,440px); aspect-ratio:3/2;
  overflow:hidden; background:#e7e6e3; }
.ring-project .pimg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ring-project .pcat{ margin-top:1em; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.ring-project .ptitle{ margin-top:0.3em; font-size:clamp(20px,2vw,26px); font-weight:500; }
.labels{ position:absolute; inset:0; pointer-events:none; }
.label{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:14px; font-weight:500; opacity:0.85;
  pointer-events:auto; color:inherit; text-decoration:none; padding:4px 2px;
  transition:opacity 0.25s ease, transform 0.25s ease; }
.label:hover{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
.label .ul{ border-bottom:1px solid var(--ink); padding-bottom:2px; }
.label sup{ font-size:10px; color:var(--muted); margin-left:3px; }
.scroll-hint{ position:absolute; bottom:2em; left:50%; transform:translateX(-50%); font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); z-index:5; }

/* Mobil çember önizleme + sürükleme (varsayılan gizli; mobilde açılır) */
.mobile-preview{ display:none; }
.mobile-ring-hitbox{ display:none; }

.home-statement{ padding:14vh var(--mx) 10vh; }
.home-statement .display{ max-width:14ch; }
.home-statement p{ margin-top:2em; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3em; align-items:start; }
.intro-grid{ padding:8vh var(--mx); border-top:1px solid var(--line); }
.services-list{ list-style:none; border-top:1px solid var(--line); }
.services-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:2em;
  padding:0.7em 0; border-bottom:1px solid var(--line); font-size:clamp(22px,3vw,40px); font-weight:500; letter-spacing:-0.01em; }
.services-list li span{ font-size:13px; color:var(--muted); letter-spacing:0; }
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:2em; padding:8vh var(--mx); border-top:1px solid var(--line); }
.metric .num{ font-size:clamp(40px,6vw,90px); font-weight:600; letter-spacing:-0.03em; line-height:1; }
.metric .lbl{ margin-top:0.6em; font-size:13px; color:var(--muted); }
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:2em; padding:8vh var(--mx); border-top:1px solid var(--line); }
.office-card h3{ font-size:20px; font-weight:600; margin-bottom:0.6em; }
.office-card p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* recent / featured grid (home) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6em; padding:8vh var(--mx); border-top:1px solid var(--line); }

/* ============================================================
   PROJECTS grid + filters
   ============================================================ */
.page-pad-top{ padding-top:calc(var(--header-h) + 3.5em); }
.proj-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1em;
  padding:0 var(--mx) 1.4em; flex-wrap:wrap; }
.proj-head h1{ font-size:clamp(30px,5vw,72px); font-weight:500; letter-spacing:-0.03em; }
.proj-head .count{ font-size:13px; color:var(--muted); }
.filter-bar{ display:flex; gap:1.6em; align-items:center; padding:0 var(--mx) 1em; font-size:13px; }
.filter-toggle, .gridview-toggle{ background:none; border:none; cursor:pointer; font:inherit; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:3px; }
.filter-toggle i, .gridview-toggle i{ font-style:normal; margin-left:0.4em; }
.filter-panel{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6em 2.4em; padding:0 var(--mx);
  max-height:0; overflow:hidden; opacity:0; transition:max-height .5s ease, opacity .4s ease, padding .4s ease; }
.filter-panel.open{ max-height:600px; opacity:1; padding-top:1.4em; padding-bottom:1.8em; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:2em; }
.filter-group h4{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:0.9em; }
.chip{ display:inline-block; background:none; border:1px solid var(--line); cursor:pointer; font:inherit; font-size:12px;
  color:var(--ink); padding:0.35em 0.8em; margin:0 0.4em 0.4em 0; border-radius:0; transition:all .2s; }
.chip:hover{ border-color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.filter-clear{ background:none; border:none; cursor:pointer; font:inherit; font-size:12px; color:var(--muted);
  text-decoration:underline; }

.proj-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; padding:0 var(--mx); }
.proj-grid.dense{ grid-template-columns:repeat(6,1fr); gap:0.9em; }
.proj-card{ display:block; cursor:pointer; }
.proj-card .thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#eceae7; }
.proj-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s; filter:saturate(0.92); }
.proj-card:hover .thumb img{ transform:scale(1.05); }
.proj-card .meta{ margin-top:0.7em; display:flex; justify-content:space-between; gap:1em; align-items:baseline; }
.proj-card .ptitle{ font-size:14px; font-weight:500; letter-spacing:-0.01em; }
.proj-card .pcat{ font-size:11px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; }
.proj-grid.dense .meta{ font-size:12px; }
.proj-empty{ padding:4em var(--mx); color:var(--muted); }

/* ============================================================
   PROJECT detail
   ============================================================ */
.pd-head{ padding:0 var(--mx); max-width:1100px; }
.pd-title{ font-size:clamp(34px,6vw,86px); font-weight:500; letter-spacing:-0.03em; line-height:1; }
.pd-sub{ margin-top:1em; font-size:clamp(18px,2.2vw,30px); font-weight:400; color:#2a2a28; max-width:30ch; line-height:1.2; }
.pd-hero{ margin:3em 0 0; }
.pd-hero img{ width:100%; height:clamp(320px,70vh,820px); object-fit:cover; }
.pd-meta{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.6em; padding:2.4em var(--mx); border-bottom:1px solid var(--line); }
.pd-meta .k{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5em; }
.pd-meta .v{ font-size:14px; }
.pd-body{ padding:5em var(--mx); display:flex; flex-direction:column; gap:3.2em; }
.pd-section{ max-width:64ch; margin:0 auto; width:100%; }
.pd-section p{ font-size:clamp(16px,1.4vw,19px); line-height:1.65; }
.pd-figure{ width:100%; }
.pd-figure img{ width:100%; object-fit:cover; }
.pd-team{ padding:3em var(--mx); border-top:1px solid var(--line); }
.pd-team h4{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1em; }
.pd-team .names{ display:flex; flex-wrap:wrap; gap:0.5em 1.4em; font-size:15px; max-width:70ch; }
.pd-nav{ display:flex; justify-content:space-between; gap:1em; padding:3em var(--mx); border-top:1px solid var(--line); font-size:14px; }
.pd-nav a{ display:flex; flex-direction:column; gap:0.3em; }
.pd-nav .dir{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.pd-nav .nm{ font-size:clamp(18px,2vw,28px); font-weight:500; }
.pd-nav .next{ text-align:right; align-items:flex-end; }

/* ============================================================
   TEAM
   ============================================================ */
.team-intro{ padding:0 var(--mx); max-width:24ch; }
.team-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2em; padding:3em var(--mx); }
.team-gallery img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.leadership{ padding:4em var(--mx); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4em; }
.leader{ display:grid; grid-template-columns:320px 1fr; gap:2.4em; align-items:start; }
.leader img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:#eee; }
.leader h3{ font-size:clamp(24px,3vw,40px); font-weight:500; letter-spacing:-0.01em; }
.leader .role{ font-size:13px; color:var(--muted); margin:0.4em 0 1.2em; letter-spacing:0.06em; text-transform:uppercase; }
.leader p{ font-size:16px; line-height:1.6; max-width:54ch; }
.leader a{ display:inline-block; margin-top:1em; border-bottom:1px solid var(--ink); }
.staff-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4em; padding:4em var(--mx); border-top:1px solid var(--line); }
.staff-card .ph{ width:100%; aspect-ratio:3/4; background:#ecebe8; display:flex; align-items:flex-end; padding:0.6em; }
.staff-card .ph span{ font-size:11px; color:var(--muted); }
.staff-card .nm{ margin-top:0.6em; font-size:14px; font-weight:500; }
.staff-card .ti{ font-size:12px; color:var(--muted); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-people{ display:grid; grid-template-columns:repeat(4,1fr); gap:2em; padding:3em var(--mx) 0; }
.cp .role{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.cp .nm{ font-size:18px; font-weight:500; margin:0.4em 0; }
.cp a{ border-bottom:1px solid var(--ink); font-size:14px; }
.contact-offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:2em; padding:4em var(--mx); border-top:1px solid var(--line); margin-top:4em; }
.contact-offices h3{ font-size:22px; font-weight:600; margin-bottom:0.7em; }
.contact-offices p{ font-size:14px; color:var(--muted); line-height:1.7; }
.contact-offices a{ color:var(--ink); border-bottom:1px solid var(--ink); }

/* ===== Map ===== */
.mapwrap{ position:relative; width:100%; height:clamp(320px,52vh,560px); overflow:hidden;
  border:1px solid var(--line); background:#e9e8e5; }
.mapwrap .map{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.02); }
.map-hit{ position:absolute; inset:0; z-index:2; display:block; }
.mapwrap .mapcard{ position:absolute; left:1.4em; bottom:1.4em; z-index:3; background:#fff;
  border:1px solid var(--ink); padding:1.1em 1.3em; max-width:300px; font-size:13px; line-height:1.5;
  pointer-events:none; }
.mapwrap .mapcard b{ display:block; font-size:16px; font-weight:600; margin-bottom:0.4em; }
.mapwrap .mapcard .mapgo{ display:block; margin-top:0.7em; font-size:12px; color:var(--muted); }
.mapwrap:hover .mapcard{ background:var(--ink); color:#fff; }
.mapwrap:hover .mapcard b, .mapwrap:hover .mapcard .mapgo{ color:#fff; }

/* ============================================================
   GENERIC (news/awards/careers)
   ============================================================ */
.simple-list{ list-style:none; border-top:1px solid var(--line); margin-top:2em; }
.simple-list li{ padding:1.4em 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:2em; }
.simple-list .t{ font-size:clamp(18px,2.2vw,30px); font-weight:500; }
.simple-list .d{ font-size:13px; color:var(--muted); white-space:nowrap; }
.todo-note{ display:inline-block; margin-top:1em; font-size:12px; color:#b00; border:1px dashed #b00; padding:0.4em 0.8em; }

/* ===== Loading screen ===== */
body:not(.page-ready) .scene{ opacity:0; }
.loading-screen{ position:fixed; inset:0; z-index:999999; background:var(--ring-bg);
  display:flex; align-items:center; justify-content:center; }
.loading-screen.is-hidden{ pointer-events:none; }
.loading-inner{ text-align:center; opacity:0; animation:load-in .8s ease forwards; }
.loading-brand{ font-weight:600; font-size:20px; letter-spacing:0.06em; }
.loading-brand span{ font-size:10px; vertical-align:super; margin-left:2px; }
.loading-text{ margin-top:1.1em; font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); animation:load-pulse 1.8s ease-in-out infinite; }
.loading-bar{ width:120px; height:1px; margin:1.6em auto 0; background:rgba(0,0,0,0.12); overflow:hidden; }
.loading-bar span{ display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; animation:load-bar 1.4s ease-in-out forwards; }
@keyframes load-in{ to{ opacity:1; } }
@keyframes load-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@keyframes load-bar{ to{ transform:scaleX(1); } }

/* ===== Mobile menu ===== */
.mobile-menu{ position:fixed; inset:0; z-index:58; background:var(--bg); transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--mx); gap:0.2em; }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:34px; font-weight:500; letter-spacing:-0.02em; padding:0.2em 0; }
.mobile-menu .sub a{ font-size:18px; color:var(--muted); padding:0.1em 0; }
.mobile-menu .sub{ display:flex; gap:1.4em; margin:0.3em 0 1em; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .pd-meta{ grid-template-columns:repeat(3,1fr); }
  .staff-grid{ grid-template-columns:repeat(3,1fr); }
  .proj-grid{ grid-template-columns:repeat(3,1fr); }
  .proj-grid.dense{ grid-template-columns:repeat(4,1fr); }
  .feature-grid, .offices, .contact-offices, .team-gallery, .filter-panel{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  :root{ --mx:1.2em; }
  .nav, .lang{ display:none; }
  .menu-toggle{ display:flex; }
  .site-header{ padding:1.1em var(--mx); }
  .split, .metrics, .offices, .proj-grid, .proj-grid.dense, .feature-grid, .team-gallery,
  .staff-grid, .contact-people, .contact-offices, .pd-meta, .filter-panel{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .proj-grid, .proj-grid.dense{ grid-template-columns:1fr 1fr; gap:1em; }
  .leader{ grid-template-columns:1fr; }
  .leader img{ max-width:280px; }
  .footer-brand{ font-size:clamp(40px,16vw,90px); }
  .pd-nav{ flex-direction:column; gap:1.6em; }
  .pd-nav .next{ text-align:left; align-items:flex-start; }

  /* ---- Mobil çember: tek ekran, sağ-alttan giren ark + sürükleme ---- */
  .ring-hero{ height:100svh; }
  .scene{ height:100svh; }
  .ring-center, .labels, .scroll-hint{ display:none; }
  .mobile-preview{ display:block; position:absolute; top:5.4em; left:0; right:0; z-index:6;
    padding:0 var(--mx); pointer-events:none; }
  .mp-cat{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
  .mp-title{ font-size:23px; line-height:1.05; font-weight:500; letter-spacing:-0.01em; margin-bottom:14px; }
  .mp-img{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:#e7e6e3; pointer-events:auto; }
  .mp-img img{ width:100%; height:100%; object-fit:cover; }
  .mp-view{ display:inline-block; margin-top:11px; font-size:14px; font-weight:700;
    border-bottom:1px solid var(--ink); padding-bottom:2px; pointer-events:auto; }
  .mp-view i{ font-style:normal; margin-left:0.35em; }
  .mobile-ring-hitbox{ display:block; position:absolute; left:0; right:0; bottom:0; top:50%;
    z-index:20; touch-action:none; pointer-events:auto; }
}