/* =====================================================================
   Laz Tour v5 — modern marketplace theme
   Design tokens: 4px spacing scale, 44px controls, 12/16/20 radii, Inter
   ===================================================================== */
:root {
  --teal-900: #0b3f3b; --teal-800: #115e59; --teal-700: #0f766e; --teal-600: #0d9488; --teal-500: #14b8a6; --teal-100: #ccfbf1; --teal-50: #f0fdfa;
  --amber-700: #b45309; --amber-600: #d97706; --amber-500: #f59e0b; --amber-400: #fbbf24; --amber-100: #fef3c7;
  --green-700: #15803d; --green-100: #dcfce7; --red-600: #dc2626; --red-100: #fee2e2; --wa: #25d366; --wa-600: #1da851;
  --ink: #0f172a; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --slate-50: #f8fafc;
  --bg: #ffffff; --surface: #ffffff; --line: var(--slate-200);
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --h: 44px; --h-sm: 36px; --h-lg: 52px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.18); --shadow-lg: 0 20px 48px -20px rgba(15,23,42,.3);
  --ring: 0 0 0 4px rgba(20,184,166,.22);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1200px; --gutter: 20px;
  --ease: cubic-bezier(.2,.8,.2,1); --t: .22s;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--slate-700); background: var(--bg); line-height: 1.55; font-size: 15px; -webkit-font-smoothing: antialiased; padding-bottom: 72px; }
@media (min-width: 1000px) { body { padding-bottom: 0; } }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; }
a { color: var(--teal-700); text-decoration: none; transition: color var(--t); } a:hover { color: var(--teal-800); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 800; } h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
p { margin: 0 0 1em; } .muted { color: var(--slate-500); font-size: .85rem; } .center { text-align: center; } .mt { margin-top: var(--s5); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber-500); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 999; } .skip:focus { left: 8px; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.2em; } .ic--fill { fill: currentColor; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.hide-sm { display: none !important; } @media (min-width: 640px) { .hide-sm { display: inline-flex !important; } }
.hide-md { display: none !important; } @media (min-width: 1100px) { .hide-md { display: inline-flex !important; } }
.show-md { display: inline-flex; } @media (min-width: 900px) { .show-md { display: none !important; } }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700); margin-bottom: var(--s2); } .eyebrow--light { color: var(--teal-100); }

