/* ======================================================================
   Tokat'ım — Mobil PWA stilleri
   Tema: bakır/terracotta + krem (Tokat el sanatlarından ilham)
   ====================================================================== */

:root {
  --bakir: #B4531F;
  --bakir-koyu: #8A3D14;
  --bakir-acik: #D9843F;
  --safran: #E0A82E;
  --krem: #F7F1E7;
  --krem-koyu: #EFE6D5;
  --zemin: #FBF7F0;
  --kart: #FFFFFF;
  --kart2: #F2ECE0;
  --metin: #2A2019;
  --metin-soluk: #7A6B5D;
  --cizgi: #E8DFD2;
  --yesil: #4E7A51;
  --golge: 0 2px 12px rgba(90, 60, 30, 0.08);
  --golge-buyuk: 0 8px 32px rgba(90, 60, 30, 0.16);
  --radius: 16px;
  --nav-h: 64px;
  --akis: cubic-bezier(.32, .72, 0, 1);
  /* Altın imza — tüm illerde sabit (renkler hex-map'inde YOK) */
  --altin: #F0B429;
  --altin2: #FFD35C;
  --altin-koyu: #C6612E;
}

[data-tema="koyu"] {
  /* Sarı rehber premium — koyu sıcak zemin + baskın altın (Faz 2) */
  --krem: #1a1420;
  --krem-koyu: #14101a;
  --zemin: #0f0b13;
  --kart: #1c1526;
  --kart2: #241a30;
  --metin: #F8F4FA;
  --metin-soluk: #A99CB5;
  --cizgi: #2e2640;
  /* Accent koyu temada altın/amber'e kayar (sarı rehber) */
  --bakir: #E7A93A;
  --bakir-koyu: #C6862A;
  --bakir-acik: #FFD056;
  --safran: #FFC23C;
  --yesil: #4BD07E;
  --golge: 0 2px 14px rgba(0, 0, 0, 0.5);
  --golge-buyuk: 0 14px 44px rgba(0, 0, 0, 0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-overlay h2, .hero-overlay p, .hizli-kart { opacity: 1 !important; transform: none !important; }
}

/* ---------- Akıcı görünüm: scroll ile beliren kartlar ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--akis) var(--gecikme, 0s), transform 0.6s var(--akis) var(--gecikme, 0s);
  will-change: opacity, transform;
}
.reveal.gorunur { opacity: 1; transform: none; }

body {
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  min-height: 100vh;
}

/* ---------- Üst başlık ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
  background: linear-gradient(135deg, var(--bakir), var(--bakir-koyu));
  color: #fff;
  box-shadow: var(--golge);
}
.header-brand { display: flex; align-items: center; gap: 12px; }
/* Logo, koyu başlık şeridi üstünde yumuşak beyaz rozet içinde (vitrin logo estetiği) */
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 23px;
  background: rgba(255, 255, 255, 0.16);
}
.app-header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.header-sub { font-size: 12px; opacity: 0.85; font-weight: 500; margin-top: -2px; }
.header-btnler { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn.dil-btn { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Sekme panelleri ---------- */
.tab-panel { display: none; padding: 16px 16px 24px; animation: fadeUp 0.45s var(--akis); }
.tab-panel.aktif { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }

.panel-baslik { margin: 4px 4px 16px; }
.panel-baslik h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.panel-baslik p { color: var(--metin-soluk); font-size: 14px; margin-top: 2px; }

/* ---------- Hero ---------- */
.hero {
  height: 190px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(42,32,25,0.05), rgba(42,32,25,0.65)),
    linear-gradient(135deg, var(--bakir-acik), var(--bakir), var(--bakir-koyu), var(--bakir-acik));
  background-size: 100% 100%, 260% 260%;
  animation: heroAkis 14s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  box-shadow: var(--golge);
  display: flex;
  align-items: flex-end;
}
@keyframes heroAkis {
  0%, 100% { background-position: 0% 0%, 0% 50%; }
  50% { background-position: 0% 0%, 100% 50%; }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(224,168,46,0.35), transparent 45%);
}
.hero-overlay { position: relative; padding: 18px; color: #fff; }
.hero-overlay h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.hero-overlay p { font-size: 14px; opacity: 0.95; margin-top: 4px; max-width: 90%; }

/* Sinematik hero girişi (ölçülü): açılışta içerik kademeli belirir,
   gradyandaki ışık yavaşça süzülür — vitrin ruhunun uygulama versiyonu */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroIsik 11s ease-in-out infinite alternate; }
  .hero-overlay h2 { animation: heroBelir 0.7s cubic-bezier(0.16,1,0.3,1) both; }
  .hero-overlay p { animation: heroBelir 0.7s cubic-bezier(0.16,1,0.3,1) 0.12s both; }
  .hizli-kart { animation: heroBelir 0.6s cubic-bezier(0.16,1,0.3,1) both; }
  .hizli-kart:nth-child(2) { animation-delay: 0.07s; }
  .hizli-kart:nth-child(3) { animation-delay: 0.14s; }
  .hizli-kart:nth-child(4) { animation-delay: 0.21s; }
}
@keyframes heroBelir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroIsik {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(-8%, 6%) scale(1.2); opacity: 0.7; }
}

/* ---------- Hızlı kartlar ---------- */
.hizli-kartlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 8px;
}
.hizli-kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--metin);
  cursor: pointer;
  box-shadow: var(--golge);
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, box-shadow 0.2s;
}
.hizli-kart:hover {
  transform: translateY(-3px); box-shadow: var(--golge-buyuk);
  border-color: color-mix(in srgb, var(--bakir) 32%, var(--cizgi));
}
.hizli-kart:active { transform: scale(0.97); border-color: var(--bakir-acik); }
/* Yuvarlak renkli rozet: şehir renginin açık tonunda (vitrin pin-rozet estetiği) */
.hk-emoji {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  background: var(--krem-koyu);
  background: color-mix(in srgb, var(--bakir) 13%, transparent);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.hizli-kart:hover .hk-emoji { transform: scale(1.08); }

/* ---------- Bölüm başlığı ---------- */
.bolum-baslik { margin: 24px 4px 12px; }
.bolum-baslik h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
/* Sol renkli aksan çubuğu — şehir renginde (vitrin bayrak şeridi ruhu) */
.bolum-baslik h3::before {
  content: ""; flex: none; width: 4px; height: 18px;
  border-radius: 3px; background: var(--bakir);
}

/* ---------- Yatay mekân listesi ---------- */
.yatay-liste {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.yatay-liste::-webkit-scrollbar { display: none; }
.yatay-kart {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--golge);
  cursor: pointer;
  transition: transform 0.15s;
}
.yatay-kart:active { transform: scale(0.97); }
.yk-gorsel {
  height: 110px;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.yk-govde { padding: 12px 14px 14px; }
.yk-govde h4 { font-size: 15px; font-weight: 700; }
.yk-govde .rozet {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--bakir); background: var(--krem-koyu);
  padding: 2px 8px; border-radius: 20px; margin-top: 6px;
}
.yk-govde p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 8px; line-height: 1.4; }

