/* ═══════════════════════════════════════════════════════════════════════════
   chilliyo vitrin stili — EL YAZIMI CSS (F0 kararı: npm'siz kalıyoruz;
   Tailwind v4 standalone CLI F1'de gelir — docs/tasarim/03 §3.1).
   Tasarım token'ları marka raporundaki Palet A. Fontlar self-host edilene dek
   (KVKK: Google Fonts CDN yok) sistem yığını.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --chill: #0E9384;        /* birincil; beyaz üstü AA */
  --chill-dark: #0B5E57;   /* başlık/koyu vurgu */
  --chilli: #F0522F;       /* aksan: SADECE ikon/rozet/büyük başlık/buton zemini */
  --chilli-text: #D8391C;  /* küçük metinde aksan (AA) */
  --chilli-light: #FF7A4D; /* açık chilli tint — dekoratif (harita pin vurgusu, @theme ile aynalı) */
  --mint: #ECFDF7;         /* sayfa/kart zemini */
  --mint-line: #CFF3E9;    /* ayraç */
  --ink: #0F172A;          /* gövde metni */
  --muted: #64748B;        /* ikincil metin */

  --font-govde: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-govde);
  color: var(--ink);
  background: var(--mint);
}

body {
  margin: 0;
  min-height: 100vh;
}

/* ── Erişilebilirlik: programatik başlık odağı ───────────────────────────
   FocusOnNavigate (Routes.razor) her gezinmede h1'e odak verir — klavye ve
   ekran okuyucu kullanıcısı yeni sayfanın başına taşınsın diye. h1 interaktif
   bir öğe DEĞİL; tarayıcının çizdiği odak halkası "yazı seçili" gibi görünen
   görsel gürültü. Yalnız başlıklarda halka bastırılır — interaktif öğelerin
   (a/button/input) focus-visible halkasına DOKUNMA (a11y). */
h1:focus,
h1:focus-visible {
  outline: none;
}

/* ── Kategori şeridi (Home) ─────────────────────────────────────────────────
   Yatay kaydırmalı şerit: scrollbar görsel gürültü — gizlenir (içerik yine
   kaydırılabilir: dokunma/tekerlek/klavye çalışır, scroll-snap hizalar). */
.kategori-serit {
  scrollbar-width: none; /* Firefox */
}

.kategori-serit::-webkit-scrollbar {
  display: none; /* WebKit/Blink */
}

/* ── Vitrin iskeleti ─────────────────────────────────────────────────────── */

.vitrin {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.icerik {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ── Üst bar ─────────────────────────────────────────────────────────────── */

/* Tam genişlik beyaz bant — logo webp'nin beyaz zemini sayfayla kaynaşsın
   (mint üstünde beyaz kutu olarak sırıtıyordu). İçerik .ustbar'da hizalı. */
.ustbar-zemin {
  background: #fff;
  border-bottom: 1px solid var(--mint-line);
}

.ustbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 68rem;
  margin: 0 auto;
  width: 100%;
  padding: 0.9rem 1.25rem;
}

/* Metin marka yerini logo görseline bıraktı (F1) — flex yalnız dikey hizalar. */
.marka {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.marka img {
  display: block;
  height: 40px;
  width: auto;
}

.ustbar-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.ustbar-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.ustbar-nav a:hover {
  color: var(--chill-dark);
}

.cikis-formu {
  display: inline;
  margin: 0;
}

/* Form içindeki "çıkış" butonu bağlantı gibi görünür (PRG deseni gereği form). */
.baglanti-buton {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.baglanti-buton:hover {
  color: var(--chilli-text);
}

/* ── Butonlar ────────────────────────────────────────────────────────────── */

.buton {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
}

.buton-birincil {
  background: var(--chill);
  color: #fff;
}

.buton-birincil:hover {
  background: var(--chill-dark);
}

/* Chilli zemin: yalnız büyük CTA'da (küçük gövde metninde chilli YASAK — marka kuralı). */
.buton-vurgu {
  background: var(--chilli);
  color: #fff;
}

.buton-vurgu:hover {
  background: var(--chilli-text);
}

.buton-buyuk {
  padding: 0.85rem 1.8rem;
  font-size: 1.15rem;
  border-radius: 0.8rem;
}

/* ── Ana sayfa ───────────────────────────────────────────────────────────── */

.kahraman {
  text-align: center;
  padding: 4rem 1rem 3rem;
}

.kahraman h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--chill-dark);
  margin: 0 0 1rem;
}

.kahraman-alt {
  max-width: 38rem;
  margin: 0 auto 2rem;
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.6;
}

.ozellikler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  padding: 1rem 0 2rem;
}

