/* lesbianmassageistanbul.com, prefix tl- (tulip). Every colour is a token here: a palette
   change is one commit. White warm ground + lesbian-flag pinks, per Ben's palette rule. */
:root {
  --tl-bg: #fffaf8;
  --tl-panel: #fdf0f5;
  --tl-panel-2: #fbe4ee;
  --tl-ink: #2a1622;
  --tl-muted: #6d5563;
  --tl-line: #f0d8e3;
  --tl-accent: #c2347f;
  --tl-accent-deep: #a30262;
  --tl-sun: #ef7627;
  --tl-plum: #3a1630;
  --tl-live: #ff3d6e;
  --tl-radius: 22px;
  --tl-wrap: min(1320px, 100% - 32px);
  --tl-serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --tl-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--tl-bg);
  color: var(--tl-ink);
  font: 400 1.0625rem/1.7 var(--tl-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tl-accent-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tl-accent); }
strong { font-weight: 650; color: var(--tl-plum); }

.tl-wrap { width: var(--tl-wrap); margin-inline: auto; }
.tl-skip { position: absolute; left: -999px; top: 8px; background: var(--tl-ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.tl-skip:focus { left: 16px; }

/* Thin lesbian-flag sunset band */
.tl-band { height: 5px; background: linear-gradient(90deg, #d52d00, var(--tl-sun), #ff9a56, #ffffff, #d162a4, #b55690, var(--tl-accent-deep)); }

/* Header */
.tl-head { background: rgba(255, 250, 248, .92); border-bottom: 1px solid var(--tl-line); }
.tl-head-in { display: flex; align-items: center; gap: 24px; min-height: 74px; }
.tl-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tl-ink); font: 500 1.28rem/1 var(--tl-serif); white-space: nowrap; }
.tl-logo em { color: var(--tl-accent); }
.tl-nav { display: flex; gap: 22px; margin-left: auto; font-weight: 500; font-size: .98rem; }
.tl-nav a { color: var(--tl-ink); text-decoration: none; }
.tl-nav a:hover { color: var(--tl-accent); }
.tl-nav-live { display: inline-flex; align-items: center; gap: 7px; }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-live); box-shadow: 0 0 0 0 rgba(255, 61, 110, .6); animation: tl-pulse 1.8s infinite; }
@keyframes tl-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 61, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 61, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .tl-dot { animation: none; } html { scroll-behavior: auto; } }