/* ---------- Filtre çubuğu ---------- */
.filtre-cubugu {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 14px; margin: 0 -2px;
}
.filtre-cubugu::-webkit-scrollbar { display: none; }
.filtre-cip {
  flex: 0 0 auto;
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--metin-soluk);
  padding: 8px 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filtre-cip.aktif { background: var(--bakir); color: #fff; border-color: var(--bakir); }
@media (hover: hover) and (pointer: fine) {
  .filtre-cip:not(.aktif):hover { border-color: var(--bakir); color: var(--bakir); }
}

/* ---------- Kart liste (mekân/rehber) ---------- */
.kart-liste { display: flex; flex-direction: column; gap: 12px; }
.liste-kart {
  display: flex; gap: 14px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--golge);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
}
.liste-kart:active { transform: scale(0.98); border-color: var(--bakir-acik); }
.lk-ikon {
  flex: 0 0 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.lk-govde { flex: 1; min-width: 0; }
.lk-govde h4 { font-size: 15.5px; font-weight: 700; }
.lk-govde .rozet {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--bakir); background: var(--krem-koyu);
  padding: 2px 8px; border-radius: 20px; margin: 4px 0;
}
.lk-govde p { font-size: 13px; color: var(--metin-soluk); line-height: 1.45; }

/* ---------- Etkinlik & esnaf ---------- */
.etkinlik-liste, .esnaf-liste { display: flex; flex-direction: column; gap: 10px; }
.etkinlik-kart, .esnaf-kart {
  display: flex; align-items: center; gap: 14px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 12px 14px; box-shadow: var(--golge);
}
.etkinlik-tarih {
  flex: 0 0 52px; text-align: center;
  background: var(--krem-koyu);
  background: color-mix(in srgb, var(--bakir) 11%, transparent);
  border-radius: 10px; padding: 8px 4px;
}
.etkinlik-tarih .gun { font-size: 18px; font-weight: 800; color: var(--bakir); line-height: 1; }
.etkinlik-tarih .ay { font-size: 11px; font-weight: 600; color: var(--metin-soluk); text-transform: uppercase; }
.etkinlik-bilgi h4 { font-size: 14.5px; font-weight: 700; }
.etkinlik-bilgi p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 2px; }
.esnaf-emoji { font-size: 28px; flex: 0 0 auto; }
.esnaf-kart h4 { font-size: 14.5px; font-weight: 700; }
.esnaf-kart p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 2px; }

/* Masaüstünde tüm içerik kartlarına ölçülü hover (mobilde :active kalır) — vitrin ruhu */
@media (hover: hover) and (pointer: fine) {
  .yatay-kart, .liste-kart, .etkinlik-kart, .esnaf-kart {
    transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s;
  }
  .yatay-kart:hover, .liste-kart:hover, .etkinlik-kart:hover, .esnaf-kart:hover {
    transform: translateY(-3px); box-shadow: var(--golge-buyuk);
    border-color: color-mix(in srgb, var(--bakir) 28%, var(--cizgi));
  }
}

/* ---------- Sohbet ---------- */
.sohbet-alani {
  display: flex; flex-direction: column;
  /* vh fallback + dvh (mobil Safari'de adres çubuğu dahil edilmesin → yazma kutusu görünür kalsın).
     100px = header(66) + panel iç boşluğu; yazma kutusu alt navın üstünde net durur. */
  height: calc(100vh - var(--nav-h) - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height: calc(100dvh - var(--nav-h) - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.sohbet-mesajlar {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 2px;
}
.mesaj {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: fadeUp 0.25s ease;
}
.mesaj.bot {
  align-self: flex-start;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-bottom-left-radius: 6px;
}
.mesaj.kullanici {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--bakir), var(--bakir-koyu));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.mesaj strong { font-weight: 700; }
.mesaj.yaziyor { color: var(--metin-soluk); font-style: italic; }

.sohbet-oneriler { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; }
.sohbet-oneriler::-webkit-scrollbar { display: none; }
.oneri-cip {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--krem-koyu); border: 1px solid var(--cizgi);
  color: var(--bakir); font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
}
.sohbet-giris { display: flex; gap: 8px; padding: 8px 2px 4px; }
.sohbet-giris input {
  flex: 1; border: 1px solid var(--cizgi);
  background: var(--kart); color: var(--metin);
  border-radius: 24px; padding: 12px 18px; font-size: 15px;
  outline: none; transition: border-color 0.2s;
}
.sohbet-giris input:focus { border-color: var(--bakir-acik); }
.gonder-btn {
  flex: 0 0 46px; height: 46px; border: none;
  background: linear-gradient(135deg, var(--bakir), var(--bakir-koyu));
  color: #fff; border-radius: 50%; font-size: 18px; cursor: pointer;
  transition: transform 0.15s;
}
.gonder-btn:active { transform: scale(0.9); }

/* ---------- Alt navigasyon ---------- */
.alt-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--kart);
  border-top: 1px solid var(--cizgi);
  z-index: 50;
  box-shadow: 0 -2px 16px rgba(90,60,30,0.06);
}
.nav-btn {
  position: relative;
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--metin-soluk); font-size: 22px;
  transition: color 0.25s var(--akis);
}
.nav-btn small { font-size: 10.5px; font-weight: 600; }
/* Emoji, aktifken şehir renginde yumuşak pill içine girer (vitrin rozet ruhu) */
.nav-btn span {
  display: grid; place-items: center;
  width: 46px; height: 30px; border-radius: 999px;
  transition: background 0.22s var(--akis), transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.nav-btn.aktif { color: var(--altin); }
.nav-btn.aktif span {
  background: color-mix(in srgb, var(--bakir) 14%, transparent);
  transform: translateY(-1px);
}
@media (hover: hover) and (pointer: fine) {
  .nav-btn:not(.aktif):hover { color: var(--metin); }
  .nav-btn:not(.aktif):hover span { background: color-mix(in srgb, var(--metin) 6%, transparent); }
}

/* Merkez altın asistan butonu */
.nav-asistan { position: relative; }
.nav-btn.nav-asistan .nav-bot {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  margin-top: -24px; background: linear-gradient(135deg, var(--altin), var(--altin-koyu)); color: #191308;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--altin) 45%, transparent); border: 4px solid var(--zemin);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 12, 6, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal.gizli { display: none; }
/* Genel görünürlük yardımcı sınıfı (modal dışı öğeler için, örn. Turist Modülü iç sekmeleri) */
.gizli { display: none; }
.modal-icerik {
  background: var(--zemin);
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(28px + env(safe-area-inset-bottom));
  position: relative;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.modal-kapat {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--krem-koyu); color: var(--metin); font-size: 16px; cursor: pointer;
}
.modal-baslik {
  font-size: 22px; font-weight: 800; margin-bottom: 16px; padding-right: 40px;
  padding-bottom: 14px; border-bottom: 1px solid var(--cizgi);
}
.modal-gorsel {
  height: 160px; border-radius: 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--safran), var(--bakir), var(--bakir-koyu));
  display: flex; align-items: center; justify-content: center; font-size: 60px;
}
.modal-govde h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.modal-donem {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--bakir); background: var(--krem-koyu);
  padding: 4px 12px; border-radius: 20px; margin: 10px 0 14px;
}
.modal-detay { font-size: 15px; line-height: 1.7; color: var(--metin); }
.modal-konum {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  color: var(--bakir); font-weight: 600; font-size: 14px; text-decoration: none;
  background: var(--krem-koyu); padding: 10px 16px; border-radius: 12px;
}
.sesli-anlatim-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0;
  color: #fff; font-weight: 600; font-size: 14px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  padding: 10px 16px; border-radius: 12px;
}
.sesli-anlatim-btn.calisiyor { background: var(--bakir-koyu); }
.sesli-anlatim-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- İş ilanları ---------- */
.ilan-liste { display: flex; flex-direction: column; gap: 12px; }
.ilan-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
}
.ilan-kart h4 { font-size: 15px; font-weight: 700; }
.ilan-kart .ilan-isyeri { font-size: 13px; color: var(--bakir); font-weight: 600; margin-top: 2px; }
.ilan-kart p { font-size: 13px; color: var(--metin-soluk); margin-top: 6px; line-height: 1.45; }
.ilan-kart .ilan-iletisim { font-size: 13px; margin-top: 8px; font-weight: 600; }

