/* =========================================================================
   ATABERK REAL ESTATE — Brand System tokens
   Poster-grade typography · Premium discipline · Navy + Azure + Gold
   Display: Montserrat 800/900 · Body: Montserrat · Meta: JetBrains Mono
   ========================================================================= */

/* ---------- SELF-HOSTED @FONT-FACE (no external fetch → no font flash) ----------
   Cyrillic subsets are explicit (unicode-range) so the browser per-glyph picks
   the right file. Files live in /fonts/ next to this CSS. */

/* Montserrat 400 */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/montserrat-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/montserrat-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Montserrat 600 */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/montserrat-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/montserrat-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Montserrat 700 */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/montserrat-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Oswald — variable condensed (200–700), available as an alt poster display */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200 700; font-display:swap;
  src: url('fonts/oswald-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200 700; font-display:swap;
  src: url('fonts/oswald-cyrillic.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* JetBrains Mono 400 / 500 */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/jetbrains-mono-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src: url('fonts/jetbrains-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src: url('fonts/jetbrains-mono-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Manrope — variable (400–800). PRIMARY display + body (заменяет Montserrat).
   Self-hosted woff2 (Google Fonts), кириллица + латиница + расширенные. */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src: url('fonts/manrope-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src: url('fonts/manrope-cyrillic-ext.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

:root {
  /* ---------- BRAND PALETTE (sampled from the live Ataberk site + logo) ---------- */
  --navy:       #212A5B;   /* primary dark surface — headers, posters */
  --navy-2:     #1A2148;   /* deeper navy */
  --navy-3:     #2C3870;   /* lifted navy surface */
  --navy-4:     #3A4789;   /* hairlines / lifted-2 */

  --azure:      #2E7EC4;   /* logo blue — secondary accent, links, structure */
  --azure-deep: #275EA7;   /* royal blue used in UI */
  --azure-soft: #6BA6DC;   /* tint */

  --gold:       #FFCF3D;   /* PRIMARY accent — CTAs, prices, highlight */
  --gold-deep:  #E6B41F;   /* pressed / typographic gold on light */
  --gold-soft:  #FFE493;

  /* ---------- ACCENT ALIAS · пер-клиентский развод дизайна ----------
     Соседние клиенты на art-sites.org не должны быть похожи. Правило:
     1 клиент = свой АКЦЕНТ + свой тип «живого» индикатора + свой тип карточки.
     Ataberk = gold + золотая метка с локальным временем Аланьи (НЕ зелёная
     пульсирующая точка, как у plus.art-sites.org). Стиль .online — в
     landing-*.css; здесь только цвета. Сменить акцент клиента = этот блок. */
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-soft: var(--gold-soft);
  --status-dot:  var(--gold);   /* цвет «живой» метки — НЕ зелёный */

  --paper:      #FFFFFF;
  --paper-warm: #F4F5F7;   /* light app background */
  --paper-gray: #EBECEC;   /* site page background */

  /* Neutral scale — cool, navy-leaning grays */
  --n50:  #F6F7F9;
  --n100: #EBEDF1;
  --n200: #D6DAE2;
  --n300: #AEB5C4;
  --n400: #7A8499;
  --n500: #545E75;
  --n600: #3A4258;
  --n700: #272E40;
  --n800: #1A1F2E;
  --n900: #11141F;

  /* Surfaces & hairlines */
  --bg-dark:       var(--navy);
  --bg-light:      var(--paper);
  --border-hair-d: rgba(255,255,255,.16);
  --border-hair-l: rgba(33,42,91,.16);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Manrope', 'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Manrope', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (poster-canvas px) ---------- */
  --t-massive:   200px;
  --t-display-l: 148px;
  --t-display:   112px;
  --t-display-s: 80px;
  --t-h1:        60px;
  --t-h2:        42px;
  --t-h3:        27px;
  --t-body:      21px;
  --t-small:     17px;
  --t-micro:     13px;
  --t-tick:      14px;

  /* Line heights */
  --lh-tight: 0.86;
  --lh-snug:  0.98;
  --lh-base:  1.45;

  /* Letter spacing */
  --tr-display: -0.015em;   /* tight, expensive grotesque */
  --tr-mono:    0.20em;
  --tr-chip:    0.10em;

  /* ---------- SPACING (8pt grid) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-0: 0;  --r-1: 3px;  --r-2: 8px;  --r-3: 14px;  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-cinema: 0 30px 60px -28px rgba(17,20,31,.55);
  --shadow-card:   0 18px 40px -22px rgba(17,20,31,.35);
  --shadow-hair:   inset 0 0 0 1px rgba(33,42,91,.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================================
   Element defaults
   ========================================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* ---------- DISPLAY (Montserrat 900 — poster) ---------- */
.display-massive, .display-l, .display, .display-s {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin: 0;
}
.display-massive { font-size: var(--t-massive); }
.display-l       { font-size: var(--t-display-l); }
.display         { font-size: var(--t-display); }
.display-s       { font-size: var(--t-display-s); }

h1.poster, .h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-display); text-transform: uppercase; margin: 0; }

/* ---------- SUPPORT TEXT ---------- */
h2 { font-family: var(--font-sans); font-size: var(--t-h2); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0; }
h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: 700; line-height: 1.2; margin: 0; }
p  { font-family: var(--font-sans); font-size: var(--t-body); font-weight: 400; line-height: 1.5; margin: 0; }

.body-l { font-size: 27px; line-height: 1.4; }
.body   { font-size: var(--t-body); }
.body-s { font-size: var(--t-small); }
.micro  { font-size: var(--t-micro); }

/* ---------- MONO META (Alanya — Türkiye style metadata) ---------- */
.tick {
  font-family: var(--font-mono);
  font-size: var(--t-tick);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
}

/* ---------- CHIPS / BADGES ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: var(--tr-chip); text-transform: uppercase;
  background: var(--paper); color: var(--navy); border-radius: var(--r-1);
  line-height: 1;
}
.chip--gold    { background: var(--gold);  color: var(--navy); }
.chip--navy    { background: var(--navy);  color: var(--paper); }
.chip--azure   { background: var(--azure); color: var(--paper); }
.chip--outline { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip--mono    { font-family: var(--font-mono); font-weight: 500; letter-spacing: .16em; background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip--pill    { border-radius: var(--r-pill); }

/* ---------- BUTTONS (mirror the live-site CTAs) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 0; border-radius: var(--r-2);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
/* All buttons lift on hover — clearly noticeable, premium. Gold inverts to
   navy (not "just darker"); navy warms to gold; azure deepens to navy. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: none !important; }

.btn--gold  { background: var(--gold); color: var(--navy); }
.btn--gold:hover  { background: var(--navy); color: var(--gold); box-shadow: 0 12px 26px -12px rgba(33,42,91,.55); }
.btn--navy  { background: var(--navy); color: var(--paper); }
.btn--navy:hover  { background: var(--gold); color: var(--navy); box-shadow: 0 12px 26px -12px rgba(33,42,91,.45); }
.btn--azure { background: var(--azure); color: var(--paper); }
.btn--azure:hover { background: var(--navy); color: var(--paper); box-shadow: 0 12px 26px -12px rgba(33,42,91,.45); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--paper); box-shadow: inset 0 0 0 2px var(--navy), 0 12px 26px -12px rgba(33,42,91,.45); }
.btn--ghost-d { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn--ghost-d:hover { background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 2px var(--paper), 0 12px 26px -12px rgba(0,0,0,.4); }

/* ---------- ICON / MESSENGER BUTTONS ---------- */
.btn .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.btn--round { width: 54px; height: 54px; padding: 0; border-radius: var(--r-pill); justify-content: center; }
.btn--round .ic { width: 26px; height: 26px; }
/* On-brand: navy base keeps the landing disciplined; the small brand-coloured
   glyph gives instant messenger recognition without flooding the palette. */
.btn--wa { background: var(--navy); color: var(--paper); }
.btn--wa .ic { color: #25D366; }
.btn--wa:hover { background: var(--navy-3); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(33,42,91,.5); color: var(--paper); }
.btn--tg { background: var(--navy); color: var(--paper); }
.btn--tg .ic { color: #2AABEE; }
.btn--tg:hover { background: var(--navy-3); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(33,42,91,.5); color: var(--paper); }

/* ---------- HOLLOW / OUTLINE display (clean: light weight + thin even stroke,
   no fill — avoids the messy stroke joins of heavy faces) ---------- */
.hollow {
  color: transparent;
  font-weight: 400;
  -webkit-text-stroke: 0.018em currentColor;
  paint-order: stroke;
}

/* ---------- PRICE TAG ---------- */
.price {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--gold); line-height: 1;
}
.price--navy { color: var(--navy); }
.price .cur { font-size: 0.6em; font-weight: 800; }

/* ---------- ID / OBJECT BADGE (kept from the site, refined) ---------- */
.id-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(33,42,91,.22);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--r-1);
}
.id-badge::before { content: "\25B8"; color: var(--accent); font-size: .9em; line-height: 1; }
.id-badge b { color: var(--accent-deep); font-weight: 700; }

/* ---------- OUTLINE / STROKED text ---------- */
.text-outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.text-outline--navy  { -webkit-text-stroke-color: var(--navy); }
.text-outline--gold  { -webkit-text-stroke-color: var(--gold); }
.text-outline--azure { -webkit-text-stroke-color: var(--azure); }

/* ---------- GHOST / layered echo ---------- */
.text-ghost   { opacity: 0.14; }
.text-ghost-2 { opacity: 0.30; }
.text-ghost-3 { opacity: 0.55; }

/* ---------- HIGHLIGHTER ---------- */
.hl {
  background: var(--gold); color: var(--navy);
  padding: 2px 10px 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hl--navy { background: var(--navy); color: var(--gold); }

/* ---------- FRAMES / corner brackets ---------- */
.frame-1 { outline: 1px solid currentColor; outline-offset: -16px; }
.frame-corners { position: relative; }
.frame-corners::before, .frame-corners::after,
.frame-corners > .fc-tr, .frame-corners > .fc-bl {
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid currentColor;
}
.frame-corners::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.frame-corners::after  { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.frame-corners > .fc-tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.frame-corners > .fc-bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }

/* ---------- PROTECTION SCRIMS (over photos) ---------- */
.scrim-bottom { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(180deg, transparent 0%, rgba(17,20,31,.88) 92%); pointer-events: none; }
.scrim-top    { position: absolute; inset: 0 0 auto 0; height: 34%; background: linear-gradient(180deg, rgba(17,20,31,.72) 0%, transparent 100%); pointer-events: none; }

/* ---------- PROGRESS / pager ---------- */
.progress { display: flex; align-items: center; gap: 5px; }
.progress .seg { width: 26px; height: 4px; background: currentColor; opacity: 0.28; border-radius: 2px; }
.progress .seg.on { opacity: 1; }

/* ---------- META PLATES (floating info cards over photo) ---------- */
.plate {
  position: relative; display: inline-flex; flex-direction: column; gap: 5px;
  padding: 13px 17px 15px;
  background: var(--gold); color: var(--navy);
  border-radius: var(--r-2);
  box-shadow: 0 12px 30px -12px rgba(17,20,31,.5);
  font-family: var(--font-sans);
}
.plate--glass {
  background: rgba(46,126,196,0.20);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--paper);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22);
}
.plate--navy  { background: var(--navy);  color: var(--paper); }
.plate--azure { background: var(--azure); color: var(--paper); }
.plate--outline { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.plate--tilt  { transform: rotate(-1.6deg); }
.plate .plate-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .72; line-height: 1; }
.plate .plate-value { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 0.9; text-transform: uppercase; letter-spacing: -.01em; }
.plate .plate-body  { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.3; }

/* ---------- LINKS ---------- */
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
::selection { background: var(--gold); color: var(--navy); }