/*
 * Tasarım token'ları — revize Figma dosyasından (BarisUnlu_Dekotomi, 2026-10) birebir alınmıştır.
 * Referans kare: 1920 × 975, içerik alanı 1440px, çerçeve 1500px.
 */
:root {
  /* Renkler — gece modu: saf siyah zemin, beyaz ön plan. Gündüz karşılıkları aşağıdaki [data-theme="light"]
     bloğundadır; bileşenler yalnızca anlamsal token'ları (zemin, ön plan, çizgi, cam) kullanır.
     Revize tasarım siyah-beyazdır: vurgu rengi (eskiden marka turuncusu) ön plan rengiyle aynıdır, vurgu zeminindeki
     yazı ve ikonlar zemin rengini alır. */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-accent: #ffffff;
  --color-accent-hover: #d9d9d9;
  --color-accent-text: var(--color-accent);
  --color-accent-tint: rgba(255, 255, 255, 0.12);
  --color-accent-tint-strong: rgba(255, 255, 255, 0.24);
  --color-on-accent: #000000;
  /* Vurgu zeminindeki (ör. "Yol tarifi al") beyaz çizilmiş ikonları zemin rengine çevirir. */
  --on-accent-icon-filter: invert(1);
  --color-background: #000000;
  --color-foreground: #ffffff;
  --color-foreground-soft: rgba(255, 255, 255, 0.85);
  --color-foreground-muted: rgba(255, 255, 255, 0.55);
  --color-line: #ffffff;
  --color-menu-overlay: rgba(0, 0, 0, 0.72);
  /* Figma: butonlar ve üzerine gelinen kart siyah zeminde #333 (beyaz %20). */
  --color-glass-strong: rgba(255, 255, 255, 0.2);
  --color-glass-hover: rgba(255, 255, 255, 0.3);
  --color-glass-faint: rgba(255, 255, 255, 0.01);
  --color-spotlight: rgba(255, 255, 255, 0.14);
  --color-track: rgba(255, 255, 255, 0.14);
  --color-border-soft: rgba(255, 255, 255, 0.6);
  --color-muted-label: rgba(255, 255, 255, 0.6);
  --color-preloader-core: #111111;
  --color-preloader-glow: rgba(255, 255, 255, 0.1);
  --color-preloader-glow-fade: rgba(255, 255, 255, 0.04);
  --color-viewer-glow: rgba(255, 255, 255, 0.07);
  --color-viewer-backdrop: rgba(0, 0, 0, 0.86);
  /* Harita Figma'da iki modda da açık gri tonludur; pin ve halkası bu yüzden her modda siyahtır. */
  --color-map-pin: #000000;
  --color-map-attribution: rgba(255, 255, 255, 0.72);
  --color-map-attribution-text: rgba(0, 0, 0, 0.6);
  --map-tint-base: #e6e6e6;
  --map-tile-filter: grayscale(1) contrast(0.92) brightness(1.02);
  /* İkonlar ve logo beyaz çizilmiş SVG dosyalarıdır; gündüzde filtreyle siyaha çevrilir. */
  --icon-filter: none;
  --search-cancel-filter: invert(1);
  color-scheme: dark;

  /* Arka plan: revize tasarımda fotoğraf yoktur, zemin düz renktir. Admin > Site Ayarları'ndan görsel girilirse
     aşağıdaki perdelerle bastırılarak gösterilir. */
  --background-image-filter: none;
  --background-statue-image-opacity: 0.4;
  --background-statue-overlay: rgba(0, 0, 0, 0.4);
  --background-interior-overlay: rgba(0, 0, 0, 0.75);

  /* Tipografi */
  --font-family-base: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-stretch-condensed: 75%;
  --font-numeric-features: "liga" 0, "lnum" 1, "tnum" 1;

  --font-size-menu: 64px;
  --font-size-display: 56px;
  --font-size-title: 32px;
  --font-size-tab: 20px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;

  --line-height-display: 55px;
  --line-height-menu: 55px;
  --line-height-prose: 25px;
  --line-height-compact: 19px;

  /* Yerleşim */
  --frame-max-width: 1500px;
  --page-gutter: clamp(16px, 5vw, 210px);
  --content-inset: 30px;
  --header-height: 120px;
  --grid-gap: 30px;
  --brand-gap: 18px;
  --brand-logo-scale: 1;
  --header-actions-gap: 8px;
  /* "dekotomi" yazısının yüksekliği (d/k/t/i harflerinin boyu); genişlik oranla hesaplanır. */
  --wordmark-height: 28px;

  /* Kutular */
  --radius-card: 16px;
  --radius-control: 8px;
  --radius-input: 6px;
  --radius-pill: 999px;
  --border-hairline: 0.5px;
  --glass-blur: 25px;

  --size-header-button: 44px;
  --size-filter-button: 45px;
  /*
   * Bütün ikonların görünen çizim boyu (üst bilgi, Instagram/WhatsApp, iletişim, paylaşım, arama ...); Figma'daki
   * üst bilgi ikonlarının (≈21.5px) bir kademe altı. Dosyaların doluluk oranları base.css'teki tabloda.
   */
  --size-icon: 20px;
  /* Revize Figma: Instagram / WhatsApp butonları üst bilgi butonlarıyla aynı boyda. */
  --size-floating-button: 44px;
  --floating-offset-x: 75px;
  --floating-offset-y: 96px;

  /* Hareket */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.45s;
  --duration-slow: 0.8s;

  /* Katmanlar */
  --layer-background: 0;
  --layer-frame: 1;
  --layer-content: 2;
  --layer-dropdown: 20;
  --layer-floating: 30;
  --layer-menu: 50;
  --layer-viewer: 60;
  --layer-curtain: 100;
  --layer-preloader: 110;
}