/* ---------- Controls: one height, one radius ---------- */
.input, .field select, .field input, .field textarea, .sort select, .filters select, .filters input {
  font: inherit; font-size: .92rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--slate-200); border-radius: var(--r-sm);
  height: var(--h); padding: 0 var(--s4); width: 100%; transition: border-color var(--t), box-shadow var(--t), background var(--t); appearance: none; -webkit-appearance: none;
}
textarea.input, .field textarea { height: auto; min-height: calc(var(--h) * 1.8); padding: var(--s3) var(--s4); resize: vertical; line-height: 1.45; }
select.input, .field select, .sort select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-300); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: var(--ring); }
.input::placeholder { color: var(--slate-400); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); min-width: 0; }
.field > span { font-size: .76rem; font-weight: 600; color: var(--slate-600); letter-spacing: .01em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.inputwrap { position: relative; display: flex; align-items: center; } .inputwrap > .ic { position: absolute; left: 14px; color: var(--slate-400); pointer-events: none; } .inputwrap .input { padding-left: 40px; }
.check { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0; cursor: pointer; font-size: .82rem; color: var(--slate-600); line-height: 1.45; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--slate-300); border-radius: 6px; flex: none; margin-top: 1px; display: grid; place-items: center; transition: all var(--t); background: #fff; }
.check input:checked { background: var(--teal-700); border-color: var(--teal-700); } .check input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.check input[type=radio] { border-radius: 50%; } .check input[type=radio]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.check small { margin-left: auto; color: var(--slate-400); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--h); padding: 0 var(--s5); border-radius: var(--r-sm); font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: .005em; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); user-select: none; }
.btn .ic { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.98); }
.btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.btn:hover::after { opacity: 1; }
.btn--amber, .btn--accent { background: var(--amber-500); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(245,158,11,.9); } .btn--amber:hover, .btn--accent:hover { background: var(--amber-400); color: var(--ink); box-shadow: 0 12px 24px -10px rgba(245,158,11,.9); }
.btn--teal, .btn--primary { background: var(--teal-700); color: #fff; box-shadow: 0 8px 20px -12px rgba(15,118,110,.8); } .btn--teal:hover, .btn--primary:hover { background: var(--teal-600); color: #fff; }
.btn--outline, .btn--ghost { background: var(--surface); color: var(--teal-800); border-color: var(--slate-200); } .btn--outline:hover, .btn--ghost:hover { border-color: var(--teal-500); background: var(--teal-50); color: var(--teal-800); }
.btn--light { background: #fff; color: var(--teal-800); } .btn--light:hover { background: var(--teal-50); color: var(--teal-900); }
.btn--wa { background: var(--wa); color: #fff; } .btn--wa:hover { background: var(--wa-600); color: #fff; }
.btn--block { width: 100%; } .btn--sm { height: var(--h-sm); padding: 0 var(--s4); font-size: .82rem; border-radius: 9px; } .btn--sm .ic { width: 16px; height: 16px; } .btn--lg { height: var(--h-lg); padding: 0 var(--s8); font-size: 1rem; border-radius: var(--r); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; } .btn[disabled]::after { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; line-height: 1; backdrop-filter: blur(6px); }
.pill .ic { width: 14px; height: 14px; }
.pill--teal { background: var(--teal-700); color: #fff; } .pill--amber { background: var(--amber-500); color: var(--ink); } .pill--dark { background: rgba(15,23,42,.72); color: #fff; } .pill--light { background: rgba(255,255,255,.92); color: var(--ink); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--teal-900); color: #a7f3d0; font-size: .8rem; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: var(--s4); }
.topbar__contact { display: flex; gap: var(--s5); } .topbar__contact a { display: inline-flex; align-items: center; gap: 6px; color: #d1fae5; font-weight: 500; } .topbar__contact a:hover { color: #fff; }
.topbar__pills { display: flex; gap: var(--s2); }
.seg { display: inline-flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: 8px; padding: 2px; }
.seg a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; color: #a7f3d0; transition: background var(--t), color var(--t); } .seg a:hover { color: #fff; } .seg a.is-active { background: #fff; color: var(--teal-900); }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t); }
.header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(15,23,42,.35); }
.header__in { display: flex; align-items: center; gap: var(--s6); height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; }
.logo__mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); color: #fff; display: grid; place-items: center; margin-right: var(--s2); box-shadow: 0 6px 14px -8px rgba(15,118,110,.8); } .logo__mark .ic { width: 20px; height: 20px; }
.logo__a { color: var(--teal-800); } .logo__b { color: var(--amber-500); } .logo--light .logo__a { color: #fff; }
.header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
/* Modern nav: pill buttons with sliding highlight */
.nav { display: none; align-items: center; gap: 2px; padding: 4px; background: var(--slate-100); border-radius: var(--r-pill); }
@media (min-width: 1100px) { .nav { display: inline-flex; } }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); color: var(--slate-700); font-weight: 600; font-size: .86rem; transition: color var(--t), background var(--t), transform var(--t); }
.nav a .ic { width: 16px; height: 16px; color: var(--teal-700); transition: transform var(--t) var(--ease); }
.nav a:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .nav a:hover .ic { transform: translateY(-1px) rotate(-8deg); }
.nav a.is-active { background: #fff; color: var(--teal-800); box-shadow: var(--shadow-sm); }
.nav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-500), var(--amber-500)); animation: grow .4s var(--ease) both; }
.nav__plan { color: var(--teal-800) !important; } .nav__plan .ic { color: var(--amber-600) !important; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: var(--h); height: var(--h); border-radius: var(--r-sm); border: 1.5px solid var(--slate-200); background: #fff; cursor: pointer; padding: 11px; }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t), opacity var(--t); }
.burger[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded=true] span:nth-child(2) { opacity: 0; } .burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1100px) { .burger { display: none; } }
@media (max-width: 1099px) {
  .nav.is-open { display: flex; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: stretch; background: #fff; border-radius: var(--r); padding: var(--s2); box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: drop .25s var(--ease) both; }
  .nav.is-open a { height: 46px; border-radius: var(--r-sm); } .nav.is-open a.is-active::after { display: none; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.flash { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 500; border: 1px solid; animation: drop .3s var(--ease) both; }
.flash--success { background: var(--green-100); border-color: #86efac; color: var(--green-700); } .flash--error { background: var(--red-100); border-color: #fca5a5; color: #991b1b; } .flash a { text-decoration: underline; }

/* ---------- Hero with animated gradient + modern search ---------- */
.hero { position: relative; color: #fff; padding: var(--s12) 0 0; overflow: hidden; isolation: isolate; background: var(--teal-800); }
.hero::before { content: ""; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(40% 50% at 20% 20%, rgba(20,184,166,.9), transparent 60%), radial-gradient(35% 45% at 80% 10%, rgba(13,148,136,.9), transparent 60%), radial-gradient(45% 50% at 60% 90%, rgba(245,158,11,.25), transparent 60%), linear-gradient(135deg, var(--teal-900), var(--teal-700)); animation: drift 18s ease-in-out infinite alternate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 90 L30 60 L55 80 L80 45 L120 85' fill='none' stroke='rgba(255,255,255,.05)' stroke-width='2'/%3E%3C/svg%3E"); opacity: .9; }
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
.hero__text { max-width: 760px; animation: rise .7s var(--ease) both; }
.hero h1 { color: #fff; margin-bottom: var(--s2); } .hero__text p { color: #ccfbf1; font-size: 1.05rem; margin-bottom: var(--s6); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.search { background: rgba(255,255,255,.96); border-radius: var(--r-lg); padding: var(--s3); display: grid; gap: var(--s2); grid-template-columns: 1fr; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.6); animation: rise .7s .12s var(--ease) both; }
@media (min-width: 960px) { .search { grid-template-columns: 1.5fr 1fr 1fr 1fr auto; align-items: end; } }
.search .field { margin: 0; gap: 4px; padding: var(--s2) var(--s3) var(--s2); border-radius: var(--r); transition: background var(--t); }
.search .field:focus-within { background: var(--teal-50); }
.search .field > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); }
.search .input { border: 0; height: 36px; padding: 0 2px; background: transparent; font-weight: 600; box-shadow: none; border-radius: 0; }
.search .input:focus { box-shadow: none; }
.search select.input { background-position: right 2px center; padding-right: 24px; }
@media (min-width: 960px) { .search .field + .field { border-left: 1px solid var(--slate-200); } .search .field:focus-within + .field { border-left-color: transparent; } }
.search .btn { height: var(--h-lg); margin: var(--s1); border-radius: var(--r); padding: 0 var(--s6); }
@media (max-width: 959px) { .search .field { border-bottom: 1px solid var(--slate-100); border-radius: 0; } .search .btn { margin-top: var(--s2); } }
.hero__photo { margin-top: var(--s8); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 16/6; transform: translateY(1px); position: relative; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 28s ease-in-out infinite alternate; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,63,59,.25), transparent 40%); }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -2%); } }
.notice { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 0; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--amber-100); border: 1px solid #fde68a; color: var(--amber-700); font-size: .88rem; transition: transform var(--t), box-shadow var(--t); }
.notice:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--amber-700); } .notice span { flex: 1; } .notice .ic:last-child { transition: transform var(--t); } .notice:hover .ic:last-child { transform: translateX(4px); }