/* ---------- Hızlı erişim şeridi (ana sayfa) — kaydırılabilir ---------- */
.hizli-erisim {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; padding: 2px 2px 6px;
}
.hizli-erisim::-webkit-scrollbar { display: none; }
/* Fare ile kullanılan cihazlarda (masaüstü) gizli yatay kaydırma çubuğu
   şeridin devamını erişilmez kılıyor — butonlar alt satıra sarsın. */
@media (hover: hover) and (pointer: fine) {
  .hizli-erisim { flex-wrap: wrap; overflow-x: visible; }
}
.hizli-erisim-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--radius); padding: 10px 16px 10px 10px;
  font-size: 13.5px; font-weight: 600; color: var(--metin);
  white-space: nowrap;
  cursor: pointer; box-shadow: var(--golge);
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, box-shadow 0.2s;
}
.hizli-erisim-btn:hover {
  transform: translateY(-2px); box-shadow: var(--golge-buyuk);
  border-color: color-mix(in srgb, var(--bakir) 30%, var(--cizgi));
}
.hizli-erisim-btn:active { transform: scale(0.97); }
/* Yalnızca ilk span (emoji) rozet olur; metin span'ı korunur */
.hizli-erisim-btn > span:first-child {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: var(--krem-koyu);
  background: color-mix(in srgb, var(--bakir) 13%, transparent);
}

.modal-alt-metin { font-size: 12.5px; color: var(--metin-soluk); margin: -8px 0 14px; }

/* ---------- Altın & Döviz / Nöbetçi Eczane ---------- */
.finans-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.finans-tablo th, .finans-tablo td {
  text-align: right; padding: 11px 8px; border-bottom: 1px solid var(--cizgi);
}
.finans-tablo th { font-size: 12px; color: var(--metin-soluk); font-weight: 600; }
.finans-tablo td:first-child, .finans-tablo th:first-child { text-align: left; font-weight: 600; }
.finans-kaynak { font-size: 12px; color: var(--metin-soluk); margin-top: 10px; }
.eczane-ara-link { color: var(--bakir); font-weight: 700; }

/* ---------- İç sekmeler (Turist Modülü: Konaklama / Rotalar) ---------- */
.ic-sekmeler { display: flex; gap: 8px; margin-bottom: 14px; }
.ic-sekme {
  flex: 1; border: 1px solid var(--cizgi); background: var(--kart);
  color: var(--metin-soluk); font-weight: 700; font-size: 13.5px;
  padding: 10px; border-radius: 12px; cursor: pointer;
}
.ic-sekme.aktif { background: var(--bakir); color: #fff; border-color: var(--bakir); }

/* ---------- Usta Rehberi ---------- */
.usta-liste { display: flex; flex-direction: column; gap: 12px; }
.usta-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
  display: flex; gap: 12px; align-items: center;
}
.usta-govde { flex: 1; min-width: 0; }
.usta-govde h4 { font-size: 15px; font-weight: 700; }
.usta-govde .usta-meslek { font-size: 12.5px; color: var(--bakir); font-weight: 600; margin-top: 2px; }
.usta-govde p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 5px; line-height: 1.4; }
.usta-govde .usta-ilce { font-size: 11.5px; color: var(--metin-soluk); margin-top: 4px; display: block; }
.usta-ara-btn {
  flex: 0 0 auto; text-decoration: none;
  background: var(--yesil); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 12px; white-space: nowrap;
}

/* ---------- Yöresel Pazar ---------- */
.pazar-liste { display: flex; flex-direction: column; gap: 12px; }
.pazar-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
  display: flex; gap: 12px; align-items: center;
}
.pazar-gorsel {
  flex: 0 0 52px; height: 52px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.pazar-govde { flex: 1; min-width: 0; }
.pazar-govde h4 { font-size: 14.5px; font-weight: 700; }
.pazar-govde .pazar-fiyat { font-size: 13px; color: var(--bakir); font-weight: 800; margin-top: 2px; }
.pazar-govde p { font-size: 12px; color: var(--metin-soluk); margin-top: 4px; line-height: 1.4; }
.pazar-govde .pazar-uretici { font-size: 11.5px; color: var(--metin-soluk); margin-top: 3px; display: block; }
.pazar-ara-btn {
  flex: 0 0 auto; text-decoration: none;
  background: var(--yesil); color: #fff; font-weight: 700; font-size: 12.5px;
  padding: 9px 14px; border-radius: 12px; white-space: nowrap;
}

/* ---------- Gurme Rotası (restoranlar) ---------- */
.restoran-liste { display: flex; flex-direction: column; gap: 12px; }
.restoran-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
}
.restoran-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.restoran-ust h4 { font-size: 15px; font-weight: 700; }
.restoran-fiyat { font-size: 12px; font-weight: 700; color: var(--bakir); background: var(--krem-koyu); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.restoran-kart .rozet { margin-top: 4px; }
.restoran-kart p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 6px; line-height: 1.4; }
.restoran-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.restoran-adres { font-size: 11.5px; color: var(--metin-soluk); }
.restoran-ara-btn {
  text-decoration: none; background: var(--yesil); color: #fff;
  font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 10px; white-space: nowrap;
}

