/* Erotic Massage Antalya — Turkish Mediterranean night.
   Deep navy sea, turquoise, coral sunset. `ant-` prefix (Rule 15: unique in the network). */

:root {
  --ant-navy: #0b1a2b;
  --ant-navy-2: #112741;
  --ant-ink: #e8eef5;
  --ant-ink-soft: #a9bacb;
  --ant-turq: #17c3b2;
  --ant-turq-dk: #0f9c8e;
  --ant-coral: #ff5f5f;
  --ant-coral-dk: #e04747;
  --ant-sand: #f2c14e;
  --ant-wa: #25d366;
  --ant-line: rgba(255, 255, 255, .1);
  --ant-card: #142c48;
  --ant-radius: 14px;
  --ant-max: 1120px;
  --ant-head: 'Fraunces', Georgia, serif;
  --ant-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ant-navy);
  color: var(--ant-ink);
  font-family: var(--ant-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for the sticky WhatsApp bar */
}
img { max-width: 100%; display: block; }
a { color: var(--ant-turq); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--ant-head); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.2rem); margin-top: 1.5em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.05em; }

.ant-wrap { max-width: var(--ant-max); margin: 0 auto; padding: 0 20px; }
.ant-sec { padding: 46px 0; }
.ant-sec--tight { padding: 26px 0; }
.ant-muted { color: var(--ant-ink-soft); }

/* ---------- header ---------- */
.ant-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 26, 43, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ant-line);
}
.ant-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.ant-logo { font-family: var(--ant-head); font-weight: 600; font-size: 1.12rem; color: #fff; white-space: nowrap; }
.ant-logo b { color: var(--ant-turq); font-weight: 600; }
.ant-logo:hover { text-decoration: none; }
.ant-nav { display: flex; gap: 18px; align-items: center; }
.ant-nav a { color: var(--ant-ink-soft); font-size: .93rem; font-weight: 500; }
.ant-nav a:hover { color: #fff; text-decoration: none; }

/* ---------- buttons ---------- */
.ant-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 0; cursor: pointer; text-align: center; line-height: 1.2;
}
.ant-btn:hover { text-decoration: none; filter: brightness(1.07); }
.ant-btn--wa { background: var(--ant-wa); color: #06281a; }
.ant-btn--coral { background: var(--ant-coral); color: #fff; }
.ant-btn--ghost { background: transparent; color: var(--ant-ink); border: 1px solid var(--ant-line); }
.ant-btn--sm { padding: 9px 15px; font-size: .87rem; }

.ant-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: ant-pulse 1.8s infinite;
}
@keyframes ant-pulse {
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------- hero ---------- */
.ant-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(11, 26, 43, .55) 0%, rgba(11, 26, 43, .88) 62%, var(--ant-navy) 100%),
              url('/img/hero.webp') center/cover no-repeat;
  padding: 74px 0 54px;
  border-bottom: 1px solid var(--ant-line);
}
.ant-kicker {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ant-sand); margin-bottom: 12px;
}
.ant-hero p.ant-lead { font-size: 1.1rem; color: #dbe6f0; max-width: 62ch; margin-bottom: 22px; }
.ant-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ant-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ant-chip {
  font-size: .8rem; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--ant-line); color: var(--ant-ink-soft);
}