.ozellik-karti {
  background: #fff;
  border: 1px solid var(--mint-line);
  border-radius: 1rem;
  padding: 1.5rem;
}

.ozellik-karti h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--chill-dark);
}

.ozellik-karti p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Formlar (giriş/kayıt/hesap kutusu) ──────────────────────────────────── */

.form-kutusu {
  max-width: 26rem;
  margin: 2.5rem auto;
  background: #fff;
  border: 1px solid var(--mint-line);
  border-radius: 1rem;
  padding: 2rem;
}

.form-kutusu h1 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--chill-dark);
}

.form-aciklama {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.kimlik-formu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kimlik-formu label {
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 0.6rem;
}

.kimlik-formu input {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mint-line);
  border-radius: 0.5rem;
  font: inherit;
  background: var(--mint);
}

.kimlik-formu input:focus {
  outline: 2px solid var(--chill);
  outline-offset: 1px;
  background: #fff;
}

.kimlik-formu .buton {
  margin-top: 1.1rem;
}

.form-ipucu {
  color: var(--muted);
  font-size: 0.85rem;
}

.form-notu {
  margin: 1.1rem 0 0;
  font-size: 0.92rem;
}

.form-notu a {
  color: var(--chill-dark);
  font-weight: 600;
}

/* Hata bildirimi — kırmızımsı chilli metin tonu (AA), renk + ikonsuz sade kutu. */
.bildirim-hata {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--chilli-text);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

/* ── Alt bilgi ───────────────────────────────────────────────────────────── */

/* ⚠️ ÖLÜ KOD (F6'da silinecek): MainLayout footer'ı Tailwind utility'lerine
   taşındı — .altbilgi/.altbilgi p artık hiçbir bileşende kullanılmıyor.
   Kademeli geçiş kuralı gereği şimdilik yerinde bırakıldı (bilinçli). */
.altbilgi {
  border-top: 1px solid var(--mint-line);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1.25rem 1rem;
}

.altbilgi p {
  margin: 0;
}

/* ── F1 harita ───────────────────────────────────────────────────────────
   chilliyo-map.js'in görsel sözleşmesi: pin damlası, rozet, vurgu sınıfları,
   mobil tam ekran ve alt kart. Leaflet çekirdek stili lib/leaflet'te. */

#chilliyo-harita {
  width: 100%;
  height: 100%;
}

/* Chill damla: daire + 45° döndürülmüş alt köşe (kuyruk). divIcon kapsülü
   (.harita-pin-kapsul) Leaflet'in konumladığı kök öğedir. */
.harita-pin-kapsul {
  background: none;
  border: none;
}

.harita-pin {
  display: block;
  width: 28px;
  height: 28px;
  background: var(--chill);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}

/* Etkinlik sayısı rozeti — chilli yalnız rozet/ikon kullanımına izinli. */
.harita-pin-rozet {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  padding: 1px 4px;
  background: var(--chilli);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Pin vurgusu (karta hover) — büyüt + açık chilli; sınıf marker köküne gelir. */
.harita-pin-kapsul.harita-pin-vurgu {
  z-index: 1000 !important; /* Leaflet satır-içi z-index'ini ancak !important ezer */
}

.harita-pin-kapsul.harita-pin-vurgu .harita-pin {
  transform: rotate(-45deg) scale(1.3);
  background: var(--chilli-light);
}

/* Kart vurgusu (pine hover/tık) — kart data-venue-id köküne gelir. */
.kart-vurgu {
  outline: 3px solid var(--chill);
  outline-offset: 2px;
}

.harita-popup strong {
  display: block;
  color: var(--chill-dark);
}

.harita-popup-semt {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.35rem;
}

.harita-popup a {
  color: var(--chill);
  font-weight: 700;
}

/* Mobil "Haritayı Göster" — sabit sağ alt; 1024px (lg) üstünde harita zaten
   sütunda görünür, düğme gizlenir. */
#harita-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 50;
  background: var(--chill);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#harita-toggle:hover {
  background: var(--chill-dark);
}