/* ---------- Turist Modülü (konaklama) ---------- */
.konaklama-liste { display: flex; flex-direction: column; gap: 12px; }
.konaklama-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
}
.konaklama-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.konaklama-ust h4 { font-size: 15px; font-weight: 700; }
.konaklama-kart p { font-size: 12.5px; color: var(--metin-soluk); margin-top: 6px; line-height: 1.4; }
.konaklama-ozellikler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.konaklama-ozellikler span {
  font-size: 11px; font-weight: 600; color: var(--bakir); background: var(--krem-koyu);
  padding: 3px 9px; border-radius: 20px;
}
.konaklama-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.konaklama-ara-btn {
  text-decoration: none; background: var(--yesil); color: #fff;
  font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 10px; white-space: nowrap;
}

/* ---------- Yıldız puanlama ---------- */
.yildiz-goster { color: var(--safran); letter-spacing: 1px; font-size: 15px; }
.yildiz-bos { color: var(--cizgi); }
.puan-ozet {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 14px;
  font-size: 13.5px; color: var(--metin-soluk); font-weight: 600;
}
.puan-ozet .puan-sayi { color: var(--metin); font-size: 15px; font-weight: 800; }
.mini-puan {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--bakir);
  background: var(--krem-koyu); padding: 2px 8px; border-radius: 20px; margin-left: 6px;
}

/* ---------- Yorumlar (mekân detayı) ---------- */
.yorum-bolum { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.yorum-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.yorum-kart { background: var(--krem-koyu); border-radius: 12px; padding: 10px 12px; }
.yorum-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.yorum-ust b { font-size: 13px; }
.yorum-kart p { font-size: 13px; color: var(--metin); line-height: 1.45; }
.yorum-bos { font-size: 13px; color: var(--metin-soluk); text-align: center; padding: 10px 0; }

.yorum-form { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px; }
.yildiz-secici { display: flex; gap: 6px; font-size: 26px; margin-bottom: 10px; cursor: pointer; }
.yildiz-secici span { color: var(--cizgi); transition: color 0.15s; }
.yildiz-secici span.secili { color: var(--safran); }
.yorum-form input, .yorum-form textarea {
  width: 100%; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin);
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit;
  margin-bottom: 8px;
}
.yorum-form textarea { min-height: 60px; resize: vertical; }
.yorum-gonder-btn {
  width: 100%; background: var(--bakir); color: #fff; border: none;
  border-radius: 10px; padding: 11px; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.yorum-durum { font-size: 12.5px; margin-top: 8px; text-align: center; font-weight: 600; }
.yorum-durum.ok { color: var(--yesil); }
.yorum-durum.hata { color: #C0392B; }

/* ---------- İlçe grid ---------- */
.ilce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ilce-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--radius); padding: 16px 14px;
  cursor: pointer; box-shadow: var(--golge);
  transition: transform 0.15s, border-color 0.2s;
  display: flex; flex-direction: column; gap: 6px;
}
.ilce-kart:active { transform: scale(0.97); border-color: var(--bakir-acik); }
.ilce-emoji {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.ilce-kart h4 { font-size: 15.5px; font-weight: 700; }
.ilce-nufus { font-size: 11.5px; color: var(--bakir); font-weight: 600; }
.ilce-kart p { font-size: 12px; color: var(--metin-soluk); line-height: 1.4; }

/* ---------- Rota kartları ---------- */
.rota-liste { display: flex; flex-direction: column; gap: 12px; }
.rota-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 4px solid var(--bakir);
  border-radius: 14px; padding: 14px; box-shadow: var(--golge);
}
.rota-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rota-ust .rota-emoji { font-size: 22px; }
.rota-ust h4 { font-size: 15px; font-weight: 700; flex: 1; }
.rota-sure {
  font-size: 11.5px; font-weight: 600; color: var(--bakir);
  background: var(--krem-koyu); padding: 3px 10px; border-radius: 20px;
}
.rota-guzergah { font-size: 13px; font-weight: 600; color: var(--metin); margin-bottom: 4px; }
.rota-kart p { font-size: 12.5px; color: var(--metin-soluk); line-height: 1.45; }
.rota-kart[data-guzergah], .rota-kart[data-sefer] { cursor: pointer; transition: border-color .15s; }
.rota-kart[data-guzergah]:active, .rota-kart[data-sefer]:active { border-color: var(--bakir-acik); }
.rota-kart.devre-disi { opacity: .5; }

/* ---------- Otobüs Bileti: koltuk haritası ---------- */
.koltuk-izgara {
  display: grid; gap: 8px; margin-top: 14px; padding: 14px;
  background: var(--krem-koyu); border-radius: 14px;
}
/* Gerçek koridor boşluğu yok (basitlik için) — satır başına düzenin toplam
   koltuk sayısı kadar (2+1=3, 2+2=4) sütun, koltuklar sırayla dizilir. */
