/* ═══════════════════════════════════════════════════════════════
   ANA SAYFA — İmmersive Hero, Arama, Duyurular, Kategoriler
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero Bölümü ──────────────────────────────────────────────── */
.bizizmir-search {
  position: relative;
  background: linear-gradient(155deg, #0a1628 0%, #0d2847 25%, #1565C0 55%, #1e88e5 80%, #42a5f5 100%);
  padding: 52px 0 0;
  overflow: hidden;
}

/* Animasyonlu gradient overlay */
.bizizmir-search::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(66, 165, 245, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(13, 71, 161, 0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Dekoratif yüzen orblar */
.hero-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
}

.hero-orb-1 {
  width: 400px;
  height: 400px;
  background: #64b5f6;
  top: -80px;
  right: -100px;
  animation: orbFloat1 20s ease-in-out infinite;
}

.hero-orb-2 {
  width: 300px;
  height: 300px;
  background: #e3f2fd;
  bottom: 40px;
  left: -60px;
  animation: orbFloat2 25s ease-in-out infinite;
}

.hero-orb-3 {
  width: 200px;
  height: 200px;
  background: #90caf9;
  top: 50%;
  left: 50%;
  animation: orbFloat3 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.1); }
  66% { transform: translate(20px, -20px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(1.15); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 40px) scale(1.2); }
  66% { transform: translate(-30px, -20px) scale(0.9); }
}


/* Hero wrapper */
.hero-wrapper {
  position: relative;
  z-index: 1;
}

/* ── Hero Grid — İki kolon: sol içerik / sağ duyurular ────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 96px;
  max-width: 1220px;
  margin: 0 auto;
  position: relative;
  animation: heroFadeIn 0.8s ease-out;
  transition: grid-template-columns 0.8s var(--ease-smooth),
              gap 0.8s var(--ease-smooth),
              max-width 0.8s var(--ease-smooth);
}

/* Sol kolon — başlık, arama, kısayollar (sola hizalı) */
.hero-main {
  text-align: left;
  position: relative;
  min-width: 0;
}

/* Eski ortalı içerik (artık kullanılmıyor, geriye dönük güvenlik) */
.hero-content {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ana başlık */
.hero-title {
  font-family: "Izmir-bold";
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0 0 16px;
  max-width: 100%;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  transition: opacity 0.45s var(--ease-smooth), transform 0.85s var(--ease-smooth);
}

/* Alt başlık — daha geniş, daha bilgilendirici */
.hero-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 520px;
  text-wrap: pretty;
  transition: opacity 0.45s var(--ease-smooth), transform 0.85s var(--ease-smooth);
}

.hero-subtitle strong {
  color: #fff;
  font-weight: 600;
}

/* ── Arama Kutusu — ANA ODAK NOKTASI ─────────────────────────── */
.hero-search-box {
  position: relative;
  max-width: 100%;
  margin: 0 0 26px;
}

/* Pulsating glow arkasında */
.hero-search-glow {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(66,165,245,0.3), rgba(255,255,255,0.2));
  background-size: 200% 200%;
  animation: searchGlow 4s ease-in-out infinite;
  filter: blur(8px);
  z-index: 0;
}

@keyframes searchGlow {
  0%, 100% { background-position: 0% 50%; opacity: 0.6; }
  50% { background-position: 100% 50%; opacity: 1; }
}

.hero-search-box .bizizmir-search-v2 {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
}

.hero-search-box .bizizmir-search-v2 input {
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  padding: 0 70px 0 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-search-box .bizizmir-search-v2 input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: #fff;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(255, 255, 255, 0.2);
  outline: none;
  transform: scale(1.01);
}

.hero-search-box .bizizmir-search-v2 input::placeholder {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 400;
}

.hero-search-box .bizizmir-search-v2 .search-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gradient-cta);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(232, 118, 10, 0.4);
}

.hero-search-box .bizizmir-search-v2 .search-button:hover {
  background: linear-gradient(135deg, #C46008, #E8760A);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(232, 118, 10, 0.5);
}

/* Aramayı temizleme (×) — input doluyken büyütecin solunda belirir */
.hero-search-box .bizizmir-search-v2 .search-clear-button {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero-search-box .bizizmir-search-v2 .search-clear-button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.hero-search-box .bizizmir-search-v2 .search-clear-button[hidden] {
  display: none;
}

/* × görünürken metin butonların altına girmesin */
.hero-search-box .bizizmir-search-v2 input.has-clear {
  padding-right: 104px;
}

/* Klavye odak halkaları — koyu hero zemininde beyaz varyant (WCAG 2.4.7) */
.hero-chip:focus-visible,
.hero-scroll-hint:focus-visible,
.duyurular-tumu:focus-visible,
.hero-search-box .bizizmir-search-v2 .search-button:focus-visible,
.hero-search-box .bizizmir-search-v2 .search-clear-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* ── Duyurular — Glass kart + statik 3'lü liste ──────────────── */
/* ── Hızlı Erişim Kısayolları ─────────────────────────────────── */
.hero-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.hero-quick-label {
  /* Kontrast: 0.55 saydam beyaz 11px mavi zeminde AA altındaydı (UX raporu #29) */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-right: 2px;
}

.hero-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out),
              transform 0.22s var(--ease-out),
              box-shadow 0.22s var(--ease-out);
}

