/* ==========================================================================
   TEO — Mobil uygulama görünümü (neomorphism)

   Yalnızca ≤767px'te devreye girer; masaüstü görünümü hiç değişmez.
   Aynı URL, aynı HTML, aynı içerik — yalnızca sunum katmanı.

   Geri alma: sayfalardan bu dosyanın <link> satırını çıkarmak yeterli.
   Alt tab bar da bu dosyanın varlığına bakar, link yoksa hiç çalışmaz.
   ========================================================================== */

@media (max-width: 767px) {
  :root{
    --nm-base: oklch(94% .008 85);
    --nm-lo:   oklch(80% .012 85 / .72);
    --nm-hi:   oklch(100% 0 0 / .92);
    --nm-out:    6px 6px 14px var(--nm-lo), -6px -6px 14px var(--nm-hi);
    --nm-out-sm: 3px 3px 8px  var(--nm-lo), -3px -3px 8px  var(--nm-hi);
    --nm-in:     inset 4px 4px 9px var(--nm-lo), inset -4px -4px 9px var(--nm-hi);
    --nm-flat:   2px 2px 5px oklch(82% .012 85 / .5), -2px -2px 5px oklch(100% 0 0 / .7);
    --nm-r:      20px;
    --nm-r-sm:   15px;
    --nm-gold-aa: oklch(50% .11 74);   /* zemin üzerinde 5.13:1 — WCAG AA */
    --nm-tabbar-h: 68px;
  }

  /* ── 1. Zemin ────────────────────────────────────────────────────────────
     Neomorphism'in temel kuralı: yüzey ile zemin aynı renkte olmalı,
     derinlik yalnızca gölgeden gelir. Kartların cream/white zemini bu yüzden
     taban renge çekiliyor. */
  body{
    background: var(--nm-base) !important;
    padding-bottom: calc(var(--nm-tabbar-h) + env(safe-area-inset-bottom)) !important;
  }
  section[class*="bg-stone"],
  section[class*="bg-cream"]{ background: var(--nm-base) !important; }

  /* ── 1b. Yatay taşma ─────────────────────────────────────────────────────
     Sitede bu deriden önce de var olan bir hata: bir grid konteyneri 464px
     genişken grid-template-columns tek bir 1856px'lik kolon üretiyordu, çünkü
     grid ve flex çocukları varsayılan olarak min-width:auto taşır ve içerik
     min-content'in altına inmeyi reddeder. Sonuç: mobilde sayfa yana kayıyor
     (Google bunu "içerik ekrandan geniş" olarak da işaretler).
     min-width:0 standart çözümü; kolon sayısına dokunmaz. Ölçüm: doküman
     genişliği 1874px → 500px, 2'li kart ızgarası 2 kolon olarak korunuyor. */
  [class*="grid"] > *,
  [class*="flex"] > *{ min-width: 0 !important; }

  /* ── 2. Dikey ritim ──────────────────────────────────────────────────────
     Masaüstü için 80-96px olan bölüm boşlukları mobilde çok yer kaplıyor. */
  section[class*="py-24"]{ padding-top:44px !important; padding-bottom:44px !important; }
  section[class*="py-20"]{ padding-top:40px !important; padding-bottom:40px !important; }
  section[class*="py-16"]{ padding-top:34px !important; padding-bottom:34px !important; }
  [class*="max-w-7xl"]{ padding-left:18px !important; padding-right:18px !important; }
  [class*="mb-24"]{ margin-bottom:34px !important; }
  [class*="p-10"]{ padding:20px !important; }

  /* ── 3. Hero ─────────────────────────────────────────────────────────────
     Alt köşeleri yuvarlanınca sayfa "kart yığını" hissi kazanıyor. */
  section[class*="min-h-[70vh]"]{
    min-height: 60vh !important;
    border-radius: 0 0 26px 26px !important;
    overflow: hidden !important;
  }
  [class*="text-4xl"][class*="md:text-6xl"]{ font-size: 34px !important; line-height: 1.08 !important; }

  /* ── 4. Kartlar ──────────────────────────────────────────────────────────
     Sitedeki tüm kart varyantları: hizmet kartı, rezervasyon adımı,
     hakkımızda kutusu, iletişim kartı. Hepsi kenarlıktan gölgeye geçiyor. */
  a[class*="border-gold/25"],
  a[class*="border-charcoal/15"],
  div[class*="border-gold/25"],
  div[class*="border-charcoal/15"],
  div[class*="border-charcoal/10"],
  button[class*="border-charcoal/10"],
  [class*="bg-white"][class*="border-charcoal/8"]{
    background: var(--nm-base) !important;
    border: 0 !important;
    border-radius: var(--nm-r) !important;
    box-shadow: var(--nm-out-sm) !important;
    overflow: hidden !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
  }
  a[class*="border-gold/25"]:active,
  a[class*="border-charcoal/15"]:active,
  button[class*="border-charcoal/10"]:active{
    box-shadow: var(--nm-in) !important;
    transform: scale(.985);
  }

  /* Kart gövdesi ve tipografi */
  [class*="p-5"][class*="flex-col"]{ padding: 13px 14px 15px !important; }
  [class*="p-6"]{ padding: 16px !important; }
  [class*="font-serif"][class*="text-lg"]{ font-size: 14px !important; line-height: 1.3 !important; }
  [class*="text-[12.5px]"]{ font-size: 11.5px !important; line-height: 1.5 !important; }
  [class*="tracking-[0.25em]"][class*="text-gold"]{ font-size: 9px !important; margin-top: 11px !important; }

  /* ── 5. Görseller ────────────────────────────────────────────────────────
     Kart içindeki görsel üst köşeleri, tek başına duran görsel dört köşeyi
     yuvarlar. Galeri masonry öğeleri ayrı ele alınıyor. */
  [class*="aspect-[4/3]"]:not([class*="mb-"]),
  [class*="aspect-[4/5]"]:not([class*="mb-"]){
    border-radius: var(--nm-r) var(--nm-r) 0 0 !important;
    overflow: hidden !important;
  }
  [class*="aspect-[4/3]"][class*="mb-"],
  [class*="aspect-[4/5]"][class*="mb-"]{
    border-radius: var(--nm-r) !important;
    overflow: hidden !important;
    box-shadow: var(--nm-out-sm) !important;
  }
  /* Galeri: masonry kolonları */
  [class*="break-inside-avoid"]{
    border-radius: var(--nm-r) !important;
    overflow: hidden !important;
    box-shadow: var(--nm-out-sm) !important;
    margin-bottom: 12px !important;
  }

  /* Kart rozeti: keskin kare yerine yumuşak ada */
  [class*="top-3"][class*="left-3"][class*="w-9"],
  [class*="top-4"][class*="left-4"][class*="bg-cream/95"]{
    border-radius: 11px !important;
    box-shadow: 0 3px 10px oklch(20% 0 0 / .22) !important;
  }

  /* İkon çipleri (iletişim, hakkımızda) */
  [class*="bg-gold/10"][class*="w-10"]{
    border-radius: 12px !important;
    box-shadow: var(--nm-flat) !important;
    background: var(--nm-base) !important;
  }

  /* ── 6. Izgara ───────────────────────────────────────────────────────────*/
  [class*="grid-cols-2"]{ gap: 12px !important; }

  /* ── 7. Butonlar ─────────────────────────────────────────────────────────
     w-9/w-16 hariç tutuluyor: onlar rozet ve ikon, buton değil. */
  a[class*="bg-gold"]:not([class*="w-9"]):not([class*="w-10"]):not([class*="w-16"]):not([class*="h-px"]),
  button[class*="bg-gold"]:not([class*="w-9"]):not([class*="w-10"]):not([class*="w-16"]){
    border-radius: var(--nm-r-sm) !important;
    box-shadow: var(--nm-out-sm) !important;
    border: 0 !important;
  }
  a[class*="bg-gold"]:not([class*="w-9"]):not([class*="w-16"]):active,
  button[class*="bg-gold"]:not([class*="w-9"]):not([class*="w-16"]):active{
    box-shadow: var(--nm-in) !important; transform: scale(.985);
  }
  a[class*="bg-charcoal"][class*="px-"]:not([class*="w-6"]),
  button[class*="bg-charcoal"][class*="px-"]{
    border-radius: var(--nm-r-sm) !important;
    box-shadow: var(--nm-out-sm) !important;
    border: 0 !important;
  }

  /* ── 8. Form alanları: içe gömülü ────────────────────────────────────────*/
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea{
    border: 0 !important;
    border-radius: var(--nm-r-sm) !important;
    background: var(--nm-base) !important;
    box-shadow: var(--nm-in) !important;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 3px solid var(--nm-gold-aa) !important; outline-offset: 1px;
  }

  /* ── 9. Blog yazısı okunabilirliği ───────────────────────────────────────*/
  [class*="leading-[1.9]"][class*="text-[16px]"]{ font-size: 15.5px !important; line-height: 1.75 !important; }
  [class*="font-serif"][class*="text-3xl"]{ font-size: 21px !important; }

  /* ══ 10. Statik sayfalar (teo-knowledge-v1.css kullanan bilgi merkezi,
         lokasyon, basın odası vb. — bunlar React değil, ayrı markup) ══════*/
  .site-head{ background: var(--nm-base) !important; }
  .hero{ border-radius: 0 0 26px 26px !important; }
  .card, .info, .toc{
    background: var(--nm-base) !important;
    border: 0 !important;
    border-radius: var(--nm-r) !important;
    box-shadow: var(--nm-out-sm) !important;
  }
  .card:active{ box-shadow: var(--nm-in) !important; transform: scale(.985); }
  .btn{
    border: 0 !important;
    border-radius: var(--nm-r-sm) !important;
    box-shadow: var(--nm-out-sm) !important;
  }
  .btn:active{ box-shadow: var(--nm-in) !important; transform: scale(.985); }
  .faq details{
    background: var(--nm-base) !important;
    border: 0 !important;
    border-radius: var(--nm-r-sm) !important;
    box-shadow: var(--nm-out-sm) !important;
    padding: 4px 14px !important;
    margin-bottom: 10px !important;
  }
  .footer{ background: var(--nm-base) !important; }

  /* ══ 11. Anasayfa hızlı aksiyonları — seo-runtime.js enjekte eder ═══════
     Hero'nun hemen altında 2×2 kısayol ızgarası. */
  #teo-quick{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    padding: 18px 18px 0;
    background: var(--nm-base);
    margin-top: -22px; position: relative; z-index: 5;
    border-radius: 26px 26px 0 0;
    padding-top: 22px;
  }
  #teo-quick a{
    display: flex; align-items: center; gap: 11px; padding: 13px;
    border-radius: var(--nm-r-sm); background: var(--nm-base);
    box-shadow: var(--nm-out-sm); text-decoration: none;
    color: oklch(19% .005 285); transition: box-shadow .18s, transform .18s;
  }
  #teo-quick a:active{ box-shadow: var(--nm-in); transform: scale(.985); }
  #teo-quick a:focus-visible{ outline: 3px solid var(--nm-gold-aa); outline-offset: 2px; }
  #teo-quick .qi{
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(140deg, oklch(75% .11 76), oklch(86% .08 82));
    color: oklch(22% .03 74);
  }
  #teo-quick .qi svg{ width: 18px; height: 18px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #teo-quick .qt{ min-width: 0; }
  #teo-quick strong{ display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
  #teo-quick em{ display: block; font-style: normal; font-size: 9.5px;
    color: oklch(42% .01 285); margin-top: 2px; line-height: 1.3; }
  /* Hero köşesi hızlı aksiyon bloğuyla birleşiyor, kendi yuvarlatması gereksiz */
  section#top{ border-radius: 0 !important; }

  /* ══ 12. Alt tab bar — seo-runtime.js enjekte eder ═══════════════════════*/
  #teo-tabbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--nm-base);
    border-top: 1px solid oklch(87% .008 85);
    padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px);
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  }
  #teo-tabbar a{
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 2px 4px; border-radius: 14px; text-decoration: none;
    color: oklch(42% .01 285); font-size: 9.5px; font-weight: 600; line-height: 1.15;
    text-align: center; transition: color .2s;
  }
  #teo-tabbar .tw{
    width: 40px; height: 32px; border-radius: 12px;
    display: grid; place-items: center; transition: box-shadow .22s;
  }
  #teo-tabbar svg{ width: 19px; height: 19px; stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  #teo-tabbar a[aria-current="page"]{ color: var(--nm-gold-aa); }
  #teo-tabbar a[aria-current="page"] .tw{ box-shadow: var(--nm-in); }
  #teo-tabbar a.teo-tab-cta .tw{
    background: linear-gradient(140deg, oklch(75% .11 76), oklch(86% .08 82));
    color: oklch(22% .03 74);
    box-shadow: var(--nm-out-sm);
  }
  #teo-tabbar a:focus-visible{ outline: 3px solid var(--nm-gold-aa); outline-offset: 2px; }

  /* Sayfa footer'ı ile tab bar arasında nefes payı */
  footer{ margin-bottom: 6px !important; }

  /* Sağ alttaki yüzen iletişim/erişilebilirlik kolonu tab bar'ın üstüne çıksın.
     Bu kolon Tailwind yardımcı sınıfı değil, kendi sınıfını (.teo-utility-rail)
     kullanıyor; sadece [class*="bottom-"] hedeflemek onu kaçırıyordu ve telefon
     ikonu "İletişim" sekmesinin üstüne biniyordu. */
  .teo-utility-rail,
  [class*="fixed"][class*="bottom-"]:not(#teo-tabbar){
    bottom: calc(var(--nm-tabbar-h) + env(safe-area-inset-bottom) + 10px) !important;
  }

  /* Anasayfa hero'su 92vh + min 620px; tab bar eklenince alttaki rezervasyon
     butonları çubuğun arkasında kalıyordu. Viewport'a göre ölçülen bir yükseklik
     body'nin padding'ini dikkate almaz, o yüzden çubuk payı doğrudan buradan
     düşülüyor. */
  /* --nm-tabbar-h is the content box; with padding the bar renders ~74px, and
     the hero's own copy card sits flush against the hero's bottom edge. 84px
     clears the bar with a small breathing gap -- measured, not guessed. */
  section#top{
    height: calc(92vh - 84px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 520px !important;
  }

  @media (prefers-reduced-motion: reduce){
    #teo-tabbar a, #teo-tabbar .tw,
    a[class*="border-gold/25"], a[class*="border-charcoal/15"],
    .card, .btn{ transition: none !important; }
  }
}

/* ── Masaüstünde gizlenenler ──────────────────────────────────────────────
   seo-runtime.js hem alt tab bar'ı hem hero altındaki hızlı aksiyon ızgarasını
   viewport'a bakmadan enjekte ediyor; tek kapısı bu dosyanın <link>'inin sayfada
   olması. İkisinin de bütün biçimlendirmesi yukarıdaki max-width:767px bloğunun
   içinde. #teo-tabbar burada gizleniyordu, #teo-quick unutulmuştu: masaüstünde
   ızgara stilsiz kalıyor, viewBox'lı SVG'ler kendi varsayılan boyutlarına
   şişiyor ve slider'ın hemen altına 4 × 1462px = 5856px'lik boş bir blok
   giriyordu (1440px viewport'ta ölçüldü). İkisi de aynı kurala alındı. */
@media (min-width: 768px){
  #teo-tabbar,
  #teo-quick{ display: none !important; }
}