.koltuk-izgara.duzen-2-1 { grid-template-columns: repeat(3, 1fr); }
.koltuk-izgara.duzen-2-2 { grid-template-columns: repeat(4, 1fr); }
.koltuk {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--cizgi);
  font-size: 12px; font-weight: 700; background: var(--kart); color: var(--metin);
}
.koltuk.bos { cursor: pointer; border-color: var(--bakir); color: var(--bakir); }
.koltuk.bos:active { background: var(--bakir); color: #fff; }
.koltuk.dolu { background: var(--cizgi); color: var(--metin-soluk); cursor: not-allowed; }

/* ---------- Otobüs agregatör: yön (gidiş-dönüş) ---------- */
.otobus-yon-secim { display: flex; gap: 8px; margin-bottom: 12px; }
.otobus-yon-secim button {
  flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--cizgi);
  background: var(--kart); color: var(--metin-soluk); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.otobus-yon-secim button.aktif {
  background: color-mix(in srgb, var(--bakir) 14%, transparent);
  border-color: var(--bakir); color: var(--bakir);
}
.otobus-bacak-baslik { font-size: 12.5px; font-weight: 700; color: var(--bakir); margin: 2px 2px 8px; }

/* ---------- Otobüs agregatör: filtre / sıralama çubuğu ---------- */
.otobus-arac-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.otobus-arac-bar .etiket { font-size: 11px; color: var(--metin-soluk); }
.otobus-cip {
  font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin-soluk);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.otobus-cip.aktif {
  background: color-mix(in srgb, var(--bakir) 14%, transparent);
  border-color: var(--bakir); color: var(--bakir);
}
.otobus-sonuc-say { font-size: 11.5px; color: var(--metin-soluk); margin: 8px 2px 4px; }

/* ---------- Otobüs agregatör: sefer kartı ---------- */
.sefer-kart {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--golge); cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.sefer-kart:active { transform: scale(.99); border-color: var(--bakir); }
.sefer-kart.devre-disi { opacity: .45; pointer-events: none; }
.firma-rozet {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.5px; flex-shrink: 0;
}
.sefer-orta .firma-ad { font-size: 14px; font-weight: 700; color: var(--metin); }
.sefer-orta .sefer-saatler { font-size: 13px; font-weight: 700; color: var(--metin); margin-top: 2px; }
.sefer-orta .sefer-saatler .ok { color: var(--metin-soluk); font-weight: 400; margin: 0 5px; }
.sefer-orta .sefer-alt { font-size: 11px; color: var(--metin-soluk); margin-top: 3px; }
.sefer-sag { text-align: right; }
.sefer-fiyat { font-size: 16px; font-weight: 800; color: var(--bakir); white-space: nowrap; }
.sefer-koltuk-bilgi { font-size: 10.5px; color: var(--metin-soluk); margin-top: 2px; }

/* ---------- Otobüs agregatör: otobüs krokisi ---------- */
.otobus-govde {
  background: var(--krem-koyu); border-radius: 16px; padding: 14px 16px;
  max-width: 240px; margin: 12px auto 0;
}
.otobus-on {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  font-size: 11px; color: var(--metin-soluk); padding-bottom: 10px;
  border-bottom: 1px dashed var(--cizgi); margin-bottom: 12px;
}
.koltuk-satir { display: grid; grid-template-columns: 1fr 1fr 20px 1fr; gap: 7px; margin-bottom: 7px; }
.koltuk2 {
  aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--cizgi);
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center;
  background: var(--kart); color: var(--metin); transition: transform .1s;
}
.koltuk2.bos { cursor: pointer; border-color: #16A34A; color: #16A34A; background: color-mix(in srgb, #16A34A 8%, var(--kart)); }
.koltuk2.bos:active { transform: scale(.92); }
.koltuk2.erkek { background: color-mix(in srgb, #3B82F6 18%, var(--kart)); border-color: #3B82F6; color: #2563EB; cursor: not-allowed; }
.koltuk2.kadin { background: color-mix(in srgb, #EC4899 18%, var(--kart)); border-color: #EC4899; color: #DB2777; cursor: not-allowed; }
.koltuk2.dolu  { background: var(--cizgi); border-color: var(--cizgi); color: var(--metin-soluk); cursor: not-allowed; }
.koltuk2.secili { background: var(--bakir); border-color: var(--bakir); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bakir) 30%, transparent); }
.koltuk-lejant { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; font-size: 11px; color: var(--metin-soluk); }
.koltuk-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.lejant-nokta { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid; }
.lejant-nokta.bos { border-color: #16A34A; background: color-mix(in srgb, #16A34A 12%, var(--kart)); }
.lejant-nokta.erkek { border-color: #3B82F6; background: color-mix(in srgb, #3B82F6 22%, var(--kart)); }
.lejant-nokta.kadin { border-color: #EC4899; background: color-mix(in srgb, #EC4899 22%, var(--kart)); }

/* ---------- Otobüs modülü: TAM EKRAN (gerçek uygulama gibi) ---------- */
#otobusModal { align-items: stretch; }
#otobusModal .modal-icerik {
  width: 100%; max-width: none;
  height: 100dvh; max-height: 100dvh;
  border-radius: 0;
  padding: 0 18px calc(24px + env(safe-area-inset-bottom));
}
/* Sabit uygulama başlık çubuğu: geri oku + başlık + adım göstergesi */
.otobus-baslik-bar {
  position: sticky; top: 0; z-index: 4; background: var(--zemin);
  margin: 0 -18px 14px; padding: max(14px, env(safe-area-inset-top)) 54px 12px 16px;
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  border-bottom: 1px solid var(--cizgi);
}
.otobus-geri-ok {
  border: none; background: var(--krem-koyu); color: var(--metin);
  width: 38px; height: 38px; border-radius: 50%; font-size: 20px;
  cursor: pointer; flex-shrink: 0; line-height: 1;
}
.otobus-baslik-metin { display: flex; flex-direction: column; min-width: 0; }
.otobus-baslik-metin #otobusAdimAd { font-size: 20px; font-weight: 800; line-height: 1.15; }
.otobus-adim-no { font-size: 11.5px; color: var(--bakir); font-weight: 700; margin-top: 2px; }
/* Sabit alt aksiyon çubuğu (Devam / Satın Al) — ekranın altında kalır */
.otobus-alt-bar {
  position: sticky; bottom: 0; z-index: 3;
  margin: 14px -18px 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--zemin); border-top: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 12px;
}
.otobus-alt-ozet { flex: 1; font-size: 13px; color: var(--metin-soluk); line-height: 1.3; }
.otobus-alt-ozet strong { color: var(--bakir); font-size: 16px; }
.otobus-alt-bar > .btn { flex: 0 0 auto; min-width: 150px; font-size: 16px; padding: 15px; border-radius: 12px; font-weight: 700; }
/* Çoklu yolcu: her koltuk için bir form bloğu */
.otobus-yolcu-blok {
  border: 1px solid var(--cizgi); border-left: 4px solid var(--bakir);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--kart);
}
.otobus-yolcu-baslik { font-size: 13.5px; font-weight: 700; color: var(--bakir); margin-bottom: 10px; }
#otobusModal .otobus-yolcu-blok input {
  font-size: 16px; padding: 13px 14px; min-height: 50px; border-radius: 11px; width: 100%;
}
#otobusModal .modal-kapat {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 6;
  width: 38px; height: 38px; font-size: 17px;
}
/* Masaüstü: ortalı, telefon benzeri panel */
@media (min-width: 640px) {
  #otobusModal { align-items: center; }
  #otobusModal .modal-icerik {
    max-width: 460px; height: 90dvh; max-height: 880px; border-radius: 24px;
  }
  #otobusModal .modal-kapat { position: absolute; }
}
/* Arama formu */
#otobusModal .otobus-yon-secim button { padding: 13px; font-size: 14.5px; border-radius: 12px; }
#otobusModal .alan label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
#otobusModal #otobusKalkis, #otobusModal #otobusVaris,
#otobusModal #otobusTarih, #otobusModal #otobusDonusTarih {
  font-size: 16px; padding: 13px 14px; border-radius: 12px; min-height: 52px; width: 100%;
}
#otobusModal #otobusDegis { min-height: 52px; height: 52px; font-size: 18px; padding: 0 14px; }
#otobusModal #otobusAraBtn { font-size: 17px; padding: 16px; border-radius: 14px; font-weight: 700; }
/* Filtre / sonuç */
#otobusModal .otobus-cip { font-size: 12.5px; padding: 8px 14px; }
#otobusModal .otobus-sonuc-say { font-size: 13.5px; font-weight: 600; }
#otobusModal .otobus-bacak-baslik { font-size: 14px; padding: 10px 12px; background: color-mix(in srgb, var(--bakir) 10%, transparent); border-radius: 10px; }
/* Sefer kartı — büyük */
#otobusModal .rota-liste { gap: 12px; }
.sefer-kart { padding: 15px 16px; gap: 14px; border-radius: 16px; }
.firma-rozet { width: 50px; height: 50px; font-size: 16px; border-radius: 13px; }
.sefer-orta .firma-ad { font-size: 16px; }
.sefer-orta .sefer-saatler { font-size: 15.5px; margin-top: 4px; }
.sefer-orta .sefer-alt { font-size: 12px; margin-top: 4px; }
.sefer-fiyat { font-size: 20px; }
.sefer-koltuk-bilgi { font-size: 11.5px; margin-top: 3px; }
/* Koltuk krokisi — büyük */
.otobus-govde { max-width: 320px; padding: 18px 20px; border-radius: 20px; }
.otobus-on { font-size: 12.5px; padding-bottom: 12px; margin-bottom: 14px; }
.koltuk-satir { grid-template-columns: 1fr 1fr 28px 1fr; gap: 9px; margin-bottom: 9px; }
.koltuk2 { font-size: 15px; border-radius: 11px; border-width: 2px; }
.koltuk-lejant { font-size: 12.5px; gap: 16px; margin-top: 16px; }
.lejant-nokta { width: 16px; height: 16px; }
/* Yolcu formu — büyük */
#otobusModal #otobusYolcu input {
  font-size: 16px; padding: 14px; min-height: 52px; border-radius: 12px; width: 100%;
}
#otobusModal #otobusSatinAlBtn { font-size: 17px; padding: 17px; border-radius: 14px; font-weight: 700; }
/* Bilet kartı QR büyük */
#otobusModal #otobusBiletKart img { width: 220px !important; height: 220px !important; }