.hero-chip svg {
  width: 17px;
  height: 17px;
  color: #90caf9;
  flex-shrink: 0;
  transition: color 0.22s var(--ease-out);
}

/* Yatay logo ikonu (izmirimkart, ~9,5:1): yükseklik sabit, genişlik orana göre */
.hero-chip svg.ikon-logo {
  width: auto;
  height: 12px;
}

.hero-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.hero-chip:hover svg {
  color: #fff;
}

/* ── Duyurular Kartı ──────────────────────────────────────────── */
.duyurular-container {
  max-width: 100%;
  margin: 0;
  /* Koyu cam: beyaz cam zemin, gradyanın en açık (sağ üst) bölgesinde beyaz
     metni ~2.7:1'e düşürüyordu; koyu overlay ile ≥4.5:1 sağlanır (#29) */
  background: rgba(10, 22, 40, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px 20px 14px;
  position: relative;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.45);
  animation: heroFadeIn 0.8s ease-out 0.3s both;
}

/* Header: başlık + "Tümünü gör" */
.duyurular-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.duyurular-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Kontrast (#29): 0.7→0.92 + 10→11px; kalan fark panel zemininin koyulaştırılmasıyla kapanır */
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.duyurular-badge svg {
  stroke: currentColor;
  opacity: 0.85;
}

.duyurular-tumu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: color 0.18s ease;
}

.duyurular-tumu:hover {
  color: #fff;
}

.duyurular-tumu span {
  transition: transform 0.2s ease;
  font-size: 12px;
  line-height: 1;
}

.duyurular-tumu:hover span {
  transform: translateX(3px);
}

/* Liste */
.duyurular-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.duyurular-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.duyuru-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  padding: 10px 10px;
  margin: 0 -10px;
  border-radius: 12px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.duyuru-link:hover {
  background-color: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}

/* Kategori ikon rozeti — renkli, görsel ayırt edicilik */
.duyuru-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  margin-top: 1px;
}

.duyuru-icon svg {
  width: 19px;
  height: 19px;
  color: #0d2847;
}

.duyuru-body {
  min-width: 0;
  flex: 1;
}

/* Meta satırı: kategori · tarih · [YENİ] */
.duyuru-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.duyuru-cat {
  display: inline-flex;
  align-items: center;
}

.duyuru-cat-etkinlik { color: #93C5FD; }   /* açık mavi */
.duyuru-cat-sosyal   { color: #FCA5A5; }   /* açık pembe-mercan */
.duyuru-cat-saglik   { color: #6EE7B7; }   /* açık yeşil */
.duyuru-cat-egitim   { color: #FCD34D; }   /* altın */

.duyuru-tarih {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  position: relative;
  padding-left: 10px;
}

.duyuru-tarih::before {
  content: "·";
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

.duyuru-yeni {
  background: var(--color-new-badge, #0891B2);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: auto;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.4);
}

/* Başlık */
.duyuru-baslik {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color 0.18s ease;
}

.duyuru-link:hover .duyuru-baslik {
  color: #fff;
}

/* ── Slick Slider Dots ────────────────────────────────────────── */
.slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 4px;
}

.slick-dots li button {
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background-color: transparent;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
}

.slick-dots li button::before {
  display: none;
}

.slick-dots li.slick-active button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.15);
}

/* ── Scroll İpucu ─────────────────────────────────────────────── */
.hero-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-bottom: 20px;
  color: #fff;
  animation: scrollBounce 2.5s ease-in-out infinite;
  cursor: pointer;
}

.hero-scroll-hint span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(66, 165, 245, 0.4);
}

.hero-scroll-hint svg {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ── Animasyonlu Dalga Geçişi — katmanlı, sürekli akan ────────── */
.hero-wave {
  display: block;
  width: 100%;
  height: 64px;
  position: relative;
  z-index: 1;
  margin-top: -1px;
  line-height: 0;
  pointer-events: none;
}

.hero-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Katmanlar — sürekli yatay akış (parallax derinlik) */
.hero-wave-layers use {
  animation: heroWaveFlow 16s linear infinite;
  will-change: transform;
}

.hero-wave-layers .wave-l1 {
  fill: rgba(255, 255, 255, 0.10);
  animation-duration: 13s;
}

.hero-wave-layers .wave-l2 {
  fill: rgba(255, 255, 255, 0.16);
  animation-duration: 9.5s;
  animation-direction: reverse;
}

.hero-wave-layers .wave-l3 {
  fill: var(--color-bg-page);
  animation-duration: 17s;
}

/* Bir tam dalga boyu = 720 birim → kusursuz döngü */
@keyframes heroWaveFlow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-720px); }
}