@media (min-width: 1024px) {
  #harita-toggle {
    display: none;
  }
}

/* Mobil tam ekran: id seçicisi Tailwind .hidden (display:none) sınıfını
   özgüllükle ezer — sarıcı fixed kaplama olur, gövde kaydırması kilitlenir. */
@media (max-width: 1023.98px) {
  body.harita-acik {
    overflow: hidden;
  }

  body.harita-acik #kesfet-harita-sarici {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #fff;
  }
}

/* Alt kart (bottom sheet) — pin dokunuşunda alttan kayar; chilliyo-map.js
   yaratır ve .acik sınıfıyla açar, harita zeminine dokunmak kapatır. */
#harita-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
  padding: 1.25rem 1.25rem 1.5rem;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

#harita-sheet.acik {
  transform: translateY(0);
}

#harita-sheet h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--chill-dark);
}

#harita-sheet p {
  margin: 0.25rem 0 0.9rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  #harita-sheet {
    transition: none;
  }

  .harita-pin {
    transition: none;
  }
}

/* ── Blazor hata şeridi (şablon geleneği) ────────────────────────────────── */

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Kart kategori aksanı + bilet koçanı (tasarım turu — "Tarih Çapası" yönü).
   İLKE: TÜM renk çeşitliliği aria-hidden DEKORATİF katmanda (üst şerit + tarih
   paneli zemini + filigran) yaşar; kartın metni SABİT AA paletinde (chill-dark/
   ink) kalır → per-kategori canlılık + sıfır AA riski. Renk dinamik olduğundan
   Tailwind arbitrary bg-[#..] KULLANILMADI (C#-üretimi sınıf taranamaz); literal
   site.css [data-kategori] seçicileri custom prop miras ettirir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Üst aksan şeridi — kapaklı VE kapaksız kartlara kategori kimliği (3px).
   .kart-aksan article'ı relative + overflow-hidden olmalı (markup'ta var). */
.kart-aksan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0; /* üst kenar tam genişlik */
  height: 3px;
  z-index: 2; /* görsel/panel üstünde */
  background: var(--kat-accent, var(--chill));
}

/* Kapaksız etkinlik kartı: tarih paneli zemini + kategori filigranı. */
.tarih-paneli { background: var(--kat-bg, var(--mint)); }
.tarih-paneli .kat-filigran { color: var(--kat-accent, var(--chill)); }

/* 10 kategori — mint/teal ailesi; standup/tadim/film YALNIZ dekoratif katmanda
   sıcak (chilli) fısıltı accent'i ("serin mekân, sıcak muhabbet"). Panel metni
   hep chill-dark → her zeminde ≥7:1. Sıcak accent'ler HİÇBİR metinde kullanılmaz. */