/* ---------- İlçe detay (modal içi) ---------- */
.ilce-meshur {
  font-size: 13.5px; color: var(--metin); line-height: 1.5;
  background: var(--krem-koyu); padding: 12px 14px; border-radius: 12px; margin: 12px 0;
}
.ilce-meshur strong { color: var(--bakir); }
.detay-baslik {
  font-size: 15px; font-weight: 700; margin: 18px 0 10px;
  display: flex; align-items: center; gap: 9px;
}
/* Ana sayfa bölüm başlıklarıyla tutarlı sol renkli aksan */
.detay-baslik::before {
  content: ""; flex: none; width: 4px; height: 15px;
  border-radius: 3px; background: var(--bakir);
}
.urun-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.urun-cip {
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 20px;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin);
}
.urun-cip.yemek { background: var(--bakir); color: #fff; border-color: var(--bakir); }
.mini-mekan {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--cizgi); cursor: pointer;
}
.mini-mekan:last-child { border-bottom: none; }
.mini-mekan .mm-ikon {
  flex: 0 0 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--safran), var(--bakir));
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.mini-mekan h5 { font-size: 14px; font-weight: 600; }
.mini-mekan p { font-size: 12px; color: var(--metin-soluk); }

/* ---------- Tarih araçları (QR + Harita) ---------- */
.tarih-araclar { display: flex; gap: 10px; margin: 0 2px 14px; }
.arac-btn {
  flex: 1;
  background: linear-gradient(135deg, var(--bakir), var(--bakir-koyu));
  color: #fff; border: none; border-radius: 14px;
  padding: 13px 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: var(--golge);
  transition: transform 0.15s;
}
.arac-btn:active { transform: scale(0.97); }

/* ---------- QR tarayıcı ---------- */
.qr-alan {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 18px; overflow: hidden; background: #000;
}
#qrVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-cerceve {
  position: absolute; inset: 14%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.qr-durum {
  text-align: center; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--metin-soluk);
}

/* ---------- Harita ---------- */
.harita-icerik { max-height: 92vh; }
#harita {
  width: 100%; height: 62vh;
  border-radius: 18px; overflow: hidden;
  background: var(--krem-koyu);
}
.harita-pin {
  background: none; border: none;
  font-size: 26px; line-height: 1; text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.harita-popup { font-family: 'Inter', sans-serif; }
.harita-popup b { font-size: 14px; }
.harita-popup button {
  display: block; margin-top: 8px; width: 100%;
  background: var(--bakir); color: #fff; border: none;
  border-radius: 8px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* ---------- Fotoğraflar ---------- */
.tam-gorsel { width: 100%; height: 100%; object-fit: cover; display: block; }
.esnaf-foto { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }

/* ---------- Footer ---------- */
.app-footer {
  text-align: center; margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--metin-soluk);
}
.app-footer a { color: var(--bakir); font-weight: 600; text-decoration: none; }

/* ---------- Yardımcı ---------- */
.yukleniyor { text-align: center; color: var(--metin-soluk); font-size: 14px; padding: 24px; }

/* ---------- Ana ekran: ara kutusu + kategoriler ---------- */
.ara-kutu-wrap { margin: 16px 0 0; }
.ara-kutu { width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  border-radius:18px; padding:15px 16px; cursor:pointer;
  background-image:linear-gradient(var(--kart),var(--kart)),linear-gradient(120deg,var(--altin),var(--altin-koyu));
  background-origin:border-box; background-clip:padding-box,border-box; border:1.5px solid transparent;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--altin) 10%,transparent), var(--golge); }
.ara-kutu .ara-bot { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(135deg,var(--altin),var(--altin2)); box-shadow:0 0 14px color-mix(in srgb,var(--altin) 50%,transparent); flex-shrink:0; }
.ara-kutu .ara-ph { flex:1; min-width:0; }
.ara-kutu .ara-ph b { font-size:15px; }
.ara-kutu .ara-ph small { display:block; font-size:11.5px; color:var(--metin-soluk); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ara-kutu .ara-mik { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex-shrink:0;
  background:linear-gradient(135deg,var(--altin),var(--altin-koyu)); }
.oneri-cipler { display:flex; gap:8px; overflow-x:auto; padding:12px 0 2px; scrollbar-width:none; }
.oneri-cipler::-webkit-scrollbar { display:none; }
.oneri-cip { white-space:nowrap; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:20px;
  border:1px solid var(--cizgi); background:var(--kart); color:var(--metin); cursor:pointer; }
.oneri-cip:first-child { color:#191308; background:linear-gradient(135deg,var(--altin),var(--altin2)); border:none; }
.kat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.kat-k { display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:none; cursor:pointer; }
.kat-ikn { width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--altin) 14%,transparent),color-mix(in srgb,var(--bakir) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--altin) 28%,transparent); }
.kat-ikn svg { width:26px;height:26px;color:var(--altin2); }
.kat-k small { font-size:11px; color:var(--metin); text-align:center; line-height:1.15; }
@media (hover:hover){ .kat-k:hover .kat-ikn{ transform:translateY(-2px); transition:transform .15s; } }