/* ---------- Sections ---------- */
.section { padding: var(--s12) 0; } .section--tight { padding-top: var(--s6); } .section--tint { background: var(--slate-50); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.section__head h2 { margin-bottom: 2px; } .section__head p { margin: 0; color: var(--slate-500); font-size: .9rem; }
.section__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Cards */
.zcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color var(--t); }
.zcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(20,184,166,.35); }
.zcard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; display: block; background: var(--slate-100); }
.zcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .zcard:hover .zcard__media img { transform: scale(1.06); }
.zcard__media .pill { position: absolute; top: var(--s3); left: var(--s3); } .zcard__media .pill:last-child { left: auto; right: var(--s3); }
.zcard__body { padding: var(--s4) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.zcard__body h3 { font-size: 1rem; margin: 0; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zcard__body h3 a { color: var(--ink); } .zcard__body h3 a:hover { color: var(--teal-800); }
.zcard__meta { display: flex; gap: var(--s4); font-size: .78rem; color: var(--slate-500); } .zcard__meta span { display: inline-flex; align-items: center; gap: 4px; } .zcard__meta .ic { color: var(--teal-600); }
.zcard__body p { margin: 0; font-size: .84rem; color: var(--slate-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zcard__foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--slate-100); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); }
.price small { display: block; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); font-weight: 600; } .price strong { display: block; font-size: 1.2rem; color: var(--teal-800); font-weight: 800; line-height: 1.1; margin-top: 2px; } .price em { font-style: normal; font-size: .74rem; color: var(--slate-400); }