/* ---------- venue card (the one that pays) ---------- */
.ant-venue {
  background: linear-gradient(150deg, var(--ant-card), #16324f);
  border: 1px solid rgba(23, 195, 178, .3);
  border-radius: var(--ant-radius);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.ant-venue__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ant-gold {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #3a2a00;
  background: linear-gradient(180deg, #ffd977, var(--ant-sand)); padding: 5px 11px; border-radius: 999px;
}
.ant-venue h2 { margin: 10px 0 6px; font-size: 1.7rem; }
.ant-venue__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.ant-fact { background: rgba(0, 0, 0, .2); border-radius: 10px; padding: 11px 13px; }
.ant-fact b { display: block; font-size: 1.15rem; color: #fff; font-family: var(--ant-head); }
.ant-fact span { font-size: .78rem; color: var(--ant-ink-soft); }
.ant-venue__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---------- therapists ---------- */
.ant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ant-card { display: block; border-radius: var(--ant-radius); overflow: hidden; background: var(--ant-card); border: 1px solid var(--ant-line); }
.ant-card:hover { text-decoration: none; border-color: rgba(23, 195, 178, .5); transform: translateY(-2px); }
.ant-card { transition: transform .18s ease, border-color .18s ease; }
.ant-card__media { position: relative; aspect-ratio: 3 / 4; background: #0d2036; }
.ant-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ant-card__body { padding: 12px 14px 14px; }
.ant-card__name { font-family: var(--ant-head); font-size: 1.12rem; color: #fff; margin-bottom: 3px; }
.ant-card__spec { font-size: .8rem; color: var(--ant-ink-soft); }
.ant-card__wa {
  position: absolute; right: 8px; bottom: 8px; background: var(--ant-wa); color: #06281a;
  font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}

/* ---------- prose ---------- */
.ant-prose { max-width: 74ch; }
.ant-prose h2 { color: #fff; }
.ant-prose p { color: #cfdbe7; }

/* ---------- FAQ ---------- */
.ant-faq { border-top: 1px solid var(--ant-line); }
.ant-faq details { border-bottom: 1px solid var(--ant-line); padding: 15px 0; }
.ant-faq summary { cursor: pointer; font-weight: 600; color: #fff; list-style: none; }
.ant-faq summary::-webkit-details-marker { display: none; }
.ant-faq summary::after { content: '+'; float: right; color: var(--ant-turq); font-size: 1.25rem; line-height: 1; }
.ant-faq details[open] summary::after { content: '−'; }
.ant-faq p { margin: 10px 0 0; color: #cfdbe7; }

/* ---------- banner (the advertiser's own creative) ---------- */
.ant-banner { display: block; border-radius: var(--ant-radius); overflow: hidden; border: 1px solid var(--ant-line); }
.ant-banner img { width: 100%; height: auto; }

/* ---------- lists / links ---------- */
.ant-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ant-link {
  display: block; padding: 14px 16px; border-radius: 12px; background: var(--ant-card);
  border: 1px solid var(--ant-line); color: var(--ant-ink); font-weight: 600;
}
.ant-link:hover { text-decoration: none; border-color: var(--ant-turq); }
.ant-link span { display: block; font-weight: 400; font-size: .84rem; color: var(--ant-ink-soft); margin-top: 2px; }
/* Competing venues on /parlours: named for honesty, not linked. See the comment in build.mjs. */
.ant-link--plain { color: var(--ant-ink-soft); cursor: default; }
.ant-link--plain:hover { border-color: var(--ant-line); }

/* ---------- quiet cross-link to the sister site ----------
   Deliberately unstyled: no card, no button, no accent colour. It is a footnote, not an offer.
   Ben asked for the network link to be visually discreet, so it reads at footnote weight and only
   the link itself picks up a hint of colour on hover. */
.ant-aside {
  font-size: .88rem; color: #6f8296; margin: 0; padding-top: 14px;
  border-top: 1px solid var(--ant-line);
}
.ant-aside a { color: #8ba0b4; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(139, 160, 180, .35); }
.ant-aside a:hover { color: var(--ant-turq); text-decoration-color: currentColor; }
.ant-footer__quiet { opacity: .62; }
.ant-footer__quiet:hover { opacity: 1; }

/* ---------- footer ---------- */
.ant-footer { border-top: 1px solid var(--ant-line); background: #08131f; padding: 34px 0 26px; margin-top: 30px; }
.ant-footer__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 26px; }
.ant-footer a { color: var(--ant-ink-soft); display: block; margin-bottom: 7px; font-size: .92rem; }
.ant-footer h4 { color: #fff; font-family: var(--ant-head); margin: 0 0 12px; font-size: 1rem; }
.ant-footer__legal { grid-column: 1 / -1; border-top: 1px solid var(--ant-line); padding-top: 16px; margin-top: 8px; font-size: .82rem; color: #6f8296; }

/* ---------- sticky WhatsApp (the conversion bar, on every page) ---------- */
.ant-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(8, 19, 31, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--ant-line); padding: 10px 0;
}
.ant-sticky__in { display: flex; gap: 10px; align-items: center; }
.ant-sticky .ant-btn { flex: 1; padding: 13px 14px; }
.ant-sticky__who { font-size: .84rem; color: var(--ant-ink-soft); flex: 1.4; min-width: 0; }
.ant-sticky__who b { display: block; color: #fff; font-size: .95rem; }

.ant-breadcrumb { font-size: .85rem; color: var(--ant-ink-soft); margin-bottom: 14px; }
.ant-breadcrumb a { color: var(--ant-ink-soft); }

/* therapist header: photo + facts. minmax(0,...) so the columns can actually shrink,
   and one column on mobile, otherwise the whole page overflows sideways. */
.ant-th { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 26px; align-items: start; }
/* The source photos run from 0.62 to 0.80 aspect, and without an explicit height the browser fell
   back to the img height attribute and stretched every one of them to 320x640. Frame them all the
   same way instead: fixed 3/4 box, cover, weighted to the top so faces stay in frame. */
.ant-th img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 18%;
  border-radius: var(--ant-radius); border: 1px solid var(--ant-line);
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .ant-footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .ant-wrap { padding: 0 14px; }
  .ant-sec { padding: 32px 0; }
  .ant-nav { display: none; }
  .ant-hero { padding: 48px 0 36px; }
  .ant-hero p.ant-lead { font-size: 1rem; }
  .ant-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .ant-card__name { font-size: 1rem; }
  .ant-venue { padding: 18px; }
  .ant-venue__facts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ant-hero__cta .ant-btn, .ant-venue__cta .ant-btn { flex: 1; }
  .ant-sticky__who { display: none; }
  .ant-prose { max-width: none; }
  h2 { margin-top: 1.2em; }
  .ant-th { grid-template-columns: 1fr; gap: 16px; }
  /* Cap the portrait, otherwise it eats the whole first screen and pushes her name and the
     WhatsApp button below the fold. The button is the only thing on this page that earns money. */
  .ant-th img { max-width: 300px; max-height: 42vh; object-fit: cover; object-position: center 22%; margin: 0 auto; }
}
@media (max-width: 380px) {
  .ant-logo { font-size: 1rem; }
}
