/* Tipografi — iki markaya iki ayrı sistem
   Ferrovia Coffee : Bricolage Grotesque (başlık) · Inter (gövde) · Space Mono (etiket)
   Atölye by Ferrovia: Instrument Serif (başlık) · DM Sans (gövde) · DM Mono (etiket) */
@import url("../fonts/fonts2.css");

:root{
  /* Apple SF yığını: Apple cihazlarda SF Pro, diğerlerinde Inter'e düşer */
  --font-apple:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,sans-serif;
  --font-apple-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Space Mono",monospace;
  --font-display:var(--font-apple);
  --font-body:var(--font-apple);
  --font-mono:var(--font-apple-mono);
}
html[data-wipe-color="#ae5175"]{
  --font-display:"Instrument Serif","Times New Roman",serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;
}

html body,
html body .text-size-medium.text-size-medium,
html body .text-size-large.text-size-large,
html body .text-size-small.text-size-small,
html body .text-size-tiny.text-size-tiny,
html body .text-size-regular.text-size-regular,
html body p,html body input,html body textarea,html body select,html body button,
html body .card__desc,html body .item__desc,html body .atl-step__text,html body .loc__row dd{
  font-family:var(--font-body);font-weight:400;letter-spacing:-.005em}

html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .heading-style-h1.heading-style-h1,html body .heading-style-h2.heading-style-h2,
html body .heading-style-h3.heading-style-h3,html body .heading-style-h4.heading-style-h4,
html body .heading-style-h5.heading-style-h5,html body .heading-style-h6.heading-style-h6,
html body .text-size-numbers.text-size-numbers,html body .loc__title,html body .atl-step__title{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.02em}

/* Ferrovia: geniş, endüstriyel başlık; Atölye: zarif serif */
html[data-wipe-color="#00483c"] body .heading-style-h1.heading-style-h1,
html[data-wipe-color="#00483c"] body .heading-style-h2.heading-style-h2{
  font-variation-settings:"wdth" 100,"opsz" 96;font-weight:500}
html[data-wipe-color="#ae5175"] body .heading-style-h1.heading-style-h1,
html[data-wipe-color="#ae5175"] body .heading-style-h2.heading-style-h2,
html[data-wipe-color="#ae5175"] body .heading-style-h3.heading-style-h3,
html[data-wipe-color="#ae5175"] body .atl-step__title,
html[data-wipe-color="#ae5175"] body .loc__title{font-weight:400;letter-spacing:0}

html body .text-size-caption-small.text-size-caption-small,
html body .text-size-caption-small-up.text-size-caption-small-up,
html body .text-size-caption-medium.text-size-caption-medium,
html body .text-size-caption-large.text-size-caption-large,
html body .nav_menu_link.nav_menu_link,
html body .button.button,
html body .loc__row dt,html body .loc__label,html body .loc__btn,html body .atl-step__num{
  font-family:var(--font-mono);font-weight:400;letter-spacing:.08em}

html body .text-size-numbers.text-size-numbers{font-variant-numeric:tabular-nums}

/* Ferrovia hero: aynı fotoğrafın iki farklı kadrajı — katmanlar ayrılırken dikey kaydırma hissi */
html[data-wipe-color="#00483c"] body .hero_bg-img.is-top{object-position:50% 12%}
html[data-wipe-color="#00483c"] body .hero_bg-img.is-bottom{object-position:50% 88%}

/* --- Ferrovia hero okunurluğu: marka yeşili + krem perde --- */
html[data-wipe-color="#00483c"] body .section_hero .hero_content{position:relative}
/* Dinamik başlık: renk JS ile arka planın parlaklığına göre kelime kelime atanır */
html body .dyn-word{transition:color .25s ease,text-shadow .25s ease}
@supports not (mix-blend-mode:difference){
  html[data-wipe-color="#00483c"] body .section_hero .heading-style-h1,
  html[data-wipe-color="#00483c"] body .hero_scrollable-top .heading-style-h2{color:#00483C;mix-blend-mode:normal}
}
html[data-wipe-color="#00483c"] body .hero_content_text,
html[data-wipe-color="#00483c"] body .hero_content .text-size-medium{color:#14564A}

html[data-wipe-color="#00483c"] body .hero_scrollable-bottom-text{position:relative}
html[data-wipe-color="#00483c"] body .hero_scrollable-bottom-text,
html[data-wipe-color="#00483c"] body .hero_scrollable-bottom-text div{
  color:#00483C;font-size:clamp(16px,1.35vw,21px);line-height:1.75}
@media (max-width:767px){
  html[data-wipe-color="#00483c"] body .hero_scrollable-bottom-text,
  html[data-wipe-color="#00483c"] body .hero_scrollable-bottom-text div{font-size:16px}
}