/* Plan promo */
.planpromo { position: relative; overflow: hidden; background: var(--teal-900); color: #ccfbf1; border-radius: var(--r-lg); padding: var(--s8); isolation: isolate; }
.planpromo::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(35% 45% at 85% 15%, rgba(245,158,11,.35), transparent 60%), radial-gradient(40% 50% at 10% 90%, rgba(20,184,166,.6), transparent 60%); animation: drift 16s ease-in-out infinite alternate; }
.planpromo h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); } .planpromo p { color: #ccfbf1; }
.planpromo__head { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; margin-bottom: var(--s6); } @media (min-width: 900px) { .planpromo__head { grid-template-columns: 1.5fr 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); font-size: .9rem; } .ticks li { display: flex; align-items: center; gap: var(--s2); } .ticks .ic { color: var(--amber-400); }
.planpromo__price { background: #fff; color: var(--ink); border-radius: var(--r); padding: var(--s5); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-lg); }
.planpromo__price small { color: var(--slate-500); font-size: .78rem; } .planpromo__price strong { font-size: 2.1rem; color: var(--teal-800); font-weight: 800; letter-spacing: -.02em; } .planpromo__price span { font-size: .84rem; color: var(--slate-500); margin-bottom: var(--s3); }
.planpromo__pois { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s6); } @media (min-width: 900px) { .planpromo__pois { grid-template-columns: repeat(6, 1fr); } }
.poi-mini { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); overflow: hidden; color: #fff; display: flex; flex-direction: column; transition: transform .3s var(--ease), background var(--t), border-color var(--t); }
.poi-mini:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.poi-mini img { aspect-ratio: 3/2; object-fit: cover; width: 100%; } .poi-mini span { padding: var(--s2) var(--s3) 0; font-size: .82rem; font-weight: 700; } .poi-mini small { padding: 2px var(--s3) var(--s3); font-size: .72rem; color: #99f6e4; display: inline-flex; gap: 4px; align-items: center; }
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); transition: transform .3s var(--ease), box-shadow .3s; } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.review .stars { color: var(--amber-500); display: flex; gap: 2px; } .review p { font-size: .92rem; color: var(--slate-700); flex: 1; margin: 0; } .review footer { display: flex; flex-direction: column; font-size: .82rem; } .review footer span { color: var(--slate-500); }