/* Hareket azaltma tercihi olanlar için durdur */
/* Hareket azaltma: yalnızca dalga değil, TÜM sonsuz döngülü dekoratif
   animasyonlar durur (WCAG 2.2.2/2.3.3). Global kill-switch bilinçli olarak
   kullanılmadı — scroll-reveal/hero-collapse geçişleri sınıf-tetiklemeli ve
   global kural onları animasyon-öncesi (gizli) durumda bırakabilir. */
@media (prefers-reduced-motion: reduce) {
  .hero-wave-layers use,
  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3,
  .hero-scroll-hint,
  .hero-search-glow {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ARAMA FOCUS MODU — Smooth Collapse
   ═══════════════════════════════════════════════════════════════ */

/* Easing — easeInOutCirc: çok pürüzsüz yavaş-hızlı-yavaş */
:root {
  --ease-smooth: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Grid-rows hilesi: 1fr → 0fr ile içerik pürüzsüz daralır.
   Hem başlık bölgesi hem de duyurular bölgesi aynı tekniği kullanır. */
.hero-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.8s var(--ease-smooth);
}

.hero-collapse > .hero-collapse-inner {
  overflow: hidden;
  min-height: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

/* Hero genel transitionlar */
.bizizmir-search {
  transition: padding 0.8s var(--ease-smooth);
}

.hero-search-box {
  transition: margin 0.8s var(--ease-smooth);
}

.hero-title,
.hero-subtitle {
  transition:
    opacity 0.4s var(--ease-smooth),
    transform 0.7s var(--ease-smooth);
}

/* ─── FOCUS MODU AKTİF ───────────────────────────────────────── */

/* Her iki collapse bölgesi de (başlık + duyurular + chipler) pürüzsüz kapanır */
.bizizmir-search.search-focused .hero-collapse {
  grid-template-rows: 0fr;
}

/* Focus'ta grid tek kolona iner (1fr 0fr — aynı track sayısı, animatable),
   sağ duyuru kolonu eriyip kaybolur, arama ortaya toplanır */
.bizizmir-search.search-focused .hero-grid {
  grid-template-columns: 1fr 0fr;
  gap: 0;
  max-width: 640px;
}

.bizizmir-search.search-focused .hero-main {
  text-align: center;
}

.bizizmir-search.search-focused .hero-collapse-inner {
  opacity: 0;
  pointer-events: none;
}

/* Başlık + alt başlık ufak yukarı kayma efekti */
.bizizmir-search.search-focused .hero-title {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
}

.bizizmir-search.search-focused .hero-subtitle {
  opacity: 0;
  transform: translateY(-10px);
}

/* Dalga her zaman görünür kalır — collapse'ta deforme OLMAZ,
   sadece hero kısaldığı için yukarı kayar (pürüzsüz). */

/* Hero padding daralır — padding-bottom 0 KALMALI ki dalganın
   altında mavi şerit oluşmasın (dalga section'ın en altında bitsin) */
.bizizmir-search.search-focused {
  padding-top: 30px;
  padding-bottom: 0;
}

/* Arama kutusu her zaman fade'in üstünde */
.hero-search-box {
  position: relative;
  z-index: 3;
}

/* Focus'ta search-box glow biraz daha güçlü */
.bizizmir-search.search-focused .hero-search-glow {
  animation-duration: 3s;
  filter: blur(12px);
  opacity: 1;
}

/* Focus'ta arama kutusu ile dalga arası küçük nefes payı */
.bizizmir-search.search-focused .hero-search-box {
  margin-bottom: 14px;
}

/* Orb'lar hafifleşsin */
.hero-orb {
  transition: opacity 0.4s var(--ease-smooth);
}

.bizizmir-search.search-focused .hero-orb {
  opacity: 0.05;
}

/* Filtre bölümü transition */
.filter-section {
  transition: margin-top 0.5s var(--ease-smooth), padding-top 0.5s var(--ease-smooth);
}

/* ── Search Category Tag ──────────────────────────────────────── */
.search-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-primary-surface);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  z-index: 2;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-category-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-category-tag-clear {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
}

.search-category-tag-clear:hover {
  color: #c0392b;
}

.bizizmir-search-v2 input.has-category-tag {
  padding-left: 140px;
}

/* ── Filtre Bölümü (dalga sonrası) ────────────────────────────── */
/* margin-top -2px hero'nun alt kenarını örter: hero konumlu (relative) olduğundan konumsuz bu bölümden SONRA boyanıyor,
   örtüşme hero'nun altında kalıyordu. Safari kesirli yükseklikte hero'nun son satırını yarım boyayıp gradyanı ince çizgi
   olarak gösteriyordu (21.10.2026). relative ile bu bölüm DOM sırasıyla hero'nun üstünde boyanır; örttüğü 2px dalganın
   zemin renkli katmanıdır (görünüm değişmez). */
.filter-section {
  position: relative;
  background-color: var(--color-bg-page);
  padding-top: 8px;
  margin-top: -2px;
}

.person-content {
  margin-top: 0;
  margin-bottom: 16px;
}

.person-content .person-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.person-content .person-content-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.person-content .person-content-header .header-arrow {
  display: none;
}

.person-content .person-content-flex {
  display: flex;
  flex-wrap: wrap;
}

.person-content .person-content-flex a:hover {
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
}

/* ── Login ────────────────────────────────────────────────────── */
.login-links {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-links p {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  max-width: 200px;
  text-align: center;
}

.kulanici-girisi {
  width: 230px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  background-color: var(--color-cta);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

/* ── Mobil Kategori Selectbox ─────────────────────────────────── */
.mobile-category-select-wrap {
  display: none;
}

.mobile-category-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  background-color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231565C0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-category-select:focus {
  outline: none;
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

/* ── Popüler Hizmetler ────────────────────────────────────────── */
.populer-hizmetler {
  margin-top: 8px;
  margin-bottom: 40px;
}

.populer-hizmetler h2 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--color-text);
}

.populer-hizmetler h2.category-title a {
  color: var(--color-primary);
  text-decoration: none;
}

.populer-hizmetler h2.category-title a:hover {
  color: var(--color-primary-hover);
}

.bizizmir-tutucuwrap #filter-detail {
  font-size: 16px;
  color: #333;
  /* h2→div geçişinde kaybolan başlık boşluğunu koru */
  margin-bottom: 0.5rem;
}

.bizizmir-tutucuwrap #filter-detail span {
  color: var(--color-primary);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  margin-left: 16px;
  font-weight: 500;
}

.bizizmir-tutucuwrap #filter-detail span:hover {
  text-decoration: underline;
}