/* ---------- Ana ekran: dönen banner ---------- */
.ana-banner { position:relative; height:200px; border-radius:24px; overflow:hidden; box-shadow:var(--golge); margin-top:4px; }
.banner-slayt { position:absolute; inset:0; background:var(--bg); opacity:0; transition:opacity .6s ease; }
.banner-slayt.aktif { opacity:1; }
.banner-slayt::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,4,8,.5)); }
.banner-etiket { position:absolute; top:14px; left:16px; z-index:2; background:rgba(0,0,0,.3); backdrop-filter:blur(4px);
  color:#fff; font-size:11px; font-weight:700; padding:6px 13px; border-radius:20px; }
.banner-yazi { position:absolute; left:18px; bottom:18px; z-index:2; }
.banner-yazi h3 { font-size:24px; font-weight:900; color:#fff; letter-spacing:-.02em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.banner-yazi span { font-size:12.5px; color:#fff; opacity:.92; }
.banner-nokta { position:absolute; bottom:16px; right:16px; z-index:2; display:flex; gap:5px; }
.banner-nokta i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:width .3s; }
.banner-nokta i.aktif { width:18px; border-radius:6px; background:#fff; }

/* ---------- Asistan sonuç kartları ---------- */
.asistan-kartlar { display:flex; flex-direction:column; gap:8px; margin:6px 0 2px; }
.as-kart { display:flex; align-items:center; gap:10px; background:var(--kart); border:1px solid var(--cizgi);
  border-radius:14px; padding:10px 12px; }
.as-kart-govde { flex:1; min-width:0; }
.as-kart-govde b { font-size:14px; display:block; }
.as-kart-govde small { display:block; font-size:11.5px; color:var(--metin-soluk); margin-top:1px; }
.as-ek { display:block; font-size:11px; color:var(--altin2); margin-top:2px; }
.as-aksiyon { display:flex; gap:6px; flex-shrink:0; }
.ak-btn { font-size:12px; font-weight:700; padding:7px 11px; border-radius:10px; border:1px solid var(--cizgi);
  background:var(--kart2, var(--kart)); color:var(--metin); text-decoration:none; cursor:pointer; white-space:nowrap; }
.ak-ara { border-color:color-mix(in srgb, var(--altin) 40%, transparent); }
.ak-handoff, .ak-detay { background:linear-gradient(135deg,var(--altin),var(--altin2)); color:#191308; border:none; }

/* ---------- Asistan daraltma çipleri (çok sonuç -> ilçe seç) ---------- */
.asistan-daraltma { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 2px; }
.daraltma-cip { font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:20px;
  border:1px solid var(--cizgi); background:var(--kart); color:var(--metin); cursor:pointer; white-space:nowrap; }
@media (hover: hover) and (pointer: fine) {
  .daraltma-cip:hover { border-color:var(--bakir); color:var(--bakir); }
}

/* ---------- Faz 4: yazma motif katmanı ---------- */
.banner-slayt .banner-motif { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
/* etiket/yazı (z-index:2) ve ::after karartma motifin ÜSTÜNDE kalır → okunaklılık korunur */
.ara-kutu { position:relative; overflow:hidden; }
.ara-motif { position:absolute; right:-8px; bottom:-14px; width:88px; height:88px; opacity:.13; pointer-events:none; z-index:0; }
.ara-kutu > :not(.ara-motif) { position:relative; z-index:1; }
.bolum-baslik .baslik-motif, .baslik-motif { display:inline-flex; width:22px; height:22px; vertical-align:middle; margin-right:7px; opacity:.85; }
.banner-motif svg, .ara-motif svg, .baslik-motif svg { display:block; width:100%; height:100%; }

/* ====================================================================== */
/* SARI REHBER — Faz 2 premium bileşen pass'i (kaynak-sırası override)     */
/* Token'lara dayanır → koyu+açık iki temaya da uyar. Yalnız sunum.        */
/* ====================================================================== */

/* Kart yüzeyleri — double-bezel hissi (gradient + hairline + iç ışık + hover lift).
   Tüm gerçek kart sınıfları (iç sekmeler + modül listeleri dahil). */
.kart, .hizli-kart, .hizli-erisim-btn, .sefer-kart,
.liste-kart, .yatay-kart, .ilce-kart, .etkinlik-kart, .esnaf-kart,
.usta-kart, .pazar-kart, .restoran-kart, .konaklama-kart, .rota-kart, .ilan-kart {
  background: linear-gradient(165deg, var(--kart2), var(--kart));
  border: 1px solid var(--cizgi);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.05), var(--golge);
  transition: transform .5s var(--akis), border-color .5s var(--akis), box-shadow .5s var(--akis);
}
.kart:hover, .hizli-kart:hover, .hizli-erisim-btn:hover, .sefer-kart:hover,
.liste-kart:hover, .yatay-kart:hover, .ilce-kart:hover, .etkinlik-kart:hover,
.esnaf-kart:hover, .usta-kart:hover, .pazar-kart:hover, .restoran-kart:hover,
.konaklama-kart:hover, .rota-kart:hover, .ilan-kart:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--altin) 42%, transparent);
}

/* Akıllı arama — vurgulu, altın çerçeve + hover glow (Faz 2/3) */
.ara-kutu {
  padding: 15px 15px 15px 16px;
  border: 1.5px solid color-mix(in srgb, var(--altin) 55%, transparent) !important;
  background: linear-gradient(165deg, var(--kart2), var(--kart)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--altin) 9%, transparent), var(--golge);
  transition: box-shadow .5s var(--akis), border-color .5s var(--akis), transform .3s var(--akis);
}
.ara-kutu:hover {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--altin) 15%, transparent), var(--golge-buyuk);
  border-color: var(--altin) !important;
}
.ara-kutu:active { transform: scale(.99); }
.ara-kutu .ara-bot {
  background: linear-gradient(135deg, var(--altin), var(--altin2));
}
.ara-kutu .ara-ph b { font-size: 15.5px; letter-spacing: -.01em; }

/* Kategori ikon çinileri — premium altın gradyan tile + hover */
.kat-ikn {
  background: linear-gradient(145deg, color-mix(in srgb, var(--altin) 22%, transparent),
              color-mix(in srgb, var(--altin) 5%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--altin) 30%, transparent);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
  transition: transform .5s var(--akis);
}
.kat-k:hover .kat-ikn { transform: scale(1.08) rotate(-3deg); }
.kat-k:active .kat-ikn { transform: scale(.96); }

/* Banner — premium çerçeve + yumuşak köşe (yazma motifleri korunur) */
.ana-banner {
  border-radius: 22px;
  box-shadow: var(--golge-buyuk);
  border: 1px solid var(--cizgi);
}

/* Alt nav — floating cam premium */
.alt-nav {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--cizgi);
}

/* Bölüm başlığı — ince premium */
.bolum-baslik h3 { letter-spacing: -.02em; }

/* Butonlar — premium pill hissi (birincil altın gradyan) */
.btn-primary, .modal .btn-onayla, .otobus-satin-al-btn {
  background: linear-gradient(135deg, var(--altin), var(--altin-koyu)) !important;
  color: #1c1305 !important;
  border: none !important;
}

