:root {
  --navy: #0b1622;
  --navy-2: #13212f;
  --navy-line: rgba(255, 255, 255, .1);
  --ink: #0f1a26;
  --ink-2: #4a5868;
  --ink-3: #7d8a99;
  --line: #e2e7ed;
  --surface: #f3f6f9;
  --lime: #8dc63f;      /* the logo's green */
  --lime-hi: #a3d65c;
  --lime-ink: #4f8a14;  /* green that reads on white */
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 40px);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16.5px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.after section { padding: clamp(72px, 9vw, 120px) 0; }
.kicker { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 16px; }
.title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.intro { color: var(--ink-2); font-size: 18px; margin-top: 16px; max-width: 36em; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 8px;
  font: 700 15.5px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, color .2s;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-lime { background: var(--lime); color: var(--navy); }
.btn-lime:hover { background: var(--lime-hi); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #1c3145; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.link svg { width: 16px; height: 16px; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

/* Top menu */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; height: 72px; }
/* The logo file has padding above and below; trimmed with negative margins. */
.logo img { height: 60px; width: auto; margin: -12px 0 -10px -4px; }
nav { display: flex; gap: 2px; margin-left: auto; }
nav > div { position: relative; }
nav > div > a { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); border-radius: 6px; }
nav > div > a:hover, nav > div:focus-within > a { color: var(--ink-3); }
nav .caret { width: 10px; height: 10px; opacity: .5; }
.drop {
  position: absolute; top: 100%; left: -8px; min-width: 250px; padding: 8px; margin-top: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(11, 22, 34, .12);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s;
}
.drop::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
nav > div:hover .drop, nav > div:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 9px 12px; font-size: 14.5px; font-weight: 500; text-decoration: none; border-radius: 6px; color: var(--ink-2); }
.drop a:hover { background: var(--surface); color: var(--ink); }
.drop.wide { display: grid; grid-template-columns: 1fr 1fr; min-width: 470px; }
/* Language menu (components/Header.jsx): a dropdown like the menu's own, aligned to the right edge */
.lang-item { display: flex; align-items: center; }
.lang { display: flex; align-items: center; gap: 7px; padding: 10px; background: none; border: 0; border-radius: 6px; color: var(--ink); cursor: var(--cursor-hand, pointer); }
.lang:hover, .lang-item:focus-within > .lang { color: var(--ink-3); }
:is(.lang, .lang-drop) .flag { display: block; flex: none; width: 24px; height: 16px; clip-path: inset(0 round 3px); }
.lang-drop { left: auto; right: -8px; min-width: 180px; }
.lang-drop a { display: flex; align-items: center; gap: 10px; }
.lang-drop .flag { width: 21px; height: 14px; }
.lang-drop a[aria-current] { color: var(--ink); font-weight: 700; background: var(--surface); }
.lang-label { display: none; }
@media (max-width: 880px) {
  /* in the open phone menu: the language row reads like the other headings, and a long menu scrolls inside itself */
  header.open .lang { padding: 10px 12px; font-size: 15px; font-weight: 600; }
  header.open .lang-label { display: inline; }
  header.open .lang .caret { display: none; }
  header.open nav { max-height: calc(100svh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}
.bar .btn { height: 42px; padding: 0 18px; font-size: 14.5px; }
.burger { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* Hero */
.hero { background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 104px) 0 0; overflow: hidden; }
.hero-top { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.hero .kicker { color: rgba(255, 255, 255, .6); }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1.03; font-weight: 800; letter-spacing: -.03em; }
.hero h1 span { color: inherit; }
.hero .lead { color: rgba(255, 255, 255, .72); font-size: 18.5px; margin-bottom: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product { margin-top: clamp(48px, 6vw, 72px); position: relative; }
.product::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: #fff; z-index: 0; }
.product .wrap { position: relative; z-index: 1; }
.screen { border-radius: 14px; padding: 8px; background: var(--navy-2); border: 1px solid var(--navy-line); box-shadow: 0 40px 80px -30px rgba(11, 22, 34, .55); }
.screen video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.caption { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-3); padding: 14px 4px 0; }

/* References */
.clients { padding: 48px 0 72px; }
.clients .kicker { color: var(--ink-3); }
.client-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.client { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; }
.client-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 150px; height: 76px; overflow: hidden; }
.client-logo img { max-height: 60px; max-width: 150px; width: auto; }
/* The left half of the Konya logo is the "Benim Şehrim" lettering; only the municipal emblem is shown. */
.client-logo.crop-konya { width: 68px; margin: 0 41px; justify-content: flex-start; }
.crop-konya img { max-width: none; height: 68px; max-height: none; margin-left: -70px; }
.client b { display: block; font-size: 15.5px; line-height: 1.3; }
.client span:not(.client-logo) { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }

/* Partners */
.partners { padding: 0 0 72px; }
.partners p { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 24px; }
/* Scrolls continuously left to right like the references, a bit faster; after moving half the strip it loops back (no visible seam). */
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos .track { display: flex; align-items: center; width: max-content; animation: logos 44s linear infinite; }
.logos:hover .track { animation-play-state: paused; }
@keyframes logos { from { transform: translateX(-50%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .logos .track { animation: none; } }
.logos img { flex: none; margin-right: 56px; height: 22px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; opacity: .7; transition: .2s; }
.logos img:hover { filter: none; opacity: 1; }

/* Awards */
.awards { background: var(--surface); }
.award-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.award { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: box-shadow .25s, transform .25s; }
.award:hover { box-shadow: 0 20px 40px -20px rgba(11, 22, 34, .25); transform: translateY(-2px); }
.award .ph { aspect-ratio: 16 / 10; overflow: hidden; }
.award img { width: 100%; height: 100%; object-fit: cover; }
.award .body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.badge { align-self: start; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--surface); padding: 5px 10px; border-radius: 999px; }
.award h3 { font-size: 21px; margin: 14px 0 4px; }
.award .where { font-size: 14px; color: var(--ink-3); }
.award p { color: var(--ink-2); font-size: 15.5px; margin: 14px 0 20px; }
.award .link { margin-top: auto; }

/* Tour */
.tour { background: var(--navy); color: #fff; }
.tour .kicker { color: rgba(255, 255, 255, .6); }
.tour .intro { color: rgba(255, 255, 255, .7); }
.tour-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.stops { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 32px; padding: 0; }
.stops li { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .78); border: 1px solid var(--navy-line); padding: 6px 11px; border-radius: 999px; }
.tour-preview { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--navy-line); aspect-ratio: 16 / 9; background: #000; }
.tour-preview video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tour-preview:hover video { transform: scale(1.02); }
.play { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(11, 22, 34, .78); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.play svg { width: 14px; height: 14px; color: var(--lime); }

/* Solutions */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { font: 600 14.5px/1 var(--font); color: var(--ink-2); background: none; border: 1px solid var(--line); padding: 11px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
.tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.sol { text-decoration: none; display: block; }
.sol[hidden] { display: none; }
.sol .ph { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--surface); }
.sol img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sol:hover img { transform: scale(1.04); }
.sol .grp { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-top: 18px; }
.sol h3 { font-size: 20px; margin: 4px 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sol h3 svg { width: 18px; height: 18px; flex: none; color: var(--lime-ink); opacity: 0; transform: translateX(-6px); transition: .2s; }
.sol:hover h3 svg { opacity: 1; transform: none; }
.sol p { color: var(--ink-2); font-size: 15.5px; }

/* Company and figures */
.company { background: var(--navy); color: #fff; }
.company-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.company .kicker { color: rgba(255, 255, 255, .6); }
.company .intro { color: rgba(255, 255, 255, .7); }
.company .ph { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--navy-line); }
.company .ph img { width: 100%; height: 100%; object-fit: cover; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 40px; background: var(--navy-line); border: 1px solid var(--navy-line); border-radius: 12px; overflow: hidden; }
.figures div { background: var(--navy); padding: 22px 24px; }
.figures b { display: block; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.figures b i { font-style: normal; color: inherit; }
.figures span { display: block; margin-top: 8px; color: rgba(255, 255, 255, .62); font-size: 14.5px; }
.recog { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.recog b { color: #fff; font-weight: 600; }

/* In the field: the home page videos (edited in TwinUp Studio), a horizontal rail; a card loads the player when clicked */
.video-nav { display: flex; gap: 10px; flex: none; }
.video-nav button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: var(--cursor-hand, pointer); transition: background .2s, border-color .2s, opacity .2s; }
.video-nav button:hover:not(:disabled) { background: var(--surface); border-color: var(--ink-3); }
.video-nav button:disabled { opacity: .35; cursor: default; }
.video-nav svg { width: 16px; height: 16px; }
.video-nav .video-prev svg { transform: scaleX(-1); }
[dir="rtl"] .video-nav .video-prev svg { transform: none; }
.video-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.video-rail::-webkit-scrollbar { display: none; }
.video-card { scroll-snap-align: start; min-width: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--navy); }
.video-frame button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: var(--cursor-hand, pointer); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.video-frame button:hover img { transform: scale(1.03); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(11, 22, 34, .78); box-shadow: 0 10px 30px rgba(11, 22, 34, .35); transition: background .2s, transform .2s; }
.video-play svg { width: 26px; height: 26px; fill: var(--lime); margin-left: 3px; }
.video-frame button:hover .video-play { background: var(--navy); transform: scale(1.06); }
.video-card h3 { font-size: 19px; line-height: 1.3; margin: 18px 0 8px; }
.video-card p { color: var(--ink-2); font-size: 15px; }

/* Tactical training */
.training { background: var(--surface); }
.training-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.training .ph { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.training .ph img { width: 100%; height: 100%; object-fit: cover; }
.sims { list-style: none; margin: 32px 0 0; padding: 0; }
.sims a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .2s; }
.sims a:hover { border-color: var(--ink-3); }
.sims b { display: block; font-size: 17px; }
.sims span { font-size: 14px; color: var(--ink-3); }
.sims svg { width: 18px; height: 18px; color: var(--lime-ink); flex: none; }

/* Integration */
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stack-grid div { background: #fff; padding: 26px 24px; }
.stack-grid small { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--surface); padding: 5px 9px; border-radius: 6px; }
.stack-grid h3 { font-size: 17px; margin: 16px 0 6px; letter-spacing: -.01em; }
.stack-grid p { font-size: 15px; color: var(--ink-2); }

/* Call to action */
.cta { padding: 0 0 clamp(72px, 9vw, 120px); }
.cta-box { background: var(--navy); color: #fff; border-radius: 20px; padding: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.cta p { color: rgba(255, 255, 255, .7); font-size: 18px; margin-top: 14px; }
.cta .actions { justify-content: flex-end; position: relative; z-index: 1; }

/* Footer */
footer { background: var(--surface); padding: 64px 0 28px; font-size: 15px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 4fr 2fr 3fr 2fr; gap: 32px; }
footer h4 { font-size: 14px; margin-bottom: 14px; letter-spacing: 0; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li + li { margin-top: 8px; }
footer a { text-decoration: none; color: var(--ink-2); }
footer a:hover { color: var(--ink); }
footer address { font-style: normal; color: var(--ink-2); margin: 18px 0; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.legal div { display: flex; flex-wrap: wrap; gap: 20px; }
.legal a { color: var(--ink-3); }

/* Narrow screens */
@media (max-width: 1100px) {
  nav > div:nth-child(n+6) { display: none; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* With three columns each card's 150 px logo box doesn't fit (at 932 px the page overflowed sideways). */
  .client-list { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 880px) {
  nav, .bar .btn { display: none; }
  .burger { display: block; }
  header.open nav { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--gut) 20px; }
  header.open nav > div { display: block; }
  header.open .drop { display: none; }
  /* small dropdowns (Hakkımızda, Taktik Eğitim) stay open in the mobile menu as indented sub-links */
  header.open .drop:not(.wide) { display: block; position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 0; padding: 0 0 6px 12px; background: none; border: 0; box-shadow: none; }
  header.open .drop:not(.wide) a { padding: 7px 10px; font-size: 14px; }
  header.open nav > div:has(> .drop:not(.wide)) .caret { display: none; }
  .hero-top, .company-grid, .training-grid, .cta-box, .tour-grid { grid-template-columns: 1fr; }
  .client-list { grid-template-columns: 1fr; gap: 12px; }
  .head { flex-direction: column; align-items: start; }
  .award-list, .sol-grid { grid-template-columns: 1fr 1fr; }
  .video-rail { grid-auto-columns: calc((100% - 24px) / 2); }
  .cta .actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .award-list, .sol-grid, .stack-grid, .foot-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }
  .caption { flex-direction: column; gap: 4px; }
  .logos img { margin-right: 40px; }
  /* phone: one card and the start of the next, so the rail reads as swipeable */
  .video-rail { grid-auto-columns: 84%; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Platform video: the product recording from the old hero section, now below the tour. */
.platform { background: var(--navy); color: #fff; }
.platform .kicker { color: rgba(255, 255, 255, .6); }
.platform .intro { color: rgba(255, 255, 255, .7); }
.platform .product { margin-top: 0; }
.platform .product::after { display: none; }
.platform .product .wrap { padding: 0; }
.platform .caption { color: rgba(255, 255, 255, .55); }
.platform .caption .link { color: #fff; }

/* ---- Tour (same as dijital-ikiz-video/index.html; stage, panels, closing screen) ---- */

/* Same visual language as the Twinup homepage: navy, the logo's green, Plus Jakarta Sans (see twinup-site/index.html).
   The layout is a control room screen: a navy narrative column on the left, the video on the right in an inset screen with rounded corners; chapters are a horizontal timeline below the video. */
:root{
  --navy:#0b1622; --navy-2:#13212f; --navy-line:rgba(255,255,255,.1); --ink:#0f1a26; --ink-2:#4a5868; --muted:#4a5868; --ink-3:#7d8a99; --line:#e2e7ed; --surface:#f3f6f9; --bg:#fff; --card:rgba(255,255,255,.96); --lime:#8dc63f; --lime-hi:#a3d65c; --lime-ink:#4f8a14; --font:"Plus Jakarta Sans",system-ui,sans-serif; /* --foot: the scroll hint and "Turu geç" at the bottom left; text is centered in the area above it. */
  --top:72px; --gap:16px; --foot:112px; --side:clamp(340px,31vw,470px); --col:clamp(28px,3vw,52px); }
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--navy)}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* Cursor: the logo's navigation arrow (two-tone green with a thin navy outline: visible on light and dark backgrounds). On clickable
   elements the arrow turns upright, as in the logo. No cursor on touch screens. */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(2 2) rotate(-30) scale(.24) translate(-43.5 0)' stroke-linejoin='round'%3E%3Cpolygon points='43.5,0 0,100 43.5,83 87,100' fill='%230b1622' stroke='%230b1622' stroke-width='11' stroke-opacity='.85'/%3E%3Cpolygon points='43.5,0 0,100 43.5,83' fill='%23a6cd39'/%3E%3Cpolygon points='43.5,0 43.5,83 87,100' fill='%238bb63e'/%3E%3C/g%3E%3C/svg%3E") 2 2,auto}
a,button,label,select,summary,[role=button],.burger,.tabs button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 3) scale(.24) translate(-43.5 0)' stroke-linejoin='round'%3E%3Cpolygon points='43.5,0 0,100 43.5,83 87,100' fill='%230b1622' stroke='%230b1622' stroke-width='11' stroke-opacity='.85'/%3E%3Cpolygon points='43.5,0 0,100 43.5,83' fill='%23a6cd39'/%3E%3Cpolygon points='43.5,0 43.5,83 87,100' fill='%238bb63e'/%3E%3C/g%3E%3C/svg%3E") 16 3,pointer}
input,textarea,[contenteditable]{cursor:text}

/* Boxes over the image (data card, simulation, operations summary): dark glass, like a drone ground station screen.
   No backdrop blur: the box is nearly opaque anyway, and the blur was recomputed on every frame of the playing video, dropping frames. */
#card .in,#sim,#dash .in{color:#fff;background:linear-gradient(160deg,rgba(20,35,50,.94),rgba(7,13,20,.97));border:1px solid rgba(255,255,255,.12); box-shadow:0 28px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07)}
@keyframes pulse{50%{opacity:.3}}

.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--navy)}

#stage{position:fixed;top:calc(var(--top) + var(--gap));right:var(--gap);bottom:var(--gap);left:var(--side);z-index:0;overflow:hidden;border-radius:18px; background:#05090e center/cover no-repeat;box-shadow:0 0 0 1px var(--navy-line)}
#stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%;opacity:0}
/* --fx: horizontal position of the image; when the video screen is narrow the crop shifts to the stop's subject (in the script, frame). */
#stage{background-position:var(--fx,50%) 50%}
/* Color (slight contrast and saturation) is baked into the videos; there used to be a filter and animated film grain here, processed
   separately on every frame while the video played, which dropped frames on phones and PCs. Vignette and edge glow are in #hud. */
/* Loading indicator: the logo arrow orbiting a ring in the middle of the video screen; shown only if the wait exceeds a quarter second.
   Its position is written every frame relative to the stage center (see frame). */
#loadbar{position:fixed;left:50%;top:50%;z-index:30;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(11,22,34,.82);box-shadow:0 8px 30px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;pointer-events:none}
#loadbar svg{display:block;width:100%;height:100%}
#loadbar .ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:1.5 3.2;stroke-linecap:round}
#loadbar .dot{fill:var(--lime)}
/* Spins only while loading, and only via transform: the page isn't re-laid out every frame while the video plays. */
#loadbar .spin{transform-origin:30px 30px;animation:orbit 1.05s linear infinite paused}
#loadbar.busy{opacity:1;transform:none;transition-delay:.25s}
#loadbar.busy .spin{animation-play-state:running}
body.done #loadbar{display:none}
@keyframes orbit{to{transform:rotate(360deg)}}
/* Intro veil: styles/intro.css. */
#msg{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:25;padding:24px;text-align:center;color:rgba(255,255,255,.75);font-size:15px;line-height:1.6}
#msg code{background:rgba(255,255,255,.08);border:1px solid var(--navy-line);padding:2px 6px;border-radius:6px}

.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:#1c3145}

.overlay{position:fixed;z-index:10;transition:opacity .3s}
body.done .overlay{opacity:0!important;pointer-events:none}

/* --- left column: hero, chapter text, position --- */
#hero,.panel{left:var(--col);width:calc(var(--side) - var(--col) * 2 + 8px);color:#fff}
#hero{top:calc(var(--top) + (100% - var(--top) - var(--foot)) / 2);transform:translateY(-50%)}
#hero .kicker,#fin .kicker{font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.6)}
#hero h1{font-weight:800;font-size:clamp(34px,3vw,54px);line-height:1.05;letter-spacing:-.035em;margin:16px 0 18px}
/* The hero heading has a single accent in the logo green; no green in other text. */
#hero h1 span{color:var(--lime)}
#hero p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.72)}
#hero .actions,#fin .actions{margin-top:32px}
.stats{display:flex;margin-top:40px;padding-top:20px;border-top:1px solid var(--navy-line)}
.stats div{flex:1;display:flex;flex-direction:column-reverse;gap:4px;padding-right:16px}
.stats div+div{padding-left:16px;border-left:1px solid var(--navy-line)}
.stats dd{font-size:26px;font-weight:800;letter-spacing:-.03em}
.stats dt{font-size:13px;color:rgba(255,255,255,.55)}

/* Bottom left corner: scroll hint with "Turu geç" below it. On the hero the same thing is centered (#cue). */
#guide{left:var(--col);bottom:26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#guide .hint{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);font-size:13px;font-weight:600}
.hint i{position:relative;flex:none;width:20px;height:30px;border:1.5px solid rgba(255,255,255,.45);border-radius:10px}
.skip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04);color:#fff;font-size:13px;font-weight:700;transition:border-color .2s,color .2s,background .2s}
.skip svg{width:14px;height:14px;transition:transform .2s}
.skip:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.skip:hover svg{transform:translateY(2px)}
#cue{display:none}
.hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--lime);animation:drop 1.8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes drop{from{transform:translateY(0);opacity:1}to{transform:translateY(10px);opacity:0}}

.panel{position:fixed;top:calc(var(--top) + (100% - var(--top) - var(--foot)) / 2);z-index:10;opacity:0;transform:translateY(calc(-50% + 16px));pointer-events:none; transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.panel.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
body.done .panel,body.fin .panel{opacity:0!important;pointer-events:none}
/* The chapter's top line is small and calm: number │ layer name. Progress is on the timeline below the image. */
.count{display:inline-flex;align-items:baseline;gap:4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.count b{font-weight:700;color:#fff}
.panel .tag{display:inline-block;margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.panel h2{font-weight:800;font-size:clamp(28px,2.3vw,38px);line-height:1.12;letter-spacing:-.025em;margin-top:20px;font-weight:700}
.panel p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.68);margin-top:14px}
/* Capabilities: rows with thin dividers, no bullets. */
.panel ul{list-style:none;margin-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.panel li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.86)}

/* --- over the image: data card, pin, simulation label, operations summary --- */
/* Data card: title, headline value (with a sparkline next to it if live), the other values below.
   It grows open from the end of the line coming from the pin (transform-origin in the script); rows arrive in sequence and a light sweeps across. */
#card{left:0;top:0;width:272px;pointer-events:none}
#card .in{position:relative;overflow:hidden;border-radius:14px;opacity:0;transform:scale(.94);transition:opacity .22s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
#card.on .in{opacity:1;transform:none}
#card .in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.1) 48%,transparent 66%);transform:translateX(-110%)}
#card.on .in::after{transform:translateX(110%);transition:transform .8s cubic-bezier(.4,0,.2,1) .1s}
#card .hd,#card .main,#card .row{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
#card.on .hd,#card.on .main,#card.on .row{opacity:1;transform:none}
#card.on .main{transition-delay:.06s}
#card.on .row:nth-child(1){transition-delay:.1s}
#card.on .row:nth-child(2){transition-delay:.14s}
#card.on .row:nth-child(3){transition-delay:.18s}
#card .hd{display:flex;justify-content:space-between;align-items:center;padding:13px 16px 0;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#card .hd em{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:rgba(255,255,255,.75)}
#card .hd em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:pulse 1.6s ease-in-out infinite}
#card .hd em.sim::before{background:#ffb25a}
#card .main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:8px 16px 14px}
#card .main small{display:block;margin-bottom:3px;font-size:12px;color:rgba(255,255,255,.6)}
#card .main b{display:block;font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
#card .spark{flex:none;width:88px;height:32px;margin-bottom:3px;overflow:visible}
#card .spark .line{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease .15s}
#card.on .spark .line{stroke-dashoffset:0}
#card .spark .area{fill:rgba(141,198,63,.13)}
#card .rows{padding:9px 16px 12px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
#card .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.6)}
#card .row b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Pin: a crosshair. Green dot in the middle, thin white lines on four sides. */
#pin{left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;filter:drop-shadow(0 0 2px rgba(11,22,34,.85)); background:radial-gradient(circle,var(--lime) 0 3.5px,#fff 4px 5.5px,transparent 6px), linear-gradient(#fff,#fff) 50% 0/2px 9px no-repeat,linear-gradient(#fff,#fff) 50% 100%/2px 9px no-repeat, linear-gradient(#fff,#fff) 0 50%/9px 2px no-repeat,linear-gradient(#fff,#fff) 100% 50%/9px 2px no-repeat}
/* A vertical line from the pin to the card; drawn from pin to card when the card opens. */
#lead{left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
#lead line{stroke:#fff;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 1.5px rgba(11,22,34,.8)); transition:stroke-dashoffset .35s cubic-bezier(.2,.7,.2,1) .05s}
#lead.on line{stroke-dashoffset:0}
/* Disaster scenario: the simulation plays while the layer opens (bar fills) and resets while it rewinds (bar empties). */
#sim{right:calc(var(--gap) + 52px);top:calc(var(--top) + var(--gap) + 18px);width:268px;padding:12px 15px 13px;border-radius:12px;opacity:0;pointer-events:none}
#sim .top{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#sim .top i{flex:none;width:7px;height:7px;border-radius:50%;background:#ff5a4a;animation:pulse 1.2s ease-in-out infinite}
#sim .top b{margin-left:auto;font-weight:700;letter-spacing:0;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
#sim .name{display:block;margin-top:6px;font-size:15px;font-weight:700;letter-spacing:-.01em}
#sim .bar{display:block;height:3px;margin-top:11px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.12)}
#sim .bar em{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#ff5a4a,#ffb25a);transform-origin:0 50%;transform:scaleX(0)}
#sim[data-mode=reset] .top i{background:#ffd27a}
#sim[data-mode=reset] .bar em{background:rgba(255,255,255,.7)}
/* Operations summary (last chapter, Decision). #dash is a veil covering the video screen: when open it blurs and darkens
   the paused frame behind it (like a pause menu in games); the panel (.in) sits in the middle as translucent frosted glass.
   Since the video rests on its hold frame in this chapter, the blur is computed once and doesn't drop frames.
   Colors: green normal, orange watched, red responding. */
#dash{--ok:var(--lime);--watch:#f0883e;--respond:#ff5a4a;--rule:rgba(255,255,255,.09);--faded:rgba(255,255,255,.58);--block:rgba(255,255,255,.04);
  top:calc(var(--top) + var(--gap));right:var(--gap);bottom:var(--gap);left:var(--side);z-index:9;border-radius:18px;
  display:flex;align-items:center;justify-content:center;padding:26px 28px 50px;opacity:0;pointer-events:none;
  background:radial-gradient(90% 85% at 50% 48%,rgba(6,11,18,.14),rgba(6,11,18,.5));
  transition:opacity .55s ease;font-variant-numeric:tabular-nums;line-height:1.3}
#dash.on{opacity:1}
/* pre-render (tour.js): at the previous stop the panel sits in its final state but at 1.5% opacity; the layers are actually painted
   (when opacity rounded to zero the browser skipped painting), so the first paint (~30 ms) doesn't make the transition hitch on open. */
#dash.ray{opacity:.015}
#dash.ray :is(.hd,.block,.events,.units li,.pt .pt-dot,.pt text,.donut .slice){opacity:1}
#dash.ray .links line{stroke-dashoffset:0}
/* The blur is on a separate layer and fades in only once the video stops (the transition ends on the hold frame):
   switching blur on over a playing video caused a ~60 ms hitch; on a still frame it isn't noticeable. */
#dash::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .7s ease;
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
#dash.idle::before{opacity:1}
#dash:not(.on)::before{display:none}
#dash .in,#dash .hd,#dash .block,#dash .events,#dash .units li{will-change:transform,opacity}
#hud.summary,#sim.summary{opacity:0!important}
#dash .in{position:relative;width:min(1000px,100%);max-height:100%;overflow:hidden;padding:16px 16px 14px;border-radius:18px;pointer-events:none;
  background:linear-gradient(160deg,rgba(34,52,72,.5),rgba(10,18,28,.58) 55%,rgba(8,14,22,.66));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03);
  container-type:inline-size}
#dash.on .in{pointer-events:auto;animation:dEnterY .75s cubic-bezier(.16,.84,.24,1) both}
body.done #dash .in,body.fin #dash .in{pointer-events:none}
/* light falling from the top edge */
#dash .in::before{content:"";position:absolute;inset:0 0 auto;height:140px;pointer-events:none;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,0))}
#dash .hd,#dash .block,#dash .events{position:relative;opacity:.001}
#dash.on .hd,#dash.on .block,#dash.on .events{opacity:1;animation:dEnter .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + 160ms) both}

/* header: logo arrow, name; filter tabs in the middle; live clock on the right */
#dash .hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:2px 4px 14px}
#dash .dash-title{display:flex;align-items:center;gap:12px;min-width:0}
#dash .logo{flex:none;width:22px;height:25px}
#dash h3{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.2;white-space:nowrap}
#dash .hd p{margin-top:2px;font-size:12px;color:var(--faded);white-space:nowrap}
#dash .tab{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#dash .tab button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.66);white-space:nowrap;transition:background .2s,color .2s}
#dash .tab button b{font-weight:700;color:rgba(255,255,255,.45)}
#dash .tab button:hover{color:#fff}
#dash .tab button[aria-selected=true]{background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
#dash .tab button[aria-selected=true] b{color:rgba(255,255,255,.75)}
#dash .clock{justify-self:end;text-align:right;font-size:12px;line-height:1.25}
#dash .clock em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:700;color:rgba(255,255,255,.82)}
#dash .clock em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 1.6s ease-in-out infinite}
#dash #clock{display:block;margin-top:3px;font-size:14px;font-weight:700;color:#fff}

/* body: map, units, status + data flow */
#dash .dash-body{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(290px,1.45fr) minmax(220px,1fr);gap:10px}
#dash .block{display:flex;flex-direction:column;min-width:0;padding:12px 14px;border-radius:12px;background:var(--block);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#dash h4{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:700;color:#fff}
#dash h4 small{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--faded)}
#dash .head-icon{flex:none;width:15px;height:15px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#dash .right{display:flex;flex-direction:column;gap:10px;min-width:0}

/* map: tour points at their real positions (km grid); thin links from the camera to the units; the camera is the logo arrow */
#dash .map>svg{display:block;flex:1 1 0;width:100%;min-height:220px;height:auto;overflow:visible;font-family:inherit}
#dash .grid line,#dash .grid rect{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
#dash .grid rect{fill:rgba(0,0,0,.14);stroke:rgba(255,255,255,.13)}
#dash .links line{stroke:rgba(255,255,255,.3);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
#dash.on .links line{stroke-dashoffset:0;animation:dDraw 1s cubic-bezier(.3,.7,.2,1) .55s both}
#dash .stop circle{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1;vector-effect:non-scaling-stroke}
#dash .stop text{font-size:.3px;font-weight:500;fill:rgba(255,255,255,.42)}
#dash .pt text{font-size:.36px;font-weight:700;fill:rgba(255,255,255,.88)}
#dash .pt circle{fill:var(--r)}
#dash .pt .halo{opacity:0;fill-opacity:.24;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
#dash .pt.respond .halo{opacity:1;transform:none;animation:dashHalo 1.8s ease-out infinite}
#dash .pt.accent .halo{opacity:1;transform:scale(1.3);animation:none}
#dash .pt .pt-dot,#dash .pt text{opacity:.001}
#dash.on .pt .pt-dot,#dash.on .pt text{opacity:1;animation:dAppear .35s ease calc(var(--j) * 70ms + .8s) both}
@keyframes dEnter{from{opacity:0;transform:translateY(8px)}}
@keyframes dEnterX{from{opacity:0;transform:translateX(-6px)}}
@keyframes dEnterY{from{transform:translateY(22px)}}
@keyframes dAppear{from{opacity:0}}
@keyframes dSpin{from{transform:rotate(-50deg)}}
@keyframes dDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dashHalo{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
#dash .map .bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap}
#dash .scale{display:inline-flex;align-items:center;gap:5px}
#dash .scale i{display:block;width:var(--km,30px);height:5px;border:1px solid rgba(255,255,255,.55);border-top:0}

/* units */
#dash .units ul,#dash .legend,#dash .events ul{list-style:none;margin:0;padding:0}
#dash .units li{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;
  opacity:.001;transition:background .2s,opacity .25s}
#dash.on .units li{opacity:1;animation:dEnterX .45s cubic-bezier(.2,.8,.2,1) calc(var(--j) * 40ms + .32s) both}
#dash .units li+li{box-shadow:0 -1px 0 var(--rule)}
#dash .units li:hover,#dash .units li.accent{background:rgba(255,255,255,.06)}
#dash .units li.respond{background:linear-gradient(90deg,rgba(255,90,74,.13),rgba(255,90,74,.02))}
#dash .units li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--r);opacity:0;transition:opacity .2s}
#dash .units li.respond::before,#dash .units li:hover::before,#dash .units li.accent::before{opacity:1}
#dash .unit-icon{width:28px;height:28px;padding:6px;border-radius:8px;background:rgba(255,255,255,.06);fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#dash .units li.respond .unit-icon{background:rgba(255,90,74,.16);stroke:#ff8f82}
#dash .unit-name,#dash .value{min-width:0}
#dash .unit-name b{display:block;font-size:13.5px;font-weight:700}
#dash .unit-name small{display:block;margin-top:2px;font-size:11.5px;color:var(--faded);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dash .value{display:flex;flex-direction:column;align-items:flex-end}
#dash .value b{font-size:13px;font-weight:700;white-space:nowrap}
#dash .value small{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap}

#dash .ok{--r:var(--ok)}
#dash .watch{--r:var(--watch)}
#dash .respond{--r:var(--respond)}
#dash .legend i,#dash .value small i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--r)}

/* status ring */
#dash .state .inner{display:flex;align-items:center;gap:16px}
#dash .ring-wrap{position:relative;flex:none;width:92px;height:92px}
#dash .donut{display:block;width:100%;height:100%}
#dash.on .donut{animation:dSpin 1s cubic-bezier(.2,.8,.2,1) .3s both}
#dash .donut circle{fill:none;stroke-width:9}
#dash .donut .trail{stroke:rgba(255,255,255,.06)}
#dash .donut .slice{stroke:var(--r);opacity:.001}
#dash.on .donut .slice{opacity:1;animation:dAppear .3s ease calc(var(--j) * 80ms + .4s) both}
#dash .ring-wrap .middle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#dash .middle b{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em}
#dash .middle small{margin-top:3px;font-size:11px;color:var(--faded)}
#dash .legend{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
#dash .legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.75)}
#dash .legend b{margin-left:auto;font-size:14px;color:#fff}

/* data flow: three values and the latency chart for the last 60 s (canvas, drawn by tour.js) */
#dash .kpi{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px}
#dash .kpi small{display:block;font-size:11px;color:var(--faded);white-space:nowrap}
#dash .kpi b{display:block;margin-top:2px;font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
#dash .kpi .unit{font-size:11.5px;font-weight:600;color:var(--faded)}
#dash .chart{display:block;width:100%;height:84px;margin-top:10px;flex:1;min-height:60px}

/* open events */
#dash .events{display:flex;align-items:stretch;gap:12px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#dash .events .ev-head{display:flex;flex-direction:column;justify-content:center;flex:none;font-size:12.5px;font-weight:700;white-space:nowrap}
#dash .events .ev-head b{font-size:20px;font-weight:800;line-height:1.1}
#dash .events ul{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#dash .events li{min-width:0;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);box-shadow:inset 2px 0 0 var(--r);transition:background .2s,opacity .25s}
#dash .events li:hover,#dash .events li.accent{background:rgba(255,255,255,.08)}
#dash .events b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dash .events small{display:block;margin-top:2px;font-size:11.5px;color:var(--faded);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* filter: units, points and events that aren't selected fade out */
#dash[data-f=respond] li:not(.respond):is(.units li,.events li),#dash[data-f=watch] li:not(.watch):is(.units li,.events li),#dash[data-f=ok] li:not(.ok):is(.units li,.events li){opacity:.22}
#dash[data-f=respond] .pt:not(.respond),#dash[data-f=watch] .pt:not(.watch),#dash[data-f=ok] .pt:not(.ok){opacity:.2}
#dash .pt{transition:opacity .25s}

/* blocks: glass panes lit softly from above */
#dash .block{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.065)}
#dash h4 .head-icon{width:24px;height:24px;padding:5px;border-radius:7px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* tabs: the selection background slides */
#dash .tab{position:relative}
#dash .tab .cursor{position:absolute;left:3px;top:3px;bottom:3px;width:0;border-radius:7px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.25);transition:transform .38s cubic-bezier(.3,.8,.2,1),width .38s cubic-bezier(.3,.8,.2,1)}
#dash .tab button{position:relative;z-index:1}
#dash .tab button[aria-selected=true]{background:none;box-shadow:none}
/* status labels: small tags with a tinted background */
#dash .value small.label{padding:2px 7px 2px 6px;border-radius:6px;font-weight:600;color:color-mix(in srgb,var(--r) 55%,#fff);background:color-mix(in srgb,var(--r) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r) 22%,transparent)}
#dash .value small.label i{width:6px;height:6px}
/* map tooltip */
#dash .block.map{position:relative}
#dash .tip{position:absolute;left:0;top:0;z-index:2;min-width:150px;padding:8px 11px 9px;border-radius:10px;pointer-events:none;white-space:nowrap;
  background:rgba(10,17,26,.94);box-shadow:0 12px 30px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14);opacity:0;
  translate:-50% calc(-100% - 12px);transition:opacity .18s ease}
#dash .tip.shown{opacity:1}
#dash .tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;rotate:45deg;background:rgba(10,17,26,.94);box-shadow:inset -1px -1px 0 rgba(255,255,255,.14)}
#dash .tip b{display:block;font-size:13px;font-weight:700}
#dash .tip span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.82)}
#dash .tip small{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--r) 55%,#fff)}
#dash .tip small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--r)}
#dash .pt{cursor:default}
/* map and ring on their own layers: their drawing animations shouldn't repaint the whole block */
#dash .map>svg,#dash .donut,#dash .chart{will-change:transform}
/* on a narrow panel the map drops first, then the event details; on short screens the events and the chart */
@container (max-width:860px){#dash .dash-body{grid-template-columns:minmax(280px,1.4fr) minmax(220px,1fr)}#dash .map{display:none}#dash .hd{grid-template-columns:1fr auto}#dash .hd .clock{display:none}}
@container (max-width:640px){#dash .events ul{grid-template-columns:repeat(2,minmax(0,1fr))}#dash .tab button{padding:6px 8px}}
@media (max-height:800px){#dash .events{display:none}}
@media (max-height:680px){#dash .chart,#dash .unit-name small{display:none}#dash .units li{padding:5px 8px}}

/* Timeline: one segment per chapter along the bottom edge of the image. Visited ones pale green, the current one bright green. */
#rail{left:var(--side);right:var(--gap);bottom:var(--gap);display:flex;gap:4px;padding:0 22px 16px}
#rail button{position:relative;flex:1;height:20px}
#rail button:first-child{display:none}
#rail button::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .3s,height .3s,margin .3s}
#rail button:hover::before{background:rgba(255,255,255,.7)}
#rail button.past::before{background:rgba(141,198,63,.55)}
#rail button.on::before{height:5px;margin-top:-2.5px;background:var(--lime)}
#rail button span{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);padding:5px 10px;border-radius:6px;background:#fff;color:var(--ink); font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
#rail button:hover span{opacity:1}
body.fin #rail,body.fin #sim,body.fin #guide,body.fin #hud{opacity:0!important;pointer-events:none}

/* Drone camera: viewfinder corners, recording indicator and flight data (altitude, speed, heading, position; animates while flying).
   Slight darkening at top and bottom keeps text readable over a bright image. The city is fictional, values are illustrative. */
#hud{top:calc(var(--top) + var(--gap));left:var(--side);right:var(--gap);bottom:var(--gap);z-index:9;pointer-events:none;border-radius:18px;color:#fff; font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.55); background:radial-gradient(130% 120% at 50% 45%,rgba(5,9,14,0) 55%,rgba(5,9,14,.32)),linear-gradient(rgba(5,9,14,.42),rgba(5,9,14,0) 18%,rgba(5,9,14,0) 70%,rgba(5,9,14,.6)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.04)}
#hud .c{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.6)}
#hud .tl{left:18px;top:18px;border-width:1.5px 0 0 1.5px}
#hud .tr{right:18px;top:18px;border-width:1.5px 1.5px 0 0}
#hud .bl{left:18px;bottom:64px;border-width:0 0 1.5px 1.5px}
#hud .br{right:18px;bottom:64px;border-width:0 1.5px 1.5px 0}
#hud .rec{position:absolute;left:52px;top:20px;display:flex;align-items:center;gap:10px}
#hud .rec i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
#hud.live .rec i{background:#ff4d3d;animation:pulse 1.4s ease-in-out infinite}
#hud .rec span{font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
#hud .cam{position:absolute;left:52px;top:40px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.55)}
#hud .tel{position:absolute;left:52px;right:52px;bottom:66px;display:flex;gap:28px}
#hud .tel div{display:flex;flex-direction:column;gap:3px}
#hud .tel dt{font-weight:600;color:rgba(255,255,255,.55)}
#hud .tel dd{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
#hud .tel dd b{font-weight:700;color:#fff}
#hud .tel .gps{margin-left:auto;text-align:right}

/* Full-screen hero (body.wide, set in the script: on Intro and when returning to it): the image opens out from below the header to the
   screen edges, slightly blurred and darkened; heading, description and buttons in the middle; along the bottom, figures on the left, the scroll
   hint and "Turu geç" in the middle, references on the right. On the first scroll the image pulls back into its frame and the text moves to the left column.
   Since the hero text only shows on Intro, on desktop it always uses this layout. The phone layout doesn't change.
   --edge: horizontal alignment of the text on both sides (same as the logo and menu in the header). */
@media (min-width:861px) and (min-height:521px){
  :root{--edge:var(--col);--ease:cubic-bezier(.65,0,.25,1)}
  #stage,#hud{transition:top .8s var(--ease),right .8s var(--ease),bottom .8s var(--ease),left .8s var(--ease),border-radius .8s var(--ease)}
  #rail{transition:left .8s var(--ease),opacity .4s}
  body.wide #stage,body.wide #hud{top:var(--top);right:0;bottom:0;left:0;border-radius:0}
  body.wide #rail{left:var(--gap);opacity:0;pointer-events:none}
  /* Overlay: slightly blurs and darkens the image (darker in the middle and at the bottom) so text reads over a bright image.
     Since the video elements' transitions are written by the script, the blur goes on this layer above rather than on the video. */
  #hud::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .6s; background:radial-gradient(70% 60% at 50% 44%,rgba(5,9,14,.62),rgba(5,9,14,.4)),linear-gradient(rgba(5,9,14,0) 60%,rgba(5,9,14,.55)); -webkit-backdrop-filter:blur(4px) saturate(115%);backdrop-filter:blur(4px) saturate(115%)}
  body.wide #hud::before{opacity:1}
  #hud .c,#hud .rec,#hud .cam,#hud .tel{transition:opacity .4s}
  body.wide #hud .c,body.wide #hud .rec,body.wide #hud .cam,body.wide #hud .tel{opacity:0}
  /* The hero text is a grid over the whole image: the middle rows are vertically centered, the last row is the bottom strip. */
  #hero{left:0;right:0;top:var(--top);bottom:0;width:auto;transform:none;padding:0 var(--edge) 34px;display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr auto;text-align:center}
  #hero > *{grid-column:1 / -1}
  #hero .kicker{grid-row:1;align-self:end}
  #hero h1{grid-row:2;justify-self:center;max-width:16em;font-size:clamp(46px,5vw,82px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
  #hero h1 span{white-space:nowrap}
  #hero p{grid-row:3;justify-self:center;max-width:36em;font-size:18px}
  #hero .actions{grid-row:4;justify-content:center}
  #hero .stats{grid-row:6;grid-column:1;justify-self:start;align-self:end;display:flex;gap:0;margin:0;padding:0;border:0;text-align:left}
  #hero .stats div{flex:none;padding:0 26px 0 0}
  #hero .stats div+div{padding-left:26px}
  #hero .stats dd{font-size:28px;line-height:1.1}
  /* Keep the middle of the bottom strip (scroll hint) clear: on narrow screens the figures tighten. */
  @media (max-width:1120px){#hero .stats div{padding-right:16px}#hero .stats div+div{padding-left:16px}#hero .stats dd{font-size:24px}#hero .stats dt{font-size:12px}}
  #cue{left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;pointer-events:none}
  #cue .hint{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600}
  #cue .skip{background:rgba(11,22,34,.45)}
  body.wide #cue{opacity:1;pointer-events:auto}
  body.wide #guide{opacity:0;pointer-events:none}
}

/* --- end of the tour ---
   After Decision the screen blurs and the closing text and buttons appear in the middle.
   It comes by itself after resting on Decision for a few seconds, or immediately on scrolling forward; scrolling back removes it. */
#fin{top:var(--top);left:0;right:0;bottom:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:40px 24px;text-align:center;color:#fff;opacity:0;pointer-events:none; background:radial-gradient(60% 70% at 50% 45%,rgba(11,22,34,.66),rgba(8,15,23,.9));transition:opacity .5s ease}
/* Blur only while the closing screen is visible: if left on while hidden it can be recomputed on every frame of the playing video. */
body.fin #fin{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#fin .box{max-width:900px}
#fin .box > *{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
body.fin #fin .box > *{opacity:1;transform:none}
body.fin #fin .box > :nth-child(2){transition-delay:.06s}
body.fin #fin .box > :nth-child(3){transition-delay:.12s}
body.fin #fin .box > :nth-child(n+4){transition-delay:.2s}
#fin h2{font-weight:800;font-size:clamp(44px,5.4vw,84px);line-height:1.02;letter-spacing:-.04em;margin:0 0 22px;text-wrap:balance}
/* As on the hero, a single accent in the logo green (requested by the user; no green in other text). */
#fin h2 span{color:var(--lime)}
#fin p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.72);max-width:32em;margin:0 auto}
#fin .actions{justify-content:center;margin-top:36px}
#fin .btn-text{color:rgba(255,255,255,.72);padding:0 12px}
#fin .btn-text:hover{color:#fff}
#fin .note{display:block;margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.42)}

/* The tour is a single screen: scrolling changes chapters (see input). The section below comes over the tour with a fade to white. */
#tour{height:100vh;position:relative;z-index:2}

.after{position:relative;z-index:15;background:linear-gradient(rgba(255,255,255,0),var(--bg) 240px);padding:260px 0 0}

/* Make the text fit on short screens (laptops). */
@media (max-height:800px) and (min-width:861px){.stats{display:none}.panel ul{margin-top:18px}.panel li{padding:8px 0}}
@media (max-width:860px){
  /* On phones an edge-to-edge video screen at the top (at most 4:5) with the text right below; text pinned to the bottom of the screen
     ended up under Safari's bottom bar. The height is based on the space left with the browser bars shown (svh): below the video
     screen there is room for the longest text (hero, ~330 px). The video is a vertical crop of the desktop video; the crop
     shifts to the stop's subject (--fx, in the script), since a center crop of the phone video left the subject out (the tower on Construction).
     Recording indicator top left, "Turu geç" top right with the simulation label below; the timeline under the video screen. */
  :root{--side:0px;--col:20px;--gap:0px;--vh:1vh;--vid:max(230px,min(125vw,calc(var(--vh) * 100 - var(--top) - 330px)))}
  @supports (height:100svh){:root{--vh:1svh}}
  #stage{left:0;right:0;top:var(--top);bottom:auto;height:var(--vid);border-radius:0;box-shadow:none}
  #card,#pin,#lead,#dash,#guide .hint,#hud .c,#hud .cam,#hud .tel{display:none}
  #hero,.panel{left:var(--col);right:var(--col);width:auto;top:calc(var(--top) + var(--vid) + 18px);bottom:auto}
  #hero{transform:none}
  #hero h1{font-size:32px;margin:0 0 12px}
  #hero p{font-size:15px;line-height:1.6}
  #hero .actions{margin-top:18px}
  .stats{display:none}
  .panel{transform:translateY(12px)}
  .panel.on{transform:none}
  .panel h2{font-size:27px;margin-top:12px}
  .panel p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);margin-top:10px}
  .panel ul{display:none}
  #hud{left:0;right:0;top:var(--top);bottom:auto;height:var(--vid);border-radius:0; background:linear-gradient(rgba(5,9,14,.5),rgba(5,9,14,0) 24%,rgba(5,9,14,0) 66%,rgba(11,22,34,.92))}
  #hud .rec{left:var(--col);top:20px}
  #rail{left:var(--col);right:var(--col);top:calc(var(--top) + var(--vid) - 22px);bottom:auto;gap:3px;padding:0}
  #rail button{height:14px}
  #rail button::before{height:2px;margin-top:-1px}
  #rail button.on::before{height:3px;margin-top:-1.5px}
  #rail button span{display:none}
  #sim{left:var(--col);right:auto;top:calc(var(--top) + 50px);width:220px;padding:9px 12px 10px}
  #sim .name{font-size:13.5px}
  #guide{left:auto;right:var(--col);bottom:auto;top:calc(var(--top) + 12px)}
  #guide .skip{height:32px;background:rgba(11,22,34,.8)}
  #fin h2{font-size:42px}
  #fin p{font-size:16px}
}
/* Portrait tablet: more room for text (the capability list shows too), larger text. */
@media (min-width:600px) and (max-width:860px){
  :root{--vid:max(230px,min(110vw,calc(var(--vh) * 100 - var(--top) - 400px)))}
  #hero,.panel{left:40px;right:40px}
  #hud .rec{left:40px}
  #guide{right:40px}
  #rail{left:40px;right:40px}
  .panel h2{font-size:32px}
  .panel p{font-size:16.5px;max-width:40em}
  .panel ul{display:block;margin-top:18px}
  .panel li{padding:9px 0;font-size:15px}
  #hero h1{font-size:44px}
  #hero p{font-size:17px;max-width:36em}
}
/* Landscape phone and short screens: small text on the left, video on the right (a scaled-down desktop layout). No full-screen hero
   (in the script too: mqWide); the phone's portrait layout (text below the video) didn't fit at this height. */
@media (orientation:landscape) and (max-height:520px){
  :root{--side:clamp(260px,40vw,400px);--col:22px;--gap:8px}
  #stage,#hud{left:var(--side);right:var(--gap);top:calc(var(--top) + var(--gap));bottom:var(--gap);height:auto;border-radius:12px}
  #hud{background:linear-gradient(rgba(5,9,14,.42),rgba(5,9,14,0) 22%,rgba(5,9,14,0) 70%,rgba(5,9,14,.6))}
  #hero,.panel{left:var(--col);right:auto;width:calc(var(--side) - var(--col) * 2);top:calc(var(--top) + (100% - var(--top)) / 2);bottom:auto}
  #hero{transform:translateY(-50%)}
  .panel{transform:translateY(calc(-50% + 10px))}
  .panel.on{transform:translateY(-50%)}
  #hero .kicker{font-size:12px}
  #hero h1{font-size:24px;margin:6px 0 8px}
  #hero p{font-size:13px;line-height:1.5}
  #hero .actions{margin-top:12px;gap:8px 16px}
  #hero .actions .btn{height:40px;padding:0 16px;font-size:14px;flex:0 0 auto}
  .stats,#hero .stats,#hero .trust{display:none}
  .panel h2{font-size:20px;margin-top:8px}
  .panel p{font-size:13px;line-height:1.5;margin-top:6px}
  .panel ul{display:none}
  #rail{display:flex;left:var(--side);right:var(--gap);top:auto;bottom:var(--gap);padding:0 14px 8px}
  #guide{left:auto;right:calc(var(--gap) + 12px);bottom:auto;top:calc(var(--top) + var(--gap) + 10px)}
  #guide .hint{display:none}
  #hud .rec{left:14px;top:14px}
  #sim{left:calc(var(--side) + 14px);right:auto;top:calc(var(--top) + var(--gap) + 40px);bottom:auto;width:220px;padding:9px 12px 10px}
  #fin{padding:16px 24px}
  #fin .actions{margin-top:16px}
  #fin .note{margin-top:10px;font-size:11.5px}
  #fin h2{font-size:28px;margin-bottom:10px}
  #fin p{font-size:13.5px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hint i::after,#hud.live .rec i,#card .hd em::before,#sim .top i{animation:none}#lead line,#card .in,#card .in::after,#card .hd,#card .main,#card .row,#fin,#fin .box > *,#stage,#hud,#rail{transition:none!important}}

#hero h1{margin:0 0 18px}
#hero p{line-height:1.7;color:rgba(255,255,255,.7)}
#hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
#hero .actions .btn{height:50px;padding:0 20px}
#hero .link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#fff;transition:color .2s}
#hero .link svg{width:15px;height:15px;transition:transform .2s}
#hero .link:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
#hero .link:hover svg{transform:translateX(3px)}
#hero .trust > span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
/* Reference logos are white with no background: the #logo-white filter turns dark parts white and light parts transparent.
   Plain whitening (brightness/invert) turned the Konya logo, which has a filled background, into a white square. */
/* Logos scroll continuously left to right: the list appears twice side by side, and after moving half the strip it loops back (no visible seam).
   Spacing is margin rather than gap, so half the width is exactly one full list. */
#hero .refs{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#hero .refs ul{list-style:none;display:flex;align-items:center;width:max-content;animation:refs 28s linear infinite}
/* While the hero text is hidden (once the tour starts, or the page is scrolled down) the strip pauses so the filtered logos aren't repainted every frame. */
#hero.off .refs ul,body.done #hero .refs ul{animation-play-state:paused}
#hero .refs:hover ul{animation-play-state:paused}
#hero .refs li{flex:none;margin-right:44px}
@keyframes refs{from{transform:translateX(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#hero .refs ul{animation:none}}
#hero .refs img{display:block;height:36px;width:auto;filter:url(#logo-white);opacity:.85}
/* Konya: the file (1000x488) has black "Benim Şehrim" on the left and the emblem and name on yellow on the right; only the right half is shown. */
#hero .refs .konya{width:58px;overflow:hidden}
#hero .refs .konya img{height:60px;max-width:none;margin-left:-63px}
/* Balance the visual weight: UlaşımPark's lettering is large, Kocaeli's is thin. */
#hero .refs .kocaeli img{height:40px}
#hero .refs .up img{height:28px}
/* Arnavutköy's file is already white with no background; the filter would erase it. */
#hero .refs .arnavutkoy img{height:32px;filter:none}
/* On desktop the hero is full screen (see body.wide in the tour section): text aligns to the homepage container edges (same as the
   logo and menu in the header), references on the right of the bottom strip. */
@media (min-width:861px) and (min-height:521px){
  :root{--edge:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)))}
  #hero .trust{grid-row:6;grid-column:3;justify-self:end;align-self:end;width:min(420px,calc(100% - 150px));min-width:0;margin:0;text-align:left}
  #hero .refs{margin-top:12px}
}
@media (max-width:860px){#hero .trust{display:none}#hero h1{font-size:34px;margin:0 0 12px}#hero p{font-size:15px}#hero .actions{margin-top:20px}}
/* Portrait tablet: the tour's larger layout (so the phone sizes above don't override it). */
@media (min-width:600px) and (max-width:860px){#hero h1{font-size:44px}#hero p{font-size:17px;max-width:36em}}
/* Landscape phone and short screens: the tour's small layout (so the phone sizes above don't override it). */
@media (orientation:landscape) and (max-height:520px){#hero h1{font-size:24px;margin:0 0 8px}#hero p{font-size:13px;line-height:1.5}#hero .actions{margin-top:12px;gap:8px 16px}#hero .actions .btn{height:40px}#hero .trust{display:none}}

#fin .actions{justify-content:center}
@media (max-width:860px){#fin .actions .btn{flex:1 1 100%}}
@media (orientation:landscape) and (max-height:520px){#fin .actions{gap:8px 12px}#fin .actions .btn{flex:0 0 auto;height:40px}}

/* Arabic: right to left (html dir="rtl"). Grids and flex rows mirror by themselves; these are the fixed left/right rules.
   Arabic letters join, so letter-spacing is turned off. */
:lang(ar) { letter-spacing: normal !important; }
[dir="rtl"] nav, [dir="rtl"] .burger { margin-left: 0; margin-right: auto; }
[dir="rtl"] .drop { left: auto; right: -8px; }
[dir="rtl"] .lang-drop { right: auto; left: -8px; }
[dir="rtl"] svg:has(> use[href="#arrow"]) { transform: scaleX(-1); }
[dir="rtl"] :is(a, button):hover svg:has(> use[href="#arrow"]) { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] #sim .top b { margin-left: 0; margin-right: auto; }
[dir="rtl"] header.open .drop:not(.wide) { padding: 0 12px 6px 0; }