/* BiMakas — marka teması (turkuaz #00C2C7 + lacivert #152238, Poppins) */
:root {
  --ana: #00c2c7;
  --ana-koyu: #009da1;
  --ana-acik: #e4f9fb;
  --lacivert: #152238;
  --vurgu: #ffa829;          /* puan yıldızları */
  --zemin: #f2f4f7;
  --kart: #ffffff;
  --metin: #152238;
  --soluk: #64748b;
  --cizgi: #e2e8f0;
  --hata: #e00c02;
  --hata-acik: #fdecea;
  --basari: #166c3b;
  --basari-acik: #eaf6ed;
  --uyari: #8a6415;
  --uyari-acik: #fdf3dd;
  --golge: 0 1px 3px rgba(21,34,56,.06), 0 4px 14px rgba(21,34,56,.05);
  --golge-buyuk: 0 8px 28px rgba(21,34,56,.14);
  --r: 12px;
  --r-kucuk: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Tam genişlik şeritler (ue-band, uyarı bandı) negatif vw marjı kullanır;
   yatay taşmanın sayfayı mobilde küçültmesini bu kilit engeller. */
html, body { overflow-x: clip; }

body {
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; border-radius: 4px; }

/* Üst menü — beyaz, yapışkan */
.ust-menu {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ust-menu-ic {
  max-width: 1120px; margin: 0 auto; padding: 0.65rem 1rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.logo { font-size: 1.45rem; font-weight: 800; display: flex; align-items: center; letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo-bi { color: var(--lacivert); }
.logo-makas { color: var(--ana); }
.logo-ikon { width: 34px; height: 34px; margin-right: 0.45rem; display: block; }
.konum-cip svg { flex-shrink: 0; }
.menu-ara-ikon { display: inline-flex; color: var(--soluk); }
.logo-alt { font-size: 0.78rem; font-weight: 500; color: var(--soluk); margin-left: 0.55rem; letter-spacing: 0; }
.menu-baglantilar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.menu-baglantilar a { color: var(--metin); font-weight: 600; font-size: 0.92rem; }
.menu-baglantilar a:hover { color: var(--ana); text-decoration: none; }
.menu-ad { color: var(--soluk); font-size: 0.88rem; }
.menu-isletme { white-space: nowrap; }

/* Başlıkta arama çubuğu (Uber Eats düzeni) */
.menu-ara {
  flex: 1 1 260px; max-width: 540px; display: flex; align-items: center; gap: 0.5rem;
  background: var(--zemin); border: 1.5px solid transparent; border-radius: 999px;
  padding: 0.5rem 1.1rem; transition: border-color .15s, background .15s;
}
.menu-ara:focus-within { background: #fff; border-color: var(--ana); }
.menu-ara input {
  flex: 1; border: none; background: transparent; font-family: inherit;
  font-size: 0.93rem; outline: none; min-width: 0;
}
.menu-ara-ikon { font-size: 0.9rem; opacity: 0.6; }

/* Konum çipi */
.konum-cip {
  display: flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  background: none; border: none; font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--metin); cursor: pointer; padding: 0.4rem 0.5rem; border-radius: 999px;
}
.konum-cip:hover { color: var(--ana); }
.konum-cip.konum-aktif { color: var(--ana-koyu); }

/* Hap butonlar */
.pil {
  display: inline-block; padding: 0.5rem 1.25rem; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: all .15s;
}
.pil-dolu { background: var(--lacivert); color: #fff !important; }
.pil-dolu:hover { background: #0d1626; text-decoration: none; }
.pil-cerceve { background: #fff; border: 1.5px solid var(--cizgi); color: var(--lacivert) !important; }
.pil-cerceve:hover { border-color: var(--lacivert); text-decoration: none; }

/* Butonlar */
.btn {
  display: inline-block; background: var(--ana); color: #fff !important;
  padding: 0.6rem 1.3rem; border-radius: var(--r-kucuk); border: none;
  font-size: 0.95rem; font-weight: 700; font-family: inherit; cursor: pointer; text-align: center;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--ana-koyu); text-decoration: none; box-shadow: 0 4px 12px rgba(0,194,199,.35); }
.btn:active { transform: scale(.98); }
.btn-kucuk { padding: 0.35rem 0.85rem; font-size: 0.85rem; }
.btn-ikincil { background: var(--ana-acik); color: var(--ana-koyu) !important; }
.btn-ikincil:hover { background: #cef3f5; box-shadow: none; }
.btn-tehlike { background: #fff; color: var(--hata) !important; border: 1px solid var(--cizgi); }
.btn-tehlike:hover { background: var(--hata-acik); border-color: var(--hata); box-shadow: none; }
.baglanti-buton {
  background: none; border: none; color: var(--soluk); cursor: pointer;
  font-size: 0.92rem; font-weight: 600; font-family: inherit; padding: 0;
}
.baglanti-buton:hover { color: var(--hata); }
.satir-ici { display: inline; }

/* İçerik */
.icerik { flex: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem; }

/* Mesaj (flash) */
.mesaj { padding: 0.85rem 1.1rem; border-radius: var(--r-kucuk); margin-bottom: 1rem; font-weight: 500; font-size: 0.93rem; }
.mesaj-basari { background: var(--basari-acik); color: var(--basari); }
.mesaj-hata { background: var(--hata-acik); color: var(--hata); }
.mesaj-uyari { background: var(--uyari-acik); color: var(--uyari); }

/* Kartlar */
.kart {
  background: var(--kart); border-radius: var(--r);
  box-shadow: var(--golge); padding: 1.3rem; margin-bottom: 1rem;
}
.kart h2, .kart h3 { margin-bottom: 0.8rem; letter-spacing: -0.01em; }

.kart-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.1rem;
}
.isletme-kart {
  background: var(--kart); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--golge);
  transition: transform .18s, box-shadow .18s;
}
.isletme-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }
.isletme-kart a { color: inherit; display: block; }
.isletme-kart a:hover { text-decoration: none; }
.isletme-kart-foto {
  width: 100%; height: 155px; object-fit: cover; display: block;
  background: linear-gradient(135deg, #e4f9fb, #c5eff1);
}
div.isletme-kart-foto { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.isletme-kart-govde { padding: 0.85rem 0.95rem 1rem; }
.isletme-kart-govde h3 { margin-bottom: 0.15rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.kart-alt { font-size: 0.83rem; color: var(--soluk); }

/* Puan — marka mockup'ındaki gibi amber yıldızlar */
.puan { color: var(--vurgu); font-weight: 700; font-size: 0.9rem; }
.puan-bos { color: #ddd; }

/* Formlar */
.form-dar { max-width: 440px; margin: 0 auto; }
.form-orta { max-width: 660px; margin: 0 auto; }
.form-grup { margin-bottom: 1rem; }
.form-grup label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form-grup input, .form-grup select, .form-grup textarea {
  width: 100%; padding: 0.65rem 0.85rem; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-kucuk); font-size: 0.95rem; font-family: inherit; background: #fff;
  transition: border-color .15s;
}
.form-grup input:focus, .form-grup select:focus, .form-grup textarea:focus {
  border-color: var(--ana); outline: none;
}
.form-grup textarea { min-height: 100px; resize: vertical; }

/* Izgara form (admin Personel Ekle vb.): etiket üstte, alanlar 3 sütun */
.form-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.1rem; align-items: end; }
.form-izgara > label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--metin); }
.form-izgara > label > input, .form-izgara > label > select {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk);
  font-size: 0.95rem; font-family: inherit; background: #fff; font-weight: 400;
  transition: border-color .15s;
}
.form-izgara > label > input:focus, .form-izgara > label > select:focus {
  border-color: var(--ana); outline: none;
}
@media (max-width: 800px) { .form-izgara { grid-template-columns: 1fr; } }
.form-satir { display: flex; gap: 0.8rem; }
.form-satir .form-grup { flex: 1; }
.form-not { font-size: 0.83rem; color: var(--soluk); margin-top: 0.25rem; }

/* Tablolar */
.tablo { width: 100%; border-collapse: collapse; background: var(--kart); border-radius: var(--r-kucuk); overflow: hidden; }
.tablo th, .tablo td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--cizgi); text-align: left; font-size: 0.92rem; }
.tablo th { background: #f6f8fb; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #8a94a6; }
.tablo tr:last-child td { border-bottom: none; }
.tablo tbody tr { transition: background .12s; }
.tablo tbody tr:hover { background: #f6f9fc; }
.tablo-sarici { overflow-x: auto; border-radius: var(--r-kucuk); }

/* Rozetler */
.rozet { display: inline-block; padding: 0.18rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.rozet-beklemede { background: var(--uyari-acik); color: var(--uyari); }
.rozet-onaylandi, .rozet-onayli { background: var(--basari-acik); color: var(--basari); }
.rozet-iptal, .rozet-reddedildi { background: var(--hata-acik); color: var(--hata); }
.rozet-tamamlandi { background: #e4f0fb; color: #2c5687; }
.rozet-gelmedi, .rozet-pasif { background: #ececec; color: #666; }
/* Müşteri disiplin kartları (yalnız admin ekranı) */
.rozet-sari { background: #fdf3d7; color: #8a6d1a; border: 1px solid #e8cf85; }
.rozet-kirmizi { background: #fde3e3; color: #a11818; border: 1px solid #eba3a3; }
.rozet-kart-pasif { background: #eef1f5; color: #5a6b80; border: 1px solid #cfd8e3; }

/* Hata sayfası */
.hata-kutusu { text-align: center; padding: 3.5rem 1rem; }
.hata-kutusu h1 { font-size: 4.5rem; color: var(--ana); letter-spacing: -0.03em; }
.hata-kutusu h2 { margin-bottom: 0.5rem; }
.hata-kutusu p { color: var(--soluk); margin-bottom: 1.5rem; }

/* Arama şeridi (hero) */
.arama-serit {
  background: var(--kart); border-radius: 16px; box-shadow: var(--golge);
  padding: 2.4rem 1.6rem 2rem; margin-bottom: 1.6rem; text-align: center;
  background-image: radial-gradient(circle at 12% 15%, var(--ana-acik) 0%, transparent 45%),
                    radial-gradient(circle at 88% 85%, var(--ana-acik) 0%, transparent 45%);
}
.arama-serit h1 { margin-bottom: 0.4rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.arama-serit h1 em { color: var(--ana); font-style: normal; }
.arama-serit p { color: var(--soluk); margin-bottom: 1.3rem; }
.arama-form { display: flex; gap: 0.55rem; max-width: 700px; margin: 0 auto; flex-wrap: wrap; }
.arama-form input, .arama-form select {
  flex: 1; min-width: 140px; padding: 0.7rem 0.95rem; border: 1.5px solid var(--cizgi);
  border-radius: 10px; font-size: 0.95rem; font-family: inherit; background: #fff;
  transition: border-color .15s;
}
.arama-form input:focus, .arama-form select:focus { border-color: var(--ana); outline: none; }
.arama-form .btn { border-radius: 10px; padding: 0.7rem 1.6rem; }

/* Kategori çipleri */
.cipler { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.1rem; }
.cip {
  padding: 0.42rem 1.05rem; border-radius: 999px; background: var(--kart);
  border: 1.5px solid var(--cizgi); color: var(--metin); font-weight: 600; font-size: 0.88rem;
  transition: all .15s;
}
.cip:hover { border-color: var(--ana); color: var(--ana); text-decoration: none; }
.cip.aktif { background: var(--ana); border-color: var(--ana); color: #fff; }

/* Bölüm başlığı */
.bolum-baslik { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.bolum-baslik h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

/* İşletme detay */
.detay-baslik { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 0.8rem; }
.detay-baslik h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.galeri { display: flex; gap: 0.6rem; overflow-x: auto; margin: 1rem 0; padding-bottom: 0.3rem; }
.galeri img { height: 165px; border-radius: 10px; cursor: pointer; transition: transform .15s; }
.galeri img:hover { transform: scale(1.03); }
.hizmet-satir { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--cizgi); align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hizmet-satir:last-child { border-bottom: none; }
.hizmet-fiyat { font-weight: 800; color: var(--metin); white-space: nowrap; }
.hizmet-sure { color: var(--soluk); font-size: 0.83rem; }
#harita { height: 300px; border-radius: var(--r); }
.yorum { border-bottom: 1px solid var(--cizgi); padding: 0.85rem 0; }
.yorum:last-child { border-bottom: none; }
.yorum-ust { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.2rem; }

/* Randevu saat seçici */
.saat-izgara { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.saat-kutu {
  padding: 0.5rem 0.95rem; border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk);
  background: #fff; color: var(--metin); font-weight: 600; cursor: pointer; font-size: 0.92rem;
  font-family: inherit; transition: all .12s;
}
.saat-kutu:hover { border-color: var(--ana); color: var(--ana); }
.saat-kutu.secili { background: var(--ana); border-color: var(--ana); color: #fff; }

/* Panel gün görünümü */
.gun-secici { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.gun-secici input[type="date"] {
  padding: 0.5rem 0.7rem; border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk); font-family: inherit;
}
.zaman-cizelge { border-left: 3px solid var(--cizgi); margin-left: 3.2rem; }
.zaman-dilim { position: relative; padding: 0.14rem 0 0.14rem 0.9rem; border-bottom: 1px dashed var(--cizgi); min-height: 1.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.zaman-dilim.dilim-dolu, .zaman-dilim.dilim-blokaj { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.zaman-etiket { position: absolute; left: -3.7rem; width: 3rem; text-align: right; font-size: 0.72rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.zaman-dilim .btn-kucuk { padding: 0.15rem 0.6rem; font-size: 0.75rem; }
.dilim-dolu { background: var(--hata-acik); }
.dilim-blokaj { background: #efefef; }
.dilim-kapali { background: #f4f4f4; color: var(--soluk); }

/* Sayfalama */
.sayfalama { display: flex; gap: 0.4rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  padding: 0.4rem 0.85rem; border-radius: var(--r-kucuk); background: var(--kart);
  box-shadow: var(--golge); font-weight: 600; font-size: 0.9rem;
}
.sayfalama a:hover { color: var(--ana); text-decoration: none; }
.sayfalama .aktif { background: var(--ana); color: #fff; }

/* Panel sekmeleri */
.panel-menu { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.panel-menu a {
  padding: 0.45rem 1rem; border-radius: 999px; color: var(--metin);
  background: var(--kart); box-shadow: var(--golge); font-weight: 600; font-size: 0.9rem;
  transition: all .15s;
}
.panel-menu a:hover { color: var(--ana); text-decoration: none; }
.panel-menu a.aktif { background: var(--ana); color: #fff; }

/* İşletme paneli: kurumsal kenar çubuklu düzen
   (çubuk akışın içinde kalır — float + clearfix; içerik yüksekliği kısa olsa da alta taşmaz) */
.panel-duzen::after { content: ''; display: block; clear: both; }
.panel-yan {
  float: left; width: 226px;
  background: var(--kart); border-radius: 14px; box-shadow: var(--golge);
  padding: 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.panel-duzen > :not(.panel-yan) { margin-left: 254px; min-width: 0; }
.panel-yan-baslik { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.2rem 0.5rem 0.7rem; border-bottom: 1px solid var(--cizgi, #e7eaf0); }
.panel-yan-etiket { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ana); }
.panel-yan-baslik strong { font-size: 0.95rem; line-height: 1.25; color: var(--metin); }
.panel-yan-grup { display: flex; flex-direction: column; gap: 0.15rem; }
.panel-yan-grup-baslik {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8a94a6; padding: 0 0.5rem 0.25rem;
}
.panel-yan-grup a {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.6rem;
  border-radius: 8px; font-size: 0.88rem; font-weight: 600; color: var(--metin);
  border-left: 3px solid transparent;
}
.panel-yan-grup a:hover { background: #f2f5f9; color: var(--ana); text-decoration: none; }
.panel-yan-grup a.aktif { background: var(--lacivert); color: #fff; border-left-color: var(--ana); }
.panel-yan-grup a .kilit-ikon { color: #b5893a; flex-shrink: 0; }
.panel-yan-grup a.aktif .kilit-ikon { color: #ffd98a; }
/* Yönetim paneli modern dokunuşlar */
.panel-duzen h2 { font-size: 1.45rem; letter-spacing: -0.02em; }
.panel-duzen .kart { border: 1px solid #eef1f5; border-radius: 14px; padding: 1.3rem 1.5rem; }
.panel-duzen .kart h3 { font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.panel-duzen .kart-izgara .kart { border-top: 3px solid var(--ana); }
.panel-duzen .kart-izgara .kart h3 { font-size: 1.5rem; color: var(--lacivert); margin-bottom: 0.1rem; white-space: nowrap; }
.panel-duzen .kart-izgara .kart p { color: #7c8798; font-size: 0.85rem; margin: 0; }
.btn { transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { transform: translateY(-1px); }
/* Yönetim panelinde YATAY KAYDIRMA YOK: hücreler kelime sınırında sarar,
   sütunlar azaltıldı (e-posta vb. isim altında), tablo her genişliğe sığar */
.icerik.panel-duzen { max-width: 1460px; }
.panel-duzen .tablo { font-size: 0.85rem; }
.panel-duzen .tablo th, .panel-duzen .tablo td {
  white-space: normal; vertical-align: middle; padding: 0.5rem 0.6rem; line-height: 1.3;
}
.panel-duzen .tablo th { line-height: 1.2; }
.panel-duzen .tablo td .satir-ici { display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle; flex-wrap: wrap; }
.panel-duzen .tablo .btn-kucuk { white-space: nowrap; padding: 0.3rem 0.7rem; font-size: 0.78rem; }
.panel-duzen .tablo .rozet { white-space: nowrap; }
.panel-duzen .tablo td.kisalt { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Son sütun (işlemler): düğmeler dar ekranda alt alta iner, tablo taşmaz */
.panel-duzen .tablo td:last-child form.satir-ici,
.panel-duzen .tablo td:last-child a.btn-kucuk { display: block; margin: 0 0 0.3rem; width: max-content; }
.panel-duzen .tablo td:last-child form.satir-ici:last-child { margin-bottom: 0; }
.panel-duzen .tablo td:last-child input[type="text"] { margin-bottom: 0.25rem; }
.hucre-alt { display: block; font-size: 0.76rem; color: #8a94a6; margin-top: 0.1rem; word-break: break-all; }
/* Tablo içi küçük form alanları da form stiliyle uyumlu */
.panel-duzen .tablo input[type="text"], .panel-duzen .tablo input[type="password"], .panel-duzen .tablo input[type="search"] {
  border: 1.5px solid var(--cizgi); border-radius: 8px; padding: 0.35rem 0.55rem;
  font: inherit; font-size: 0.84rem; background: #fff;
}
.panel-duzen .tablo input:focus { border-color: var(--ana); outline: none; }

/* Personel kartları */
.personel-satir {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem; border: 1px solid #eef1f5; border-radius: 12px;
  margin-bottom: 0.7rem; background: #fff; box-shadow: 0 1px 3px rgba(21,34,56,0.04);
}
.personel-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--lacivert); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; flex-shrink: 0;
}
.personel-bilgi { min-width: 170px; }
.personel-bilgi strong { display: block; font-size: 0.95rem; }
.personel-islemler { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.personel-islemler input[type="password"] {
  width: 120px; padding: 0.42rem 0.6rem; border: 1.5px solid var(--cizgi); border-radius: 8px;
  font: inherit; font-size: 0.84rem;
}
.personel-islemler input[type="password"]:focus { border-color: var(--ana); outline: none; }
.rol-rozet { padding: 0.22rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.rol-admin    { background: var(--lacivert); color: #fff; }
.rol-danisman { background: #d9f6f7; color: #0f7d81; }
.rol-dernek   { background: #fdf3d7; color: #8a6d1a; }
.rol-yazilim  { background: #ece7fb; color: #5b3fa8; }
.personel-yetkiler { flex-basis: 100%; border-top: 1px dashed var(--cizgi); padding-top: 0.6rem; }
.personel-yetkiler summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--lacivert); }
.personel-yetkiler .yetki-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.1rem 1rem; margin-top: 0.5rem;
}

/* Başlığa tıklayınca sıralama */
.panel-duzen .tablo th.siralanir { cursor: pointer; user-select: none; }
.panel-duzen .tablo th.siralanir:hover { color: var(--ana); }
.panel-duzen .tablo th[data-yon="artan"]::after { content: ' ▲'; font-size: 0.65rem; }
.panel-duzen .tablo th[data-yon="azalan"]::after { content: ' ▼'; font-size: 0.65rem; }

/* Canlı destek sohbeti */
.destek-duzen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 800px) { .destek-duzen { grid-template-columns: 1fr; } }
.destek-liste { display: flex; flex-direction: column; gap: 0.2rem; }
.destek-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.6rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; color: var(--metin);
}
.destek-satir:hover { background: #f2f5f9; text-decoration: none; }
.destek-satir.aktif { background: var(--lacivert); color: #fff; }
.destek-akis {
  max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.6rem; background: #f6f8fb; border-radius: 10px;
}
.mesaj-balon { max-width: 78%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.9rem; }
.balon-biz { align-self: flex-end; background: var(--lacivert); color: #fff; border-bottom-right-radius: 4px; }
.balon-karsi { align-self: flex-start; background: #fff; border: 1px solid var(--cizgi); border-bottom-left-radius: 4px; }
.balon-alt { font-size: 0.68rem; opacity: 0.65; margin-top: 0.25rem; }

/* İşletme Doğrulama / eğitim ilerleme çubuğu */
.ilerleme-cubuk { height: 10px; background: #e8ecf2; border-radius: 999px; overflow: hidden; }
.ilerleme-dolu { height: 100%; background: linear-gradient(90deg, var(--ana), #35b6bb); border-radius: 999px; transition: width .3s; }
.ilerleme-dolu.ilerleme-tamam { background: linear-gradient(90deg, #2fb56b, #1f9e57); }

.yan-rozet {
  margin-left: auto; background: var(--ana); color: #fff; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; padding: 0.05rem 0.45rem; line-height: 1.4;
}
.panel-yan-grup a.aktif .yan-rozet { background: #fff; color: var(--lacivert); }
.panel-yan-vitrin {
  margin-top: 0.1rem; text-align: center; padding: 0.5rem 0.6rem; border-radius: 999px;
  background: #f2f5f9; color: var(--lacivert); font-size: 0.85rem; font-weight: 700;
}
.panel-yan-vitrin:hover { background: var(--ana); color: #fff; text-decoration: none; }
@media (max-width: 1100px) {
  .panel-duzen > :not(.panel-yan) { margin-left: 0; }
  .panel-yan { float: none; width: auto; margin-bottom: 1.1rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
  .panel-yan-baslik { display: none; }
  .panel-yan-grup { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .panel-yan-grup-baslik { display: none; }
  .panel-yan-grup a { border-left: none; background: #f2f5f9; }
  .panel-yan-grup a.aktif { background: var(--lacivert); }
}

/* Foto yönetimi */
.foto-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
.foto-kutu { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--golge); background: var(--kart); }
.foto-kutu img { width: 100%; height: 120px; object-fit: cover; display: block; }
.foto-kutu .foto-islem { display: flex; gap: 0.3rem; padding: 0.45rem; justify-content: center; }
.kapak-rozet { position: absolute; top: 8px; left: 8px; background: var(--ana); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; }

/* Alt bilgi — marka laciverti */
.alt-bilgi {
  background: var(--lacivert); color: #9fb0c7; text-align: center;
  padding: 1.6rem 1rem; margin-top: 2.5rem; font-size: 0.88rem;
}
.alt-bilgi a { color: var(--ana); }
.alt-logo { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.2rem; }
.alt-logo .logo-bi { color: #fff; }
.alt-logo-ikon { width: 40px; height: 40px; margin: 0 auto 0.35rem; display: block; }

/* Arama sayfası: sol filtre paneli + sonuçlar */
.ara-duzen { display: grid; grid-template-columns: 270px 1fr; gap: 1.2rem; align-items: start; }
.filtre-panel { position: sticky; top: 74px; }
.filtre-panel h4 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.filtre-bolum { margin: 1.1rem 0; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
.filtre-arama {
  width: 100%; padding: 0.5rem 0.8rem; border: 1.5px solid var(--cizgi); border-radius: 999px;
  font-family: inherit; font-size: 0.88rem; margin-bottom: 0.6rem;
}
.filtre-arama:focus { border-color: var(--ana); outline: none; }
.secim-satir {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0;
  font-size: 0.92rem; cursor: pointer; user-select: none;
}
.secim-satir input { accent-color: var(--ana); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.secim-satir:hover span { color: var(--ana); }
.secim-pasif { opacity: 0.5; }
.daha-fazla {
  background: none; border: none; color: var(--metin); font-weight: 700; font-family: inherit;
  font-size: 0.88rem; cursor: pointer; padding: 0.4rem 0; width: 100%; text-align: center;
}
.daha-fazla:hover { color: var(--ana); }
.gizli { display: none !important; }

/* Konum seçme modalı */
.konum-kaplama {
  position: fixed; inset: 0; background: rgba(21,34,56,.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.konum-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 560px;
  padding: 1.3rem; box-shadow: var(--golge-buyuk); max-height: 92vh; overflow-y: auto;
}
.konum-modal-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.konum-kapat { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--soluk); padding: 0.2rem 0.5rem; }
.konum-kapat:hover { color: var(--metin); }
.konum-ara-satir { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.konum-ara-satir input {
  flex: 1; padding: 0.6rem 0.9rem; border: 1.5px solid var(--cizgi); border-radius: 999px;
  font-family: inherit; font-size: 0.9rem;
}
.konum-ara-satir input:focus { border-color: var(--ana); outline: none; }
.konum-sonuclar {
  border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); margin-bottom: 0.6rem;
  max-height: 160px; overflow-y: auto;
}
.konum-sonuc {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--cizgi); padding: 0.55rem 0.8rem; font-family: inherit;
  font-size: 0.85rem; cursor: pointer; color: var(--metin);
}
.konum-sonuc:last-child { border-bottom: none; }
.konum-sonuc:hover { background: var(--ana-acik); }
#konumHarita { height: 320px; border-radius: var(--r); margin-bottom: 0.9rem; background: var(--zemin); }
.konum-modal-alt { display: flex; gap: 0.6rem; justify-content: flex-end; }
.konum-modal-alt .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Harf karosu: görsel olmayan kayıtlarda tipografik yer tutucu (emoji yerine) */
.harf-karo {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lacivert), #2c4a7c);
  color: rgba(255,255,255,.92); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.02em;
}
.harf-karo-kucuk { font-size: 1.6rem; border-radius: 10px; }

/* ===== Ana sayfa (Uber Eats düzeni) ===== */
/* Üst reklam bandı */
.reklam-band {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 170px; border-radius: 16px; overflow: hidden; padding: 1.4rem 2rem;
  background: linear-gradient(135deg, #0c2844 0%, #143a5f 55%, #1b4d7e 100%);
  background-size: cover; background-position: center; color: #fff;
  box-shadow: var(--golge);
}
.reklam-band:hover { text-decoration: none; box-shadow: var(--golge-buyuk); }
.reklam-band-icerik { display: flex; flex-direction: column; gap: 0.2rem; max-width: 560px; }
.reklam-band-ust { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7ee7ea; }
.reklam-band-icerik strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.reklam-band-alt { font-size: 0.92rem; color: rgba(255,255,255,.75); }
.reklam-band-cta {
  flex-shrink: 0; background: #fff; color: var(--lacivert); font-weight: 700; font-size: 0.92rem;
  padding: 0.65rem 1.4rem; border-radius: 999px; white-space: nowrap;
}

/* Sol filtre paneli + içerik ızgarası */
.ana-duzen { display: grid; grid-template-columns: 270px 1fr; gap: 1.3rem; align-items: start; margin-top: 1.3rem; }
.ana-filtre { position: sticky; top: 74px; }
.ana-filtre h4 { font-size: 0.95rem; margin-bottom: 0.45rem; }
.ana-icerik { min-width: 0; }

/* Carousel (kategoriler, kampanyalar, kampanyalı işletmeler) */
.carousel-sarici { position: relative; }
.carousel-serit {
  display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 0.4rem; scrollbar-width: none;
}
.carousel-serit::-webkit-scrollbar { display: none; }
.carousel-serit > * { scroll-snap-align: start; }
.carousel-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--lacivert); color: #fff; font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--golge-buyuk); opacity: 0.9; transition: opacity .15s;
}
.carousel-ok:hover { opacity: 1; }
.carousel-ok-sol { left: -10px; }
.carousel-ok-sag { right: -10px; }

/* Kategori karoları */
.kategori-karo {
  flex: 0 0 auto; width: 118px; background: var(--kart); border-radius: 12px;
  box-shadow: var(--golge); overflow: hidden; text-align: center; color: var(--metin);
  transition: transform .15s, box-shadow .15s;
}
.kategori-karo:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--golge-buyuk); }
.kategori-karo img { width: 100%; height: 86px; object-fit: cover; display: block; }
.kategori-karo span { display: block; font-size: 0.8rem; font-weight: 700; padding: 0.45rem 0.3rem 0.55rem; line-height: 1.2; }

/* Kategori ikonları: beyaz zeminli çizgi ikonlar (görselleri/icon-pack.png setinden) */
.kategori-karo img.kategori-ikon {
  height: 86px; object-fit: contain; background: #fff; padding: 10px 16px 4px;
}

/* Kampanya kartları (işletme fotoğrafı zeminli) */
.kamp-kart {
  flex: 0 0 auto; width: 290px; height: 175px; border-radius: 14px; overflow: hidden;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0.9rem 1rem; color: #fff; background: linear-gradient(135deg, var(--lacivert), #2c4a7c);
  background-size: cover; background-position: center; box-shadow: var(--golge);
  transition: transform .15s, box-shadow .15s;
}
.kamp-kart::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,34,56,.15) 20%, rgba(21,34,56,.85) 100%);
}
.kamp-kart:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--golge-buyuk); }
.kamp-kart > * { position: relative; }
.kamp-kart-etiket {
  position: absolute; top: 0.8rem; left: 1rem; background: var(--ana); color: #fff;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.22rem 0.6rem; border-radius: 999px;
}
.kamp-kart-baslik {
  font-weight: 800; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kamp-kart-isletme { font-size: 0.8rem; color: rgba(255,255,255,.75); margin-top: 0.15rem; }

/* Kampanyalı işletme kartları (rozetli) */
.kampli-kart {
  flex: 0 0 auto; width: 300px; background: var(--kart); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--golge); color: var(--metin);
  transition: transform .15s, box-shadow .15s;
}
.kampli-kart:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--golge-buyuk); }
.kampli-foto-sarici { position: relative; height: 150px; }
.kampli-foto-sarici img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kampli-harf { width: 100%; height: 100%; }
.kampli-rozetler { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 92%; }
.kampli-rozet {
  background: var(--lacivert); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%;
}
.kampli-govde { padding: 0.7rem 0.9rem 0.85rem; }
.kampli-ust { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.1rem; min-width: 0; }
.kampli-ust strong { font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puan-cip-mini { font-size: 0.75rem; padding: 0.18rem 0.5rem; border-radius: 6px; flex-shrink: 0; }

/* İşletme detay — Uber Eats düzeni */
/* Üst şerit: içerik kolonundan taşıp tam genişlik beyaz bant olur */
.ue-band {
  margin: -1.5rem calc(50% - 50vw) 0; background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
}
.ue-ic { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1rem 1.4rem; }
.ue-ust { display: flex; gap: 1.5rem; align-items: flex-start; }
.ue-kapak {
  width: 185px; height: 185px; object-fit: cover; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #e4f9fb, #c5eff1);
}
div.ue-kapak-bos { display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.ue-bilgi { flex: 1; min-width: 0; }
.ue-bilgi h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.15rem; }
.ue-altbaslik { color: var(--soluk); font-size: 0.95rem; margin-bottom: 0.75rem; }
.ue-hakkinda { color: var(--metin); font-weight: 600; }
.ue-hakkinda:hover { color: var(--ana); text-decoration: none; }
.detay-cipler { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.9rem; }
.puan-cip {
  display: inline-block; background: var(--basari); color: #fff; font-weight: 700;
  font-size: 0.88rem; padding: 0.42rem 0.9rem; border-radius: var(--r-kucuk);
}
.puan-cip-bos { background: #eef1f5; color: var(--soluk); }
.ue-meta { display: flex; flex-wrap: wrap; font-size: 0.93rem; }
.ue-meta > div { padding: 0 1.2rem; border-left: 1px solid var(--cizgi); }
.ue-meta > div:first-child { padding-left: 0; border-left: none; }
.detay-meta-baslik { display: block; font-size: 0.8rem; color: var(--soluk); font-weight: 600; }
/* Tek satır ödeme yöntemleri */
.ue-odeme { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--cizgi); font-size: 0.9rem; font-weight: 500; }
.ue-odeme .detay-meta-baslik { margin-bottom: 0.1rem; }
/* Kenar çubuğu ara başlığı (Paketler) */
.ue-yan-baslik {
  padding: 0.65rem 1rem 0.25rem; font-size: 0.78rem; font-weight: 800; color: var(--soluk);
  text-transform: uppercase; letter-spacing: 0.06em; border-top: 1px solid var(--cizgi); margin-top: 0.3rem;
}

/* Sarı uyarı bandı (girişsiz ziyaretçi) */
.ue-uyari-band {
  margin: 0 calc(50% - 50vw); background: #fdf3dd; color: #5c4a12;
  text-align: center; padding: 0.6rem 1rem; font-size: 0.92rem; font-weight: 500;
}
.ue-uyari-band a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Gövde: sol kenar çubuğu + ürün alanı */
.ue-govde {
  display: grid; grid-template-columns: 250px 1fr; gap: 1.3rem;
  align-items: start; margin-top: 1.4rem; scroll-margin-top: 80px;
}
.ue-yan { position: sticky; top: 74px; }
.ue-yan h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.ue-yan-liste {
  background: var(--kart); border-radius: var(--r); box-shadow: var(--golge);
  padding: 0.5rem 0; display: flex; flex-direction: column;
}
.ue-yan-liste button {
  text-align: left; background: none; border: none; border-left: 3px solid transparent;
  font-family: inherit; font-size: 0.93rem; color: var(--metin); cursor: pointer;
  padding: 0.6rem 1rem; transition: all .12s;
}
.ue-yan-liste button:hover { color: var(--ana); }
.ue-yan-liste button.aktif { border-left-color: var(--lacivert); font-weight: 700; }
.ue-ara { max-width: none; background: var(--kart); border: 1.5px solid var(--cizgi); padding: 0.7rem 1.2rem; }
.ue-ara:focus-within { border-color: var(--ana); }

/* Ürün (hizmet) kartları — görselli yatay kart */
.hizmet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0.9rem; }
.hizmet-kart {
  background: var(--kart); border-radius: var(--r); box-shadow: var(--golge);
  padding: 0.9rem; display: flex; gap: 0.9rem; align-items: flex-start;
  border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s;
}
.hizmet-kart:hover { box-shadow: var(--golge-buyuk); }
.hizmet-kart-aktif { border-color: var(--ana); }
.hizmet-kart-foto {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #e4f9fb, #c5eff1);
}
div.hizmet-kart-foto-bos { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.hizmet-kart-icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.hizmet-kart-icerik strong { font-size: 0.98rem; letter-spacing: -0.01em; }
.hizmet-kart-alt { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.55rem; }
.hizmet-sec { padding: 0.38rem 1rem; font-size: 0.85rem; }

/* Boş saat paneli */
.randevu-panel { margin-top: 1.1rem; border: 1.5px solid var(--ana); border-radius: var(--r); padding: 1rem 1.1rem; background: #fff; }
.randevu-panel-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.randevu-panel-baslik h3 { margin: 0; font-size: 1.05rem; }
.gun-cipler { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; }
.gun-cip {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  padding: 0.45rem 0.7rem; border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk);
  background: #fff; font-family: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: all .12s; color: var(--metin);
}
.gun-cip small { font-weight: 500; color: var(--soluk); font-size: 0.75rem; }
.gun-cip:hover { border-color: var(--ana); color: var(--ana); }
.gun-cip.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
.gun-cip.secili small { color: #d8f7f8; }
.randevu-onay { display: flex; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
.randevu-onay input[type="text"] {
  flex: 1; min-width: 200px; padding: 0.55rem 0.85rem; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-kucuk); font-family: inherit; font-size: 0.92rem;
}
.randevu-onay input[type="text"]:focus { border-color: var(--ana); outline: none; }
.randevu-giris { margin-top: 0.9rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.randevu-giris p { font-weight: 600; margin-right: 0.3rem; }

/* Hesap doğrulama */
.dogrulama-blok { border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.dogrulama-blok.dogrulama-tamam { border-color: var(--basari-acik); background: var(--basari-acik); }
.dogrulama-ust { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dogrulama-kod-form { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.dogrulama-kod-form input {
  flex: 1; max-width: 180px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--cizgi);
  border-radius: var(--r-kucuk); font-family: inherit; font-size: 1rem; letter-spacing: 0.2em;
}
.dogrulama-kod-form input:focus { border-color: var(--ana); outline: none; }
.dogrulama-gecici-kod { background: var(--uyari-acik); color: var(--uyari); border-radius: var(--r-kucuk); padding: 0.5rem 0.8rem; margin-top: 0.6rem; font-size: 0.88rem; }

/* Üyelik adımları (panel kontrol listesi) */
.uyelik-kutu { border-left: 4px solid var(--ana); }
.uyelik-adimlar { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.35rem 1rem; }
.uyelik-adimlar li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.uyelik-adimlar .adim-isaret { font-weight: 800; color: var(--soluk); width: 1.1rem; text-align: center; }
.uyelik-adimlar li.adim-tamam { color: var(--soluk); }
.uyelik-adimlar li.adim-tamam .adim-isaret { color: var(--basari); }
.uyelik-adimlar a { font-weight: 600; }

/* Raporlar */
.rapor-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.rapor-kutu { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0; padding: 1rem 1.1rem; }
.rapor-deger { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--lacivert); }
.rapor-etiket { font-size: 0.82rem; color: var(--soluk); font-weight: 600; }
.rapor-cubuk {
  display: inline-block; vertical-align: middle; width: 90px; height: 8px;
  background: var(--zemin); border-radius: 999px; overflow: hidden; margin-right: 0.4rem;
}
.rapor-cubuk span { display: block; height: 100%; background: var(--ana); border-radius: 999px; }

/* Çalışanlar */
.calisan-pasif { opacity: 0.65; }
.calisan-ust { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.calisan-ad {
  font-weight: 700; font-size: 1rem; font-family: inherit; padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-kucuk); min-width: 220px;
}
.calisan-ad:focus { border-color: var(--ana); outline: none; }
.calisan-hizmetler { display: flex; gap: 0.2rem 1.2rem; flex-wrap: wrap; }

/* Çalışan seçim çipleri (müşteri tarafı) */
.calisan-cipler { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.calisan-cip {
  padding: 0.42rem 1rem; border: 1.5px solid var(--cizgi); border-radius: 999px;
  background: #fff; font-family: inherit; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; color: var(--metin); transition: all .12s;
}
.calisan-cip:hover { border-color: var(--ana); color: var(--ana); }
.calisan-cip.secili { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }

/* Foto mekan rozeti + seçimi */
.mekan-rozet { position: absolute; top: 8px; right: 8px; background: rgba(21,34,56,.75); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; }
.foto-mekan-form { padding: 0.45rem 0.45rem 0; }
.foto-mekan-form select { width: 100%; padding: 0.3rem 0.4rem; border: 1px solid var(--cizgi); border-radius: 6px; font-family: inherit; font-size: 0.82rem; }

/* Randevularım — tarih bloklu kart listesi */
.rand-liste { display: flex; flex-direction: column; gap: 0.8rem; }
.rand-bolum-baslik { font-size: 1.2rem; }
.rand-kart {
  background: var(--kart); border-radius: var(--r); box-shadow: var(--golge);
  padding: 0.95rem 1.1rem; display: flex; gap: 1rem; align-items: center;
}
.rand-tarih {
  flex-shrink: 0; width: 62px; text-align: center; background: var(--ana-acik);
  border-radius: 10px; padding: 0.5rem 0.2rem; display: flex; flex-direction: column; line-height: 1.2;
}
.rand-tarih-gun { font-size: 1.3rem; font-weight: 800; color: var(--lacivert); letter-spacing: -0.02em; }
.rand-tarih-ay { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ana-koyu); letter-spacing: 0.05em; }
.rand-tarih-hafta { font-size: 0.72rem; font-weight: 600; color: var(--soluk); }
.rand-gecmis .rand-tarih { background: var(--zemin); }
.rand-gecmis .rand-tarih-gun, .rand-gecmis .rand-tarih-ay { color: var(--soluk); }
.rand-govde { flex: 1; min-width: 0; }
.rand-ust { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.1rem; }
.rand-ust a { color: var(--metin); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.rand-ust a:hover { color: var(--ana); text-decoration: none; }
.rand-detay { font-size: 0.88rem; color: var(--soluk); }
.rand-saat { font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }
.rand-islem { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; max-width: 40%; text-align: right; }

/* Boş durum (hiç randevu yokken çağrı kartı) */
.bos-durum { text-align: center; padding: 2.4rem 1.2rem; }
.bos-durum h3 { margin-bottom: 0.3rem; }
.bos-durum p { margin-bottom: 1.1rem; }
.bos-durum-kucuk { padding: 1.4rem 1.2rem; }
.bos-durum-kucuk p { margin-bottom: 0.8rem; }

/* Randevu modalı — onaydan önce seçim özeti */
.secim-ozet {
  margin-top: 0.9rem; display: flex; align-items: center; gap: 0.55rem;
  background: var(--ana-acik); border: 1.5px solid var(--ana); border-radius: var(--r-kucuk);
  padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.92rem; color: var(--lacivert);
}
.secim-ozet svg { color: var(--ana-koyu); flex-shrink: 0; }

/* Yorum — yıldız seçici (DOM 5→1, row-reverse ile görsel 1→5) */
.yildiz-secici { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.yildiz-secici input { position: absolute; opacity: 0; width: 0; height: 0; }
.yildiz-secici label {
  font-size: 2rem; line-height: 1; color: #d8dee6; cursor: pointer;
  transition: color .1s, transform .1s; padding: 0.1rem;
}
.yildiz-secici label:hover { transform: scale(1.12); }
.yildiz-secici input:checked ~ label,
.yildiz-secici label:hover,
.yildiz-secici label:hover ~ label { color: var(--vurgu); }
.yildiz-secici input:focus-visible + label { outline: 2px solid var(--ana); outline-offset: 2px; border-radius: 6px; }

/* Hesap sayfaları (giriş / üye ol) */
.hesap-kart { margin-top: 1.5rem; padding: 1.9rem 1.7rem; }
.hesap-baslik { text-align: center; margin-bottom: 1.4rem; }
.hesap-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.hesap-baslik h2 { margin-bottom: 0.1rem; }
.hesap-alt {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--cizgi);
  display: flex; flex-direction: column; gap: 0.3rem; text-align: center;
  font-size: 0.88rem; color: var(--soluk);
}

/* Mobil */
@media (max-width: 900px) {
  .ara-duzen { grid-template-columns: 1fr; }
  .filtre-panel { position: static; }
  .ana-duzen { grid-template-columns: 1fr; }
  /* Mobilde önce içerik, filtre paneli en alta */
  .ana-filtre { order: 2; }
  .ana-icerik { order: 1; }
  .reklam-band { flex-direction: column; align-items: flex-start; padding: 1.2rem 1.3rem; }
  .ue-govde { grid-template-columns: 1fr; }
  .ue-yan { position: static; }
  .ue-yan-liste { flex-direction: row; overflow-x: auto; padding: 0.3rem; }
  .ue-yan-liste button { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .ue-yan-liste button.aktif { border-bottom-color: var(--lacivert); }
}
@media (max-width: 600px) {
  .menu-ara { order: 5; flex-basis: 100%; max-width: none; }
  .form-satir { flex-direction: column; gap: 0; }
  .detay-baslik { flex-direction: column; }
  .ue-ust { flex-direction: column; }
  .ue-kapak { width: 100%; height: 180px; }
  .ue-ic { padding: 1rem; }
  .ue-bilgi h1 { font-size: 1.4rem; }
  .ue-meta { gap: 0.4rem 0; }
  .ue-meta > div { padding: 0 0.8rem 0 0; border-left: none; }
  .hizmet-izgara { grid-template-columns: 1fr; }
  .reklam-band { min-height: 130px; }
  .reklam-band-icerik strong { font-size: 1.2rem; }
  .reklam-band-cta { display: none; }
  .kamp-kart { width: 250px; height: 160px; }
  .kampli-kart { width: 260px; }
  .carousel-ok-sol { left: 4px; }
  .carousel-ok-sag { right: 4px; }
  .galeri img { height: 115px; }
  .zaman-cizelge { margin-left: 2.9rem; }
  .arama-serit { padding: 1.6rem 1rem 1.4rem; }
  .arama-serit h1 { font-size: 1.4rem; }
  /* Randevu kartı mobilde: işlem satırı alta iner, tam genişlik */
  .rand-kart { flex-wrap: wrap; gap: 0.8rem; }
  .rand-islem { flex-direction: row; width: 100%; max-width: none; justify-content: flex-end; }
  .hesap-kart { padding: 1.4rem 1.1rem; }
}

/* =====================================================================
   v2 — "Ferah ve canlı" görünüm katmanı (10 Kas 2026)
   Müşteri yüzü: ana sayfa, arama, işletme detayı, giriş/üye ol, randevularım.
   Düzen ve marka aynı; boşluk, tipografi, kart ve düğme dili yenilendi.
   Panel ekranları eski zemin rengini korur (aşağıda body:has kuralı).
   ===================================================================== */
:root {
  --ana-koyu: #007a80;            /* beyaz zeminde okunur turkuaz (bağlantı, metin) */
  --ana-canli: #00b3b8;           /* düğme üzerine gelince */
  --zemin: #ffffff;
  --yuzey: #f4f6f9;               /* giriş alanları, sakin dolgular */
  --cizgi: #e5e9ef;
  --soluk: #5b6b80;
  --golge: 0 1px 2px rgba(21,34,56,.05);
  --golge-buyuk: 0 22px 44px -18px rgba(21,34,56,.28), 0 4px 12px rgba(21,34,56,.06);
  --r: 20px;
  --r-kucuk: 12px;
  --gecis: cubic-bezier(.16, 1, .3, 1);
}
body:has(.panel-duzen) { background: #f2f4f7; }

::selection { background: var(--ana); color: var(--lacivert); }
html { scrollbar-color: #c3ccd8 transparent; scrollbar-width: thin; }
input, textarea { caret-color: var(--ana-koyu); }
a { color: var(--ana-koyu); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--ana-koyu); outline-offset: 3px; border-radius: 8px; }

/* Genişlik */
.ust-menu-ic, .icerik, .ue-ic { max-width: 1240px; }
.icerik { padding: 2rem 1.25rem 3rem; }

/* Üst menü */
.ust-menu-ic { padding: 0.85rem 1.25rem; gap: 0.75rem; }
.logo { font-size: 1.55rem; letter-spacing: -0.035em; }
.logo-makas { color: var(--ana); }
.logo-ikon { width: 38px; height: 38px; }
.menu-ara { background: var(--yuzey); padding: 0.7rem 1.25rem; max-width: 520px; }
.menu-ara:focus-within { background: #fff; border-color: var(--lacivert); box-shadow: 0 0 0 4px rgba(0,194,199,.18); }
.menu-ara input { font-size: 0.96rem; }
.menu-ara input::placeholder { color: var(--soluk); }
.menu-ara-ikon { opacity: 1; color: var(--soluk); }
.menu-baglantilar { gap: 0.6rem; }
.menu-baglantilar a:hover, .konum-cip:hover { color: var(--ana-koyu); }
.konum-cip { padding: 0.6rem 0.9rem; transition: background .2s var(--gecis); }
.konum-cip:hover { background: var(--yuzey); }
.pil { padding: 0.68rem 1.4rem; font-size: 0.92rem; transition: background .2s var(--gecis), border-color .2s var(--gecis), transform .2s var(--gecis); }
.pil:active { transform: scale(.97); }
.pil-cerceve { border-width: 1.5px; }

/* Düğmeler: turkuaz zemin + lacivert yazı (beyaz yazı turkuazda okunmuyordu) */
.btn {
  background: var(--ana); color: var(--lacivert) !important; border-radius: 999px;
  padding: 0.78rem 1.6rem; font-weight: 700; letter-spacing: -0.005em;
  transition: background .2s var(--gecis), transform .2s var(--gecis), box-shadow .2s var(--gecis);
}
.btn:hover { background: var(--ana-canli); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0,150,155,.7); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-kucuk { padding: 0.45rem 1rem; }
.btn-ikincil { background: var(--ana-acik); color: var(--ana-koyu) !important; }
.btn-ikincil:hover { background: #cdf3f5; }
.btn-tehlike { color: var(--hata) !important; }
.btn-tehlike:hover { background: var(--hata-acik); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Seçili durumlar: lacivert dolgu (turkuaz + beyaz yerine) */
.cip.aktif, .saat-kutu.secili, .gun-cip.secili, .sayfalama .aktif, .panel-menu a.aktif {
  background: var(--lacivert); border-color: var(--lacivert); color: #fff;
}
.gun-cip.secili small { color: #b9c6d8; }
.cip:hover, .saat-kutu:hover, .gun-cip:hover, .calisan-cip:hover { border-color: var(--lacivert); color: var(--lacivert); }
.cip.aktif:hover, .saat-kutu.secili:hover, .gun-cip.secili:hover { color: #fff; }
.kapak-rozet, .yan-rozet { color: var(--lacivert); }

/* Kartlar: gölge yerine ince çizgi; derinlik yalnız üzerine gelince */
.kart { border: 1px solid var(--cizgi); box-shadow: none; padding: 1.5rem; }
.mesaj { border-radius: var(--r-kucuk); padding: 0.95rem 1.2rem; }

/* Formlar */
.form-grup label { font-size: 0.88rem; margin-bottom: 0.45rem; }
.form-grup input, .form-grup select, .form-grup textarea,
.filtre-arama, .konum-ara-satir input, .randevu-onay input[type="text"], .arama-form input, .arama-form select {
  background: var(--yuzey); border: 1.5px solid transparent; border-radius: var(--r-kucuk);
  padding: 0.82rem 1rem; font-size: 0.96rem;
  transition: background .2s var(--gecis), border-color .2s var(--gecis), box-shadow .2s var(--gecis);
}
.form-grup input:focus, .form-grup select:focus, .form-grup textarea:focus,
.filtre-arama:focus, .konum-ara-satir input:focus, .randevu-onay input[type="text"]:focus {
  background: #fff; border-color: var(--lacivert); box-shadow: 0 0 0 4px rgba(0,194,199,.18); outline: none;
}
.filtre-arama { border-radius: 999px; padding: 0.65rem 1rem; font-size: 0.9rem; }
.secim-satir { padding: 0.4rem 0; font-size: 0.94rem; }
.secim-satir input { accent-color: var(--lacivert); width: 18px; height: 18px; }
.secim-satir:hover span { color: var(--ana-koyu); }

/* Bölüm başlıkları */
.bolum-baslik { align-items: center; margin-bottom: 1.1rem; }
.bolum-baslik h2 { font-size: 1.6rem; letter-spacing: -0.035em; line-height: 1.15; }
.bolum-baslik > a {
  color: var(--lacivert); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  padding: 0.45rem 0.95rem; border-radius: 999px; border: 1.5px solid var(--cizgi);
  transition: border-color .2s var(--gecis), background .2s var(--gecis);
}
.bolum-baslik > a:hover { text-decoration: none; border-color: var(--lacivert); }

/* ----- Ana sayfa ----- */
/* Üst bant: canlı turkuaz alan, lacivert büyük başlık */
.reklam-band {
  position: relative; min-height: 290px; border-radius: 30px; padding: 2.8rem 3.2rem;
  background:
    radial-gradient(520px 520px at 88% 120%, rgba(255,255,255,.34) 0 46%, transparent 46.4%),
    radial-gradient(300px 300px at 97% -12%, rgba(21,34,56,.10) 0 50%, transparent 50.6%),
    var(--ana);
  color: var(--lacivert); box-shadow: none; align-items: flex-end;
  transition: transform .5s var(--gecis);
}
.reklam-band:hover { box-shadow: none; }
.reklam-band:hover .reklam-band-cta { background: #0d1626; transform: translateX(4px); }
.reklam-band-icerik { max-width: 640px; gap: 0.75rem; align-self: center; }
.reklam-band-ust {
  align-self: flex-start; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--lacivert);
  background: rgba(255,255,255,.55); padding: 0.32rem 0.8rem; border-radius: 999px;
}
.reklam-band-icerik strong {
  font-size: clamp(2rem, 4.3vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance;
}
.reklam-band-alt { font-size: 1.05rem; color: #17384a; max-width: 46ch; line-height: 1.5; }
.reklam-band-cta {
  background: var(--lacivert); color: #fff; padding: 0.95rem 1.8rem; font-size: 0.98rem;
  transition: background .25s var(--gecis), transform .25s var(--gecis);
}
@media (prefers-reduced-motion: no-preference) {
  .reklam-band-icerik > *, .reklam-band-cta { animation: bant-giris .7s var(--gecis) both; }
  .reklam-band-icerik > :nth-child(2) { animation-delay: .06s; }
  .reklam-band-icerik > :nth-child(3) { animation-delay: .12s; }
  .reklam-band-cta { animation-delay: .2s; }
}
@keyframes bant-giris { from { transform: translateY(14px); } } /* içerik her koşulda görünür kalsın diye opaklık oynatılmaz */

/* Kategori karoları */
.carousel-serit { gap: 1rem; padding: 4px 2px 0.6rem; }
.kategori-karo {
  width: 132px; border-radius: 22px; box-shadow: none; border: 1px solid var(--cizgi);
  transition: transform .3s var(--gecis), border-color .3s var(--gecis), box-shadow .3s var(--gecis);
}
.kategori-karo:hover { transform: translateY(-4px); border-color: var(--ana); box-shadow: var(--golge-buyuk); }
.kategori-karo img.kategori-ikon { height: 96px; padding: 16px 20px 4px; }
.kategori-karo span { font-size: 0.84rem; font-weight: 600; padding: 0.4rem 0.4rem 0.9rem; }

/* Carousel okları: beyaz, çizgili */
.carousel-ok {
  width: 44px; height: 44px; background: #fff; color: var(--lacivert); border: 1px solid var(--cizgi);
  box-shadow: 0 6px 16px -6px rgba(21,34,56,.3); opacity: 1; font-size: 1.4rem; padding-bottom: 3px;
  transition: background .2s var(--gecis), color .2s var(--gecis), border-color .2s var(--gecis);
}
.carousel-ok:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.carousel-ok-sol { left: -16px; }
.carousel-ok-sag { right: -16px; }

/* Düzen ızgaraları */
.ana-duzen { grid-template-columns: 280px minmax(0, 1fr); gap: 2.2rem; margin-top: 2.4rem; }
.ara-duzen { grid-template-columns: 290px minmax(0, 1fr); gap: 2.2rem; }
.ana-filtre, .filtre-panel { top: 92px; }
.ana-filtre > h3, .filtre-panel h3 { font-size: 1.2rem; letter-spacing: -0.025em; }
.ana-filtre h4, .filtre-panel h4 { font-size: 0.8rem; font-weight: 700; color: var(--soluk); margin-bottom: 0.55rem; }
.filtre-bolum { margin: 1.3rem 0 0; padding-top: 1.2rem; }
.ana-icerik > .bolum-baslik:not(:first-child) { margin-top: 2.6rem !important; }

/* Kampanya kartları */
.kamp-kart { width: 340px; height: 204px; border-radius: 24px; padding: 1.2rem 1.3rem; box-shadow: none; transition: transform .35s var(--gecis), box-shadow .35s var(--gecis); }
.kamp-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }
.kamp-kart::before { background: linear-gradient(180deg, rgba(21,34,56,.05) 25%, rgba(21,34,56,.9) 100%); }
.kamp-kart-etiket { top: 1rem; left: 1.2rem; color: var(--lacivert); font-size: 0.68rem; padding: 0.28rem 0.7rem; }
.kamp-kart-baslik { font-size: 1.14rem; letter-spacing: -0.02em; line-height: 1.25; }
.kamp-kart-isletme { font-size: 0.84rem; color: rgba(255,255,255,.82); margin-top: 0.3rem; }

/* İşletme kartları */
.kart-izgara { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.isletme-kart, .kampli-kart {
  border: 1px solid var(--cizgi); box-shadow: none; border-radius: var(--r);
  transition: transform .35s var(--gecis), box-shadow .35s var(--gecis), border-color .35s var(--gecis);
}
.isletme-kart:hover, .kampli-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-buyuk); border-color: transparent; }
.isletme-kart a { overflow: hidden; border-radius: inherit; }
.isletme-kart-foto { height: 200px; transition: transform .6s var(--gecis); }
.kampli-kart { width: 330px; }
.kampli-foto-sarici { height: 190px; overflow: hidden; }
.kampli-foto-sarici img, .kampli-harf { transition: transform .6s var(--gecis); }
.isletme-kart:hover .isletme-kart-foto, .kampli-kart:hover .kampli-foto-sarici img, .kampli-kart:hover .kampli-harf { transform: scale(1.05); }
.isletme-kart-govde { padding: 1.05rem 1.15rem 1.2rem; position: relative; background: #fff; }
.isletme-kart-govde h3 { font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.kampli-govde { padding: 0.95rem 1.1rem 1.1rem; position: relative; background: #fff; }
.kampli-ust { margin-bottom: 0.25rem; }
.kampli-ust strong { font-size: 1.05rem; letter-spacing: -0.02em; }
.kampli-rozetler { top: 12px; left: 12px; gap: 6px; }
.kampli-rozet { background: #fff; color: var(--lacivert); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.72rem; box-shadow: 0 4px 10px -4px rgba(21,34,56,.35); }
.kart-alt { font-size: 0.86rem; }
.puan { display: block; margin-top: 0.45rem; font-size: 0.92rem; color: #e08a00; }
.puan-bos { color: #dfe4ea; }
.puan .kart-alt { font-weight: 500; }
.puan-cip { background: var(--basari-acik); color: var(--basari); border-radius: 999px; padding: 0.4rem 0.9rem; }
.puan-cip-mini { padding: 0.2rem 0.6rem; }
.harf-karo { background: linear-gradient(140deg, #1c3554, var(--lacivert)); }

/* ----- İşletme detayı ----- */
.ue-band { margin-top: -2rem; }
.ue-ic { padding: 2.4rem 1.25rem 2rem; }
.ue-ust { gap: 2rem; }
.ue-kapak { width: 230px; height: 230px; border-radius: 26px; }
.ue-bilgi h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 0.35rem; }
.ue-altbaslik { font-size: 1.02rem; margin-bottom: 1rem; }
.detay-cipler { margin-bottom: 1.2rem; }
.cip { padding: 0.5rem 1.1rem; font-family: inherit; cursor: pointer; }
.ue-meta > div { padding: 0 1.6rem; font-weight: 600; }
.detay-meta-baslik { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.1rem; }
.ue-odeme { margin-top: 1.1rem; padding-top: 1.1rem; }
.ue-uyari-band { background: var(--ana-acik); color: var(--lacivert); padding: 0.85rem 1rem; }
.ue-govde { grid-template-columns: 270px minmax(0, 1fr); gap: 2.2rem; margin-top: 2.2rem; }
.ue-yan { top: 92px; }
.ue-yan h3 { font-size: 1.2rem; letter-spacing: -0.025em; }
.ue-yan-liste { border: 1px solid var(--cizgi); box-shadow: none; padding: 0.5rem; gap: 2px; }
.ue-yan-liste button { border-left: none; border-radius: 12px; padding: 0.65rem 0.9rem; transition: background .2s var(--gecis), color .2s var(--gecis); }
.ue-yan-liste button:hover { background: var(--yuzey); color: var(--lacivert); }
.ue-yan-liste button.aktif { background: var(--ana-acik); color: var(--lacivert); }
.ue-yan-baslik { border-top: 1px solid var(--cizgi); padding: 0.9rem 0.9rem 0.3rem; margin-top: 0.4rem; }
.ue-ara { background: var(--yuzey); border-color: transparent; padding: 0.85rem 1.3rem; }
.ue-ara:focus-within { border-color: var(--lacivert); }
.hizmet-izgara { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.1rem; }
.hizmet-kart { border: 1px solid var(--cizgi); box-shadow: none; padding: 1.05rem; gap: 1.1rem; transition: border-color .25s var(--gecis), box-shadow .25s var(--gecis), transform .25s var(--gecis); }
.hizmet-kart:hover { box-shadow: var(--golge-buyuk); transform: translateY(-2px); }
.hizmet-kart-aktif { border-color: var(--lacivert); }
.hizmet-kart-foto { width: 108px; height: 108px; border-radius: 16px; }
.hizmet-kart-icerik strong { font-size: 1.04rem; letter-spacing: -0.015em; }
.hizmet-fiyat { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.randevu-panel { border: 1.5px solid var(--lacivert); padding: 1.3rem 1.4rem; }
.secim-ozet { border-color: transparent; }

/* ----- Randevularım ----- */
.rand-kart { border: 1px solid var(--cizgi); box-shadow: none; padding: 1.15rem 1.3rem; gap: 1.2rem; }
.rand-tarih { width: 70px; border-radius: 16px; padding: 0.65rem 0.2rem; }
.rand-tarih-gun { font-size: 1.5rem; }

/* ----- Giriş / üye ol ----- */
.hesap-kart { margin-top: 2.5rem; padding: 2.6rem 2.4rem; border-radius: 28px; box-shadow: var(--golge-buyuk); border-color: transparent; }
.form-dar.hesap-kart { max-width: 470px; }
.hesap-logo { font-size: 1.7rem; letter-spacing: -0.035em; }
.hesap-baslik { margin-bottom: 1.8rem; }
.hesap-baslik h2 { font-size: 1.7rem; letter-spacing: -0.035em; }
.hesap-kart .btn { padding: 0.95rem 1.6rem; font-size: 1rem; margin-top: 0.4rem; }
.hesap-alt { margin-top: 1.6rem; padding-top: 1.3rem; gap: 0.45rem; font-size: 0.9rem; }

/* Modal */
.konum-kaplama { background: rgba(21,34,56,.5); }
.konum-modal { border-radius: 28px; padding: 1.7rem; }
.konum-modal-baslik h3 { font-size: 1.3rem; letter-spacing: -0.025em; }
.konum-kapat { width: 38px; height: 38px; border-radius: 50%; padding: 0; transition: background .2s var(--gecis); }
.konum-kapat:hover { background: var(--yuzey); }
#konumHarita, #harita { border-radius: 18px; }

/* Sayfalama */
.sayfalama a, .sayfalama span { box-shadow: none; border: 1px solid var(--cizgi); border-radius: 999px; padding: 0.5rem 1rem; }

/* Alt bilgi */
.alt-bilgi { margin-top: 4rem; padding: 3rem 1.25rem 2.6rem; color: #a9b8cc; font-size: 0.92rem; }
.alt-bilgi a { color: var(--ana); font-weight: 600; }
.alt-logo { font-size: 1.5rem; letter-spacing: -0.035em; margin-bottom: 0.4rem; }

/* ----- Dar ekranlar (v2) ----- */
@media (max-width: 900px) {
  .ana-duzen, .ara-duzen, .ue-govde { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .reklam-band { align-items: flex-start; padding: 2rem 1.6rem; min-height: 0; border-radius: 24px; gap: 1.4rem; }
  .ue-yan-liste button { border-bottom: none; }
  .ue-yan-liste button.aktif { border-bottom-color: transparent; }
  .carousel-ok { display: none; }
}
@media (max-width: 600px) {
  .icerik { padding: 1.2rem 1rem 2.2rem; }
  .ust-menu-ic { padding: 0.7rem 1rem; }
  .logo { font-size: 1.35rem; }
  .logo-ikon { width: 32px; height: 32px; }
  .pil { padding: 0.55rem 1.05rem; font-size: 0.86rem; }
  .reklam-band-icerik strong { font-size: 1.95rem; }
  .reklam-band-alt { font-size: 0.96rem; }
  .reklam-band-cta { display: inline-block; padding: 0.8rem 1.4rem; }
  .bolum-baslik h2 { font-size: 1.3rem; }
  .kategori-karo { width: 108px; border-radius: 18px; }
  .kategori-karo img.kategori-ikon { height: 80px; padding: 12px 16px 2px; }
  .kamp-kart { width: 280px; height: 180px; }
  .kampli-kart { width: 280px; }
  .kart-izgara { grid-template-columns: minmax(0, 1fr); }
  .ue-band { margin-top: -1.2rem; }
  .ue-ic { padding: 1.2rem 1rem 1.4rem; }
  .ue-kapak { width: 100%; height: 210px; border-radius: 20px; }
  .ue-meta > div { padding: 0 1.2rem 0 0; }
  .hizmet-izgara { grid-template-columns: minmax(0, 1fr); }
  .hizmet-kart-foto { width: 88px; height: 88px; }
  .hesap-kart { margin-top: 1rem; padding: 1.8rem 1.3rem; border-radius: 22px; }
  .konum-modal { padding: 1.2rem; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.bolum-baslik { gap: 0.75rem; }
.bolum-baslik h2 { min-width: 0; }
@media (max-width: 600px) {
  .bolum-baslik > a { padding: 0.35rem 0.75rem; font-size: 0.82rem; }
  .bolum-baslik h2 { font-size: 1.22rem; }
}
/* Orta genişlikte (≈930 px pencere) üst menü tek satırda kalsın */
.menu-ara { flex: 1 1 160px; }
@media (max-width: 1100px) {
  .ust-menu-ic { gap: 0.4rem; }
  .menu-ara { padding: 0.6rem 1rem; }
  .konum-cip { padding: 0.5rem 0.6rem; }
  .pil { padding: 0.6rem 1.1rem; }
}

/* =====================================================================
   v3 — Yoğun ve keskin düzen (10 Kas 2026, örnekler: TGO Yemek / Yemeksepeti / Getir)
   Tam genişlik açılış + arama kartı, kategori ızgarası, raflar, bilgi yoğun kart,
   8–12 px köşeler, 15 px taban yazı, çok sütunlu alt bilgi, mobil alt gezinme.
   ===================================================================== */
html { font-size: 15px; }
:root {
  --r: 12px;
  --r-kucuk: 8px;
  --golge-buyuk: 0 10px 28px -12px rgba(21,34,56,.28), 0 2px 6px rgba(21,34,56,.06);
}
.icerik { padding-top: 1.6rem; }
.btn, .pil { border-radius: 10px; }
.btn { padding: 0.72rem 1.4rem; }
.pil { padding: 0.6rem 1.15rem; }
.menu-ara, .filtre-arama, .konum-ara-satir input { border-radius: 10px; }
.kart, .hesap-kart, .konum-modal { border-radius: 14px; }
.hesap-kart { border-radius: 16px; }
.bolum { margin-top: 2.6rem; }
.bolum-baslik h2 { font-size: 1.45rem; letter-spacing: -0.03em; }
.bolum-baslik > a { border: none; padding: 0.3rem 0; color: var(--ana-koyu); font-weight: 600; border-radius: 0; }
.bolum-baslik > a:hover { text-decoration: underline; }

/* ----- Açılış alanı (tam genişlik) ----- */
.acilis {
  margin: -1.6rem calc(50% - 50vw) 0; color: var(--lacivert);
  background:
    radial-gradient(620px 620px at 96% 135%, rgba(255,255,255,.28) 0 49.6%, transparent 50%),
    radial-gradient(340px 340px at 4% -40%, rgba(21,34,56,.09) 0 49.6%, transparent 50%),
    var(--ana);
}
.acilis-ic {
  max-width: 1240px; margin: 0 auto; padding: 3.4rem 1.25rem 3.6rem;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center;
}
.acilis-metin h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.acilis-metin p { margin-top: 1rem; font-size: 1.1rem; line-height: 1.5; max-width: 40ch; color: #12333f; }
.acilis-kart {
  background: #fff; border-radius: 16px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem;
  box-shadow: 0 24px 50px -22px rgba(21,34,56,.55), 0 2px 8px rgba(21,34,56,.08);
}
.acilis-alan {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left; width: 100%;
  background: var(--yuzey); border: 1.5px solid transparent; border-radius: 10px; padding: 0.7rem 1rem;
  font-family: inherit; color: var(--lacivert); cursor: text;
  transition: background .2s var(--gecis), border-color .2s var(--gecis), box-shadow .2s var(--gecis);
}
.acilis-alan > span { font-size: 0.76rem; font-weight: 700; color: var(--soluk); }
.acilis-alan input { border: none; background: transparent; font: inherit; font-size: 1.02rem; font-weight: 600; outline: none; width: 100%; color: var(--lacivert); }
.acilis-alan input::placeholder { color: #8493a6; font-weight: 500; }
.acilis-alan:focus-within { background: #fff; border-color: var(--lacivert); box-shadow: 0 0 0 4px rgba(0,194,199,.2); }
.acilis-konum { cursor: pointer; }
.acilis-konum strong { font-size: 1.02rem; font-weight: 600; }
.acilis-konum:hover { background: #e9edf2; }
.acilis-btn { background: var(--lacivert); color: #fff !important; padding: 0.95rem 1.4rem; font-size: 1.02rem; }
.acilis-btn:hover { background: #0d1626; box-shadow: 0 10px 22px -10px rgba(21,34,56,.8); }

/* ----- Kategori ızgarası ----- */
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 0.7rem; }
.kategori-karo {
  width: auto; border: none; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.kategori-karo:hover { transform: none; box-shadow: none; }
.kategori-karo img.kategori-ikon {
  width: 100%; max-width: 86px; height: auto; aspect-ratio: 1; padding: 14px; background: var(--yuzey);
  border-radius: 12px; border: 1.5px solid transparent;
  transition: border-color .2s var(--gecis), background .2s var(--gecis), transform .2s var(--gecis);
  mix-blend-mode: multiply;
}
.kategori-karo:hover img.kategori-ikon { border-color: var(--ana); background: var(--ana-acik); transform: translateY(-2px); }
.kategori-karo span { padding: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.25; }

/* ----- Bilgi yoğun işletme kartı ----- */
.kart-izgara { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.3rem 1.1rem; }
.isletme-kart { display: block; color: var(--metin); border: none; border-radius: 0; background: none; overflow: visible; }
.isletme-kart:hover { transform: none; box-shadow: none; text-decoration: none; }
.isletme-kart-gorsel { position: relative; border-radius: 12px; overflow: hidden; background: var(--yuzey); }
.isletme-kart-foto { height: auto; width: 100%; aspect-ratio: 16 / 10; display: flex; }
.isletme-kart:hover .isletme-kart-foto { transform: scale(1.04); }
.isletme-kart-govde { padding: 0.65rem 0.1rem 0; background: none; }
.isletme-kart-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.isletme-kart-govde h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isletme-kart:hover h3 { color: var(--ana-koyu); }
.kart-puan { display: inline-flex; align-items: center; gap: 0.2rem; flex-shrink: 0; font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kart-puan svg { color: #f0a000; }
.kart-puan-adet { color: var(--soluk); font-weight: 500; }
.kart-puan-yeni { color: var(--ana-koyu); font-size: 0.78rem; background: var(--ana-acik); padding: 0.1rem 0.5rem; border-radius: 6px; }
.isletme-kart .kart-alt { margin-top: 0.1rem; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-bilgi { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.35rem; font-size: 0.84rem; color: var(--soluk); flex-wrap: wrap; }
.kart-durum { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.kart-durum::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kart-acik { color: var(--basari); }
.kart-kapali { color: #8a94a6; }
.kart-fiyat strong { color: var(--metin); font-weight: 700; }
.kart-rozetler { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kart-rozet {
  max-width: 100%; background: var(--lacivert); color: #fff; font-size: 0.74rem; font-weight: 600;
  padding: 0.22rem 0.55rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Raflar */
.carousel-serit { gap: 1.1rem; padding: 2px 0 0.4rem; }
.raf > .isletme-kart { flex: 0 0 272px; }
.carousel-ok { width: 38px; height: 38px; top: 86px; transform: none; font-size: 1.25rem; }
.carousel-ok-sol { left: -14px; }
.carousel-ok-sag { right: -14px; }
.kamp-kart { width: 300px; height: 164px; border-radius: 12px; padding: 1rem 1.1rem; }
.kamp-kart-baslik { font-size: 1.05rem; }

/* Reklam bandı: sayfa içinde ince şerit */
.reklam-band {
  margin-top: 2.6rem; min-height: 0; border-radius: 14px; padding: 1.5rem 1.8rem; align-items: center;
  background: var(--ana-acik); color: var(--lacivert);
}
.reklam-band-icerik { gap: 0.25rem; max-width: none; }
.reklam-band-ust { background: none; padding: 0; font-size: 0.74rem; color: var(--ana-koyu); letter-spacing: 0.06em; }
.reklam-band-icerik strong { font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.2; }
.reklam-band-alt { font-size: 0.94rem; color: var(--soluk); max-width: none; }
.reklam-band-cta { padding: 0.7rem 1.3rem; border-radius: 10px; font-size: 0.92rem; }
.reklam-band-icerik > *, .reklam-band-cta { animation: none; }

/* Nasıl çalışır */
.nasil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.4rem; border-top: 1px solid var(--cizgi); }
.nasil-adim svg { color: var(--ana-koyu); }
.nasil-adim h3 { margin-top: 0.7rem; font-size: 1.08rem; letter-spacing: -0.02em; }
.nasil-adim p { margin-top: 0.25rem; color: var(--soluk); font-size: 0.94rem; max-width: 34ch; }

/* İşletme çağrısı */
.isletme-cagri {
  margin-top: 2.8rem; background: var(--lacivert); color: #fff; border-radius: 14px;
  padding: 1.8rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.isletme-cagri h2 { font-size: 1.45rem; letter-spacing: -0.03em; }
.isletme-cagri p { color: #b6c3d6; margin-top: 0.15rem; }
.pil-acik { background: var(--ana); color: var(--lacivert) !important; padding: 0.8rem 1.5rem; font-weight: 700; }
.pil-acik:hover { background: #2fd3d8; text-decoration: none; }

/* Arama sayfası + detay: keskin ölçüler */
.ara-duzen { grid-template-columns: 264px minmax(0, 1fr); gap: 1.8rem; }
.ara-duzen .kart-izgara { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ue-kapak { border-radius: 14px; width: 200px; height: 200px; }
.hizmet-kart-foto { border-radius: 10px; }
.ue-yan-liste button { border-radius: 8px; }
.rand-tarih { border-radius: 10px; }
.sayfalama a, .sayfalama span { border-radius: 8px; }
.cip, .calisan-cip { border-radius: 8px; }
.puan-cip { border-radius: 8px; }

/* Alt bilgi: çok sütunlu */
.alt-bilgi { text-align: left; padding: 3rem 1.25rem 1.6rem; margin-top: 3.4rem; }
.alt-ic { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.alt-logo { display: flex; align-items: center; gap: 0.5rem; }
.alt-logo-ikon { width: 34px; height: 34px; margin: 0; }
.alt-sutun { display: flex; flex-direction: column; gap: 0.55rem; }
.alt-sutun h4 { color: #fff; font-size: 0.92rem; margin-bottom: 0.2rem; }
.alt-bilgi .alt-sutun a { color: #a9b8cc; font-weight: 500; }
.alt-bilgi .alt-sutun a:hover { color: #fff; }
.alt-telif { max-width: 1240px; margin: 2.2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: 0.84rem; color: #7f90a8; }

/* Mobil alt gezinme */
.alt-gezinme { display: none; }

@media (max-width: 900px) {
  .acilis-ic { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 2.2rem 1.25rem 2.4rem; }
  .reklam-band { padding: 1.3rem 1.3rem; gap: 1rem; }
  .nasil { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .acilis { margin-top: -1.2rem; }
  .acilis-ic { padding: 1.6rem 1rem 1.8rem; }
  .acilis-metin h1 { font-size: 1.9rem; }
  .acilis-metin p { font-size: 1rem; margin-top: 0.6rem; }
  .bolum { margin-top: 2rem; }
  .bolum-baslik h2 { font-size: 1.2rem; }
  .kategori-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem 0.5rem; }
  .kategori-karo { width: auto; border-radius: 0; }
  .kategori-karo img.kategori-ikon { height: auto; padding: 12px; }
  .kategori-karo span { font-size: 0.76rem; text-align: center; }
  .kart-izgara, .ara-duzen .kart-izgara { grid-template-columns: minmax(0, 1fr); }
  .raf > .isletme-kart { flex-basis: 240px; }
  .kamp-kart { width: 262px; height: 150px; }
  .isletme-cagri { padding: 1.4rem 1.2rem; }
  .ue-kapak { width: 100%; height: 200px; }
  .alt-bilgi { padding-bottom: 5.6rem; }
  .alt-gezinme {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--cizgi); padding: 0.4rem 0.3rem calc(0.4rem + env(safe-area-inset-bottom));
  }
  .alt-gezinme a { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; color: var(--soluk); font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0; border-radius: 8px; }
  .alt-gezinme a:hover, .alt-gezinme a:active { color: var(--lacivert); text-decoration: none; }
}
/* v3 düzeltmeler: kategoriler tek satır, karo beyaz zeminli; oklar yalnız gerektiğinde */
@media (min-width: 1100px) { .kategori-izgara { grid-template-columns: repeat(13, minmax(0, 1fr)); } }
.kategori-karo img.kategori-ikon { background: #fff; border-color: var(--cizgi); mix-blend-mode: normal; }
.kategori-karo:hover img.kategori-ikon { background: #fff; border-color: var(--lacivert); }
.carousel-ok[hidden] { display: none; }