.populer-hizmetler h2 > a {
  color: var(--color-primary);
  text-decoration: none;
}

.populer-hizmetler h2 > a:hover {
  text-decoration: underline;
}

.populer-hizmetler .category-card.new {
  overflow: hidden;
  position: relative;
}

.populer-hizmetler .category-card.populer {
  overflow: hidden;
  position: relative;
}

/* ── Card Ribbon — Sağ Üst Rozet ──────────────────────────────── */
.ribbon {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: auto;
  pointer-events: none;
}

.ribbon span {
  display: block;
  padding: 2px 8px;
  background-color: var(--color-new-badge);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 0 12px 0 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ribbon-blue span {
  background-color: var(--color-popular);
}

/* ── Diğer Sayfalar Butonu ────────────────────────────────────── */
.diger-sayfalar .diger-sayfalar-button {
  background-color: var(--color-cta);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  margin-bottom: 15px;
  color: #fff;
  text-decoration: none;
  height: 45px;
}

/* ═══════════════════════════════════════════════════════════════
   AKILLI ASİSTAN — CHAT PANELİ
   style.css'teki eski PNG-kutu görünümünü tamamen ezer.
   ═══════════════════════════════════════════════════════════════ */
#akilli-asistan.mobile-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: auto !important;
  bottom: 24px !important;
  right: 24px;
  left: auto;
  transform: none;
  width: 384px;
  max-width: calc(100vw - 32px);
  height: 580px;
  max-height: calc(100dvh - 48px);
  background: #fff;
  border: none;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(11, 31, 58, 0.34);
  z-index: 9997;
  animation: asistanPanelAc 0.45s var(--ease-out) both;
}

@keyframes asistanPanelAc {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #akilli-asistan.mobile-open { animation: none; }
}

/* Başlık şeridi */
.asistan-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #0D47A1, #1976D2);
  color: #fff;
  flex-shrink: 0;
}

.asistan-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asistan-chat-avatar svg { width: 26px; height: 26px; }

.asistan-chat-kimlik {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asistan-chat-kimlik strong {
  font-family: "Izmir-Bold", sans-serif;
  font-size: 15.5px;
  line-height: 1.2;
}

.asistan-chat-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
}

.cevrimici-nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.3);
  animation: cevrimiciNefes 2.4s ease-in-out infinite;
}

@keyframes cevrimiciNefes {
  0%, 100% { box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.12); }
}

#akilli-asistan.mobile-open #akilli-asistan-close,
#akilli-asistan.mobile-open #akilli-asistan-yeni {
  display: flex !important;
  position: static;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

/* "Yeni Sohbet" ikiliyi header'ın sağına yaslar; close ile arayı gap açar. */
#akilli-asistan.mobile-open #akilli-asistan-yeni {
  margin-left: auto;
}

#akilli-asistan.mobile-open #akilli-asistan-close:hover,
#akilli-asistan.mobile-open #akilli-asistan-yeni:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

/* KVKK açık rıza kapısı — panel gövdesini (başlık altını) örter */
.asistan-kvkk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 62px;
  z-index: 6;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  overflow-y: auto;
}

.asistan-kvkk[hidden] {
  display: none;
}

.asistan-kvkk-kart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}

.asistan-kvkk-baslik {
  font-family: "Izmir-Bold", sans-serif;
  font-size: 15px;
  color: #0D47A1;
}

.asistan-kvkk-ozet {
  font-size: 12.5px;
  line-height: 1.55;
  color: #37474F;
  margin: 0;
}

.asistan-kvkk-link {
  font-size: 12.5px;
  font-weight: 600;
  color: #1565C0;
  text-decoration: underline;
}

.asistan-kvkk-onaykutu {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #263238;
  cursor: pointer;
}

.asistan-kvkk-onaykutu input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #1565C0;
  cursor: pointer;
}

.asistan-kvkk-buton {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0D47A1, #1976D2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.asistan-kvkk-buton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.asistan-kvkk-buton:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Mesaj alanı */
.asistan-chat-mesajlar {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 85% 8%, rgba(21, 101, 192, 0.05), transparent 45%),
    var(--color-bg-page);
  scrollbar-width: thin;
}

.asistan-balon {
  max-width: 84%;
  padding: 11px 14px 8px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  animation: balonGir 0.35s var(--ease-out) both;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@keyframes balonGir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.asistan-balon p { margin: 0; }

.asistan-balon--kullanici {
  align-self: flex-end;
  background: linear-gradient(135deg, #1565C0, #1976D2);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.asistan-balon--asistan {
  align-self: flex-start;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.06);
}

.balon-saat {
  font-size: 10px;
  opacity: 0.55;
  align-self: flex-end;
}

.balon-aksiyon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--color-primary-surface);
  color: var(--color-primary);
  font-family: "Izmir-Semibold", sans-serif;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.balon-aksiyon:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* Yazıyor animasyonu */
.asistan-yaziyor {
  flex-direction: row;
  gap: 5px;
  padding: 14px 16px;
  width: max-content;
}

.asistan-yaziyor span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: yaziyorZipla 1.2s ease-in-out infinite;
}

.asistan-yaziyor span:nth-child(2) { animation-delay: 0.15s; }
.asistan-yaziyor span:nth-child(3) { animation-delay: 0.3s; }

@keyframes yaziyorZipla {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Hazır soru çipleri */
.asistan-chips {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--color-bg-page);
  scrollbar-width: none;
}

.asistan-chips::-webkit-scrollbar { display: none; }

.asistan-chips button {
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  font-family: "Izmir-Semibold", sans-serif;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.asistan-chips button:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* Giriş satırı */
.asistan-chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  background: #fff;
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.asistan-chat-input input {
  flex: 1;
  height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-page);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.asistan-chat-input input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

.asistan-chat-input button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-cta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.asistan-chat-input button svg { width: 19px; height: 19px; }

.asistan-chat-input button:hover {
  background: var(--color-cta-hover);
  transform: scale(1.06);
  box-shadow: var(--shadow-cta);
}

/* Mobil: alttan açılan tam genişlik panel */
@media (max-width: 768px) {
  #akilli-asistan.mobile-open {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100%;
    max-width: 100%;
    height: 86dvh;
    max-height: 86dvh;
    border-radius: 22px 22px 0 0;
  }
}

/* Sayfa geçişi sonrası geri yükleme (asistan.js sohbeti sessionStorage'dan
   geri basar): panel açılış ve balon giriş animasyonları tekrarlanmaz. */
#akilli-asistan.mobile-open.asistan-gecissiz { animation: none; }
.asistan-balon--gecissiz { animation: none; }

/* Chatbot cevapları (Arama/Chat) çok satırlı gelebilir — satır sonları korunur. */
.asistan-balon--asistan p { white-space: pre-line; }