[data-kategori="cat-muzik"]   { --kat-bg:#E8F7F1; --kat-accent:#0E9384; }
[data-kategori="cat-standup"] { --kat-bg:#FBF1EC; --kat-accent:#C2410C; }
[data-kategori="cat-oyun"]    { --kat-bg:#E4F4F5; --kat-accent:#0C7C86; }
[data-kategori="cat-atolye"]  { --kat-bg:#ECF6E9; --kat-accent:#4F8F3A; }
[data-kategori="cat-soylesi"] { --kat-bg:#E9F6F2; --kat-accent:#0B5E57; }
[data-kategori="cat-kitap"]   { --kat-bg:#EDF5EC; --kat-accent:#3E8560; }
[data-kategori="cat-quiz"]    { --kat-bg:#E6F2F4; --kat-accent:#0C7C86; }
[data-kategori="cat-tadim"]   { --kat-bg:#FBF3EC; --kat-accent:#C2410C; }
[data-kategori="cat-sahne"]   { --kat-bg:#E7F4F1; --kat-accent:#0E9384; }
[data-kategori="cat-film"]    { --kat-bg:#FAF1ED; --kat-accent:#B23A22; }

/* Bilet koçanı: perforasyon + delinmiş kenar (gerçek custom davranış).
   Koçan (mint stub) gövdeden kesikli hatla ayrılır; hat uçlarındaki sayfa-zemini
   renkli yarım daireler "delinmiş" hissi verir. <li class="bilet-kocan"> üstündeki
   overflow-hidden dış yarıyı kırpar → içeride temiz ısırık (sayfa zeminine bağımsız).
   Mobil: üst kesik hat; sm+: sol kesik hat. */
.bilet-perforasyon {
  position: relative;
  border-top: 2px dashed var(--mint-line);
}

.bilet-perforasyon::before,
.bilet-perforasyon::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint);
  border: 1px solid var(--mint-line);
}

.bilet-perforasyon::before { left: -10px; }
.bilet-perforasyon::after { right: -10px; }

@media (min-width: 640px) {
  .bilet-perforasyon {
    border-top: none;
    border-left: 2px dashed var(--mint-line);
  }

  .bilet-perforasyon::before { left: -10px; top: -10px; right: auto; }
  .bilet-perforasyon::after { left: -10px; top: auto; bottom: -10px; right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TUR 4 — Ana Sayfa + Keşfet görsel cila: kafe isim levhası + kapak medyası +
   tarih paneli derinliği + hayalet buton. İLKE (öncekiyle aynı): renk yalnız
   dekoratif katmanda; metin sabit AA paletinde. Renkler literal (Tailwind
   dinamik bg-[#..] taramaz → C# yalnız sınıf adı seçer).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kafe isim levhası (kapaksız mekân) — derin teal nameplate ──────────────
   Kafe adı büyük beyaz display olarak masthead; boşluk kimliğe döner. Küçük
   beyaz metin (District overline) YALNIZ koyu üst bölgede; büyük beyaz ad her
   uçta ≥3:1 (AA large). Id-hash 4 varyant → grid monotonluğu kırılır.
   İnce beyaz nokta dokusu (::after) yüzeye "kâğıt" dokusu verir. */
.mekan-levha { position: relative; }

.mekan-levha::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
  background-size: 14px 14px;
}

.mekan-levha-1 { background: linear-gradient(135deg, #0B5E57, #0E9384); }
.mekan-levha-2 { background: linear-gradient(140deg, #0B5E57, #0C7C86); }
.mekan-levha-3 { background: linear-gradient(135deg, #0A4F49, #12897C); }
.mekan-levha-4 { background: linear-gradient(150deg, #0C7C86, #0B5E57); }

/* ── Kapak medyası (EventCard + VenueCard foto dalı) ────────────────────────
   Koyu stok fotoyu aydınlat + kategori-accent alt yıkaması: koyuluk aşağıda
   renge döner, grid canlanır (--kat-accent yoksa teal fallback). Üst ışıltı
   legibilite; motion-safe hover-zoom. Metin (tarih çipi/rozet) sarıcının
   ÜSTÜNDE kendi zeminini taşır — yıkama arkada kalır. */
.kapak-medya { position: relative; overflow: hidden; }

.kapak-medya img {
  display: block;
  filter: saturate(1.06) brightness(1.04);
  transition: transform .3s ease;
}

.kapak-medya::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%);
}

.kapak-medya::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--kat-accent, var(--chill)) 38%, transparent) 0%,
    transparent 42%);
}

@media (prefers-reduced-motion: no-preference) {
  .kart-aksan:hover .kapak-medya img { transform: scale(1.04); }
}

/* ── Tarih paneli derinlik cilası (kapaksız etkinlik kartı — skeleton aynı) ── */
.tarih-paneli {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--kat-bg, var(--mint)) 55%, #fff),
    var(--kat-bg, var(--mint)));
}

.tarih-paneli::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--kat-accent, var(--chill)) 22%, transparent);
}

/* ── Hayalet (ikincil) buton — mint zeminde AA: beyaz zemin + chill-dark metin ── */
.buton-hayalet {
  background: #fff;
  color: var(--chill-dark);
  border: 1px solid var(--mint-line);
}

.buton-hayalet:hover {
  border-color: var(--chill);
  background: var(--mint);
}