/* Buttons */
.tl-ico { width: 20px; height: 20px; flex: none; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; transition: transform .15s, background .15s; }
.tl-btn:hover { transform: translateY(-1px); }
.tl-btn--wa { background: var(--tl-accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(194, 52, 127, .7); }
.tl-btn--wa:hover { background: var(--tl-accent-deep); color: #fff; }
.tl-btn--ghost { border-color: var(--tl-line); color: var(--tl-ink); background: #fff; }
.tl-btn--ghost:hover { border-color: var(--tl-accent); color: var(--tl-accent-deep); }
.tl-btn--light { background: #fff; color: var(--tl-plum); }
.tl-btn--light:hover { background: var(--tl-panel-2); color: var(--tl-plum); }
.tl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.tl-cta--big .tl-btn { padding: 16px 28px; font-size: 1.08rem; }
.tl-head-wa { padding: 10px 18px; font-size: .95rem; }

/* Hero */
.tl-hero { padding: clamp(28px, 5vw, 72px) 0 clamp(36px, 5vw, 80px); background: radial-gradient(1200px 500px at 85% 0%, var(--tl-panel-2), transparent 70%); }
.tl-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.tl-eyebrow { margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-accent); }
h1 { font: 400 clamp(2.3rem, 4.4vw, 4.4rem)/1.06 var(--tl-serif); letter-spacing: -.01em; margin: 0 0 22px; }
h1 em { color: var(--tl-accent); }
.tl-lede { font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: var(--tl-muted); max-width: 40em; margin: 0; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 26px 0 0; }
.tl-chips li { background: #fff; border: 1px solid var(--tl-line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 500; }
.tl-chips li::before { content: '✿ '; color: var(--tl-accent); }
.tl-hero .tl-fig img { border-radius: 30px 30px 30px 120px; box-shadow: 0 30px 60px -30px rgba(58, 22, 48, .5); }

/* Figures */
.tl-fig { margin: 0; position: relative; }
.tl-fig img { border-radius: var(--tl-radius); width: 100%; }
.tl-fig figcaption { position: absolute; right: 12px; bottom: 10px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(42, 22, 34, .45); padding: 2px 8px; border-radius: 6px; }

/* Sections */
.tl-sec { padding: clamp(40px, 6vw, 92px) 0; }
.tl-sec--panel { background: var(--tl-panel); }
.tl-sec h2 { font: 400 clamp(1.75rem, 2.6vw, 2.6rem)/1.15 var(--tl-serif); margin: 0 0 18px; max-width: 26em; }
.tl-sec p { margin: 0 0 16px; }
.tl-prose { max-width: 46rem; }
.tl-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.tl-split--rev { grid-template-columns: .85fr 1.15fr; }
.tl-split--rev .tl-fig { order: -1; }
.tl-split .tl-fig { max-width: 520px; justify-self: center; }

/* Cards (names are styled paragraphs, never headings) */
.tl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 26px; }
.tl-card { background: #fff; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); padding: 24px 24px 20px; }
.tl-card-name { font: 500 1.3rem/1.2 var(--tl-serif); margin: 0 0 6px !important; color: var(--tl-plum); }
.tl-card-meta { font-size: .85rem; font-weight: 600; color: var(--tl-accent); margin: 0 0 10px !important; letter-spacing: .02em; }
.tl-card p:last-child { margin-bottom: 0; }

/* Steps */
.tl-steps { counter-reset: s; list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.tl-steps li { counter-increment: s; position: relative; padding: 4px 0 4px 64px; min-height: 48px; }
.tl-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tl-accent); color: var(--tl-accent-deep); display: grid; place-items: center; font: 500 1.25rem/1 var(--tl-serif); }

/* Rate */
.tl-rate { display: flex; align-items: center; gap: 26px; background: #fff; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); padding: 26px 30px; margin: 24px 0; max-width: 46rem; }
.tl-rate-num { font: 500 clamp(2.6rem, 4vw, 3.6rem)/1 var(--tl-serif); color: var(--tl-accent); white-space: nowrap; }
.tl-rate p { margin: 0; }

/* Districts */
.tl-districts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 20px; }
.tl-districts li { background: #fff; border: 1px solid var(--tl-line); border-radius: 12px; padding: 8px 16px; font-weight: 600; }

/* Advice list */
.tl-list { padding-left: 0; list-style: none; margin: 18px 0; display: grid; gap: 12px; }
.tl-list li { padding-left: 30px; position: relative; }
.tl-list li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--tl-accent); transform: rotate(-45deg); }

/* Booking panel */
.tl-book { background: linear-gradient(135deg, var(--tl-plum), #5b1f4a); color: #fff; border-radius: 32px; padding: clamp(28px, 4vw, 56px); }
.tl-book h2, .tl-book strong { color: #fff; }
.tl-book p { color: #f5dfe9; }
.tl-book .tl-num { color: #fff; font-weight: 700; }
.tl-book .tl-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.tl-book .tl-small { color: #e3c3d3; }

/* Cams (Rule 7) */
.tl-cams { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: linear-gradient(120deg, #2a1622, #4a1a3c 60%, #7a1f5c); color: #fff; border-radius: 28px; padding: 26px 30px; margin: 10px auto; width: var(--tl-wrap); }
.tl-cams-faces { display: flex; }
.tl-cams-face { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; margin-left: -18px; }
.tl-cams-face:first-child { margin-left: 0; }
.tl-cams-face img { width: 100%; height: 100%; object-fit: cover; }
.tl-cams-face .tl-dot { position: absolute; right: 12px; bottom: 10px; border: 2px solid #fff; width: 12px; height: 12px; }
.tl-cams-tag { margin: 0 0 4px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #ffc6dc; display: flex; align-items: center; gap: 8px; }
.tl-cams-title { font: 400 1.6rem/1.2 var(--tl-serif); margin: 0 0 4px; }
.tl-cams-text { margin: 0 0 14px; color: #f3d6e4; }

/* FAQ */
.tl-faq { max-width: 50rem; margin-top: 20px; }
.tl-faq details { border-bottom: 1px solid var(--tl-line); padding: 6px 0; }
.tl-faq summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; padding: 12px 34px 12px 0; list-style: none; position: relative; }
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after { content: '+'; position: absolute; right: 4px; top: 6px; font: 400 1.6rem/1.4 var(--tl-serif); color: var(--tl-accent); }
.tl-faq details[open] summary::after { content: '−'; }
.tl-faq details p { margin: 0 0 14px; color: var(--tl-muted); }

/* Footer */
.tl-foot { background: var(--tl-panel); border-top: 1px solid var(--tl-line); padding: 44px 0 40px; margin-top: 40px; font-size: .95rem; color: var(--tl-muted); }
.tl-foot-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.tl-foot-logo { display: flex; align-items: center; gap: 10px; font: 500 1.2rem/1 var(--tl-serif); color: var(--tl-ink); margin: 0 0 14px; }
.tl-foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tl-small { font-size: .85rem; color: var(--tl-muted); }

/* Sticky booking bar: phones only */
.tl-sticky { display: none; }

/* Ben reviews on a ~3788px-wide viewport: scale the whole rem system, widen the column. */
@media (min-width: 2000px) {
  :root { --tl-wrap: min(1640px, 100% - 64px); }
  html { font-size: 112%; }
}
@media (min-width: 2600px) {
  :root { --tl-wrap: min(2200px, 100% - 120px); }
  html { font-size: 135%; }
  .tl-split .tl-fig, .tl-hero .tl-fig { max-width: 720px; }
}

@media (max-width: 980px) {
  .tl-nav { display: none; }
  .tl-head-wa { margin-left: auto; }
  .tl-hero-in, .tl-split, .tl-split--rev, .tl-foot-in { grid-template-columns: 1fr; }
  .tl-split--rev .tl-fig { order: 0; }
  .tl-hero .tl-fig { max-width: 440px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 72px; font-size: 1rem; }
  .tl-head-in { min-height: 60px; }
  .tl-logo { font-size: 1.08rem; }
  .tl-logo img { width: 28px; height: 28px; }
  .tl-head-wa span { display: none; }
  .tl-head-wa { padding: 10px; }
  .tl-chips { gap: 6px; margin-top: 20px; }
  .tl-chips li { font-size: .8rem; padding: 4px 11px; }
  .tl-cta--big .tl-btn { padding: 14px 22px; }
  .tl-hero .tl-fig { max-width: none; }
  .tl-hero .tl-fig img { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 62%; border-radius: 22px 22px 22px 70px; }
  .tl-split .tl-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
  .tl-cams { grid-template-columns: 1fr; padding: 22px; gap: 16px; }
  .tl-cams-face { width: 70px; height: 70px; }
  .tl-rate { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tl-sticky { display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 250, 248, .97); border-top: 1px solid var(--tl-line); box-shadow: 0 -8px 24px -16px rgba(58, 22, 48, .4); }
  .tl-sticky a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; font-weight: 600; text-decoration: none; height: 48px; }
  .tl-sticky-wa { flex: 1; min-width: 0; background: var(--tl-accent); color: #fff; font-size: .9rem; white-space: nowrap; }
  .tl-sticky-wa > span { overflow: hidden; text-overflow: ellipsis; }
  .tl-sticky-wa .tl-num { color: #fff; }
  .tl-sticky-tg { width: 48px; border: 1.5px solid var(--tl-line); color: var(--tl-ink); }
  .tl-sticky-live { padding: 0 14px; border: 1.5px solid var(--tl-line); color: var(--tl-ink); font-size: .9rem; }
}