/* ---------- Footer, floats, modal ---------- */
.footer { background: var(--ink); color: var(--slate-300); margin-top: var(--s12); }
.footer__grid { display: grid; gap: var(--s8); grid-template-columns: 1fr; padding: var(--s12) 0 var(--s8); } @media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.3fr 1.2fr 1fr 1.2fr; } }
.footer h4 { color: #fff; font-size: .9rem; margin-bottom: var(--s3); } .footer a { display: block; color: var(--slate-300); font-size: .86rem; padding: 4px 0; } .footer a:hover { color: #fff; }
.footer__text { font-size: .86rem; color: var(--slate-400); } .footer__contact { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 6px; font-size: .86rem; } .footer__contact li { display: flex; align-items: center; gap: var(--s2); } .footer__contact .ic { color: var(--teal-500); } .footer__contact a { display: inline; padding: 0; }
.newsletter { display: flex; gap: var(--s2); } .newsletter .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #fff; } .newsletter .input::placeholder { color: var(--slate-400); } .newsletter .input:focus { border-color: var(--teal-500); }
.socials { display: flex; gap: var(--s2); margin-top: var(--s4); } .socials a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.06); display: grid; place-items: center; padding: 0; transition: background var(--t), transform var(--t); } .socials a:hover { background: var(--teal-700); transform: translateY(-2px); } .socials .ic { width: 18px; height: 18px; }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5) 0 var(--s6); border-top: 1px solid rgba(255,255,255,.08); font-size: .76rem; color: var(--slate-400); }
.floats { position: fixed; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); z-index: 40; }
@media (max-width: 999px) { .floats { bottom: 84px; } }
.float { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--h-lg); border-radius: var(--r-pill); border: 0; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .3s var(--ease), box-shadow .3s; }
.float:hover { transform: translateY(-3px); } .float .ic { width: 22px; height: 22px; }
.float--wa { width: var(--h-lg); background: var(--wa); color: #fff; } .float--cb { padding: 0 var(--s5); background: var(--amber-500); color: var(--ink); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 10px 30px -10px rgba(245,158,11,.8); } 50% { box-shadow: 0 10px 30px -10px rgba(245,158,11,.8), 0 0 0 10px rgba(245,158,11,.12); } }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: var(--s4); animation: fade .2s both; }
.modal__box { position: relative; background: #fff; border-radius: var(--r-lg); padding: var(--s8); width: min(460px, 100%); max-height: 95vh; overflow: auto; box-shadow: var(--shadow-lg); animation: rise .3s var(--ease) both; }
.modal__x { position: absolute; top: var(--s3); right: var(--s3); width: var(--h-sm); height: var(--h-sm); border-radius: 50%; border: 0; background: var(--slate-100); display: grid; place-items: center; cursor: pointer; color: var(--slate-600); } .modal__x:hover { background: var(--slate-200); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Inner pages ---------- */
.pagehead { padding: var(--s8) 0 var(--s6); background: linear-gradient(180deg, var(--teal-50), #fff); border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: var(--s1); } .pagehead p { margin: 0; color: var(--slate-500); max-width: 70ch; }
.pagehead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; }
.steps { display: flex; gap: var(--s2); } .steps span { display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-sm); padding: 0 var(--s3) 0 6px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--slate-600); } .steps b { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-700); color: #fff; display: grid; place-items: center; font-size: .72rem; }
.pagehead--img { position: relative; color: #fff; padding: var(--s16) 0 var(--s12); background: var(--teal-900) var(--img) center/cover; isolation: isolate; border: 0; } .pagehead--img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,63,59,.45), rgba(11,63,59,.8)); z-index: -1; } .pagehead--img h1, .pagehead--img p, .pagehead--img .crumbs, .pagehead--img .crumbs a { color: #fff; }
.crumbs { font-size: .78rem; color: var(--slate-500); margin-bottom: var(--s3); } .crumbs a { color: var(--slate-500); } .crumbs a:hover { color: var(--teal-700); }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--slate-100); color: var(--slate-700); font-size: .72rem; font-weight: 700; } .badge--hot { background: var(--amber-500); color: var(--ink); } .badge--soft { background: var(--teal-100); color: var(--teal-800); }
.tourhead__badges { display: flex; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; } .tourhead__sum { font-size: 1rem; color: var(--slate-600) !important; max-width: 70ch; } .tourhead__meta { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: .85rem; color: var(--slate-500); margin-top: var(--s3); } .tourhead__meta span { display: inline-flex; gap: 6px; align-items: center; } .tourhead__meta .ic { color: var(--teal-600); }
.listing { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .listing { grid-template-columns: 270px 1fr; } }
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); position: sticky; top: 84px; } @media (max-width: 899px) { .filters { display: none; position: static; } .filters.is-open { display: block; animation: drop .25s var(--ease) both; } }
.filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); } .filters__head h3 { margin: 0; } .filters__head a { font-size: .8rem; font-weight: 600; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); } .filters legend { font-size: .74rem; font-weight: 700; color: var(--slate-500); margin-bottom: var(--s1); text-transform: uppercase; letter-spacing: .05em; }
.listing__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); gap: var(--s4); } .sort label { display: inline-flex; gap: var(--s2); align-items: center; font-size: .85rem; color: var(--slate-500); } .sort select { width: auto; height: var(--h-sm); font-size: .85rem; }
.listing .grid--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pager { display: flex; gap: var(--s1); justify-content: center; margin-top: var(--s8); } .pager a { min-width: var(--h); height: var(--h); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-weight: 600; transition: all var(--t); } .pager a:hover { border-color: var(--teal-500); } .pager a.is-active { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.empty { background: var(--slate-50); border: 1.5px dashed var(--slate-300); border-radius: var(--r-lg); padding: var(--s12) var(--s6); text-align: center; } .empty--page { padding: var(--s16) var(--s6); } .cta__btns { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.tour { display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; } @media (min-width: 960px) { .tour { grid-template-columns: 1fr 370px; } }
.gallery__main { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-lg); transition: opacity .3s; } .gallery__thumbs { display: flex; gap: var(--s2); margin-top: var(--s2); overflow-x: auto; padding-bottom: 2px; } .gallery__thumbs button { border: 2px solid transparent; border-radius: var(--r-sm); padding: 0; overflow: hidden; background: none; cursor: pointer; flex: none; width: 96px; opacity: .65; transition: opacity var(--t), border-color var(--t), transform var(--t); } .gallery__thumbs button:hover { opacity: 1; transform: translateY(-2px); } .gallery__thumbs button.is-active { border-color: var(--amber-500); opacity: 1; } .gallery__thumbs img { width: 96px; height: 66px; object-fit: cover; }
.highlights { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin: var(--s6) 0; } @media (min-width: 640px) { .highlights { grid-template-columns: 1fr 1fr; } } .highlights div { display: flex; gap: var(--s2); align-items: flex-start; background: var(--teal-50); border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-size: .88rem; font-weight: 500; } .highlights .ic { color: var(--teal-600); margin-top: .15em; }
.subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: var(--s6) 0; overflow-x: auto; position: sticky; top: 68px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 5; } .subnav a { padding: var(--s3) var(--s4); font-weight: 600; font-size: .85rem; color: var(--slate-500); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--t), border-color var(--t); } .subnav a:hover { color: var(--teal-800); border-bottom-color: var(--teal-500); }
.prose { max-width: 72ch; } .prose--wide { max-width: 90ch; } .prose p { font-size: .98rem; line-height: 1.7; } .block { margin-top: var(--s10); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); } .timeline li { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--slate-50); border-radius: var(--r); padding: var(--s4) var(--s5); border-left: 3px solid var(--teal-600); } .timeline li::before { display: none; } .timeline__day { font-size: .72rem; font-weight: 700; color: var(--teal-700); text-transform: uppercase; letter-spacing: .05em; } .timeline h3 { font-size: .98rem; margin-bottom: 2px; } .timeline p { margin: 0; font-size: .88rem; }
.incexc { display: grid; gap: var(--s3); grid-template-columns: 1fr; } @media (min-width: 640px) { .incexc { grid-template-columns: 1fr 1fr; } } .incexc > div { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); } .incexc h3 { display: flex; gap: var(--s2); align-items: center; font-size: .92rem; } .incexc > div:first-child h3 .ic { color: var(--green-700); } .incexc > div:last-child h3 .ic { color: var(--red-600); } .incexc ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; display: grid; gap: var(--s1); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); } .table { width: 100%; border-collapse: collapse; font-size: .88rem; } .table th, .table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); } .table th { font-size: .72rem; color: var(--slate-500); background: var(--slate-50); text-transform: uppercase; letter-spacing: .05em; } .table tbody tr:last-child td { border-bottom: 0; } .table td:last-child { text-align: right; } .table tbody tr { transition: background var(--t); } .table tbody tr:hover { background: var(--teal-50); }
.tour__side { position: sticky; top: 84px; display: grid; gap: var(--s3); }
.book { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow); display: grid; gap: var(--s2); } .book__price { display: flex; flex-direction: column; line-height: 1.1; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s1); } .book__price small { color: var(--slate-500); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .book__price strong { font-size: 1.9rem; color: var(--teal-800); font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.sidebox { background: var(--slate-50); border-radius: var(--r-lg); padding: var(--s5); } .checks { list-style: none; padding: 0; margin: var(--s3) 0 var(--s4); display: grid; gap: var(--s2); } .checks li { display: flex; gap: var(--s2); align-items: flex-start; font-size: .88rem; } .checks .ic { color: var(--green-700); margin-top: .2em; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); font-size: .88rem; } .facts dt { color: var(--slate-500); font-weight: 600; } .facts dd { margin: 0; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s2); transition: border-color var(--t); } .faq details[open] { border-color: var(--teal-500); } .faq summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { transition: transform var(--t); color: var(--slate-400); } .faq details[open] summary .ic { transform: rotate(180deg); } .faq details p { padding: 0 var(--s4) var(--s4); margin: 0; font-size: .9rem; }
.regioncard { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; } .regioncard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); } @media (min-width: 560px) { .regioncard { grid-template-columns: 42% 1fr; } } .regioncard img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }
.regioncard__body { padding: var(--s5); } .regioncard__body h2 { font-size: 1.2rem; margin: 2px 0 var(--s1); } .regioncard__body p { font-size: .88rem; color: var(--slate-500); } .regioncard__meta { display: flex; gap: var(--s4); font-size: .8rem; font-weight: 700; color: var(--teal-700); }
.about, .contact { display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .about { grid-template-columns: 1fr 330px; } .contact { grid-template-columns: 1fr 1.3fr; } }
.contact__cards { display: grid; gap: var(--s2); } .ccard { display: flex; gap: var(--s3); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); color: var(--ink); transition: border-color var(--t), transform var(--t); } .ccard:hover { border-color: var(--teal-500); transform: translateX(2px); } .ccard .ic { width: 42px; height: 42px; padding: 11px; border-radius: 12px; background: var(--teal-100); color: var(--teal-800); } .ccard strong { display: block; } .ccard span { font-size: .85rem; color: var(--slate-500); }
.card--flat, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sm); }

