/* =========================================================================
   TASARIM JETONLARI — "Marmara Kıyısı"          docs/01-TASARIM-SISTEMI.md
   -------------------------------------------------------------------------
   style.css'ten ÖNCE yüklenir. Renk, yarıçap, gölge, boşluk, hareket ve
   mobil taban burada tek yerden tanımlanır. style.css eski değişken adlarını
   (--primary-color vb.) bunlara EŞLER; eski adlar silinmedi.

   Kural: bir renk/boşluk/süre değeri yazacaksan önce buraya bak, uydurma.
   ====================================================================== */

:root{
  /* --- Zemin — sıcak kâğıt, saf beyaz değil. Saf beyaz "şablon" hissi verir. */
  --kagit:        #F7F5F1;
  --kagit-2:      #EFEBE4;
  --yuzey:        #FFFFFF;

  /* --- Mürekkep */
  --murekkep:     #121A21;
  --murekkep-2:   #3B4A57;
  --murekkep-3:   #6B7B88;

  /* --- Marka — mevcut logodan ve afişten türetildi */
  --lacivert:     #0E2A47;
  --lacivert-koyu:#081A2E;
  --lacivert-ac:  #1B4A78;

  /* --- Tek vurgu. Sarı DEĞİL, pirinç. Az kullan: CTA, aktif durum, fiyat. */
  --pirinc:       #B08D46;
  --pirinc-ac:    #D9BC85;

  /* --- Durum */
  --satilik:      #0E2A47;
  --kiralik:      #8A6A1F;
  --basari:       #1F6B4A;
  --hata:         #A3342B;

  --cizgi:        #DCD6CC;
  --cizgi-koyu:   rgba(255,255,255,.14);

  /* --- Yarıçap — tek değer YOK. 0 görsel/harita, 3-6 küçük, 10 kart, 14 modal. */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-tam: 999px;

  /* --- Gölge — sadece YÜZEN öğe için (popup, açılır menü, sticky bar). Kartta gölge yok. */
  --golge-yuzen: 0 8px 24px -8px rgba(14,42,71,.28);
  --golge-modal: 0 24px 64px -16px rgba(8,26,46,.45);

  /* --- Boşluk — 4px tabanlı; ritim için eşit dağıtma */
  --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b6:24px; --b8:32px;
  --b12:48px; --b16:64px; --b24:96px; --b32:128px;

  /* --- Hareket */
  --sure-hizli: 160ms; --sure-orta: 320ms; --sure-yavas: 620ms;
  --egri:       cubic-bezier(.22,.61,.36,1);     /* çıkış — doğal yavaşlama */
  --egri-giris: cubic-bezier(.55,.06,.68,.19);

  /* --- Tipografi (docs/01-TASARIM-SISTEMI.md §4). İkisi de latin-ext içerir. */
  --f-baslik: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-metin:  'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* --- Yerleşim */
  --konteyner: 1240px;
  --kenar: clamp(16px, 4vw, 40px);
  --header-h: 70px;   /* header.php ResizeObserver ile günceller (Faz 2) */
}

/* -------------------------------------------------------------------------
   TİPOGRAFİ TABANI
   Ölçek (clamp boyutları) sayfa sayfa Faz 3/9'da uygulanır; burada sadece
   font aileleri ve okunabilirlik tabanı. Mevcut yerleşimleri bozmasın diye
   boyutlara dokunulmuyor.
   ---------------------------------------------------------------------- */
body{ font-family: var(--f-metin); line-height: 1.62; overflow-wrap: break-word; }
h1,h2,h3,.fiyat{ font-family: var(--f-baslik); font-optical-sizing: auto; }

/* Fiyat = sayfanın en karakterli öğesi. Tabular rakam şart, yoksa zıplar. */
.fiyat{ font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Etiket/üst başlık — versal, geniş aralık. Gövde metnine ASLA uygulama. */
.ust-etiket{ font-family: var(--f-metin); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--murekkep-3); }
@media (max-width: 768px){ .ust-etiket{ font-size: .8125rem; } }   /* mobilde 13px tabanı */

