/* Instagram @umartajans kimliği (2026-10-14): açık buz mavisi zemin, logo mavisi #4577A8, siyah yazı,
   dar kalın başlık harfi (Bebas Neue). style.css ve anim.css'in üzerine yazar. */
:root {
  --bg: #eaf2f4;
  --panel: #ffffff;
  --line: #cbdbe2;
  --fg: #0d1013;
  --muted: #4c5a64;
  --amber: #4577a8;
  --amber-ink: #ffffff;
  --mavi: #4577a8;
  --mavi-koyu: #335d87;
  --gece: #141a20;
  --display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  color-scheme: light;
}

/* logo: logodaki gibi mavi kutuda UMART + siyah AJANS */
.brand { text-decoration: none; display: inline-flex; align-items: stretch; font: 400 30px/1 var(--display); letter-spacing: .01em; }
.brand b { font-weight: 400; background: var(--mavi); color: #fff; padding: 5px 5px 1px; }
.brand span { color: var(--fg); padding: 5px 0 1px 5px; }
.brand img { display: none; }

/* üst çubuk ve düğmeler */
.top { background: rgba(234, 242, 244, .88); }
.btn-amber:hover { background: var(--mavi-koyu); }
.btn-ghost { background: var(--panel); }
.btn-ghost:hover { border-color: var(--mavi); }

/* başlıklar: logonun dar kalın harfi, büyük harf */
h1, h2, .svc h3 { font-family: var(--display); font-weight: 400; font-stretch: normal; letter-spacing: .005em; text-transform: uppercase; }
h1 { font-size: clamp(56px, 8.6vw, 132px); line-height: .9; }
h2 { font-size: clamp(46px, 6.4vw, 88px); line-height: .92; }
.svc h3 { font-size: 30px; line-height: 1; }
h1 .amber i, h1 .amber { color: #fff; }
h1 .amber i { background: var(--mavi); padding: .02em .12em 0; margin-left: -.12em; }
.rec-dot { background: var(--mavi); box-shadow: 0 0 0 4px rgba(69, 119, 168, .2); }
.eyebrow, .reel-cap, .direct dt { color: var(--muted); }
.svc .spec { color: var(--mavi); }

/* showreel çerçevesi */
.reel-frame { background: var(--gece); border-color: var(--gece); box-shadow: 0 40px 70px -34px rgba(20, 40, 60, .55); }
.reel-tag { background: var(--mavi); color: #fff; }

/* kartlar */
.work .thumb { background: #d6e3e8; box-shadow: 0 18px 30px -22px rgba(20, 40, 60, .5); }
.work .play span { background: var(--mavi); }
.work .play svg { fill: #fff; }
.work .tc { color: #fff; }

/* filtre */
.filters button { background: var(--panel); color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--mavi); border-color: var(--mavi); color: #fff; }

/* bantlar: hizmetler beyaz, markalar koyu */
#hizmetler { background: var(--panel); }
.wedding { background: var(--bg); }
#markalar { background: var(--gece); color: #f2f5f7; border-top-color: var(--gece); }
#markalar .band-head p { color: #a9b6bf; }
.logos figure { background: #1c242c; border-color: #2a3540; }

/* iletişim */
form.quote { background: var(--panel); box-shadow: 0 24px 50px -36px rgba(20, 40, 60, .45); }
.f input, .f select, .f textarea { background: var(--bg); color: var(--fg); }
.f input:focus, .f select:focus, .f textarea:focus { outline-color: var(--mavi); }
.direct dd a:hover { color: var(--mavi); }
:focus-visible { outline-color: var(--mavi); }

/* oynatıcı */
dialog.player .bar { color: #fff; }
dialog.player button { background: #fff; color: var(--fg); border-color: #fff; }

/* imleci takip eden ışık: logo mavisi */
.isik { background: radial-gradient(circle, rgba(69, 119, 168, .16), rgba(69, 119, 168, .05) 38%, transparent 68%); }

footer { background: var(--gece); color: #a9b6bf; border-top-color: var(--gece); }
/* İ noktası animasyon maskesinde kesilmesin */
h1 .line { padding-top: .14em; margin-top: -.14em; }