/* Scroll-reveal premium (mevcut .beliren/.reveal sistemine ek yumuşaklık) */
.beliren, .reveal { transition-timing-function: var(--akis) !important; }

/* ---- Faz 2 Artım 3: arama hero + premium reveal + banner geçiş ---- */
/* Akıllı aramayı öne çıkar (hero-arama hissi) */
.ara-kutu-wrap { margin-top: 22px; }
.ara-kutu { padding: 19px 18px !important; border-radius: 20px !important; }
.ara-kutu .ara-bot { width: 42px; height: 42px; font-size: 21px; }
.ara-kutu .ara-ph b { font-size: 17px !important; letter-spacing: -.01em; }
.ara-kutu .ara-mik { width: 42px; height: 42px; font-size: 19px; }

/* Premium reveal — blur ekle (mevcut .reveal/.gorunur sistemine) */
.reveal {
  filter: blur(5px);
  transition: opacity .7s var(--akis) var(--gecikme,0s),
              transform .7s var(--akis) var(--gecikme,0s),
              filter .7s var(--akis) var(--gecikme,0s);
}
.reveal.gorunur { filter: none; }

/* Banner — premium yumuşak geçiş (hafif zoom) */
.banner-slayt { transition: opacity .7s var(--akis), transform .7s var(--akis) !important; }
.banner-slayt:not(.aktif) { transform: scale(1.04); }
.banner-slayt.aktif { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; }
  .banner-slayt { transform: none !important; }
}

/* Sohbet mesajı — sesli dinle butonu (Emel nöral ses) */
.mesaj-ses-btn {
  background: none; border: none; cursor: pointer; font-size: 14px;
  opacity: .5; padding: 2px 5px; margin-top: 6px; display: inline-block;
  line-height: 1; transition: opacity .3s var(--akis), transform .2s var(--akis);
}
.mesaj-ses-btn:hover { opacity: 1; }
.mesaj-ses-btn.calisiyor { opacity: 1; }
.mesaj-ses-btn:active { transform: scale(.88); }

/* ---------------------------------------------------------------------- */
/* SARI REHBER — Faz 3: iç sekme (Tarih/İlçeler/Rehber) + modül premium   */
/* ---------------------------------------------------------------------- */
/* Filtre çipleri — aktif altın gradyan, yumuşak geçiş */
.filtre-cip { transition: all .35s var(--akis); }
.filtre-cip.aktif {
  background: linear-gradient(135deg, var(--altin), var(--altin-koyu));
  color: #1c1305; border-color: transparent;
}
.otobus-cip.aktif, .urun-cip.aktif, .daraltma-cip:active {
  background: linear-gradient(135deg, var(--altin), var(--altin-koyu)); color: #1c1305; border-color: transparent;
}

/* Panel başlıkları — altın imza (iç sekme H2) */
.panel-baslik h2 {
  background: linear-gradient(112deg, var(--altin2) 10%, var(--altin) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Kart ikon çinilerine iç ışık (premium his) */
.lk-ikon, .ilce-ikon, .usta-ikon, .yk-gorsel { box-shadow: inset 0 1px 1px rgba(255,255,255,.14); }

/* Modal kabuğu — premium yüzey + hairline */
.modal-icerik, .modal-kutu, .modal-govde {
  background: linear-gradient(180deg, var(--kart), var(--kart2));
  border: 1px solid var(--cizgi);
}

/* Hızlı Erişim şeridi gizli olmalı (butonlar DOM'da handler/tetik için kalır ama
   görünmez). '.hizli-erisim { display:flex }' UA [hidden]'ı ezdiği için !important şart. */
.hizli-erisim[hidden] { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Restoran menü görünümü (uygulama içi) — Alt-proje 1                     */
/* ---------------------------------------------------------------------- */
.restoran-alt-btnler { display: flex; gap: 8px; align-items: center; }
.restoran-aksiyonlar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kart-aksiyon-btn {
  text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--cizgi); color: var(--metin); background: var(--kart); white-space: nowrap;
  transition: transform .3s var(--akis);
}
.kart-aksiyon-btn:active { transform: scale(.95); }
.usta-btnler { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-items: stretch; }
.usta-btnler .kart-aksiyon-btn { text-align: center; }
.one-cikan-rozet {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: #1c1305; background: linear-gradient(120deg, var(--altin), var(--altin-koyu));
  border-radius: 100px; padding: 3px 9px; margin-top: 4px;
}
.restoran-kart.one-cikan { border-color: color-mix(in srgb, var(--altin) 55%, transparent); }
.restoran-menu-btn {
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 100px; cursor: pointer;
  background: linear-gradient(135deg, var(--altin), var(--altin-koyu)); color: #1c1305; border: none;
  transition: transform .3s var(--akis);
}
.restoran-menu-btn:active { transform: scale(.95); }

.menu-ust { text-align: center; padding: 4px 0 14px; border-bottom: 1px solid var(--cizgi); margin-bottom: 16px; }
.menu-restoran-ad {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(112deg, var(--altin2), var(--altin)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu-restoran-meta { font-size: 13px; color: var(--metin-soluk); margin-top: 4px; }
.menu-aksiyon { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.menu-btn {
  font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 100px; cursor: pointer;
  background: var(--kart2); border: 1px solid var(--cizgi2, var(--cizgi)); color: var(--metin);
  transition: all .35s var(--akis); text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.menu-btn:hover { border-color: var(--altin); }
.menu-btn.ara { background: linear-gradient(135deg, var(--altin), var(--altin-koyu)); color: #1c1305; border: none; }

.menu-qr-kutu {
  text-align: center; background: #fff; border-radius: 16px; padding: 16px; margin: 0 auto 18px; max-width: 260px;
}
.menu-qr-kutu img { width: 200px; height: 200px; }
.menu-qr-kutu p { font-size: 12px; color: #333; margin-top: 8px; }

.menu-kategori { margin-bottom: 22px; }
.menu-kategori h3 {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--altin2);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--cizgi);
}
.menu-urun {
  display: flex; gap: 12px; padding: 12px; border-radius: 15px; margin-bottom: 10px;
  background: linear-gradient(165deg, var(--kart2), var(--kart)); border: 1px solid var(--cizgi);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.05);
}
.menu-urun-foto { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 12px; object-fit: cover; }
.menu-urun-govde { flex: 1; min-width: 0; }
.menu-urun-ust { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.menu-urun-ad { font-size: 15px; font-weight: 700; }
.menu-urun-fiyat { font-size: 14px; font-weight: 800; color: var(--altin2); white-space: nowrap; }
.menu-urun-aciklama { font-size: 12.5px; color: var(--metin-soluk); margin-top: 3px; line-height: 1.5; }
.menu-etiketler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.menu-etiket {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
  background: color-mix(in srgb, var(--altin) 18%, transparent); color: var(--altin2);
  border: 1px solid color-mix(in srgb, var(--altin) 30%, transparent);
}