/* -------------------------------------------------------------------------
   §5.1 SAYFA GEÇİŞLERİ — JS'siz, çok sayfalı PHP için ideal
   Chrome 126+ / Safari 18.2+; desteklemeyende sessizce normal gezinme.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation: .22s var(--egri-giris) both vt-cik; }
  ::view-transition-new(root){ animation: .32s var(--egri) both vt-gir; }
}
@keyframes vt-cik{ to{ opacity:0; transform: translateY(-8px) } }
@keyframes vt-gir{ from{ opacity:0; transform: translateY(10px) } }

/* -------------------------------------------------------------------------
   §5.2 GİRİŞTE BELİRME — CSS scroll-driven, JS yok
   Chrome/Edge; Safari/Firefox'ta öğe normal görünür (kaybolmaz — güvenli).
   .belir'i HER ŞEYE değil, bölüm başlıklarına ve ilk kart satırına ver.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .belir{ animation: belir linear both; animation-timeline: view();
            animation-range: entry 8% cover 26%; }
  }
}
@keyframes belir{ from{ opacity:0; transform: translateY(14px) } to{ opacity:1; transform:none } }

/* -------------------------------------------------------------------------
   §5.4 MİKRO-ETKİLEŞİM TABANI
   ---------------------------------------------------------------------- */
/* Buton: hızlı basılma geri bildirimi — mobilde :hover yok, :active var */
.btn{ transition: background var(--sure-hizli) var(--egri), transform var(--sure-hizli); }
.btn:active{ transform: translateY(1px) scale(.995); }

/* Odak: erişilebilirlik + görünüm. outline:none ASLA. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--pirinc); outline-offset: 3px; border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* -------------------------------------------------------------------------
   §7 MOBİL TABANI (her sayfada geçerli)
   ---------------------------------------------------------------------- */
/* 1) Gerçek viewport yüksekliği. 100vh mobilde YALAN söyler. */
.tam-ekran{ min-height: 100vh; min-height: 100dvh; }

/* 2) Çentik/gesture bar güvenliği */
body{ padding-bottom: env(safe-area-inset-bottom); }
.sabit-alt{ bottom: calc(var(--b4) + env(safe-area-inset-bottom)); }

/* 3) Dokunma hedefi — istisnasız */
a,button,select,input[type=submit],[role=button]{ min-height:44px; min-width:44px; }
/* metin içi bağlantılar hariç: */
p a,li a,.metin a,td a,small a,span a{ min-height:auto; min-width:auto; }

/* 4) iOS otomatik zoom'u engelle (BUG-05) + form alanları 44px */
input,select,textarea{ font-size:16px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select{ min-height:44px; }

/* 5) Leaflet atıf çubuğu: 11px metin + 14px bağlantı ölçüm eşiğinin altında kalıyordu.
   OSM atfı lisans gereği kalır; bağlantı 44px dokunma alanı alır. */
.leaflet-control-attribution{ font-size:13px !important; }
.leaflet-control-attribution a{ display:inline-block; min-height:44px; line-height:44px; padding:0 4px; }

/* 6) Onay kutuları/radyolar: dokunma alanı 44px, görünen kutu 22px (BUG-06).
   Sadece mobilde — masaüstünde tarayıcı varsayılanı kalır. */
@media (max-width: 768px){
  input[type=checkbox], input[type=radio]{
    appearance:none; -webkit-appearance:none;
    width:44px; height:44px; margin:-11px; vertical-align:middle; flex-shrink:0;
    display:inline-grid; place-content:center; cursor:pointer; background:transparent;
  }
  input[type=checkbox]::before, input[type=radio]::before{
    content:""; width:22px; height:22px; border:2px solid var(--murekkep-3);
    border-radius:4px; background:var(--yuzey); box-sizing:border-box;
  }
  input[type=radio]::before{ border-radius:50%; }
  input[type=checkbox]:checked::before, input[type=radio]:checked::before{
    background:var(--lacivert); border-color:var(--lacivert); box-shadow: inset 0 0 0 4px var(--yuzey);
  }
}

/* Satır içi bağlantıya 44px dokunma alanı, satır aralığını BOZMADAN:
   inline-block + 11px dikey padding + aynı miktarda negatif margin → kenar kutusu
   44px (tıklanabilir), margin kutusu 22px (satır kutusu değişmez). */
.dokun, .metin a, .blog-post p a, .blog-post li a, .blog-breadcrumb a{
  display:inline-block; padding:11px 0; margin:-11px 0; line-height:22px; vertical-align:baseline;
}

/* Görsel olarak gizli, ekran okuyucuya açık (harita h1, form etiketleri) */
.gorsel-gizli{
  position:absolute !important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}