/*
 * Gündüz modu: saf beyaz zemin, siyah ön plan; gece modunun birebir tersidir. Cam yüzeyler siyahın saydam
 * tonlarıdır (Figma: butonlar ve üzerine gelinen kart beyaz zeminde #ccc = siyah %20), vurgu siyahtır.
 * Seçim <html data-theme> ile yapılır (karar _Layout <head> betiğinde, sayfa çizilmeden).
 */
:root[data-theme="light"] {
  --color-accent: #000000;
  --color-accent-hover: #333333;
  --color-accent-tint: rgba(0, 0, 0, 0.08);
  --color-accent-tint-strong: rgba(0, 0, 0, 0.16);
  --color-on-accent: #ffffff;
  --on-accent-icon-filter: none;
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-foreground-soft: rgba(0, 0, 0, 0.85);
  --color-foreground-muted: rgba(0, 0, 0, 0.55);
  --color-line: #000000;
  --color-menu-overlay: rgba(0, 0, 0, 0.2);
  --color-glass-strong: rgba(0, 0, 0, 0.2);
  --color-glass-hover: rgba(0, 0, 0, 0.3);
  --color-glass-faint: rgba(0, 0, 0, 0.01);
  --color-spotlight: rgba(255, 255, 255, 0.4);
  --color-track: rgba(0, 0, 0, 0.14);
  --color-border-soft: rgba(0, 0, 0, 0.35);
  --color-muted-label: rgba(0, 0, 0, 0.6);
  --color-preloader-core: #ffffff;
  --color-preloader-glow: rgba(0, 0, 0, 0.07);
  --color-preloader-glow-fade: rgba(0, 0, 0, 0.03);
  --color-viewer-glow: rgba(255, 255, 255, 0.5);
  --color-viewer-backdrop: rgba(255, 255, 255, 0.94);
  --icon-filter: invert(1);
  --search-cancel-filter: none;
  color-scheme: light;

  --background-image-filter: none;
  --background-statue-image-opacity: 0.5;
  --background-statue-overlay: rgba(255, 255, 255, 0.45);
  --background-interior-overlay: rgba(255, 255, 255, 0.86);
}

/*
 * Dokunmatik cihazlar: cam yüzeylerin (backdrop-filter) arkası kaydırmada her karede yeniden bulanıklaştırılır ve
 * maliyet yarıçapla artar. Kartlar, butonlar ve kutular çok olduğu için telefonda yarıçap düşürülür; cam görünümü
 * korunur, kaydırma akıcılaşır.
 */
@media (hover: none) {
  :root {
    --glass-blur: 12px;
  }
}