/* ---------- Kendi Gezini Oluştur ---------- */
.plan { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; padding-top: var(--s6); padding-bottom: var(--s10); }
@media (min-width: 1000px) { .plan { grid-template-columns: minmax(0, 1fr) 360px; } }
.startbox { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.startbox__head { display: flex; align-items: center; gap: var(--s3); } .startbox__head strong { display: block; color: var(--ink); } .startbox__head .muted { display: block; margin-top: 1px; }
.startbox__ic { width: var(--h); height: var(--h); border-radius: 12px; background: var(--teal-100); color: var(--teal-800); display: grid; place-items: center; flex: none; } .startbox__ic .ic { width: 20px; height: 20px; }
.startbox__row { display: grid; gap: var(--s2); grid-template-columns: 1fr; } @media (min-width: 720px) { .startbox__row { grid-template-columns: 1fr auto auto; } }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 var(--s4); border-radius: var(--r-pill); border: 1.5px solid var(--slate-200); background: var(--surface); color: var(--slate-700); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all var(--t) var(--ease); }
.chip i { font-style: normal; font-size: .95rem; line-height: 1; } .chip:hover { border-color: var(--teal-500); background: var(--teal-50); transform: translateY(-1px); } .chip.is-active { background: var(--teal-700); color: #fff; border-color: var(--teal-700); box-shadow: 0 6px 16px -10px rgba(15,118,110,.9); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s4) 0 var(--s3); }
.map { height: 440px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); z-index: 1; box-shadow: var(--shadow-sm); } @media (max-width: 640px) { .map { height: 320px; } }
.leaflet-container { font-family: var(--font); }
.poi-pin { background: #fff; border: 2px solid var(--teal-700); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(15,23,42,.3); transition: transform .3s var(--ease), background var(--t), border-color var(--t); }
.poi-pin span { transform: rotate(45deg); font-size: 16px; line-height: 1; } .poi-pin.is-sel { background: var(--amber-500); border-color: var(--amber-700); animation: pop .4s var(--ease); }
@keyframes pop { 0% { transform: rotate(-45deg) scale(.6); } 60% { transform: rotate(-45deg) scale(1.2); } 100% { transform: rotate(-45deg) scale(1); } }
.start-pin { background: var(--teal-900); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(15,23,42,.35); } .start-pin span { transform: rotate(45deg); font-size: 18px; }
.leaflet-popup-content-wrapper { border-radius: var(--r-sm); box-shadow: var(--shadow-lg); } .leaflet-popup-content { font-size: .85rem; margin: 12px 14px; } .leaflet-popup-content .btn { margin-top: var(--s2); }
.plan__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s2); } .plan__toolbar .inputwrap { flex: 1; max-width: 360px; }
.poi-group { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s6) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); } .poi-group h3 { margin: 0; font-size: .95rem; } .poi-group span { font-size: .78rem; color: var(--slate-500); }
.poi-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; } @media (min-width: 560px) { .poi-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .poi-grid { grid-template-columns: repeat(3, 1fr); } }
.poi { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--t), box-shadow .3s var(--ease), transform .3s var(--ease); animation: rise .4s var(--ease) both; }
.poi:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .poi.is-sel { border-color: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); }
.poi__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--slate-100); } .poi__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .poi:hover .poi__media img { transform: scale(1.05); } .poi__cat { position: absolute; top: var(--s2); left: var(--s2); width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.95); display: grid; place-items: center; font-size: .95rem; box-shadow: var(--shadow-sm); }
.poi__body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s1); flex: 1; } .poi__body h4 { margin: 0; font-size: .94rem; } .poi__meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--slate-500); } .poi__desc { margin: 0; font-size: .8rem; color: var(--slate-500); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.poi__foot { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); } .poi__dur { font-size: .76rem; color: var(--slate-500); margin-right: auto; font-weight: 600; } .poi__detail { width: var(--h-sm); padding: 0; } .poi__add.is-sel { background: var(--amber-500); color: var(--ink); box-shadow: none; }
.plan__side { position: sticky; top: 84px; } .sidecard { padding: var(--s5); display: grid; gap: var(--s1); }
.sidecard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); } .sidecard__head h3 { margin: 0; } .counter { font-size: .74rem; font-weight: 700; color: var(--teal-800); background: var(--teal-100); border-radius: var(--r-pill); padding: 4px 10px; }
.trip-list { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s1); } .trip-empty { background: var(--slate-50); border: 1.5px dashed var(--slate-300); border-radius: var(--r-sm); padding: var(--s4); font-size: .82rem; color: var(--slate-500); text-align: center; }
.trip-list li:not(.trip-empty) { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s2); align-items: center; background: var(--slate-50); border-radius: var(--r-sm); padding: 6px var(--s2) 6px var(--s2); font-size: .85rem; animation: rise .3s var(--ease) both; }
.trip-n { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-700); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; } .trip-name { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; color: var(--ink); min-width: 0; } .trip-name small { font-weight: 400; color: var(--slate-500); font-size: .72rem; }
.trip-btns { display: flex; gap: 2px; } .trip-btns button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--slate-200); background: #fff; cursor: pointer; font-size: .85rem; line-height: 1; color: var(--slate-600); transition: all var(--t); } .trip-btns button:hover { border-color: var(--teal-500); color: var(--teal-800); background: var(--teal-50); }
.estimate { background: linear-gradient(180deg, var(--teal-50), #fff); border: 1px solid var(--teal-100); border-radius: var(--r); padding: var(--s4) var(--s5); margin: var(--s1) 0 var(--s3); display: grid; gap: var(--s2); }
.estimate__row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--slate-500); } .estimate__row span { display: inline-flex; align-items: center; gap: 6px; } .estimate__row .ic { color: var(--teal-600); } .estimate__row strong { color: var(--ink); font-weight: 600; text-align: right; }
.estimate__total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-top: 1px dashed var(--teal-100); padding-top: var(--s2); margin-top: var(--s1); font-size: .82rem; color: var(--slate-500); } .estimate__total strong { font-size: 1.55rem; color: var(--teal-800); font-weight: 800; letter-spacing: -.02em; transition: transform .3s var(--ease); } .estimate__total strong.is-bump { animation: bump .4s var(--ease); } .estimate__total em { grid-column: 2; font-style: normal; font-size: .75rem; color: var(--slate-400); text-align: right; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); color: var(--amber-600); } 100% { transform: scale(1); } }
.estimate .muted { margin: var(--s1) 0 0; font-size: .76rem; }
.payinfo { display: flex; gap: var(--s2); align-items: center; background: var(--green-100); color: var(--green-700); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: .8rem; font-weight: 600; margin: var(--s1) 0 var(--s3); } .payinfo .ic { flex: none; }
.plan-bar { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) var(--gutter); z-index: 45; }
.plan-bar > div { display: flex; flex-direction: column; line-height: 1.2; } .plan-bar span { font-size: .74rem; color: var(--slate-500); } .plan-bar strong { color: var(--teal-800); font-size: 1.05rem; }
@media (min-width: 1000px) { .plan-bar { display: none; } }

