/* MotoCare tanıtım sitesi · ortak stil
   Renkler uygulamanın ui/theme/Color.kt ve Palette.kt dosyalarından alındı (Asfalt teması, 1.9). */

@font-face { font-family: "Barlow"; src: url("fonts/barlow_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow_medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow_bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow_extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains_mono_variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --asphalt: #0A0C0B;
  --page-bg: #0F1317; --surface: #171D23; --tabbar: #141A1F; --hairline: #222B33; --idle: #2A343D; --input: #1B2229;
  --text: #EEF3F7; --text-2: #9AA6B1; --text-muted: #8E9BA7; --text-faint: #84919D;
  --accent: #F2A43A; --accent-text: #F2A43A; --accent-deep: #C9761A; --on-accent: #140E05;
  --success: #4FBF8B; --success-text: #6DDAA4; --warning: #F0A92A; --warning-text: #F5C26B;
  --danger: #E5484D; --danger-text: #FF8B8E; --teal: #2FC3CF; --plate: #1B47B8;
  --cream: #FBF7F0; --cream-line: #EADFCB; --ink: #1A1510; --ink-2: #51483C; --ink-muted: #6E6558; --amber-deep: #B45309;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------- Logo ---------- */
.mc-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.3px; color: inherit; text-decoration: none; }
.mc-logo svg { width: 34px; height: 34px; flex: none; }

/* ---------- Telefon çerçevesi ---------- */
.phone { --z: .8; display: inline-block; padding: calc(10px * var(--z) / .8); border-radius: calc(46px * var(--z)); background: #06080a; box-shadow: 0 0 0 1px #2a3138 inset, 0 30px 80px -30px rgba(0,0,0,.7); position: relative; line-height: normal; }
.phone.on-light { background: #1a1510; box-shadow: 0 0 0 1px #3a3128 inset, 0 30px 70px -35px rgba(60,40,10,.45); }
.scr { zoom: var(--z); width: 360px; height: 760px; border-radius: 38px; overflow: hidden; position: relative; display: flex; flex-direction: column;
  background: var(--s-bg); color: var(--s-tx); font-family: var(--sans); text-align: left; letter-spacing: 0;
  --s-bg: #0F1317; --s-sf: #171D23; --s-tab: #141A1F; --s-hl: #222B33; --s-idle: #2A343D; --s-in: #1B2229;
  --s-tx: #EEF3F7; --s-tx2: #9AA6B1; --s-mu: #8E9BA7;
  --s-ac: #F2A43A; --s-act: #F2A43A; --s-on: #140E05;
  --s-ok: #4FBF8B; --s-okt: #6DDAA4; --s-wr: #F0A92A; --s-wrt: #F5C26B; --s-dg: #E5484D; --s-dgt: #FF8B8E;
}
.scr.light { --s-bg: #FBF7F0; --s-sf: #FFFFFF; --s-tab: #FFFFFF; --s-hl: #EADFCB; --s-idle: #D9CFBC; --s-in: #F3EDE2;
  --s-tx: #1A1510; --s-tx2: #51483C; --s-mu: #6E6558; --s-ac: #F59E0B; --s-act: #B45309;
  --s-okt: #1E7F52; --s-wrt: #9A5B00; --s-dgt: #C0262B; }
.scr .sb { height: 38px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; font-size: 13px; font-weight: 600; }
.scr .sb i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; opacity: .9; }
.scr .sb i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.scr .body { flex: 1; overflow: hidden; padding: 6px 20px 0; }
.scr h3 { margin: 6px 0 12px; font-size: 26px; font-weight: 800; letter-spacing: -.4px; display: flex; align-items: center; justify-content: space-between; }
.scr .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px; color: var(--s-mu); text-transform: uppercase; margin: 14px 2px 8px; }
.scr .card { background: var(--s-sf); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.scr.light .card { box-shadow: 0 0 0 1px var(--s-hl) inset; }
.scr .tint-w { background: color-mix(in srgb, var(--s-wr) 12%, var(--s-sf)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-wr) 50%, transparent) inset; }
.scr .tint-d { background: color-mix(in srgb, var(--s-dg) 12%, var(--s-sf)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-dg) 50%, transparent) inset; }
.scr .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 600; }
.scr .row small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--s-mu); margin-top: 2px; }
.scr .m { font-family: var(--mono); font-size: 12px; font-weight: 500; white-space: nowrap; }
.scr .ok { color: var(--s-okt); } .scr .wr { color: var(--s-wrt); } .scr .dg { color: var(--s-dgt); } .scr .ac { color: var(--s-act); } .scr .mu { color: var(--s-mu); }
.scr .btn-o { font-size: 12.5px; font-weight: 600; color: var(--s-act); border: 1px solid var(--s-hl); border-radius: 10px; padding: 7px 12px; white-space: nowrap; }
.scr .btn-p { background: var(--s-ac); color: var(--s-on); border-radius: 12px; padding: 13px; text-align: center; font-weight: 700; font-size: 15px; }
.scr .pill { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; padding: 3px 7px; border-radius: 99px; font-weight: 600; }
.scr .plate { display: inline-flex; align-items: stretch; border-radius: 3px; overflow: hidden; border: 1.5px solid #c9d0d8; background: #fff; color: #111; font-family: var(--mono); font-weight: 700; font-size: 12px; }
.scr .plate b { background: #1B47B8; color: #fff; font-size: 7px; padding: 0 4px; display: flex; align-items: center; }
.scr .plate span { padding: 3px 8px; letter-spacing: .5px; }
.scr .bar { height: 6px; border-radius: 99px; background: var(--s-in); overflow: hidden; margin-top: 6px; }
.scr .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--s-ok); }
.scr .chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 8px 11px; border-radius: 10px; background: var(--s-in); color: var(--s-tx2); margin: 0 6px 6px 0; border: 1.5px solid transparent; }
.scr .chip.on { border-color: var(--s-ac); color: var(--s-tx); background: color-mix(in srgb, var(--s-ac) 14%, var(--s-sf)); }
.scr .tabs { flex: none; height: 74px; background: var(--s-tab); border-top: 1px solid var(--s-hl); display: flex; justify-content: space-around; align-items: flex-start; padding-top: 9px; }
.scr .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--s-tx2); width: 66px; text-align: center; }
.scr .tab i { width: 26px; height: 26px; border-radius: 8px; background: var(--s-idle); display: grid; place-items: center; }
.scr .tab i svg { width: 15px; height: 15px; fill: var(--s-tx2); }
.scr .tab.on { color: var(--s-tx); } .scr .tab.on i { background: var(--s-ac); } .scr .tab.on i svg { fill: var(--s-on); }
.scr .seg { display: flex; background: var(--s-in); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.scr .seg span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 0; border-radius: 8px; color: var(--s-tx2); }
.scr .seg span.on { background: var(--s-sf); color: var(--s-tx); }
.scr .teal { color: #2FC3CF; background: color-mix(in srgb, #2FC3CF 14%, transparent); }
.scr .homebar { position: absolute; bottom: 7px; left: 50%; width: 120px; height: 4px; margin-left: -60px; border-radius: 9px; background: var(--s-tx); opacity: .55; }

/* ---------- Ekran içi animasyonlar (yalnızca .phone.anim) ---------- */
.scr .reel { position: absolute; left: 0; right: 0; top: 0; transform: translateY(calc(var(--d) * -10%)); }
.phone.anim .scr .body > * { animation: mcUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 70ms + 80ms); }
.phone.anim .scr .bar > i { transform-origin: left; animation: mcGrowX 1.1s cubic-bezier(.2,.8,.2,1) .35s both; }
.phone.anim .scr .rp { animation: mcRing 1.4s cubic-bezier(.2,.8,.2,1) .3s both; }
.phone.anim .scr .col { transform-origin: bottom; animation: mcGrowY .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 80ms + 300ms); }
.phone.anim .scr .reel { animation: mcReel 1.3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms + 450ms); }
.phone.anim .scr .sheet { animation: mcSheet .6s cubic-bezier(.2,.8,.2,1) .15s both; }
.phone.anim .scr .dim { animation: mcFade .4s ease both; }
.phone.anim .scr .chip.on, .phone.anim .scr .pill { animation: mcPop .5s cubic-bezier(.3,1.6,.5,1) .7s both; }
.phone.anim .scr .btn-p { animation: mcPulse 2.4s ease-in-out 1.4s infinite; }
@keyframes mcUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes mcGrowX { from { transform: scaleX(0); } }
@keyframes mcGrowY { from { transform: scaleY(0); } }
@keyframes mcRing { from { stroke-dashoffset: var(--len); } }
@keyframes mcReel { from { transform: translateY(0); } }
@keyframes mcSheet { from { transform: translateY(100%); } }
@keyframes mcFade { from { opacity: 0; } }
@keyframes mcPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mcPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-ac) 45%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--s-ac) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .phone.anim .scr * { animation: none !important; } }