/* =========================================================
   components.css — buttons, cards, pills, chips, hero,
   search, lang-toggle, action buttons, CTA, empty-state,
   skeleton, lists, gallery tiles.
   ========================================================= */

/* =========================================================
   Logo & language toggle
   ========================================================= */
.logo{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.logo-title{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.logo-title .a{ color:var(--orange); }
.logo-title .cg{ color:var(--teal); margin-left:4px; }
.logo-sub{
  margin-top:4px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--purple);
  display:inline-flex; align-items:center; gap:4px;
}
.logo-sub .heart{ color:var(--orange); font-size:10px; animation:pulse-heart 2.4s ease-in-out infinite; }
@keyframes pulse-heart{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.15); }
}

.lang-toggle{
  display:flex; align-items:center;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:3px;
  font-size:11px; font-weight:700;
  flex:0 0 auto;
  margin-left: auto;
}
.lang-toggle button{
  padding:6px 11px;
  border-radius:var(--radius-pill);
  color:var(--muted);
  letter-spacing:.04em;
  transition:all var(--dur-fast);
  min-height:30px;
}
.lang-toggle button.active{
  background:var(--orange);
  color:#fff;
  box-shadow:0 4px 10px rgba(146,39,143,.30);
}

/* =========================================================
   Icon button (back, share, filter, etc.)
   ========================================================= */
.icon-btn{
  width:38px; height:38px; min-width:38px;
  border-radius:12px;
  background:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:15px;
  transition: background var(--dur-fast), transform var(--dur-fast);
  flex:0 0 auto;
}
.icon-btn:hover{ background:var(--cream-2); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn.btn-glass{
  /* background:rgba(255,255,255,.20); */
  background-color: var(--orange);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
}
.icon-btn.btn-glass:hover{ background:rgba(255,255,255,.30); }
.icon-btn.btn-on{ background:var(--orange-50); color:var(--orange); }

/* =========================================================
   Home intro (home-intro)
   ========================================================= */
.home-intro{
  padding:18px 18px 8px;
}

.home-intro .eyebrow{
  font-size:11px; letter-spacing:.18em; font-weight:800;
  text-transform:uppercase; opacity:.85;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.06);
  color:var(--muted);
  padding:5px 10px; border-radius:var(--radius-pill);
}
[data-theme="dark"] .home-intro .eyebrow{
  background:rgba(255,255,255,.08);
}

.home-intro h1{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:12px 0 6px;
  color:var(--ink);
}

.home-intro p{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
  max-width:280px;
}

/* =========================================================
   Hero search (independent)
   ========================================================= */
.hero-search{
  margin:4px 18px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:11px 14px;
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-size:13px; font-weight:500;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform var(--dur-fast);
}
.hero-search:hover{ border-color:var(--line-2); }
.hero-search:active{ transform:scale(.985); }
.hero-search i{ color:var(--orange); }

/* =========================================================
   Place slider (Home featured places with rotation)
   DEVRE DIŞI: place-slider markup'ı index.html'de yorum satırına alındı, ileride tekrar açılabilir
   ========================================================= */
.place-slider{
  margin:0 18px 16px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.ps-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  gap:0;
}
.ps-track::-webkit-scrollbar{ display:none; }

.ps-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  aspect-ratio:16/10;
  position:relative;
  appearance:none;
  border:none;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:transform var(--dur-fast);
}
.ps-slide:active{ transform:scale(.98); }

.ps-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ps-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

.ps-meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  color:#fff;
  z-index:2;
}

.ps-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}

.ps-meta h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  margin:0 0 6px;
}

.ps-meta .ps-rating{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:500;
}

.ps-meta .star{
  color:var(--gold);
}

.ps-meta .ps-reviews{
  color:rgba(255,255,255,.7);
  font-size:12px;
}

.ps-arrows{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
  pointer-events:none;
}

.ps-arrow{
  appearance:none;
  border:none;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  border-radius:50%;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  font-size:18px;
  transition:background var(--dur-fast), transform var(--dur-fast);
  pointer-events:auto;
}
.ps-arrow:hover{ background:rgba(255,255,255,.28); }
.ps-arrow:active{ transform:scale(.92); }
.ps-arrow:disabled{ opacity:.4; cursor:default; }

@media (max-width: 480px) {
  .ps-arrow{ width:40px; height:40px; font-size:16px; }
}

.ps-dots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:10;
}

.ps-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background var(--dur-fast);
}
.ps-dot:hover{ background:rgba(255,255,255,.6); }
.ps-dot.is-active{ background:#fff; }

/* =========================================================
   Place grid (Home featured places - 2x2 fixed grid)
   ========================================================= */
.place-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin:0 18px 16px;
}

.pg-card{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  appearance:none;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  transition:transform var(--dur-fast);
}

.pg-card:hover{ box-shadow:var(--shadow-card); }
.pg-card:active{ transform:scale(.98); }

.pg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.pg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}

.pg-meta{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  color:#fff;
  z-index:2;
}

.pg-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  font-size:10.5px;
  font-weight:600;
  margin-bottom:6px;
}

.pg-meta h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:13.5px;
  line-height:1.2;
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pg-rating{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11.5px;
  font-weight:500;
}

.pg-rating .star{
  color:var(--gold);
}

.pg-reviews{
  color:rgba(255,255,255,.75);
  font-size:10.5px;
}

/* =========================================================
   Category grid (Home)
   ========================================================= */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  padding:0 18px;
}
.cat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:12px;
  min-height:104px;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:left;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  position:relative;
  overflow:hidden;
  grid-column: span 2;
}
.cat-grid .cat-card:nth-last-child(-n+2){ grid-column: span 3; }
.cat-card:active{ transform:scale(.97); }
.cat-card:hover{ box-shadow:var(--shadow-card); }
.cat-icon{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.cat-card .label{
  font-weight:700; font-size:13px; color:var(--ink);
  margin-top:8px;
  font-family:'Outfit', sans-serif;
  line-height:1.2;
}
.cat-card .meta{
  font-size:10.5px; color:var(--muted); font-weight:500;
  margin-top:2px;
  line-height:1.25;
}
.cat-card.cat-acil .label{ color:var(--red); }

.acc-orange   .cat-icon{ background:rgba(146,39,143,.13); color:var(--orange); }
.acc-teal     .cat-icon{ background:rgba(36,43,70,.12);   color:var(--teal); }
.acc-gold     .cat-icon{ background:rgba(245,184,32,.16); color:var(--gold-700); }
.acc-aqua     .cat-icon{ background:rgba(36,43,70,.14);   color:var(--aqua); }
.acc-deepteal .cat-icon{ background:rgba(36,43,70,.18);   color:var(--teal); }
.acc-purple   .cat-icon{ background:rgba(93,55,147,.13);  color:var(--purple); }
.acc-red      .cat-icon{ background:rgba(224,74,63,.13);  color:var(--red); }
.acc-grad     .cat-icon{
  background:linear-gradient(135deg,#92278f,#242b46); color:#fff;
  box-shadow:0 6px 14px rgba(146,39,143,.35);
}

/* =========================================================
   Pills (filter / subcategory)
   ========================================================= */
.pill-row{ background:transparent; }
.pill-row .hscroll{ padding:4px 16px 6px; }
.pill{
  padding:9px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
  background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap;
  transition:all var(--dur-fast);
  min-height:36px;
}
.pill:hover{ border-color:var(--line-2); }
.pill.active{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
  box-shadow:0 6px 14px rgba(146,39,143,.28);
}
.pill.pill-ghost{
  background:transparent;
  border:1px solid var(--line);
}
.pill.pill-ghost.active{
  background:var(--orange-50);
  color:var(--orange);
  border-color:var(--orange);
  box-shadow:none;
}

/* =========================================================
   Sponsored card (Category)
   ========================================================= */
.sp-card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  border:2px solid var(--orange);
  box-shadow:var(--shadow-orange);
  overflow:hidden;
  margin:0 16px 14px;
  width:calc(100% - 32px);
  text-align:left;
  transition: transform var(--dur-fast);
  position:relative;
  display:block;
}
.sp-card:active{ transform:scale(.985); }
.sp-hero{
  height:140px;
  position:relative;
  display:flex; align-items:flex-end;
  padding:10px;
}
.sp-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.18));
  pointer-events:none;
}
.sp-badge{
  position:absolute; top:10px; left:10px;
  background:var(--gold);
  color:#3A2A06;
  font-size:10.5px; font-weight:800;
  letter-spacing:.06em;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:5px;
  box-shadow:0 6px 14px rgba(245,184,32,.35);
  text-transform:uppercase;
  z-index:2;
}
.sp-fav,.lst-fav{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px;
  border-radius:999px;
  background:var(--surface-glass-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px;
  z-index:2;
  box-shadow:var(--shadow-soft);
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.sp-fav.is-fav i,.lst-fav.is-fav i,.fav-btn.is-fav i{
  font-weight:900;
}
.sp-fav.is-fav,.lst-fav.is-fav,.fav-btn.is-fav{ color:var(--red); }
.fav-pop{ animation:pop 280ms var(--ease-out); }
.sp-body{ padding:12px 14px 14px; }
.sp-name{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-.01em;
  margin:0 0 4px;
  color:var(--ink);
}
.sp-desc{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sp-meta,.lst-meta{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600;
  color:var(--ink); flex-wrap:wrap;
}
.sp-meta .star,.lst-meta .star{ color:var(--gold-700); }
.sp-meta .dot,.lst-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); display:inline-block; }
.sp-meta .muted,.lst-meta .muted{ color:var(--muted); font-weight:500; }

/* =========================================================
   Listing card (regular)
   ========================================================= */
.lst-card{
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
  display:flex; gap:12px;
  padding:10px;
  margin:0 16px 10px;
  width:calc(100% - 32px);
  text-align:left;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur), max-height var(--dur);
  position:relative;
}
.lst-card:active{ transform:scale(.985); }
.lst-card:hover{ box-shadow:var(--shadow-card); }
.lst-card.removing{
  opacity:0; transform:translateX(40px);
  max-height:0; padding:0; margin:0; border:0;
}
.lst-img{
  width:88px; height:88px;
  border-radius:14px;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}
.lst-img .corner-icon{
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.30);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  color:#fff;
}
.lst-img .badge-sp{
  position:absolute; top:6px; left:6px;
  background:var(--gold);
  color:#3A2A06;
  font-size:9px; font-weight:800;
  padding:2px 6px;
  border-radius:999px;
  letter-spacing:.04em;
}
.lst-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:2px 0;
  position:relative;
}
.lst-name{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:15.5px;
  margin:0;
  letter-spacing:-.005em;
  color:var(--ink);
  padding-right:30px;
}
.lst-desc{
  font-size:11.5px;
  color:var(--muted);
  margin:2px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-overflow:ellipsis;
  padding-right:4px;
}
/* Rich-text (Html.Raw) içeriğinin satır kısaltmasını bozmaması için satır içi davranış */
.lst-desc *{
  display:inline !important;
  font-size:inherit !important;
  color:inherit !important;
  margin:0 !important;
  padding:0 !important;
  font-weight:inherit !important;
}
.lst-desc br{ display:none !important; }
.lst-fav{
  position:absolute; top:0; right:0;
  width:30px; height:30px;
  background:transparent;
  box-shadow:none;
  font-size:13px;
}
.lst-fav.is-fav{ color:var(--red); }
.lst-card .lst-chip{
  display:inline-block;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--line);
  font-size:10.5px; font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:.02em;
}

/* =========================================================
   Generic chip
   ========================================================= */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  background:rgba(36,43,70,.13);
  color:var(--aqua);
  white-space:nowrap;
}
.chip.chip-orange  { background:rgba(146,39,143,.13); color:var(--orange); }
.chip.chip-teal    { background:rgba(36,43,70,.13);   color:var(--teal); }
.chip.chip-gold    { background:rgba(245,184,32,.18); color:var(--gold-700); }
.chip.chip-purple  { background:rgba(93,55,147,.14);  color:var(--purple); }
.chip.chip-red     { background:rgba(224,74,63,.14);  color:var(--red); }
.chip.chip-cream   { background:var(--cream); color:var(--ink); border:1px solid var(--line); }

/* Sponsored section label badge */
.badge-gold{
  font-family:'Outfit', sans-serif;
  font-size:9.5px; font-weight:800;
  letter-spacing:.06em;
  color:#3A2A06;
  background:var(--gold);
  padding:3px 8px;
  border-radius:var(--radius-pill);
  text-transform:uppercase;
}

/* =========================================================
   Detail screen
   ========================================================= */
.detail-hero{
  position:relative;
  height:300px;
  display:flex; align-items:flex-end;
  padding:18px;
  color:#fff;
  overflow:hidden;
}
.detail-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55));
}
.top-bar-overlay{
  position:absolute; top:0; left:0; right:0;
  padding:12px 14px;
  padding-top:calc(12px + var(--safe-top));
  display:flex; align-items:center; justify-content:space-between;
  z-index:3;
}
.detail-hero .hero-name{
  position:relative; z-index:2;
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.015em;
  max-width:320px;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
  margin-bottom: 15px;
}
.detail-hero .hero-name small{
  display:block;
  font-family:'Outfit', sans-serif;
  font-size:11.5px; font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:6px;
}
.detail-card{
  margin-top:-20px;
  position:relative; z-index:4;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:20px 18px 16px;
}
.detail-card h1{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:-.015em;
  margin:0 0 8px;
  color:var(--ink);
}
.rating-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px;
  font-size:13px; font-weight:600;
}
.rating-row .star{ color:var(--gold-700); }
.rating-row .muted{ color:var(--muted); font-weight:500; }
.rating-row .open-now{ color:var(--teal); font-weight:700; }

/* Action buttons row */
.actions{
  display:flex; gap:8px;
  margin:16px 0 6px;
}
.action-btn{
  flex:1;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 4px 8px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:var(--shadow-soft);
  font-size:11px; font-weight:600;
  color:var(--ink);
  transition:transform var(--dur-fast), background var(--dur-fast);
  min-height:62px;
}
.action-btn:active{ transform:scale(.96); }
.action-btn .ic{
  width:30px; height:30px;
  border-radius:10px;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange); font-size:13px;
}
.action-btn[data-act="dir"]  .ic{ color:var(--teal); }
.action-btn[data-act="call"] .ic{ color:var(--aqua); }
.action-btn[data-act="save"] .ic{ color:var(--purple); }
.action-btn.is-fav .ic{ background:rgba(224,74,63,.12); color:var(--red); }

/* Detail screen horizontal scrollers (Featured / Gallery)
   Aligned with .section padding (18px) so first item lines up
   with the section title above it. */
.detail-scroll{
  padding:6px 18px 10px;
  gap:10px;
}
.detail-scroll.gallery-scroll{
  gap:8px;
}

/* Featured products scroller */
.feat-card{
  width:148px;
  background:var(--surface);
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.feat-img{
  height:100px;
  position:relative;
}
.feat-img i{
  position:absolute; top:8px; right:8px;
  color:#fff; opacity:.85; font-size:13px;
}
.feat-info{ padding:10px 12px 12px; }
.feat-name{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:13.5px;
  margin:0 0 4px;
  line-height:1.2;
  color:var(--ink);
}
.feat-price{
  font-size:13px; font-weight:800;
  color:var(--orange);
}
.feat-price small{
  font-size:10.5px; font-weight:600;
  color:var(--muted);
  margin-left:4px;
}

/* Gallery */
.gal-tile{
  width:110px; height:110px;
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  position:relative;
  cursor:pointer;
  transition:transform var(--dur-fast);
}
.gal-tile:active{ transform:scale(.96); }
.gal-tile.more::after{
  content:"+12";
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  border-radius:14px;
  color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}

/* CTA button */
.cta-btn{
  width:100%;
  background:var(--orange);
  color:#fff;
  font-weight:800;
  font-size:15.5px;
  padding:15px 18px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--shadow-orange);
  transition:transform var(--dur-fast), background var(--dur-fast);
  min-height:54px;
}
.cta-btn:active{ transform:scale(.985); background:var(--orange-700); }
.cta-btn.cta-secondary{
  background:var(--surface);
  color:var(--orange);
  border:2px solid var(--orange);
  box-shadow:none;
}

/* =========================================================
   Search input (Discover)
   ========================================================= */
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:10px 14px;
  margin:12px 16px 8px;
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.search-bar:focus-within{
  border-color:var(--orange);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(146,39,143,.10);
}
.search-bar i{ color:var(--orange); font-size:14px; }
.search-bar input{
  flex:1; min-width:0;
  border:0; background:transparent;
  font-size:14px; font-weight:500;
  color:var(--ink);
  outline:none;
}
.search-bar input::placeholder{ color:var(--muted); }
.search-bar .clear-btn{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--muted);
  color:#fff;
  display:none; align-items:center; justify-content:center;
  font-size:10px;
}
.search-bar .clear-btn.visible{ display:flex; }

/* Recent search chips */
.chip-row{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:6px 16px 8px;
}
.chip-row .pill{
  background:var(--surface);
  font-weight:600;
}
.chip-row .pill i{ margin-right:6px; color:var(--muted); }

/* Quick categories grid (Discover) */
.quick-cats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; padding:6px 16px 16px;
}
.quick-cat{
  display:flex; align-items:center; gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-fast);
  text-align:left;
  min-height:60px;
}
.quick-cat:active{ transform:scale(.97); }
.quick-cat .qc-ic{
  width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex:0 0 auto;
}
.quick-cat .qc-label{
  font-weight:700; font-size:13px; color:var(--ink);
}

/* =========================================================
   Empty state
   ========================================================= */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:48px 32px 32px;
  gap:14px;
}
.empty-state .es-icon{
  width:84px; height:84px;
  border-radius:50%;
  background:var(--orange-50);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:36px;
  box-shadow:0 12px 24px rgba(146,39,143,.14);
}
.empty-state h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:20px;
  margin:0;
  color:var(--ink);
}
.empty-state p{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
  max-width:280px;
  line-height:1.5;
}
.empty-state .cta-btn{ width:auto; padding:12px 22px; margin-top:6px; }

/* =========================================================
   Map placeholder card (Nearby)
   ========================================================= */
/* =========================================================
   Nearby page — real map container
   ========================================================= */
.near-map-wrapper{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
#near-map{
  position:relative;
  height:220px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--grad-teal-aqua);
}
.near-map-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.18);
  border-radius:inherit;
}
.near-map-loading{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  background:rgba(0,0,0,.25);
  color:#fff;
  border-radius:inherit;
  font-size:13px; font-weight:600;
}
.near-map-loading i{ font-size:22px; }

/* Genişlet butonu */
.near-map-expand{
  position:absolute; top:10px; right:10px; z-index:10;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  font-size:14px; color:var(--ink);
  transition:background .15s;
}
.near-map-expand:hover{ background:#fff; }

/* Tam ekran durumu */
.near-map-wrapper.is-fullscreen{
  position:fixed; inset:0; z-index:300;
  margin:0 !important; border-radius:0; overflow:visible;
}
.near-map-wrapper.is-fullscreen #near-map{
  height:100%; border-radius:0;
}
.near-map-wrapper.is-fullscreen .near-map-expand{
  top:12px; right:12px; z-index:310;
}

.map-card{
  position:relative;
  margin:14px 16px 4px;
  height:170px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--grad-teal-aqua);
  box-shadow:var(--shadow-card);
  display:flex; align-items:flex-end;
  padding:14px;
  color:#fff;
}
.map-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.18) 0 40px, transparent 41px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.14) 0 30px, transparent 31px),
    linear-gradient(135deg, transparent 30%, rgba(0,0,0,.18));
}
.map-card .map-pin{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-100%);
  width:42px; height:42px;
  border-radius:50% 50% 50% 0;
  background:var(--orange);
  rotate:-45deg;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.30);
}
.map-card .map-pin i{ rotate:45deg; }
.map-card .map-pin::after{
  content:"";
  position:absolute;
  bottom:-22px; left:50%;
  transform:translate(-50%,0) rotate(45deg);
  width:30px; height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.20);
  filter:blur(3px);
}
.map-card .map-cta{
  position:relative; z-index:2;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  font-weight:700; font-size:12.5px;
  padding:9px 14px;
  border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:var(--shadow-soft);
}
.map-card .map-cta i{ color:var(--orange); }

/* Nearby distance badge */
.distance-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700;
  background:var(--cream);
  color:var(--ink);
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
}
.distance-badge i{ color:var(--teal); font-size:10px; }

/* =========================================================
   Skeleton shimmer
   ========================================================= */
.skeleton{
  background:var(--app-bg);
  background:linear-gradient(90deg, var(--app-bg) 0%, var(--surface-2) 50%, var(--app-bg) 100%);
  background-size:360px 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius:14px;
}
.skeleton-card{
  margin:0 16px 10px;
  height:108px;
}

/* =========================================================
   Emergency tiles
   ========================================================= */
.em-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding:14px 16px 4px;
}
.em-tile{
  position:relative;
  border-radius:var(--radius-lg);
  padding:14px;
  color:#fff;
  text-align:left;
  min-height:110px;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition:transform var(--dur-fast);
}
.em-tile:active{ transform:scale(.97); }
.em-tile .em-ic{
  width:36px; height:36px;
  border-radius:11px;
  background:rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.em-tile .em-name{
  font-family:'Outfit', sans-serif;
  font-weight:700; font-size:13px;
  margin-top:8px;
  letter-spacing:.02em;
}
.em-tile .em-num{
  font-family:'Outfit', sans-serif;
  font-weight:700; font-size:24px;
  letter-spacing:-.01em;
  margin-top:2px;
}
.em-tile .pulse{
  position:absolute;
  top:14px; right:14px;
  width:10px; height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation: pulseRed 1.6s infinite;
}
.em-tile.tile-red    { background:linear-gradient(135deg,#E04A3F,#B83A30); }
.em-tile.tile-orange { background:linear-gradient(135deg,#92278f,#7A1F77); }
.em-tile.tile-teal   { background:linear-gradient(135deg,#242b46,#171c2e); }
.em-tile.tile-purple { background:linear-gradient(135deg,#5d3793,#3f2566); }
.em-tile.tile-aqua   { background:linear-gradient(135deg,#3a4163,#242b46); }
.em-tile.tile-gold   { background:linear-gradient(135deg,#F5B820,#D9A012); color:#3A2A06; }
.em-tile.tile-gold .em-ic{ background:rgba(58,42,6,.14); color:#3A2A06; }
.em-tile.tile-gold .pulse{ background:#3A2A06; box-shadow:0 0 0 0 rgba(58,42,6,.7); }

/* Stepper used in reservation sheet */
.stepper{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface);
  overflow:hidden;
}
.stepper button{
  width:38px; height:38px;
  font-size:16px; font-weight:700;
  color:var(--ink);
  transition:background var(--dur-fast);
}
.stepper button:active{ background:var(--cream); }
.stepper .val{
  min-width:36px;
  text-align:center;
  font-weight:800;
  font-size:14px;
}

/* Input / generic field */
.input{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  background:var(--surface);
  color:var(--ink);
  outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(146,39,143,.10);
}
.input::placeholder{ color:var(--muted); }

/* =========================================================
   Side drawer (menu) — inner content
   Outer animation/positioning defined in sheets.css
   ========================================================= */
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--cream) 0%, #fff 100%);
}
.drawer-brand{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.drawer-avatar{
  width:40px; height:40px;
  border-radius:12px;
  background:var(--hero-gradient);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px;
  box-shadow:var(--shadow-orange);
  flex:0 0 auto;
}
.drawer-greet{
  display:flex; flex-direction:column;
  line-height:1.2;
  min-width:0;
}
.drawer-greet strong{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drawer-greet span{
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.drawer-head .close-btn{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:13px;
  flex:0 0 auto;
}
.drawer-head .close-btn:active{ background:var(--cream); }

.drawer-body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 10px 10px;
  scrollbar-width:none;
}
.drawer-body::-webkit-scrollbar{ display:none; }

.drawer-section{
  padding:8px 4px 10px;
  border-bottom:1px solid var(--line);
}
.drawer-section:last-child{ border-bottom:0; }

.drawer-section-label{
  font-size:10.5px; font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin:6px 12px 6px;
}

.drawer-row{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font-size:14px; font-weight:600;
  text-align:left;
  position:relative;
  transition: background var(--dur-fast);
  min-height:44px;
}
.drawer-row:active{ background:var(--cream); }
.drawer-row:hover{ background:var(--cream); }
.drawer-row.drawer-row-static{ cursor:default; }
.drawer-row.drawer-row-static:active,
.drawer-row.drawer-row-static:hover{ background:transparent; }

.drawer-row .ic{
  width:34px; height:34px; min-width:34px;
  border-radius:10px;
  background:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink);
  font-size:14px;
  flex:0 0 auto;
}
.drawer-row .ic.ic-orange  { background:rgba(146,39,143,.13); color:var(--orange); }
.drawer-row .ic.ic-teal    { background:rgba(36,43,70,.12);   color:var(--teal); }
.drawer-row .ic.ic-deepteal{ background:rgba(36,43,70,.18);   color:var(--teal); }
.drawer-row .ic.ic-gold    { background:rgba(245,184,32,.18); color:var(--gold-700); }
.drawer-row .ic.ic-aqua    { background:rgba(36,43,70,.14);   color:var(--aqua); }
.drawer-row .ic.ic-purple  { background:rgba(93,55,147,.13);  color:var(--purple); }
.drawer-row .ic.ic-grad    { background:var(--grad-orange-gold); color:#fff; }

.drawer-row .label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.drawer-row .meta{
  font-size:11px; font-weight:700;
  color:var(--muted-2);
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:0 0 auto;
}

.drawer-row .badge{
  background:var(--orange);
  color:#fff;
  font-size:10px; font-weight:800;
  padding:2px 7px;
  border-radius:999px;
  line-height:1.4;
  display:none;
  flex:0 0 auto;
}
.drawer-row .badge.visible{ display:inline-block; }

/* Active screen / category indicator (left orange bar + tinted background) */
.drawer-row.active{
  background:var(--orange-50);
  color:var(--orange-700);
}
.drawer-row.active .ic{ background:var(--orange); color:#fff; }
.drawer-row.active::before{
  content:"";
  position:absolute;
  left:-2px; top:8px; bottom:8px;
  width:3px;
  border-radius:2px;
  background:var(--orange);
}

/* Emergency row gets a soft red accent */
.drawer-row.drawer-row-acil .ic{
  background:rgba(224,74,63,.13);
  color:var(--red);
}

/* Inline language toggle inside the settings row */
.drawer-row .drawer-lang{
  margin-left:auto;
  flex:0 0 auto;
}
.drawer-row .drawer-lang button{
  padding:5px 9px;
  font-size:10.5px;
  min-height:26px;
}

.drawer-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 16px calc(12px + var(--safe-bottom));
  border-top:1px solid var(--line);
  background:var(--surface);
}
.drawer-poweredby{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--purple);
}
.drawer-poweredby .heart{
  color:var(--orange);
  font-size:10px;
  animation:pulse-heart 2.4s ease-in-out infinite;
}
.drawer-version{
  font-size:10.5px; font-weight:700;
  letter-spacing:.04em;
  color:var(--muted-2);
}

/* When the menu drawer is open, the trigger button gets a subtle tint */
.icon-btn.menu-btn[aria-expanded="true"]{
  background:var(--orange-50);
  color:var(--orange);
}

/* Toast (still defined here for broad use) — full styling in sheets.css */

/* =========================================================
   Unsplash photo layer
   ----------------------------------------------------------
   Every gradient surface (.sp-hero, .lst-img, .feat-img,
   .gal-tile, .detail-hero) keeps its gradient as a colored
   loading/error fallback. A real photo (<img class="acg-photo">)
   is layered absolutely on top with object-fit:cover and
   fades in once loaded. Existing badges, icons and overlays
   stay above the photo via explicit z-index.
   ========================================================= */
.acg-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: top;
  border-radius:inherit;
  display:block;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
.acg-photo.is-loaded{ opacity:1; }

/* Make sure the gradient->photo containers establish positioning
   contexts (most already do; this is a safety net). */
.sp-hero,
.lst-img,
.feat-img,
.gal-tile,
.detail-hero{
  position:relative;
}

/* Keep listing thumb's rounded corners on the photo */
.lst-img-photo{ border-radius:14px; }
.gal-tile-img{ border-radius:14px; }
.feat-img-photo{ border-radius:0; }

/* Keep the hero gradient overlay above the photo so text remains readable */
.sp-hero::after,
.detail-hero::after{ z-index:1; }

/* The "+12" badge on the 5th gallery tile must paint above its photo */
.gal-tile.more::after{ z-index:1; }

/* The little corner icon on listing thumbs — keep above photo */
.lst-img .corner-icon{ z-index:2; }
.lst-img .badge-sp{ z-index:2; }

/* Feat-card little icon top-right stays above photo */
.feat-img i{ z-index:2; }

/* =========================================================
   Home Favorites Grid (2x3 grid layout)
   ----------------------------------------------------------
   Compact card variant: small image, name, rating.
   No carousel behavior - simple grid layout.
   ========================================================= */
.home-favs{ padding-top:6px; }

.home-favs-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:18px 18px 10px;
}
.home-favs-head h2{
  font-family:'Outfit', sans-serif;
  font-weight:700; font-size:18px;
  margin:0; letter-spacing:-.01em; color:var(--ink);
}

.home-favs-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:0 18px 4px;
}

.home-fav-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  display:flex; flex-direction:column;
  text-align:left; cursor:pointer;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.home-fav-card:hover{ box-shadow:var(--shadow-card); }
.home-fav-card:active{ transform:scale(.97); }

.home-fav-card .hf-img{
  position:relative; height:90px; overflow:hidden;
}
.home-fav-card .hf-body{
  padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:4px;
}
.home-fav-card .hf-name{
  font-family:'Outfit', sans-serif;
  font-weight:700; font-size:12.5px;
  margin:0; line-height:1.2; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home-fav-card .hf-rating{
  font-size:11px; color:var(--muted);
  display:inline-flex; align-items:center; gap:4px;
}
.home-fav-card .hf-rating .star{
  color:var(--gold-700); font-size:10px;
}

/* =========================================================
   Home carousels (Etkinlikler / Restoranlar / Gezilecek …)
   ----------------------------------------------------------
   Sticky home pattern: title + prev/next arrows, snap-scroll
   track of cards, dots indicator, "Tümünü Gör" CTA below.
   ========================================================= */
.home-carousels{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
}
.home-carousel{ display:block; }

.hcr-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin:24px 18px 12px;
}
.hcr-head h2{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0;
  letter-spacing:-.01em;
  color:var(--ink);
  flex:1 1 auto;
  min-width:0;
}
.hcr-arrows{ display:flex; gap:8px; flex:0 0 auto; }
.hcr-arrow{
  width:38px; height:38px;
  border-radius:12px;
  background:var(--cream);
  border:1px solid var(--line);
  color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px;
  transition: background var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.hcr-arrow:hover{ background:var(--cream-2); }
.hcr-arrow:active{ transform:scale(.92); }
.hcr-arrow:disabled{ opacity:.4; cursor:default; }

.hcr-track{
  display:flex; gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 18px 14px;
  scroll-padding-left:18px;
}
.hcr-track::-webkit-scrollbar{ display:none; }

.hcr-card{
  flex:0 0 auto;
  width:47%;
  max-width:340px;
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  text-align:left;
  cursor:pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.hcr-card:active{ transform:scale(.985); }

.hcr-img{
  position:relative;
  height:150px;
  overflow:hidden;
}
.hcr-img-photo{ border-radius:0; }
.hcr-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
  z-index:1;
  pointer-events:none;
}
.hcr-chips{
  position:absolute;
  left:10px; bottom:10px;
  display:flex; flex-wrap:wrap; gap:6px;
  z-index:2;
}
.hcr-chip{
  display:inline-flex; align-items:center;
  background:var(--surface-glass-strong);
  color:var(--orange);
  font-size:11px; font-weight:700;
  padding:5px 9px;
  border-radius:var(--radius-pill);
  letter-spacing:.01em;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.hcr-body{
  padding:12px 14px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.hcr-name{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:15.5px;
  margin:0 0 2px;
  letter-spacing:-.005em;
  color:var(--ink);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hcr-meta{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hcr-meta i{
  color:var(--orange);
  font-size:12px;
  flex:0 0 auto;
}
.hcr-meta .star{ color:var(--gold); }
.hcr-meta .dot{
  width:3px; height:3px;
  background:var(--muted-2);
  border-radius:50%;
  display:inline-block;
}

.hcr-cta{
  margin-top:8px;
  width:100%;
  background:var(--cream);
  color:var(--ink);
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:13.5px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  min-height:42px;
}
.hcr-cta:hover{ background:var(--orange-50); color:var(--orange); border-color:var(--orange-50); }
.hcr-cta:active{ transform:scale(.98); }

.hcr-dots{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:2px 18px 4px;
  min-height:14px;
}
.hcr-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--line-2);
  transition: width var(--dur-fast), background var(--dur-fast);
}
.hcr-dot.is-active{
  width:18px;
  border-radius:999px;
  background:var(--orange);
}

.hcr-seeall{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:calc(100% - 36px);
  margin:8px 18px 6px;
  padding:13px 16px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:14px;
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:14px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  min-height:46px;
}
.hcr-seeall:hover{ background:var(--orange-50); color:var(--orange); border-color:var(--orange-50); }
.hcr-seeall:active{ transform:scale(.99); }
.hcr-seeall i{ font-size:12px; }

/* Make hcr-img establish positioning context for photo overlay */
.hcr-img{ position:relative; }

/* =========================================================
   DISTRICT BAR
   ========================================================= */
.district-bar{
  width:100%;
  padding:10px 16px;
  background:var(--surface-glass-strong);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  transition: all var(--dur-fast);
}
.district-bar:active{ opacity:.8; }
.district-bar:hover{ background:var(--surface-glass); }

.db-ic{
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
  font-size:18px;
  flex:0 0 auto;
}

.db-label{
  flex:1;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
}

.db-chev{
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  font-size:14px;
  flex:0 0 auto;
  transition: color var(--dur-fast);
}

.district-bar:hover .db-chev{
  color:var(--orange);
}

/* =========================================================
   DISTRICT LIST (sheet body)
   ========================================================= */
.district-list{
  display:flex; flex-direction:column;
}

.district-row{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  font-size:14px;
  color:var(--ink);
  transition: background var(--dur-fast);
  position:relative;
}

.district-row:last-child{
  border-bottom:0;
}

.district-row:active{
  background:var(--orange-50);
}

.district-row.active{
  color:var(--orange);
  font-weight:700;
}

.district-row::before{
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:24px;
  background:transparent;
  border-radius:0 2px 2px 0;
  transition: background var(--dur-fast);
}

.district-row.active::before{
  background:var(--orange);
}

.district-row-icon{
  flex:0 0 auto;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:var(--muted);
  transition: color var(--dur-fast);
}

.district-row.active .district-row-icon{
  color:var(--orange);
}

.district-row-label{
  flex:1;
  text-align:left;
  font-size:14px;
  font-weight:500;
  color:inherit;
}

/* =========================================================
   Ad Popup (TerraCity)
   ========================================================= */
.ad-popup{
  position:fixed;
  inset:0;
  z-index:130;
  background:rgba(15,15,18,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out);
}
.ad-popup.is-open{
  opacity:1;
  pointer-events:auto;
}
.ad-popup-card{
  width:min(92%, 380px);
  background:var(--surface);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(12px) scale(.96);
  transition:transform var(--dur-slow) var(--ease-out);
}
.ad-popup.is-open .ad-popup-card{
  transform:translateY(0) scale(1);
}
.ad-popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ink);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  border:none;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out);
}
.ad-popup-close:active{
  background:rgba(255,255,255,.2);
  transform:scale(.9);
}
.ad-popup-media{
  display:block;
  width:100%;
  height:160px;
  background-color:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-decoration:none;
}
.ad-popup-logo{
  width:96px;
  height:96px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));
  display:block;
}
.ad-popup-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--gold);
  color:#1a1a1e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:999px;
  text-transform:uppercase;
}
.ad-popup-body{
  padding:18px 18px 12px;
}
.ad-popup-body h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0 0 6px;
  color:var(--ink);
  line-height:1.2;
}
.ad-popup-body p{
  font-size:13px;
  color:var(--muted);
  margin:0 0 14px;
  line-height:1.5;
}
.ad-popup-cta{
  display:inline-block;
  padding:12px 18px;
  background:var(--orange);
  color:#fff;
  font-weight:800;
  font-size:14px;
  border-radius:14px;
  text-decoration:none;
  box-shadow:var(--shadow-orange);
  transition:background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ad-popup-cta:active{
  background:var(--orange-700);
  transform:scale(.98);
}
.ad-popup-optout{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px 18px;
  background:var(--cream);
  margin:0;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
  border:none;
}
.ad-popup-optout input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--orange);
}

/* ========== LANGUAGE TRIGGER BUTTON ========== */
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:auto;
  padding:0 10px;
}
.lang-btn .lang-btn-code{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ========== LANGUAGE MODAL ========== */
.lang-modal{
  position:fixed;
  inset:0;
  z-index:140;
  background:rgba(15,15,18,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out);
}
.lang-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.lang-modal-card{
  position:relative;
  width:min(92%, 360px);
  background:var(--surface);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(12px) scale(.96);
  transition:transform var(--dur-slow) var(--ease-out);
}
.lang-modal.is-open .lang-modal-card{
  transform:translateY(0) scale(1);
}
.lang-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(127,127,127,.14);
  color:var(--ink);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  border:none;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out);
}
.lang-modal-close:active{
  background:rgba(127,127,127,.26);
  transform:scale(.9);
}
.lang-modal-head{
  padding:18px 18px 6px;
}
.lang-modal-head h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}
.lang-modal-list{
  padding:8px 12px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lang-modal-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 12px;
  border:none;
  border-radius:14px;
  background:transparent;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  text-align:left;
  transition:background var(--dur) var(--ease-out);
}
.lang-modal-row:active{
  background:rgba(127,127,127,.14);
}
.lang-modal-row.active{
  background:rgba(var(--grad-rgb-purple,130,39,143),.12);
  color:var(--purple,#92278f);
}
.lang-modal-flag{
  font-size:22px;
  line-height:1;
}
.lang-modal-name{
  flex:1;
}
.lang-modal-check{
  opacity:0;
  color:var(--purple,#92278f);
  font-size:15px;
}
.lang-modal-row.active .lang-modal-check{
  opacity:1;
}

/* ========== IFRAME RESERVATION SHEET ========== */
.sheet.sheet-iframe {
  height: 100svh;
  max-height: 100svh;
  padding: 0;
}
.sheet-iframe .sheet-iframe-body {
  padding: 0;
  height: calc(100svh - 56px);
  position: relative;
  overflow: hidden;
}
.sheet-iframe #res-iframe,
.sheet-iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.sheet-iframe .iframe-skeleton {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--muted);
  background: var(--bg);
}
.sheet-iframe .iframe-skeleton.is-visible {
  display: flex;
}
.sheet-extlink {
  margin-left: auto;
  padding: 8px 10px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.sheet-extlink:hover {
  color: var(--text);
}
.sheet-extlink:active {
  opacity: 0.7;
}

/* =========================================================
   Listing Detail - Opening Hours, Links, Contact Info
   ========================================================= */
.open-hours-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: 8px;
  font-size: 13.5px;
}

.hours-day {
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}

.hours-status {
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}

.hours-row .hours-status.open-status {
  color: var(--teal);
  font-weight: 600;
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--cream);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
}

.link-row:active {
  transform: scale(0.98);
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
}

.link-name {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
}

.link-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

.contact-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast);
}

.contact-chip:active {
  background: var(--line);
}

.contact-chip i {
  font-size: 11px;
  color: var(--orange);
}