/* ---------- Ticker (TV band) ---------- */
.ticker { display: flex; align-items: stretch; margin-top: var(--s6); border-radius: var(--r-sm); overflow: hidden; border: 1px solid #fde68a; background: var(--amber-100); height: var(--h); }
.ticker__badge { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s4); background: var(--amber-500); color: var(--ink); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; flex: none; position: relative; z-index: 2; }
.ticker__badge .ic { width: 16px; height: 16px; animation: wiggle 2.4s ease-in-out infinite; } @keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(10deg); } }
.ticker__viewport { flex: 1; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: ticker 48s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; color: var(--amber-700); font-size: .86rem; font-weight: 600; padding: 0 var(--s2); } .ticker__item:hover { color: var(--ink); } .ticker__item i { font-style: normal; color: var(--amber-500); padding: 0 var(--s4); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Typewriter ---------- */
.review p.is-typing::after { content: "▍"; color: var(--teal-600); animation: blink .8s steps(1) infinite; margin-left: 1px; } @keyframes blink { 50% { opacity: 0; } }
.review p.is-pending { opacity: .0; } .review p.is-typing, .review p.is-done { opacity: 1; transition: opacity .2s; }

/* ---------- Planner hints & live drawing ---------- */
.hints { display: grid; gap: var(--s2); margin: 0 0 var(--s3); }
.hint { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: .8rem; line-height: 1.4; animation: drop .35s var(--ease) both; }
.hint .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; } .hint p { margin: 0; } .hint b { font-weight: 700; } .hint .btn { margin-top: var(--s2); }
.hint--warn { background: var(--amber-100); color: var(--amber-700); border: 1px solid #fde68a; } .hint--info { background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); } .hint--ok { background: var(--green-100); color: var(--green-700); border: 1px solid #bbf7d0; }
.onroute { background: var(--slate-50); border: 1px dashed var(--slate-300); border-radius: var(--r-sm); padding: var(--s2) var(--s3) var(--s3); animation: drop .35s .1s var(--ease) both; }
.onroute > span { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--slate-600); margin-bottom: var(--s2); } .onroute .ic { color: var(--amber-600); }
.onroute__chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip--add { height: auto; min-height: 32px; padding: 4px 10px 4px 8px; font-size: .78rem; border-style: dashed; } .chip--add small { color: var(--slate-500); font-weight: 500; margin-left: 4px; } .chip--add:hover { border-style: solid; }
.route-line.is-drawing { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s var(--ease) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } }
.route-glow { filter: blur(2px); }
.hint-ring { animation: ring 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.6); } }
.poi-pin.is-hover { transform: rotate(-45deg) scale(1.18); z-index: 999 !important; } .poi.is-hover { border-color: var(--teal-500); box-shadow: var(--shadow); }
.order-tip { background: var(--teal-800); color: #fff; border: 0; border-radius: 999px; padding: 1px 7px; font-weight: 800; font-size: .72rem; box-shadow: var(--shadow-sm); } .order-tip::before { display: none; }
.counter.is-bump { animation: bump .4s var(--ease); }
.ripple { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); transform: translate(-50%, -50%) scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; } @keyframes ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

/* ---------- Nav fit ---------- */
.nav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1320px) { .nav a { padding: 0 11px; font-size: .82rem; } .header__cta .btn--outline { display: none !important; } }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }