/* UAE Demo paneli — Saat Teknoloji tasarım dili (harita/kaligrafi demolarının ortak.css'iyle aynı belirteçler) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");

:root {
  --beyaz: #fff; --zemin: #F9FAFB; --yuzey-hover: #F3F4F6;
  --cizgi: #E5E7EB; --cizgi-koyu: #D1D5DB;
  --sinyal: #E9521D; --sinyal-koyu: #C7401A; --amber: #E78600;
  --metin: #0F172A; --metin-2: #4B5563; --metin-3: #94A3B8;
  --golge: 0 1px 2px #0000000a, 0 4px 12px #0000000f, 0 16px 40px #0000000a;
  --golge-buyuk: 0 2px 4px #0000000f, 0 8px 24px #00000014, 0 24px 56px #0000000f;
  --serif: "Plus Jakarta Sans", "Inter", "Noto Sans Arabic", sans-serif;
  --sans: "Inter", "Plus Jakarta Sans", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--zemin); color: var(--metin); font-family: var(--sans);
             -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[dir=rtl] body, [dir=rtl] h1, [dir=rtl] h2 { font-family: "Noto Sans Arabic", var(--sans); letter-spacing: 0; }

.arka-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.arka-perde { position: fixed; inset: 0; z-index: -1; pointer-events: none;
              background: radial-gradient(1100px 700px at 50% 40%, rgba(255,255,255,.84), rgba(249,250,251,.95) 80%); }

.ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px clamp(16px, 4vw, 40px); }
.logo { height: 40px; width: auto; display: block; }
.dil { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.8); border: 1px solid var(--cizgi); border-radius: 10px; }
.dil button { font: 500 14px/1 var(--sans); color: var(--metin-2); background: none; border: 0; border-radius: 7px; padding: 9px 13px; cursor: pointer; }
.dil button[lang=ar] { font-family: "Noto Sans Arabic", var(--sans); }
.dil button:hover { color: var(--metin); background: var(--yuzey-hover); }
.dil button[aria-pressed=true] { color: #fff; background: var(--sinyal); }

.etiket { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--sinyal);
          display: inline-block; padding-bottom: 8px; border-bottom: 1px solid var(--sinyal); }
[dir=rtl] .etiket { letter-spacing: 0; font-family: "Noto Sans Arabic", var(--sans); font-size: 14px; }
h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 18px 0 10px;
     font-size: clamp(40px, 6.4vw, 66px);
     background: linear-gradient(90deg, var(--metin) 0%, var(--sinyal) 45%, var(--amber) 70%, var(--metin) 100%);
     -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.alt { color: var(--metin-2); font-size: 18px; line-height: 1.55; margin: 0 auto; max-width: 46ch; }

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 16px/1 var(--sans);
         color: #fff; background: var(--sinyal); border: 1px solid var(--sinyal); border-radius: 8px; padding: 14px 22px;
         cursor: pointer; text-decoration: none; box-shadow: 0 6px 20px rgba(233,82,29,.22);
         transition: transform .18s var(--ease), background .18s; }
.dugme:hover { background: var(--sinyal-koyu); border-color: var(--sinyal-koyu); }
.dugme:active { transform: scale(.97); }
.dugme.ikincil { background: var(--beyaz); color: var(--sinyal); border-color: var(--cizgi-koyu); box-shadow: none; }
.dugme.ikincil:hover { background: var(--yuzey-hover); }
:focus-visible { outline: 2px solid var(--sinyal); outline-offset: 3px; }
[dir=rtl] .ok { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .arka-video { display: none; } }