/* Kesinti mesajındaki tıklanabilir numara (BIZYEN-699: tel:153). */
.asistan-balon .balon-telefon {
  color: #1565C0;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* Widget artık iç sayfalarda da yaşadığından (z-index 9996-9999) Bootstrap
   modalları (backdrop 1050/modal 1055) ve hizmet foto lightbox'ı (9999)
   açıkken karartmanın üstünde parlamasın — odak modalda kalsın, modal
   kapanınca widget aynen geri gelir. */
body.modal-open #akilli-asistan,
body.modal-open #akilli-asistan-backdrop,
body.modal-open #akilli-asistan-toggle,
body.modal-open #scrollTopBtn,
body:has(.hizmet-lightbox.active) #akilli-asistan,
body:has(.hizmet-lightbox.active) #akilli-asistan-backdrop,
body:has(.hizmet-lightbox.active) #akilli-asistan-toggle,
body:has(.hizmet-lightbox.active) #scrollTopBtn {
  /* !important: scrollTopBtn görünürlüğü scroll handler'ca inline yazılıyor */
  visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING v2 — Sinematik Tanıtım Turu
   ═══════════════════════════════════════════════════════════════ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* BIZYEN (onboarding flash): VARSAYILAN GİZLİ. Eskiden display:flex idi → sayfa
     boyanınca overlay görünüyor, sonra onboarding.js geç yüklenince (özellikle Ctrl+F5
     hard-refresh'te) gizliyordu → "gözüküp kayboluyor" flash'ı. Artık JS yalnızca
     gerçek ilk-ziyarette inline display:flex ile AÇAR; dönen kullanıcıda hiç görünmez. */
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  padding: 16px;
}

.onboarding-overlay.hidden { opacity: 0; pointer-events: none; }

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 36, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.onboarding-card {
  position: relative;
  background: #fff;
  border-radius: 26px;
  padding: 0;
  max-width: 520px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  animation: obKartGir 0.7s var(--ease-out) both;
}

@keyframes obKartGir {
  from { transform: translateY(44px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Üst ilerleme çubuğu */
.ob-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(21, 101, 192, 0.12);
  z-index: 5;
}

.ob-progress span {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #1565C0, #42A5F5);
  transition: width 0.5s var(--ease-smooth);
}

.onboarding-step { display: none; }
.onboarding-step.active { display: block; animation: obAdimGir 0.45s var(--ease-out); }

@keyframes obAdimGir {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Sahne alanı (tam genişlik) ─────────────────────────────── */
.ob-sahne {
  height: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  gap: 14px;
}

.ob-icerik { padding: 24px 34px 4px; }

.ob-icerik h2 {
  font-family: "Izmir-Bold", sans-serif;
  font-size: 22.5px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.ob-icerik p {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}

/* ── Sahne 1: Karşılama — gece silüeti ──────────────────────── */
.ob-sahne--karsilama {
  background: linear-gradient(175deg, #081A33 0%, #0D47A1 70%, #1565C0 100%);
}

.ob-logo-beyaz {
  width: 180px;
  max-width: 80%;
  height: auto;
  filter: brightness(0) invert(1);
  animation: obLogoGir 1s var(--ease-out) 0.25s both;
  order: -1;
  margin-bottom: -4px;
}

@keyframes obLogoGir {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.ob-kule {
  width: 78px;
  height: 156px;
  opacity: 0.95;
  animation: obKuleYuksel 1.1s var(--ease-out) 0.1s both;
  margin-bottom: -34px;
}

@keyframes obKuleYuksel {
  from { transform: translateY(34px); opacity: 0; }
  to { transform: translateY(0); opacity: 0.95; }
}

.ob-yildizlar { position: absolute; inset: 0; pointer-events: none; }

.ob-yildizlar span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: obYildizParla 3.2s ease-in-out infinite;
}

.ob-yildizlar span:nth-child(1) { top: 16%; left: 14%; animation-delay: 0s; }
.ob-yildizlar span:nth-child(2) { top: 24%; right: 18%; animation-delay: 0.7s; }
.ob-yildizlar span:nth-child(3) { top: 42%; left: 24%; animation-delay: 1.3s; width: 3px; height: 3px; }
.ob-yildizlar span:nth-child(4) { top: 12%; right: 36%; animation-delay: 1.9s; width: 3px; height: 3px; }
.ob-yildizlar span:nth-child(5) { top: 54%; right: 12%; animation-delay: 2.4s; }
.ob-yildizlar span:nth-child(6) { top: 36%; left: 42%; animation-delay: 2.9s; width: 3px; height: 3px; }

@keyframes obYildizParla {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

/* ── Sahne 2: Arama ─────────────────────────────────────────── */
.ob-sahne--arama {
  background: linear-gradient(160deg, #0D47A1 0%, #1976D2 60%, #42A5F5 100%);
}

.ob-arama-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: 86%;
  height: 50px;
  background: #fff;
  border-radius: 999px;
  padding: 0 20px;
  color: var(--color-primary);
  box-shadow: 0 12px 36px rgba(7, 18, 36, 0.3);
  animation: obPillGir 0.7s var(--ease-bounce) 0.15s both;
}

@keyframes obPillGir {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ob-arama-pill svg { width: 19px; height: 19px; flex-shrink: 0; }

.ob-typed-text {
  font-size: 14.5px;
  font-family: "Izmir-Semibold", sans-serif;
  color: var(--color-text);
  white-space: nowrap;
}

.ob-cursor {
  color: var(--color-primary);
  font-weight: 300;
  animation: obBlink 0.85s step-end infinite;
  margin-left: -4px;
}

@keyframes obBlink { 50% { opacity: 0; } }

.ob-arama-oneriler { display: flex; gap: 8px; }

.ob-arama-oneriler span {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 12px;
  font-family: "Izmir-Semibold", sans-serif;
  padding: 6px 14px;
  border-radius: 999px;
  animation: obOneriGir 0.6s var(--ease-out) both;
}

.ob-arama-oneriler span:nth-child(1) { animation-delay: 0.45s; }
.ob-arama-oneriler span:nth-child(2) { animation-delay: 0.6s; }
.ob-arama-oneriler span:nth-child(3) { animation-delay: 0.75s; }

@keyframes obOneriGir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Sahne 3: Hizmet kartı + favori ─────────────────────────── */
.ob-sahne--favori {
  background: linear-gradient(165deg, #E8F1FC 0%, #F5F7FB 55%, #DCE9F8 100%);
}

.ob-mini-hizmet {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  width: 300px;
  max-width: 86%;
  box-shadow: 0 10px 32px rgba(21, 101, 192, 0.16);
  animation: obPillGir 0.6s var(--ease-bounce) 0.1s both;
}

.ob-mini-ikon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-surface);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ob-mini-ikon svg { width: 22px; height: 22px; }

.ob-mini-metin {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ob-metin-bar {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: #E0E8F2;
  width: 100%;
}

.ob-metin-bar.kisa { width: 55%; }

.ob-yildiz-sarici { position: relative; width: 28px; height: 28px; flex-shrink: 0; }

.ob-yildiz-sarici svg { position: absolute; inset: 0; width: 28px; height: 28px; }

.ob-yildiz-dolu {
  opacity: 0;
  animation: obYildizDol 3s var(--ease-bounce) infinite;
}

@keyframes obYildizDol {
  0%, 30% { opacity: 0; transform: scale(0.5); }
  42% { opacity: 1; transform: scale(1.25); }
  52%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

.ob-yildiz-halka {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-favorite, #EAB308);
  opacity: 0;
  animation: obHalkaYayil 3s ease-out infinite;
}

@keyframes obHalkaYayil {
  0%, 38% { opacity: 0; transform: scale(0.6); }
  46% { opacity: 0.7; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.7); }
}

.ob-kategori-cipler { display: flex; gap: 8px; }

.ob-kategori-cipler span {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-family: "Izmir-Semibold", sans-serif;
  background: #fff;
  color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border);
}

.ob-kategori-cipler span.aktif {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  animation: obCipSec 2.6s ease-in-out infinite;
}

@keyframes obCipSec {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ── Sahne 4: Duyurular ─────────────────────────────────────── */
.ob-sahne--duyuru {
  background: linear-gradient(165deg, #0D47A1 0%, #1565C0 65%, #1976D2 100%);
}

.ob-duyuru-yigin {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  max-width: 86%;
}

.ob-mini-duyuru {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 13px;
  padding: 13px 16px;
  box-shadow: 0 8px 24px rgba(7, 18, 36, 0.22);
  animation: obDuyuruGir 0.55s var(--ease-out) both, obDuyuruVurgu 4.2s ease-in-out infinite;
}

.ob-mini-duyuru:nth-child(1) { animation-delay: 0.1s, 0.8s; }
.ob-mini-duyuru:nth-child(2) { animation-delay: 0.25s, 2.2s; }
.ob-mini-duyuru:nth-child(3) { animation-delay: 0.4s, 3.6s; }

@keyframes obDuyuruGir {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes obDuyuruVurgu {
  0%, 12%, 100% { transform: translateY(0) scale(1); }
  6% { transform: translateY(-3px) scale(1.025); }
}

.ob-duyuru-nokta {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nokta-mavi { background: var(--color-primary); }
.nokta-yesil { background: var(--color-success); }
.nokta-amber { background: var(--color-cta); }

.ob-mini-rozet {
  background: var(--color-new-badge, #0891B2);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* ── Sahne 5: Asistan ───────────────────────────────────────── */
.ob-sahne--asistan {
  background: linear-gradient(165deg, #E8F1FC 0%, #F5F7FB 60%, #E1EDFA 100%);
}

.ob-mini-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  max-width: 86%;
}

.ob-chat-balon {
  padding: 11px 15px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 85%;
  text-align: left;
  animation: obDuyuruGir 0.5s var(--ease-out) both;
}

.ob-chat-asistan {
  align-self: flex-start;
  background: #fff;
  color: var(--color-text);
  border-bottom-left-radius: 5px;
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.12);
  animation-delay: 0.15s;
}

.ob-chat-kullanici {
  align-self: flex-end;
  background: linear-gradient(135deg, #1565C0, #1976D2);
  color: #fff;
  border-bottom-right-radius: 5px;
  animation-delay: 0.55s;
}

.ob-chat-yaziyor {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  background: #fff;
  border-radius: 15px;
  border-bottom-left-radius: 5px;
  padding: 13px 15px;
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.12);
  animation: obDuyuruGir 0.5s var(--ease-out) 1s both;
}

.ob-chat-yaziyor span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: yaziyorZipla 1.2s ease-in-out infinite;
}

.ob-chat-yaziyor span:nth-child(2) { animation-delay: 0.15s; }
.ob-chat-yaziyor span:nth-child(3) { animation-delay: 0.3s; }

/* ── Navigasyon ─────────────────────────────────────────────── */
.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 22px;
}

.onboarding-dots { display: flex; gap: 7px; }

.onboarding-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D6DEE8;
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
}

.onboarding-dots .dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.14);
}

.onboarding-next-btn {
  background: var(--color-cta);
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-family: "Izmir-Bold", sans-serif;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(232, 118, 10, 0.32);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.onboarding-next-btn:hover {
  background: var(--color-cta-hover);
  transform: scale(1.05);
  box-shadow: 0 6px 22px rgba(232, 118, 10, 0.45);
}

.onboarding-skip {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  /* BIZYEN-740 U-7: "Devam" ile aynı dikey ölçü (11px iç boşluk); üzerine gelince açılan
     zemin artık "Devam"dan kısa görünmez. */
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  line-height: 21px;
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
}

.onboarding-skip:hover { color: var(--color-primary); background: var(--color-primary-surface); }

@media (max-width: 576px) {
  .onboarding-card { max-width: 100%; border-radius: 22px; }
  .ob-sahne { height: 205px; }
  .ob-icerik { padding: 20px 22px 2px; }
  .ob-icerik h2 { font-size: 19.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-card,
  .onboarding-step.active,
  .ob-logo-beyaz,
  .ob-kule,
  .ob-yildizlar span,
  .ob-arama-pill,
  .ob-arama-oneriler span,
  .ob-mini-hizmet,
  .ob-yildiz-dolu,
  .ob-yildiz-halka,
  .ob-kategori-cipler span.aktif,
  .ob-mini-duyuru,
  .ob-chat-balon,
  .ob-chat-yaziyor,
  .ob-chat-yaziyor span { animation: none; }
  .ob-yildiz-dolu { opacity: 1; }
  .ob-yildizlar span { opacity: 0.6; }
  .ob-chat-balon, .ob-chat-yaziyor, .ob-arama-oneriler span { opacity: 1; }
}

/* ============================================================
   BACKEND'E ÖZGÜ KORUNAN KURALLAR
   (Statik prototipte bulunmayan, backend uygulamasına özel kurallar)
   ============================================================ */

.duyurular-container .duyurular {
  cursor: pointer;
}

.duyurular-container .duyurular a {
        text-decoration: none;
        color: #212529;
    }

.duyurular-container .text-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.5;
  max-height: calc(1.5em * 3);
  max-width: 300px;
  font-weight: 400;
  font-size: 14px;
}

.duyurular-container .slick-initialized img {
  max-width:70px
}

.duyurular {
    visibility: hidden;
}

.duyurular.slick-initialized {
        visibility: visible;
    }

.login-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.login-description {
    max-width: 560px;
}

.login-description h1 {
  font-family: "Izmir-bold";
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1%;
  color: rgba(0, 0, 0, 1);
/* 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
  max-height: calc(1.25em * 2); */
}

.login-description p {
  font-size: 17px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
/* 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.5;
  max-height: calc(1.5em * 3); */
}

.bizizmir-search-content {
    margin-top: 20px;
    position: relative;
}

.bizizmir-search-content .bizizmir-search-v2 {
/*  padding-bottom: 4px;
*/}

.bizizmir-search-content .bizizmir-search-v2 button {
        position: absolute;
        top: 30px;
        right: 15px;
        transform: translate(-50%, -50%);
        background-color: transparent;
        border: 0;
    }

.bizizmir-search-v2 input {
  position: relative;
  height: 60px;
  box-shadow: 0px 0px 5px 0px rgba(46, 130, 208, 1);
  border-radius: 10px;
  position: relative;
  border-radius: 10px;
  padding-right: 60px;
}

.bizizmir-search-v2 input::placeholder {
  color: rgba(143, 142, 142, 1);
  font-size: 16px;
  font-weight: 400;
}

.search-warning-message {
    font-size: 14px;
    padding: 8px 5px;
    display: none;
    font-family: 'Izmir-Semibold';
}

.bizizmir-search-v2 .search-warning-input {
    box-shadow: none;
    border-color: var(--bs-form-invalid-border-color);
}

.bizizmir-search-v2 .search-warning-input:focus {
        box-shadow: 0 0 0 5px rgba(var(--bs-danger-rgb),.25);
        border-color: var(--bs-form-invalid-border-color);
    }

.bizizmir-tutucuwrap #filter-detail .filter-detail-text {
        color: rgb(33, 37, 41);
        text-decoration: none;
        font-weight: 400;
        margin: 0;
        cursor: default;
    }

.alert.hizmet-bulunamadi {
        background-color: #EED5D7;
        color: #973133;
        border-color: rgba(46,130,208,0.1);
        font-family: 'Izmir-SemiBold';
    }

.populer-hizmetler h2 .category-name-title{
    text-decoration:none;
}

.populer-hizmetler h2 .category-show-all{
    font-size: 16px;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.popup-container {
    background: white;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    width: 700px;
    overflow: hidden;
    position: relative;
}

.popup-header {
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}

.popup-close {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #999;
}

.popup-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.popup-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.slider-container {
    position: relative;
    overflow: hidden;
}

.slide {
    display: none;
    text-align: center;
}

.slide.active {
        display: block;
    }

.slide h3 {
        margin-bottom: 20px;
        color: #333;
    }

.content-area {
    height: 315px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .content-area {
        height: 250px;
    }
}

.content-area img,
    .content-area video {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
    }

.slider-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 10px;
}

.prev-btn, .next-btn {
    background: rgba(46, 130, 208, 1) ;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 41px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prev-btn:hover, .next-btn:hover {
        background: #0056b3;
    }

.slide-indicators {
    display: flex;
    gap: 8px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background 0.3s;
}

.indicator.active {
        background: rgba(46, 130, 208, 1);
    }

.slide-counter {
    text-align: center;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}


/* ============================================================
   BACKEND'E ÖZGÜ EK — Son Duyurular ikonları CDN'den <img> olarak
   gelir (statikte inline <svg>). Boyut kuralı olmadan SVG intrinsik
   boyutuyla devleşip paneli kaplıyor.
   ============================================================ */
.duyuru-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}