/* Nocturne tokens, retuned to the system's own light end of the ramps:
     same accent hue, same radii and spacing scale, light ground. */
  :root {
    --color-bg: #fbfbfd;
    --color-surface: #ffffff;
    --color-text: #22242c;
    --color-accent: #a83531;
    --color-divider: color-mix(in srgb, #22242c 11%, transparent);
    --shadow-sm: 0 0 0 1px color-mix(in srgb, #22242c 8%, transparent);
    --shadow-md: 0 0 0 1px color-mix(in srgb, #22242c 8%, transparent), 0 10px 30px -12px rgba(34,36,44,0.18);
    --shadow-lg: 0 0 0 1px color-mix(in srgb, #22242c 10%, transparent), 0 26px 60px -20px rgba(34,36,44,0.22);
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
  a { color: var(--color-accent); }
  a:hover { color: #832823; }
  ::placeholder { color: color-mix(in srgb, var(--color-text) 34%, transparent); }
  select.input { appearance: none; background-image: none; }
  .btn { white-space: nowrap; }
  details summary::-webkit-details-marker { display: none; }
  details summary { list-style: none; }
  /* scroll reveal — JS adds .om-in; a mount-time fallback reveals everything if JS is idle */
  [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.75s cubic-bezier(0.22,0.61,0.36,1), transform 0.75s cubic-bezier(0.22,0.61,0.36,1); }
  [data-reveal].om-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
  }
  @media (max-width: 980px) {
    .om-grid-2, .om-grid-3, .om-grid-4, .om-grid-5 { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
    .om-grid-4, .om-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
    .om-row { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    .om-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
    .om-hero-h1 { font-size: 40px !important; }
    .om-page-h1 { font-size: 36px !important; }
    .om-h2 { font-size: 30px !important; }
    .om-interlude { font-size: 34px !important; }
    .om-grid-3.om-figs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
    .om-grid-hair { gap: 1px !important; }
    .om-tiles { gap: 0 !important; }
    .nav { gap: 20px !important; }
    .om-nav-links { gap: 18px !important; font-size: 13px !important; }
    .om-ph { aspect-ratio: auto !important; height: 260px !important; }
    .om-ph-hero { height: 420px !important; }
    .om-guides { display: none !important; }
  }
  @media (max-width: 760px) {
    .om-nav-links { display: none !important; }
    .om-grid-3.om-figs { grid-template-columns: minmax(0, 1fr) !important; }
    .om-mobile-cta { display: flex !important; }
    .om-hero-h1 { font-size: 34px !important; }
  }
  @media (max-width: 560px) {
    .om-grid-4, .om-grid-5 { grid-template-columns: minmax(0, 1fr) !important; }
  }

/* hover states lifted out of the canvas' style-hover attributes */
.om-hv-1:hover { transform:translateY(-6px);box-shadow:var(--shadow-md); }
.om-hv-2:hover { box-shadow:var(--shadow-md); }

/* Marka adı hiçbir genişlikte iki satıra bölünmesin. */
.om-brand { white-space: nowrap; }

/* --- static-site additions (page routing, lightbox, search) --- */
.om-page[hidden] { display: none !important; }
#om-lightbox[hidden] { display: none !important; }
#om-lightbox .dialog-backdrop { display: flex; }
.om-mal-hidden { display: none !important; }

/* =====================================================================
   Mobil düzeltmeleri

   Tasarım masaüstü için kurgulanmıştı: üst bölüm sabit yükseklikli bir kutu
   (640px) ve içeriği position:absolute. Dar ekranda içerik kutudan uzun
   olunca overflow:hidden üstten ve alttan kırpıyordu. Gradyan da 90deg
   yataydı — metnin solda kaldığı varsayımıyla; mobilde metin tam genişlik
   kaplayınca fotoğrafın üstünde okunmaz hale geliyordu.
   ===================================================================== */
@media (max-width: 760px) {
  /* Yüksekliği içerik belirlesin, görsel arkada kalsın. */
  .om-ph-hero { height: auto !important; }
  .om-hero-content {
    position: relative !important;
    z-index: 2;
    display: block !important;
  }
  /* Metin fotoğrafın her yerinde okunsun diye dikey ve daha kapatıcı perde. */
  .om-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(251, 251, 253, 0.95) 0%,
      rgba(251, 251, 253, 0.88) 40%,
      rgba(251, 251, 253, 0.93) 100%
    ) !important;
  }
  .om-hero-content .om-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .om-hero-h1 { max-width: none !important; }

  /* Üst bar: marka iki satıra kırılıyordu. Alt çubukta zaten WhatsApp
     düğmesi olduğu için üsttekini kaldırıyoruz, yer açılıyor. */
  .nav { gap: 16px !important; padding: 14px 0 !important; }
  .om-nav-cta { display: none !important; }
  header > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* Sabit alt çubuk sayfanın sonunu örtmesin. */
  body { padding-bottom: 76px; }

  /* Katalog kutuları 3 sütunda çok dar kalıyordu. */
  .om-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Tablo taşmasın, kendi içinde kaysın. */
  .table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
  .om-hero-h1 { font-size: 30px !important; }
  .om-tiles { grid-template-columns: minmax(0, 1fr) !important; }
  .om-section { padding-left: 18px !important; padding-right: 18px !important; }
}