/*
 * Tina Kuafor — reference-matched presentation layer
 *
 * Visual-only rules for the homepage. Business copy, navigation destinations,
 * booking state, structured data and all scrolling announcement rules remain
 * owned by their existing templates and stylesheets.
 */

body.tina-app {
  --ref-ink: #07060d;
  --ref-chrome: #0b0911;
  --ref-panel: #15101a;
  --ref-panel-2: #1b131d;
  --ref-raised: #211721;
  --ref-line: rgba(238, 199, 142, 0.16);
  --ref-line-soft: rgba(255, 255, 255, 0.075);
  --ref-gold: #eec78e;
  --ref-gold-soft: #f5ddb4;
  --ref-rose: #d72d72;
  --ref-rose-hot: #f23d86;
  --ref-text: #fff9f6;
  --ref-muted: #b9adb8;
  --ref-subtle: #8f8490;

  background:
    radial-gradient(68rem 30rem at 8% -8%, rgba(215, 45, 114, 0.095), transparent 70%),
    radial-gradient(54rem 30rem at 92% 58%, rgba(238, 199, 142, 0.04), transparent 72%),
    var(--ref-ink) !important;
  color: var(--ref-text);
  overscroll-behavior-y: auto;
}

body.tina-app::before {
  opacity: 0.18 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

/* Header: compact wordmark and individual navigation controls. */
body.tina-app .app-header.header-tech {
  min-height: 64px;
  border-bottom: 1px solid rgba(215, 45, 114, 0.28) !important;
  background: rgba(8, 7, 14, 0.965) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

body.tina-app .app-header.header-tech::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(215, 45, 114, 0.72), rgba(238, 199, 142, 0.42), transparent) !important;
}

body.tina-app .app-header-inner,
body.tina-app .app-footer-inner {
  width: calc(100% - 60px) !important;
  max-width: 1800px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.tina-app .app-header-inner {
  padding-block: 8px !important;
}

body.tina-app .app-brand {
  gap: 0.75rem !important;
}

body.tina-app .app-brand > .relative.w-9 {
  width: 46px !important;
  height: 46px !important;
  border-color: rgba(238, 199, 142, 0.72) !important;
  background: #140e16 !important;
  box-shadow: 0 0 0 3px rgba(215, 45, 114, 0.06), 0 0 20px rgba(215, 45, 114, 0.18) !important;
}

body.tina-app .app-brand img {
  background: transparent !important;
  padding: 0 !important;
}

body.tina-app .app-brand h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.35rem, 2vw, 1.72rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--ref-gold) !important;
  text-shadow: 0 0 18px rgba(238, 199, 142, 0.12) !important;
}

body.tina-app .app-brand span {
  color: rgba(238, 199, 142, 0.62) !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.22em !important;
}

body.tina-app .app-nav {
  gap: 0.55rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tina-app .app-nav .nav-link-tech {
  min-height: 38px;
  padding: 0.55rem 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #c8bec7 !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  font-weight: 550 !important;
}

body.tina-app .app-nav .nav-link-tech:first-child,
body.tina-app .app-nav .nav-link-tech:hover {
  border-color: rgba(215, 45, 114, 0.32) !important;
  color: var(--ref-gold-soft) !important;
  background: rgba(215, 45, 114, 0.055) !important;
}

body.tina-app .app-nav .nav-link-tech > div {
  display: none !important;
}

body.tina-app .app-main {
  width: calc(100% - 60px) !important;
  max-width: 1800px !important;
  min-width: 0;
  margin-inline: auto !important;
  padding: 28px 0 26px !important;
}

/* Booking application: one horizontal composition on desktop. */
body.tina-app #randevu {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tina-app #randevu .booking-app-aura {
  inset: -2rem !important;
  background: radial-gradient(36rem 16rem at 80% 0%, rgba(242, 61, 134, 0.13), transparent 74%) !important;
}

body.tina-app #randevu #booking-widget.booking-app-shell {
  display: grid !important;
  grid-template-columns: minmax(330px, 39%) minmax(0, 61%);
  /* Satır 2 içerikle büyür: kategori açılınca hizmet listesi kutu içinde
     kaydırılmaz, panelin kendisi uzar (tek panel / tek kaydırma modeli). */
  grid-template-rows: auto auto;
  gap: 12px;
  min-height: 520px !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid rgba(242, 61, 134, 0.58) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(6, 5, 12, 0.28) 0%, rgba(6, 5, 12, 0.22) 36%, rgba(6, 5, 12, 0.78) 57%, rgba(6, 5, 12, 0.9) 100%),
    url("../images/salon-booking-hero-20260812.webp") center / cover no-repeat !important;
  box-shadow:
    0 30px 72px rgba(0, 0, 0, 0.48),
    0 0 38px rgba(215, 45, 114, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  isolation: isolate;
}

/* A static one-pixel highlight gives the desktop shell a dashboard edge
   without a continuously painting glow animation. */
body.tina-app #randevu #booking-widget.booking-app-shell::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 5;
  top: 0;
  right: 7%;
  width: min(34rem, 46%);
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(242, 61, 134, 0.72), rgba(238, 199, 142, 0.5), transparent);
  box-shadow: 0 0 16px rgba(242, 61, 134, 0.24);
  opacity: 0.82;
  pointer-events: none;
}

body.tina-app #randevu .booking-app-header {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 494px;
  align-items: flex-start !important;
  justify-content: center;
  gap: 1rem !important;
  margin: 0 !important;
  padding: clamp(1.5rem, 3vw, 2.35rem) clamp(1.35rem, 3vw, 2.4rem) !important;
  border: 1px solid rgba(238, 199, 142, 0.18) !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(7, 6, 13, 0.76), rgba(10, 7, 14, 0.28)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  position: relative;
  z-index: 1;
}

body.tina-app #randevu .booking-app-eyebrow {
  align-self: flex-start !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  width: 100%;
  max-width: 12em !important;
  margin: 0 !important;
  font-size: clamp(2.35rem, 3.7vw, 4rem) !important;
  line-height: 0.98 !important;
  text-align: left !important;
  letter-spacing: 0.035em !important;
}

body.tina-app #randevu .booking-app-eyebrow-dot {
  width: clamp(4.4rem, 6vw, 6.4rem) !important;
  height: clamp(4.4rem, 6vw, 6.4rem) !important;
  margin-bottom: 0.25rem;
}

body.tina-app #randevu .booking-app-intro {
  width: 100%;
  margin-top: 0.25rem !important;
  color: rgba(255, 249, 246, 0.68) !important;
  font-size: 0.88rem !important;
  text-align: left;
}

body.tina-app #randevu .booking-progress {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0.72rem 0.55rem 0.62rem !important;
  border: 1px solid var(--ref-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(13, 9, 16, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative;
  z-index: 2;
}

body.tina-app #randevu .booking-progress .step-chip {
  gap: 0.35rem !important;
}

body.tina-app #randevu .booking-progress .step-number {
  width: 2.2rem !important;
  height: 2.2rem !important;
  flex-basis: 2.2rem !important;
  font-size: 0.82rem !important;
}

body.tina-app #randevu .booking-progress .step-chip::before {
  top: 1.1rem !important;
}

body.tina-app #randevu .booking-progress .step-chip::after {
  top: calc(1.1rem - 2.5px) !important;
}

body.tina-app #randevu .booking-progress .step-label {
  font-size: 0.69rem !important;
}

body.tina-app #randevu .booking-app-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 400px;
  padding: 0.9rem !important;
  overflow: visible;
  border: 1px solid var(--ref-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(13, 9, 16, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  position: relative;
  z-index: 2;
}

body.tina-app #randevu .booking-section-label {
  margin-bottom: 0.55rem !important;
  color: #f06a9e !important;
  font-size: 0.77rem !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 172px !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0 0.75rem !important;
  align-items: start !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) > div:first-child {
  display: contents !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) .booking-section-label {
  grid-column: 1;
  grid-row: 1;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-loader {
  grid-column: 1;
  grid-row: 2;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container {
  grid-column: 1;
  grid-row: 2;
  display: block !important;
  /* Kategori listesi kendi içinde KAYDIRILMAZ: müşteri açtığı kategoriyi
     tam görsün diye liste büyür, sayfa tek parça ilerler. */
  max-height: none;
  margin: 0 !important;
  padding-right: 0;
  overflow: visible;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-summary {
  grid-column: 1;
  grid-row: 3;
  min-height: 38px;
  margin: 0.55rem 0 0 !important;
  padding: 0.52rem 0.72rem !important;
  font-size: 0.75rem !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-summary::before {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.72rem;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-details {
  grid-column: 2;
  grid-row: 1;
  max-height: 92px;
  margin: 0 !important;
  overflow: auto;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) .booking-actions {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-self: end;
  gap: 0.65rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) .booking-actions > button {
  width: 100% !important;
}

body.tina-app #randevu #step1-next {
  order: 1;
  min-height: 3.25rem;
  padding-inline: 2.5rem !important;
}

body.tina-app #randevu #step1-reset {
  order: 2;
  min-height: 2.7rem;
}

body.tina-app #randevu .category-section.digital-card {
  display: block !important;
  margin: 0 0 0.42rem !important;
  border-radius: 11px !important;
}

body.tina-app #randevu .category-button {
  grid-column: auto !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0.48rem 0.58rem !important;
  border: 0 !important;
  border-radius: 11px !important;
}

body.tina-app #randevu .category-icon-shell {
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 0.68rem !important;
  font-size: 1.12rem !important;
}

body.tina-app #randevu .category-title-shimmer {
  min-width: 0;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

body.tina-app #randevu .category-count {
  padding: 0.2rem 0.45rem !important;
  font-size: 0.62rem !important;
}

body.tina-app #randevu .category-button .chevron {
  width: 1.85rem !important;
  height: 1.85rem !important;
}

body.tina-app #randevu .category-services:not(.hidden) {
  display: flex !important;
  /* Açılan kategorinin hizmetleri TAMAMEN görünür; kutu içi kaydırma yok. */
  max-height: none !important;
  margin: 0 0.42rem !important;
  padding: 0.45rem !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid var(--ref-line-soft) !important;
  border-radius: 0 !important;
  background: rgba(8, 6, 12, 0.45) !important;
}

body.tina-app #randevu .service-row {
  min-height: 44px;
  padding: 0.55rem 0.6rem !important;
}

body.tina-app #randevu .service-name {
  font-size: 0.78rem !important;
}

body.tina-app #randevu .service-desc {
  font-size: 0.68rem !important;
}

body.tina-app #randevu .booking-primary {
  border-color: rgba(255, 184, 214, 0.68) !important;
  background: linear-gradient(100deg, #b91f5c, #e02b76 55%, #c52667) !important;
  box-shadow: 0 12px 28px rgba(215, 45, 114, 0.35), 0 0 22px rgba(242, 61, 134, 0.16) !important;
}

body.tina-app #randevu .booking-secondary {
  border-color: var(--ref-line-soft) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

/* Takvim, saat ve onay adımları da kutu içinde kaydırılmaz; her adım tek
   panelde tam görünür (müşteri kaybolmasın diye tek kaydırma modeli). */
body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Salon story + gallery card. */
body.tina-app .app-hero-section {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
  min-height: 0 !important;
  margin-top: 28px !important;
  padding: clamp(1.55rem, 3vw, 2.4rem) !important;
  gap: clamp(1.5rem, 3vw, 3.25rem) !important;
  border-color: var(--ref-line) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(30rem 16rem at 12% 0%, rgba(215, 45, 114, 0.09), transparent 70%),
    linear-gradient(145deg, rgba(24, 17, 26, 0.98), rgba(11, 9, 15, 0.99)) !important;
}

body.tina-app .app-hero-copy {
  gap: 0.7rem !important;
}

body.tina-app .hero-eyebrow {
  padding: 0.38rem 0.75rem !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
}

body.tina-app #animated-title {
  gap: 0.3rem !important;
  margin-bottom: 0.45rem !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

body.tina-app #animated-title::after {
  bottom: -8px !important;
  width: 76px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--ref-rose), var(--ref-gold), transparent) !important;
}

body.tina-app .hero-title-main {
  background: linear-gradient(105deg, #f6dfb5, #eec78e 55%, #b9824d) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-size: clamp(2.65rem, 4vw, 4.4rem) !important;
  font-weight: 500 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.025em !important;
}

body.tina-app .hero-title-sub {
  color: #efe1d0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1rem, 1.45vw, 1.28rem) !important;
}

body.tina-app .hero-copy {
  gap: 0.75rem !important;
  margin-block: 0.35rem !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

body.tina-app .hero-lead {
  max-width: 48rem;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}

body.tina-app .hero-tags {
  gap: 0.4rem !important;
}

body.tina-app .hero-tag {
  padding: 0.28rem 0.66rem !important;
  border-color: var(--ref-line-soft) !important;
  color: #d9ced7 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: 0.7rem !important;
}

body.tina-app .hero-note {
  margin-top: 0.2rem;
  color: var(--ref-gold) !important;
  font-size: 0.72rem !important;
}

body.tina-app .app-hero-copy > .flex {
  gap: 0.5rem !important;
}

body.tina-app .hero-btn-primary,
body.tina-app .hero-btn-secondary {
  min-height: 42px;
  padding: 0.62rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
}

body.tina-app .gallery-card {
  min-height: 310px;
  padding: 1rem !important;
  border-color: var(--ref-line) !important;
  border-radius: 15px !important;
  background: rgba(12, 9, 15, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

body.tina-app #gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense;
  gap: 0.6rem !important;
  /* Yukseklik ICERIKTEN gelir. Eskiden `height: 100%` idi: izgara karta
     kilitleniyor, satirlar kart yuksekligini esit boluyordu (3 x 118px).
     Kutulara oran verildiginde yukseklik zaten sabit oldugu icin genislik
     orandan turetiliyor ve kutucuklar 89px'e dusuyordu. Satirlar artik
     kendi iceriklerine gore olculur (masaustu katmani da boyle yapar). */
  grid-auto-rows: auto;
  height: auto;
}

/* Galeri fotograflarinin TAMAMI dikeydir (en/boy 0.46-0.67). Kutular sabit
   132px yukseklikte ve yatay oldugu icin `object-fit: cover` fotografin
   %60-70'ini kirpiyordu; yuzler ve sac modelleri kadraj disinda kaliyordu.
   Oran fotograflara uyduruldu. Yukseklik yine GORSELDEN BAGIMSIZ (oran
   sabit) oldugu icin gec/hatali yuklenen gorsel duzeni sismez. */
body.tina-app #gallery-grid > div {
  grid-column: span 2;
  border: 1px solid var(--ref-line-soft);
  border-radius: 10px !important;
}

body.tina-app #gallery-grid > div:nth-child(n+4) {
  grid-column: span 3;
}

body.tina-app #gallery-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* Reviews: one wide editorial card, existing carousel controls retained. */
body.tina-app .app-content-stack {
  gap: 28px !important;
  margin-top: 28px !important;
}

body.tina-app .app-reviews-section,
body.tina-app .app-contact-section {
  padding: 1.55rem 1.2rem !important;
  border-color: var(--ref-line) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(30rem 13rem at 50% -20%, rgba(215, 45, 114, 0.1), transparent 74%),
    linear-gradient(150deg, rgba(24, 17, 26, 0.98), rgba(11, 9, 15, 0.99)) !important;
}

body.tina-app .app-reviews-section .max-w-7xl,
body.tina-app .app-contact-section .max-w-7xl {
  max-width: none !important;
  padding-inline: 0 !important;
}

body.tina-app .app-reviews-section .text-center {
  margin-bottom: 1.15rem !important;
}

body.tina-app .app-reviews-section .text-center > .inline-flex,
body.tina-app .app-contact-section .text-center > .inline-flex {
  padding: 0.36rem 0.75rem !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
}

body.tina-app .app-reviews-section h2,
body.tina-app .app-contact-section h2 {
  margin-bottom: 0.25rem !important;
  color: var(--ref-gold-soft) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 3.2vw, 3.15rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

body.tina-app .app-reviews-section .text-center > p,
body.tina-app .app-contact-section .text-center > p {
  margin-bottom: 0.8rem !important;
  font-size: 0.78rem !important;
}

body.tina-app .app-reviews-section .text-center > a {
  padding: 0.55rem 0.9rem !important;
  border-radius: 8px !important;
  color: var(--ref-gold) !important;
  font-size: 0.72rem !important;
}

body.tina-app #reviews-carousel {
  margin-inline: clamp(2.2rem, 5vw, 4.2rem) !important;
  padding-inline: 0 !important;
}

body.tina-app #reviews-track {
  gap: 0 !important;
}

body.tina-app .review-card {
  width: 100% !important;
  flex: 0 0 100% !important;
}

body.tina-app .review-card-inner {
  min-height: 152px;
  padding: 1rem 1.2rem !important;
  border-radius: 13px !important;
  background: rgba(18, 13, 21, 0.92) !important;
}

body.tina-app .review-card-inner .w-14.h-14 {
  width: 2.6rem !important;
  height: 2.6rem !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
}

body.tina-app .review-card-inner h3 {
  font-size: 0.88rem !important;
}

body.tina-app .review-card-inner .mb-5 {
  margin-bottom: 0.65rem !important;
}

body.tina-app #prev-review,
body.tina-app #next-review {
  padding: 0.65rem !important;
  border-radius: 999px !important;
}

body.tina-app #reviews-dots {
  gap: 0.38rem !important;
  margin-top: 0.85rem !important;
}

/* Contact: information on the left, live map on the right. */
body.tina-app .app-contact-section > .max-w-7xl {
  display: grid;
  grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: auto 1fr;
  gap: 1rem 1.2rem;
  align-items: stretch;
}

body.tina-app .app-contact-section .text-center {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
  text-align: left !important;
}

body.tina-app .app-contact-section .text-center > .inline-flex {
  margin-bottom: 0.55rem !important;
}

body.tina-app .app-contact-section > .max-w-7xl > .grid {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  margin: 0 !important;
}

body.tina-app .app-contact-section .group .neon-border {
  min-height: 218px;
  padding: 0.85rem !important;
  border-radius: 11px !important;
  background: rgba(17, 12, 20, 0.9) !important;
}

body.tina-app .app-contact-section .group .neon-border > .flex:first-child {
  margin-bottom: 0.45rem !important;
}

body.tina-app .app-contact-section .group .neon-border .w-14.h-14 {
  width: 2.4rem !important;
  height: 2.4rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: 9px !important;
}

body.tina-app .app-contact-section .group .neon-border .w-7.h-7 {
  width: 1.15rem !important;
  height: 1.15rem !important;
}

body.tina-app .app-contact-section .group .neon-border a.text-2xl {
  font-size: 1rem !important;
}

body.tina-app .app-contact-section .group .neon-border p,
body.tina-app .app-contact-section .group .neon-border a {
  font-size: 0.66rem !important;
  line-height: 1.45 !important;
}

body.tina-app .app-contact-section #map {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 328px;
  margin: 0 !important;
}

body.tina-app .app-contact-section #map > .neon-border {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-color: rgba(238, 199, 142, 0.4) !important;
  border-radius: 13px !important;
  background: #0c0a10 !important;
}

body.tina-app .app-contact-section #map > .neon-border > div:first-child {
  min-height: 38px;
  padding: 0.45rem 0.7rem !important;
}

body.tina-app .app-contact-section #map > .neon-border > div:last-child {
  flex: 1 1 auto;
  min-height: 288px;
  height: auto !important;
}

body.tina-app .app-contact-section #map iframe {
  filter: saturate(0.72) contrast(1.08) brightness(0.68) hue-rotate(300deg);
  touch-action: pan-y;
}

body.tina-app .app-footer {
  border-top-color: rgba(215, 45, 114, 0.2) !important;
  background: #08070d !important;
}

body.tina-app .app-footer-inner {
  padding-block: 1.25rem !important;
  font-size: 0.7rem !important;
}

/* Subtle desktop feedback is only enabled on devices that truly support
   hover. This prevents the highlighted state from sticking after a tap. */
@media (hover: hover) and (pointer: fine) {
  body.tina-app .app-nav .nav-link-tech,
  body.tina-app #randevu .category-section.digital-card,
  body.tina-app #randevu .service-row,
  body.tina-app #randevu .slot-button,
  body.tina-app #randevu .booking-primary,
  body.tina-app #randevu .booking-secondary,
  body.tina-app .hero-btn-primary,
  body.tina-app .hero-btn-secondary,
  body.tina-app .gallery-card,
  body.tina-app #gallery-grid > div,
  body.tina-app .review-card-inner,
  body.tina-app .app-contact-section .group .neon-border {
    transition:
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  body.tina-app #randevu .category-section.digital-card:hover,
  body.tina-app #randevu .service-row:hover,
  body.tina-app .gallery-card:hover,
  body.tina-app #gallery-grid > div:hover,
  body.tina-app .review-card-inner:hover,
  body.tina-app .app-contact-section .group .neon-border:hover {
    transform: translateY(-2px) !important;
  }

  body.tina-app #randevu .category-section.digital-card:hover,
  body.tina-app #randevu .service-row:hover {
    border-color: rgba(242, 61, 134, 0.34) !important;
  }

  body.tina-app .gallery-card:hover,
  body.tina-app .review-card-inner:hover,
  body.tina-app .app-contact-section .group .neon-border:hover {
    border-color: rgba(238, 199, 142, 0.3) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3), 0 0 22px rgba(215, 45, 114, 0.08) !important;
  }
}

/* Coarse pointers use brief native active feedback instead of hover effects.
   `manipulation` keeps taps responsive while preserving vertical page pan and
   browser pinch zoom. */
@media (hover: none), (pointer: coarse) {
  body.tina-app :where(a, button, [role="button"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(242, 61, 134, 0.14);
  }

  /* Large tablets and touch laptops must keep the same single-scroll model as
     phones even when their landscape width crosses the desktop breakpoint. */
  body.tina-app #randevu .booking-app-body {
    min-height: 0;
    overflow: visible !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: static !important;
    inset: auto !important;
  }

  body.tina-app .app-nav .nav-link-tech:hover,
  body.tina-app #randevu .category-section.digital-card:hover,
  body.tina-app #randevu .service-row:hover,
  body.tina-app #randevu .slot-button:hover,
  body.tina-app #randevu .booking-primary:hover,
  body.tina-app #randevu .booking-secondary:hover,
  body.tina-app .hero-btn-primary:hover,
  body.tina-app .hero-btn-secondary:hover,
  body.tina-app .gallery-card:hover,
  body.tina-app #gallery-grid > div:hover,
  body.tina-app .review-card-inner:hover,
  body.tina-app .app-contact-section .group .neon-border:hover {
    transform: none !important;
  }

  body.tina-app #randevu :is(.category-button, .service-row, .slot-button, .booking-primary, .booking-secondary):active,
  body.tina-app :is(.hero-btn-primary, .hero-btn-secondary, #prev-review, #next-review):active {
    transform: scale(0.985) !important;
  }
}

/* Appointment-step transitions use only compositor-friendly properties and
   run once when the existing booking state reveals a panel. */
@keyframes reference-step-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.tina-app #randevu .step-panel:not(.hidden) {
    animation: reference-step-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.tina-app #randevu .booking-progress .step-number {
    transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease, box-shadow 220ms ease !important;
  }

  body.tina-app #randevu .booking-progress .step-chip[data-state="current"] .step-number {
    box-shadow: 0 0 0 1px rgba(255, 184, 214, 0.2), 0 0 22px rgba(242, 61, 134, 0.42) !important;
  }
}

body.tina-app #randevu :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(255, 106, 157, 0.96) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(242, 61, 134, 0.14), 0 0 20px rgba(242, 61, 134, 0.16) !important;
}

/* Tablet and mobile: retain the same visual language without horizontal flow. */
@media (max-width: 1099px) {
  body.tina-app {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.tina-app #randevu #booking-widget.booking-app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0 !important;
  }

  body.tina-app #randevu .booking-app-header {
    grid-column: 1;
    grid-row: 1;
    min-height: 280px;
    justify-content: flex-end;
    background: linear-gradient(90deg, rgba(7, 6, 13, 0.74), rgba(7, 6, 13, 0.28)) !important;
  }

  body.tina-app #randevu .booking-progress {
    grid-column: 1;
    grid-row: 2;
  }

  body.tina-app #randevu .booking-app-body {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    overflow: visible !important;
  }

  /* Phone and tablet use one natural document scroll. Desktop keeps the
     compact inner catalogue scrollers that give the wide layout its dashboard
     feel. */
  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: static !important;
    inset: auto !important;
    margin-bottom: 0 !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl {
    grid-template-columns: 1fr;
  }

  body.tina-app .app-contact-section .text-center,
  body.tina-app .app-contact-section > .max-w-7xl > .grid,
  body.tina-app .app-contact-section #map {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 767px) {
  body.tina-app .app-header-inner,
  body.tina-app .app-footer-inner,
  body.tina-app .app-main {
    width: calc(100% - 16px) !important;
  }

  body.tina-app .app-main {
    padding-top: 10px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  body.tina-app .app-header.header-tech {
    min-height: 60px;
  }

  body.tina-app .app-brand > .relative.w-9 {
    width: 40px !important;
    height: 40px !important;
  }

  body.tina-app .app-brand h1 {
    font-size: 1.15rem !important;
  }

  body.tina-app .app-menu-button {
    border: 1px solid rgba(215, 45, 114, 0.35) !important;
    border-radius: 10px !important;
    color: var(--ref-gold-soft) !important;
    background: rgba(215, 45, 114, 0.055) !important;
  }

  body.tina-app #randevu #booking-widget.booking-app-shell {
    gap: 8px;
    padding: 7px !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(6, 5, 12, 0.26), rgba(6, 5, 12, 0.9) 32%),
      url("../images/salon-booking-hero-20260812.webp") 68% top / auto 310px no-repeat,
      #0b0810 !important;
  }

  body.tina-app #randevu .booking-app-header {
    min-height: 232px;
    gap: 0.6rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    gap: 0.45rem !important;
    max-width: 9em !important;
    font-size: clamp(1.8rem, 10vw, 2.55rem) !important;
  }

  body.tina-app #randevu .booking-app-eyebrow-dot {
    width: 3.75rem !important;
    height: 3.75rem !important;
  }

  body.tina-app #randevu .booking-app-intro {
    font-size: 0.76rem !important;
  }

  body.tina-app #randevu .booking-progress {
    padding: 0.58rem 0.25rem 0.5rem !important;
    border-radius: 12px !important;
  }

  body.tina-app #randevu .booking-progress .step-number {
    width: 1.9rem !important;
    height: 1.9rem !important;
    flex-basis: 1.9rem !important;
  }

  body.tina-app #randevu .booking-progress .step-label {
    font-size: 0.58rem !important;
  }

  body.tina-app #randevu .booking-progress .step-chip::before {
    top: 0.95rem !important;
    left: calc(50% + 1.25rem) !important;
    right: calc(-50% + 1.25rem) !important;
  }

  body.tina-app #randevu .booking-progress .step-chip::after {
    top: calc(0.95rem - 2.5px) !important;
  }

  body.tina-app #randevu .booking-app-body {
    min-height: 0;
    padding: 0.65rem !important;
    border-radius: 12px !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) {
    display: block !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) > div:first-child {
    display: block !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container {
    max-height: none;
    padding-right: 0.15rem;
    overflow: visible;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-summary {
    margin-top: 0.5rem !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-details {
    max-height: none;
    margin-top: 0.5rem !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) .booking-actions {
    margin-top: 0.55rem !important;
  }

  body.tina-app #randevu .category-button {
    min-height: 54px !important;
    padding: 0.58rem !important;
  }

  body.tina-app #randevu .category-title-shimmer {
    font-size: 0.79rem !important;
  }

  body.tina-app .app-hero-section {
    grid-template-columns: 1fr !important;
    margin-top: 14px !important;
    padding: 1rem !important;
    gap: 1rem !important;
    border-radius: 15px !important;
  }

  body.tina-app .hero-title-main {
    font-size: clamp(2.25rem, 12vw, 3.4rem) !important;
  }

  body.tina-app .app-hero-copy > .flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  body.tina-app .app-hero-copy > .flex > :last-child {
    grid-column: 1 / -1;
  }

  body.tina-app .gallery-card {
    min-height: 265px;
    padding: 0.7rem !important;
  }

  body.tina-app #gallery-grid {
    gap: 0.4rem !important;
  }

  body.tina-app #gallery-grid > div {
    height: 108px !important;
  }

  body.tina-app #gallery-grid > div:nth-child(n+4) {
    height: 100px !important;
  }

  body.tina-app .app-content-stack {
    gap: 14px !important;
    margin-top: 14px !important;
  }

  body.tina-app .app-reviews-section,
  body.tina-app .app-contact-section {
    padding: 1.15rem 0.7rem !important;
    border-radius: 15px !important;
  }

  body.tina-app .app-reviews-section h2,
  body.tina-app .app-contact-section h2 {
    font-size: 2rem !important;
  }

  body.tina-app #reviews-carousel {
    margin-inline: 1.8rem !important;
    padding-inline: 0 !important;
  }

  body.tina-app .review-card-inner {
    min-height: 190px;
    padding: 0.9rem !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl > .grid {
    grid-template-columns: 1fr !important;
  }

  body.tina-app .app-contact-section .group .neon-border {
    min-height: 0;
  }

  body.tina-app .app-contact-section #map {
    min-height: 300px;
  }

  body.tina-app .app-contact-section #map > .neon-border > div:last-child {
    min-height: 255px;
  }
}

/* Narrow phones: keep controls readable without horizontal compression. */
@media (max-width: 520px) {
  body.tina-app .app-brand span {
    letter-spacing: 0.14em !important;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    font-size: clamp(1.65rem, 9.5vw, 2.15rem) !important;
  }

  body.tina-app #randevu .booking-progress .step-chip {
    min-width: 0;
    padding-inline: 0.08rem !important;
  }

  body.tina-app #randevu .booking-progress .step-number {
    width: 1.75rem !important;
    height: 1.75rem !important;
    flex-basis: 1.75rem !important;
    font-size: 0.68rem !important;
  }

  body.tina-app #randevu .booking-progress .step-label {
    font-size: clamp(0.5rem, 2.5vw, 0.58rem) !important;
    line-height: 1.15 !important;
  }

  body.tina-app #randevu .booking-progress .step-chip::before {
    top: 0.875rem !important;
    left: calc(50% + 1.12rem) !important;
    right: calc(-50% + 1.12rem) !important;
  }

  body.tina-app #randevu .booking-progress .step-chip::after {
    top: calc(0.875rem - 2.5px) !important;
  }

  body.tina-app #randevu .category-primary {
    min-width: 0;
  }

  body.tina-app #randevu .category-trailing {
    flex: 0 0 auto;
  }

  body.tina-app .app-hero-copy > .flex {
    grid-template-columns: 1fr !important;
  }

  body.tina-app .app-hero-copy > .flex > :last-child {
    grid-column: auto;
  }

  body.tina-app #gallery-grid > div,
  body.tina-app #gallery-grid > div:nth-child(n+4) {
    grid-column: span 3;
    height: 112px !important;
  }

  body.tina-app #gallery-grid > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body.tina-app #reviews-carousel {
    margin-inline: 1.45rem !important;
  }

  body.tina-app .review-card-inner .flex.items-start.justify-between {
    gap: 0.55rem;
    flex-wrap: wrap;
  }

  body.tina-app .app-contact-section #map,
  body.tina-app .app-contact-section #map > .neon-border > div:last-child {
    min-height: 240px;
  }
}

/* Short landscape screens should not spend the whole viewport on decoration. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body.tina-app #randevu .booking-app-header {
    min-height: 176px;
    padding-block: 0.8rem !important;
  }

  body.tina-app #randevu .booking-app-eyebrow-dot {
    width: 3rem !important;
    height: 3rem !important;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    font-size: 1.8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tina-app .hero-btn-primary::before,
  body.tina-app .hero-btn-secondary::before,
  body.tina-app .gallery-card::after {
    animation: none !important;
  }

  body.tina-app .app-nav .nav-link-tech,
  body.tina-app #randevu .category-section.digital-card,
  body.tina-app #randevu .step-panel:not(.hidden),
  body.tina-app #randevu .category-button,
  body.tina-app #randevu .service-row,
  body.tina-app #randevu .slot-button,
  body.tina-app #randevu .booking-primary,
  body.tina-app #randevu .booking-secondary,
  body.tina-app .hero-btn-primary,
  body.tina-app .hero-btn-secondary,
  body.tina-app .gallery-card,
  body.tina-app #gallery-grid > div,
  body.tina-app .review-card-inner,
  body.tina-app #reviews-track,
  body.tina-app .app-contact-section .group .neon-border {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
 * Rose portrait reference — 2026-08-13
 *
 * Final visual composition for the supplied desktop reference. This layer
 * changes presentation only: content, booking state and navigation semantics
 * continue to come from the existing templates and scripts.
 * ======================================================================== */

body.tina-app {
  --portrait-bg: #100c14;
  --portrait-panel: rgba(29, 21, 30, 0.94);
  --portrait-panel-deep: rgba(16, 12, 20, 0.97);
  --portrait-line: rgba(255, 155, 180, 0.34);
  --portrait-line-soft: rgba(255, 206, 211, 0.13);
  --portrait-rose: #f0809c;
  --portrait-rose-hot: #ff9ab3;
  --portrait-champagne: #f1c4b5;
  --portrait-text: #fff4f1;
  --portrait-muted: #c9b7bc;
  background:
    radial-gradient(42rem 26rem at 1% 0%, rgba(249, 112, 143, 0.18), transparent 68%),
    radial-gradient(36rem 28rem at 97% 38%, rgba(206, 79, 119, 0.075), transparent 74%),
    linear-gradient(145deg, #171019 0%, #0d0b12 44%, #13101a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 164, 182, 0.36),
    inset 0 0 70px rgba(255, 112, 145, 0.035) !important;
}

body.tina-app::before {
  opacity: 0.34 !important;
  background-image:
    radial-gradient(circle at 9% 12%, rgba(255, 170, 190, 0.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 83% 17%, rgba(255, 132, 165, 0.28) 0 1px, transparent 1.8px),
    linear-gradient(rgba(255, 255, 255, 0.009) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px) !important;
  background-size: 89px 89px, 127px 127px, 54px 54px, 54px 54px !important;
}

body.tina-app .app-header.header-tech {
  min-height: 78px;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tina-app .app-header.header-tech::after {
  display: none !important;
}

body.tina-app .app-header-inner,
body.tina-app .app-main,
body.tina-app .app-footer-inner {
  width: calc(100% - 40px) !important;
  max-width: 1400px !important;
}

body.tina-app .app-header-inner {
  min-height: 78px;
  padding-block: 10px !important;
}

body.tina-app .app-brand {
  gap: 0.85rem !important;
}

body.tina-app .app-brand > .relative.w-9 {
  width: 54px !important;
  height: 54px !important;
  border-color: rgba(241, 196, 181, 0.68) !important;
  background: rgba(22, 16, 22, 0.94) !important;
  box-shadow: 0 0 0 1px rgba(255, 145, 174, 0.12), 0 0 24px rgba(241, 116, 149, 0.16) !important;
}

body.tina-app .app-brand h1 {
  color: var(--portrait-champagne) !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
  text-shadow: 0 0 22px rgba(249, 145, 169, 0.16) !important;
}

body.tina-app .app-nav {
  gap: clamp(0.35rem, 1vw, 0.85rem) !important;
  padding: 0.42rem 0.7rem !important;
  border: 1px solid rgba(241, 196, 181, 0.2) !important;
  border-radius: 22px !important;
  background: linear-gradient(120deg, rgba(35, 25, 35, 0.83), rgba(13, 12, 20, 0.91)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

body.tina-app .app-nav .nav-link-tech {
  min-height: 42px;
  padding-inline: clamp(0.82rem, 1.65vw, 1.35rem) !important;
  color: #eadde0 !important;
  font-size: 0.78rem !important;
}

body.tina-app .app-nav .nav-link-tech:first-child,
body.tina-app .app-nav .nav-link-tech:hover {
  border-color: rgba(255, 177, 195, 0.62) !important;
  color: #fff8f5 !important;
  background: linear-gradient(105deg, rgba(204, 83, 119, 0.72), rgba(239, 133, 158, 0.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 22px rgba(239, 105, 143, 0.28) !important;
}

body.tina-app .app-main {
  padding: 2px 0 24px !important;
}

body.tina-app #randevu .booking-app-aura {
  inset: -0.4rem !important;
  background:
    radial-gradient(30rem 15rem at 82% 6%, rgba(255, 133, 162, 0.13), transparent 72%),
    radial-gradient(20rem 20rem at 4% 96%, rgba(241, 116, 149, 0.06), transparent 74%) !important;
}

body.tina-app #randevu #booking-widget.booking-app-shell {
  grid-template-columns: minmax(340px, 36%) minmax(0, 64%) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 9px 10px !important;
  min-height: 530px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tina-app #randevu #booking-widget.booking-app-shell::after {
  right: 2.5%;
  width: min(38rem, 54%);
  background: linear-gradient(90deg, transparent, rgba(255, 133, 162, 0.9), rgba(241, 196, 181, 0.64), transparent);
  box-shadow: 0 0 22px rgba(255, 117, 153, 0.42);
}

body.tina-app #randevu .booking-app-header {
  min-height: 530px;
  justify-content: flex-end !important;
  gap: 0.72rem !important;
  padding: clamp(1.2rem, 2.6vw, 2rem) !important;
  border: 1px solid rgba(255, 169, 187, 0.39) !important;
  border-radius: 23px !important;
  background:
    linear-gradient(180deg, rgba(12, 9, 15, 0.04) 0%, rgba(12, 9, 15, 0.02) 44%, rgba(12, 9, 15, 0.76) 72%, rgba(12, 9, 15, 0.98) 100%),
    linear-gradient(90deg, rgba(221, 83, 120, 0.08), transparent 50%),
    url("../images/salon-woman-hero-20260813.webp") 50% 23% / cover no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 36px rgba(239, 104, 143, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(239, 104, 143, 0.09) !important;
}

body.tina-app #randevu .booking-app-eyebrow {
  align-self: flex-start !important;
  display: block !important;
  width: min-content !important;
  max-width: 10em !important;
  color: transparent !important;
  background: linear-gradient(112deg, #ffe2d5 0%, #f2afa9 48%, #dc768c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.65rem, 4.6vw, 4.8rem) !important;
  font-weight: 500 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase;
  text-shadow: none !important;
}

body.tina-app #randevu .booking-app-eyebrow::after {
  content: "";
  display: block;
  width: 72%;
  height: 1px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, transparent, rgba(255, 146, 171, 0.9), rgba(241, 196, 181, 0.7), transparent);
  box-shadow: 0 0 12px rgba(255, 121, 158, 0.34);
}

body.tina-app #randevu .booking-app-eyebrow-dot {
  display: none !important;
}

body.tina-app #randevu .booking-app-intro {
  color: rgba(255, 244, 241, 0.84) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em;
}

body.tina-app #randevu .booking-progress,
body.tina-app #randevu .booking-app-body {
  border-color: rgba(255, 161, 181, 0.38) !important;
  background:
    radial-gradient(30rem 14rem at 96% 10%, rgba(235, 101, 139, 0.09), transparent 66%),
    linear-gradient(145deg, rgba(34, 25, 35, 0.96), rgba(15, 12, 19, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 28px rgba(239, 112, 145, 0.035),
    0 15px 42px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(241, 108, 144, 0.08) !important;
}

body.tina-app #randevu .booking-progress {
  padding: 0.85rem 1rem 0.72rem !important;
  border-radius: 22px 22px 10px 10px !important;
}

body.tina-app #randevu .booking-progress .step-number {
  border-color: rgba(255, 176, 194, 0.4) !important;
  color: #f4d7d5 !important;
  background: rgba(35, 24, 34, 0.9) !important;
}

body.tina-app #randevu .booking-progress .step-chip[data-state="current"] .step-number,
body.tina-app #randevu .booking-progress .step-chip[data-active="true"] .step-number {
  border-color: rgba(255, 202, 209, 0.86) !important;
  color: white !important;
  background: linear-gradient(145deg, #e66184, #f394a8) !important;
  box-shadow: 0 0 0 1px rgba(255, 208, 215, 0.24), 0 0 24px rgba(247, 105, 143, 0.5) !important;
}

body.tina-app #randevu .booking-progress .step-label {
  color: #e9d9da !important;
}

body.tina-app #randevu .booking-app-body {
  min-height: 439px;
  padding: 0.85rem 1.05rem !important;
  border-radius: 10px 10px 22px 22px !important;
}

body.tina-app #randevu .booking-section-label {
  color: #f2a4b7 !important;
  letter-spacing: 0.18em !important;
}

body.tina-app #randevu .category-section.digital-card {
  margin-bottom: 0.3rem !important;
  border: 1px solid rgba(255, 187, 199, 0.15) !important;
  border-radius: 10px !important;
  background: linear-gradient(100deg, rgba(96, 54, 67, 0.35), rgba(25, 20, 29, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body.tina-app #randevu .category-button {
  min-height: 46px !important;
  border-radius: 10px !important;
}

body.tina-app #randevu .category-icon-shell {
  border-color: rgba(255, 186, 198, 0.28) !important;
  color: #ffd7d8 !important;
  background: linear-gradient(145deg, rgba(231, 122, 146, 0.52), rgba(117, 64, 81, 0.58)) !important;
}

body.tina-app #randevu .category-title-shimmer,
body.tina-app #randevu .service-name {
  color: #fff4f1 !important;
}

body.tina-app #randevu .category-count {
  color: #e4c7ca !important;
  background: rgba(8, 7, 11, 0.3) !important;
}

body.tina-app #randevu .category-button .chevron {
  border-color: rgba(255, 144, 173, 0.72) !important;
  color: #ffb6c6 !important;
  background: rgba(22, 16, 24, 0.76) !important;
}

body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #selected-summary {
  border: 1px solid rgba(255, 166, 185, 0.3) !important;
  background: linear-gradient(90deg, rgba(55, 36, 48, 0.7), rgba(19, 15, 22, 0.92)) !important;
}

body.tina-app #randevu .booking-primary {
  border-color: rgba(255, 214, 217, 0.72) !important;
  color: #fff !important;
  background: linear-gradient(110deg, #d65c7c 0%, #f18aa1 54%, #db6886 100%) !important;
  box-shadow: 0 12px 28px rgba(211, 73, 113, 0.3), 0 0 24px rgba(255, 135, 165, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.tina-app #randevu .booking-secondary {
  border-color: rgba(255, 184, 196, 0.3) !important;
  color: #ead9dc !important;
  background: linear-gradient(120deg, rgba(49, 36, 46, 0.9), rgba(20, 16, 23, 0.92)) !important;
}

body.tina-app .app-hero-section {
  grid-template-columns: minmax(330px, 36%) minmax(0, 64%) !important;
  align-items: stretch !important;
  min-height: 0 !important;
  margin-top: 12px !important;
  padding: 0 !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
}

body.tina-app .app-hero-copy,
body.tina-app .gallery-card,
body.tina-app .app-reviews-section,
body.tina-app .app-contact-section {
  border: 1px solid var(--portrait-line) !important;
  background:
    radial-gradient(28rem 15rem at 0% 0%, rgba(237, 100, 137, 0.1), transparent 70%),
    linear-gradient(145deg, rgba(31, 23, 32, 0.98), rgba(13, 11, 17, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 32px rgba(236, 105, 140, 0.025),
    0 16px 44px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(238, 108, 144, 0.07) !important;
}

body.tina-app .app-hero-copy {
  justify-content: center;
  gap: 0.48rem !important;
  min-width: 0;
  padding: clamp(1.05rem, 2.4vw, 1.7rem) !important;
  overflow: hidden;
  border-radius: 22px !important;
}

body.tina-app .hero-eyebrow {
  align-self: flex-start;
  color: #f0b5bd !important;
  background: rgba(81, 45, 58, 0.35) !important;
}

body.tina-app .hero-title-main {
  color: transparent !important;
  background: linear-gradient(108deg, #ffe0d2, #eba7a6 56%, #d27588) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-size: clamp(2.15rem, 3.4vw, 3.7rem) !important;
}

body.tina-app .hero-title-sub {
  color: #f0d5d0 !important;
  font-size: clamp(0.9rem, 1.25vw, 1.12rem) !important;
}

body.tina-app .hero-lead {
  color: #cdbdc1 !important;
  font-size: 0.74rem !important;
  line-height: 1.55 !important;
}

body.tina-app .hero-tag {
  border-color: rgba(255, 173, 190, 0.2) !important;
  background: rgba(68, 43, 55, 0.3) !important;
}

body.tina-app .hero-note {
  color: #e9a8b6 !important;
}

body.tina-app .hero-btn-primary {
  border-color: rgba(255, 193, 201, 0.5) !important;
  background: linear-gradient(105deg, #bd4f75, #eb7f9a) !important;
}

body.tina-app .hero-btn-secondary {
  border-color: rgba(255, 164, 184, 0.25) !important;
  color: #f3c1c8 !important;
  background: rgba(66, 41, 53, 0.35) !important;
}

body.tina-app .gallery-card {
  min-height: 348px;
  padding: 0.72rem !important;
  border-radius: 22px !important;
}

body.tina-app #gallery-grid {
  gap: 0.48rem !important;
  /* Kutucuklar dikey eksende GERILMEZ. Gerilirlerse yukseklik satirdan
     gelir ve `aspect-ratio` genisligi ondan turetir; kutucuk sutununu
     doldurmayip daralir (olculdu: 109px yerine 89px). `start` ile genislik
     sutundan, yukseklik orandan gelir — istenen sira budur. */
  align-items: start !important;
  align-content: start !important;
}

body.tina-app #gallery-grid > div {
  /* Fotograflarin tamami DIKEY (en/boy 0.46-0.67). 153px'lik kisa kutuda
     `object-fit: cover` yuzlerin ve sac modellerinin buyuk kismini
     kirpiyordu. Kutu yukseltildi: sutun ~109px genisliginde oldugu icin
     oran ~0.57'ye iner, fotograflarin dogal oranina cok yakin.
     Yukseklik ACIK verilir (oran degil): oran + dikey gerilme birlikte
     dairesel cozumleme uretip kutucugu 89px'e dusuruyordu. Acik yukseklik
     "yukseklik gorselden bagimsizdir" guvencesini aynen korur. */
  height: 192px !important;
  border-color: rgba(255, 197, 202, 0.24) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 7px 18px rgba(0, 0, 0, 0.22);
}

body.tina-app #gallery-grid > div:nth-child(n+4) {
  height: 192px !important;
}

body.tina-app #gallery-grid img {
  border-radius: 12px !important;
  filter: saturate(0.9) contrast(1.03) brightness(0.94) sepia(0.035);
}

body.tina-app .gallery-card > .absolute {
  top: 0.55rem !important;
  right: 0.55rem !important;
  border-color: rgba(255, 178, 193, 0.42) !important;
  color: #f8d9d8 !important;
  background: rgba(69, 42, 54, 0.84) !important;
}

body.tina-app .app-content-stack {
  gap: 10px !important;
  margin-top: 10px !important;
}

body.tina-app .app-reviews-section,
body.tina-app .app-contact-section {
  border-radius: 22px !important;
}

body.tina-app .app-reviews-section {
  min-height: 260px;
  padding: 1.05rem 1.15rem !important;
}

body.tina-app .app-reviews-section h2,
body.tina-app .app-contact-section h2 {
  color: #f1c7c2 !important;
  font-size: clamp(2rem, 3vw, 3.15rem) !important;
}

body.tina-app .app-reviews-section .text-center {
  margin-bottom: 0.75rem !important;
}

body.tina-app .app-reviews-section .text-center > .inline-flex,
body.tina-app .app-contact-section .text-center > .inline-flex {
  border-color: rgba(255, 170, 187, 0.36) !important;
  color: #edb3bd !important;
  background: rgba(75, 44, 57, 0.4) !important;
}

body.tina-app .review-card-inner {
  border: 1px solid rgba(255, 165, 184, 0.27) !important;
  background: linear-gradient(115deg, rgba(77, 47, 61, 0.42), rgba(22, 17, 24, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

body.tina-app #prev-review,
body.tina-app #next-review {
  border-color: rgba(255, 169, 188, 0.46) !important;
  color: #ffc1cd !important;
  background: rgba(70, 41, 54, 0.72) !important;
}

body.tina-app .app-contact-section {
  padding: 0.85rem 1rem !important;
}

body.tina-app .app-contact-section > .max-w-7xl {
  grid-template-columns: minmax(410px, 46%) minmax(0, 54%);
  gap: 0.7rem 0.85rem;
}

body.tina-app .app-contact-section > .max-w-7xl > .grid {
  gap: 0.45rem !important;
}

body.tina-app .app-contact-section .group .neon-border {
  min-height: 188px;
  border: 1px solid rgba(255, 170, 188, 0.24) !important;
  background: linear-gradient(140deg, rgba(74, 45, 58, 0.34), rgba(20, 16, 23, 0.94)) !important;
}

body.tina-app .app-contact-section #map {
  min-height: 304px;
}

body.tina-app .app-contact-section #map > .neon-border {
  border-color: rgba(255, 169, 187, 0.45) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 22px rgba(239, 105, 142, 0.09) !important;
}

body.tina-app .app-contact-section #map iframe {
  filter: saturate(0.64) contrast(1.12) brightness(0.63) hue-rotate(305deg) sepia(0.08);
}

body.tina-app .app-footer {
  position: relative;
  min-height: 108px;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 156, 179, 0.26) !important;
  background:
    radial-gradient(12rem 6rem at 50% 0%, rgba(236, 99, 137, 0.11), transparent 74%),
    #0d0b12 !important;
}

body.tina-app .app-footer::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  width: 66px;
  height: 66px;
  transform: translateX(-50%);
  border: 1px solid rgba(241, 196, 181, 0.54);
  border-radius: 50%;
  background: #171019 url("../images/tina-logo-96.png") center / 88% 88% no-repeat;
  box-shadow: 0 0 0 4px rgba(15, 11, 18, 0.9), 0 0 24px rgba(239, 108, 143, 0.23);
  pointer-events: none;
}

body.tina-app .app-footer-inner {
  min-height: 108px;
  padding-top: 2.3rem !important;
  color: #bdaeb4 !important;
}

@media (min-width: 1100px) {
  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) 160px !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container {
    max-height: none;
  }

  body.tina-app #randevu #step1-next {
    min-height: 3.45rem;
  }
}

@media (max-width: 1099px) {
  body.tina-app #randevu #booking-widget.booking-app-shell {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.tina-app #randevu .booking-app-header {
    min-height: clamp(300px, 48vw, 430px);
    background:
      linear-gradient(180deg, rgba(12, 9, 15, 0.05) 0%, rgba(12, 9, 15, 0.16) 48%, rgba(12, 9, 15, 0.94) 100%),
      url("../images/salon-woman-hero-20260813.webp") 50% 20% / cover no-repeat !important;
  }

  body.tina-app .app-hero-section {
    grid-template-columns: 1fr !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.tina-app {
    box-shadow: inset 0 0 0 1px rgba(255, 164, 182, 0.25) !important;
  }

  body.tina-app .app-header-inner,
  body.tina-app .app-main,
  body.tina-app .app-footer-inner {
    width: calc(100% - 12px) !important;
  }

  body.tina-app .app-header.header-tech,
  body.tina-app .app-header-inner {
    min-height: 64px;
  }

  body.tina-app .app-menu-button {
    border-color: rgba(255, 164, 184, 0.42) !important;
    color: #ffd0d4 !important;
    background: rgba(76, 43, 57, 0.45) !important;
    box-shadow: 0 0 18px rgba(239, 105, 142, 0.12) !important;
  }

  body.tina-app #randevu .booking-app-header {
    min-height: 344px;
    padding: 1rem !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(12, 9, 15, 0.04) 0%, rgba(12, 9, 15, 0.16) 48%, rgba(12, 9, 15, 0.97) 100%),
      url("../images/salon-woman-hero-20260813.webp") 50% 16% / cover no-repeat !important;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    max-width: 9em !important;
    font-size: clamp(2.1rem, 11vw, 3rem) !important;
  }

  body.tina-app #randevu .booking-progress,
  body.tina-app #randevu .booking-app-body,
  body.tina-app .app-hero-copy,
  body.tina-app .gallery-card,
  body.tina-app .app-reviews-section,
  body.tina-app .app-contact-section {
    border-radius: 17px !important;
  }

  body.tina-app #randevu .booking-progress {
    padding-inline: 0.3rem !important;
  }

  body.tina-app #randevu .booking-app-body {
    padding: 0.62rem !important;
  }

  body.tina-app #randevu .category-button {
    min-height: 56px !important;
  }

  body.tina-app .app-hero-section {
    margin-top: 8px !important;
    gap: 8px !important;
  }

  body.tina-app .app-hero-copy {
    padding: 1rem !important;
  }

  body.tina-app .gallery-card {
    min-height: 286px;
  }

  /* Galeri fotograflarinin TAMAMI dikeydir (en/boy 0.46-0.67). 118px'lik
     kisa kutuda sutun ~109px genisliginde oldugu icin kutu orani 1.41
     (yatay) oluyordu; `object-fit: cover` fotografin ~%60'ini kirpiyor,
     yuzler ve sac modelleri kadraj disinda kaliyordu. Kutu yukseltildi:
     dar sutunda oran ~0.57, genis sutunda ~0.79 — fotograflarin dogal
     oranina cok daha yakin. Yukseklik ACIK verildigi icin "yukseklik
     gorselden bagimsizdir" guvencesi korunur; gec yuklenen gorsel
     duzeni sisirmez. */
  body.tina-app #gallery-grid > div {
    height: 190px !important;
  }

  body.tina-app #gallery-grid > div:nth-child(n+4) {
    height: 210px !important;
  }

  body.tina-app .app-content-stack {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body.tina-app .app-reviews-section,
  body.tina-app .app-contact-section {
    padding: 0.9rem 0.65rem !important;
  }

  body.tina-app .app-contact-section #map {
    min-height: 270px;
  }

  body.tina-app .app-footer {
    min-height: 118px;
  }
}

@media (max-width: 360px) {
  body.tina-app #randevu .booking-app-header {
    min-height: 318px;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    font-size: 2rem !important;
  }

  body.tina-app .hero-title-main {
    font-size: 2rem !important;
  }

  body.tina-app .app-brand h1 {
    font-size: 1.05rem !important;
  }
}

@media (min-width: 1100px) {
  /* Fill both mosaic rows completely; no empty band between the 3+2 layout. */
  body.tina-app .gallery-card {
    height: clamp(430px, 37.7vw, 543px) !important;
  }

  body.tina-app #gallery-grid {
    align-items: stretch !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tina-app #gallery-grid > div,
  body.tina-app #gallery-grid > div:nth-child(n+4) {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  /* Keep the single editorial review compact like the supplied dashboard. */
  body.tina-app .app-reviews-section .text-center {
    margin-bottom: 0.55rem !important;
  }

  body.tina-app .app-reviews-section .text-center > .inline-flex {
    padding: 0.25rem 0.7rem !important;
    margin-bottom: 0.45rem !important;
  }

  body.tina-app .app-reviews-section h2 {
    font-size: clamp(1.9rem, 2.55vw, 2.55rem) !important;
  }

  body.tina-app .app-reviews-section .text-center > p {
    margin-bottom: 0.45rem !important;
  }

  body.tina-app .app-reviews-section .text-center > a {
    padding: 0.38rem 0.78rem !important;
  }

  body.tina-app .review-card-inner {
    min-height: 0 !important;
    padding: 0.72rem 1rem !important;
  }

  body.tina-app .review-card-inner > .relative.z-10 > :nth-child(1),
  body.tina-app .review-card-inner > .relative.z-10 > :nth-child(2) {
    margin-bottom: 0.4rem !important;
  }

  body.tina-app .review-card-inner > .relative.z-10 > :nth-child(3) {
    margin-bottom: 0.3rem !important;
    font-size: 0.76rem !important;
    line-height: 1.48 !important;
  }

  body.tina-app #reviews-dots {
    margin-top: 0.45rem !important;
  }
}

/* Close the fractional CSS-pixel gap between 1099 and 1100 at browser zoom
   levels where neither integer media query matches. */
@media (max-width: 1099.98px) {
  body.tina-app #randevu #booking-widget.booking-app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    min-height: 0 !important;
  }

  body.tina-app #randevu .booking-app-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.tina-app #randevu .booking-progress {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.tina-app #randevu .booking-app-body {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: static !important;
    inset: auto !important;
  }

  body.tina-app .app-hero-section,
  body.tina-app .app-contact-section > .max-w-7xl {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ========================================================================
 * Supplied 1086 x 1448 reference geometry
 *
 * The reference is already a desktop dashboard at 1086 CSS pixels. Keep the
 * compact two-column composition from 900px upward and reserve the stacked,
 * natural-scroll application layout for phones and portrait tablets only.
 * ======================================================================== */
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.tina-app .app-header-inner,
  body.tina-app .app-main,
  body.tina-app .app-footer-inner {
    width: calc(100% - 8px) !important;
    max-width: none !important;
  }

  body.tina-app .app-main {
    padding: 0 !important;
  }

  body.tina-app .app-nav {
    flex: 0 1 630px !important;
    justify-content: space-between !important;
    max-width: 62% !important;
    gap: 0.12rem !important;
    padding: 0.32rem 0.4rem !important;
  }

  body.tina-app .app-nav .nav-link-tech {
    min-height: 40px !important;
    padding-inline: 0.68rem !important;
    font-size: 0.7rem !important;
  }

  body.tina-app #randevu #booking-widget.booking-app-shell {
    display: grid !important;
    grid-template-columns: minmax(350px, 36.5%) minmax(0, 63.5%) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    min-height: 430px !important;
  }

  body.tina-app #randevu .booking-app-header {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-height: 430px !important;
    padding: 1.35rem !important;
    background:
      linear-gradient(180deg, rgba(12, 9, 15, 0.04) 0%, rgba(12, 9, 15, 0.05) 44%, rgba(12, 9, 15, 0.78) 74%, rgba(12, 9, 15, 0.98) 100%),
      linear-gradient(90deg, rgba(221, 83, 120, 0.08), transparent 50%),
      url("../images/salon-woman-hero-20260813.webp") 50% 22% / cover no-repeat !important;
  }

  body.tina-app #randevu .booking-app-eyebrow {
    font-size: clamp(2.7rem, 5vw, 3.65rem) !important;
  }

  body.tina-app #randevu .booking-progress {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 80px !important;
    padding: 0.72rem 0.8rem 0.6rem !important;
  }

  body.tina-app #randevu .booking-app-body {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 342px !important;
    padding: 0.72rem 0.85rem !important;
    overflow: visible !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 148px !important;
    gap: 0.7rem !important;
  }

  /* Tablet/küçük dizüstü de tek panel modelinde: kutu içi kaydırma yok. */
  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: relative !important;
    inset: auto !important;
  }

  body.tina-app .app-hero-section {
    display: grid !important;
    grid-template-columns: minmax(350px, 36.5%) minmax(0, 63.5%) !important;
    gap: 10px !important;
    height: 356px !important;
    margin-top: 8px !important;
  }

  body.tina-app .app-hero-copy,
  body.tina-app .gallery-card {
    min-height: 0 !important;
    height: 356px !important;
  }

  body.tina-app .app-hero-copy {
    justify-content: flex-start !important;
    gap: 0.32rem !important;
    padding: 0.82rem 1.05rem !important;
  }

  body.tina-app .app-hero-copy > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.32rem !important;
  }

  body.tina-app .app-hero-copy #animated-title {
    margin-bottom: 0 !important;
  }

  body.tina-app .app-hero-copy .hero-title-main {
    font-size: clamp(2rem, 3.75vw, 2.72rem) !important;
    line-height: 0.92 !important;
  }

  body.tina-app .app-hero-copy .hero-title-sub {
    margin-top: 0.2rem !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  body.tina-app .app-hero-copy .hero-copy {
    margin-block: 0 !important;
  }

  body.tina-app .app-hero-copy .hero-lead {
    font-size: 0.66rem !important;
    line-height: 1.4 !important;
  }

  body.tina-app .app-hero-copy .hero-tags {
    gap: 0.28rem !important;
    margin-top: 0.38rem !important;
  }

  body.tina-app .app-hero-copy .hero-tag {
    padding: 0.24rem 0.48rem !important;
    font-size: 0.62rem !important;
  }

  body.tina-app .app-hero-copy .hero-note {
    margin-top: 0.38rem !important;
    font-size: 0.62rem !important;
  }

  body.tina-app .app-hero-copy > .flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
  }

  body.tina-app .app-hero-copy > .flex.flex-wrap > a {
    justify-content: center !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    padding: 0.48rem 0.42rem !important;
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }

  body.tina-app .app-hero-copy > .flex.flex-wrap > a svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
    flex: 0 0 auto !important;
  }

  body.tina-app .hero-title-main {
    font-size: clamp(2.25rem, 4.1vw, 3.05rem) !important;
  }

  body.tina-app .gallery-card {
    padding: 0.62rem !important;
  }

  body.tina-app #gallery-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    height: 100% !important;
  }

  body.tina-app #gallery-grid > div,
  body.tina-app #gallery-grid > div:nth-child(n+4) {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  body.tina-app .app-content-stack {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body.tina-app .app-reviews-section {
    min-height: 228px !important;
    height: auto !important;
    padding: 0.72rem 0.95rem !important;
    overflow: visible !important;
  }

  body.tina-app .app-reviews-section .text-center {
    margin-bottom: 0.38rem !important;
  }

  body.tina-app .app-reviews-section .text-center > .inline-flex {
    margin-bottom: 0.25rem !important;
  }

  body.tina-app .app-reviews-section h2 {
    font-size: clamp(1.65rem, 2.7vw, 2.1rem) !important;
    line-height: 1 !important;
  }

  body.tina-app .app-reviews-section .text-center > p {
    margin-bottom: 0.25rem !important;
  }

  body.tina-app .app-reviews-section .text-center > a {
    padding: 0.28rem 0.68rem !important;
  }

  body.tina-app .review-card-inner {
    padding: 0.55rem 0.8rem !important;
  }

  body.tina-app #reviews-dots {
    margin-top: 0.28rem !important;
  }

  body.tina-app .app-contact-section {
    min-height: 242px !important;
    height: 242px !important;
    padding: 0.48rem 0.6rem !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl {
    grid-template-columns: minmax(430px, 46%) minmax(0, 54%) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100% !important;
    gap: 0.55rem 0.7rem !important;
  }

  body.tina-app .app-contact-section .text-center {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }

  body.tina-app .app-contact-section .text-center > .inline-flex {
    margin-bottom: 0.08rem !important;
    padding: 0.22rem 0.55rem !important;
    font-size: 0.62rem !important;
  }

  body.tina-app .app-contact-section h2 {
    font-size: clamp(1.7rem, 2.7vw, 2.15rem) !important;
    line-height: 1 !important;
    margin-bottom: 0.08rem !important;
  }

  body.tina-app .app-contact-section .text-center > p {
    margin: 0 !important;
    font-size: 0.66rem !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl > .grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  body.tina-app .app-contact-section > .max-w-7xl > .grid > .group {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.tina-app .app-contact-section .group .neon-border {
    min-height: 0 !important;
    height: 100% !important;
    padding: 0.38rem !important;
    overflow: hidden !important;
  }

  body.tina-app .app-contact-section .group .neon-border > .flex:first-child {
    min-height: 0 !important;
    margin-bottom: 0.18rem !important;
  }

  body.tina-app .app-contact-section .group .neon-border > .flex:first-child > span {
    gap: 0.18rem !important;
    padding: 0.12rem 0.28rem !important;
    font-size: 0.52rem !important;
    line-height: 1.15 !important;
  }

  body.tina-app .app-contact-section .group .neon-border .w-14.h-14 {
    width: 1.8rem !important;
    height: 1.8rem !important;
    margin-bottom: 0.2rem !important;
  }

  body.tina-app .app-contact-section .group .neon-border .w-7.h-7 {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }

  body.tina-app .app-contact-section .group .neon-border p,
  body.tina-app .app-contact-section .group .neon-border a {
    font-size: 0.57rem !important;
    line-height: 1.3 !important;
  }

  body.tina-app .app-contact-section .group .neon-border a.text-2xl {
    margin-bottom: 0.16rem !important;
    font-size: 0.78rem !important;
  }

  body.tina-app .app-contact-section #map {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }

  body.tina-app .app-contact-section #map > .neon-border > div:last-child {
    min-height: 0 !important;
  }

  body.tina-app .app-footer,
  body.tina-app .app-footer-inner {
    min-height: 80px !important;
  }

  body.tina-app .app-footer {
    margin-top: 8px !important;
  }

  body.tina-app .app-footer-inner {
    padding-top: 1.8rem !important;
  }
}

@media (min-width: 1100px) {
  body.tina-app .app-header-inner,
  body.tina-app .app-main,
  body.tina-app .app-footer-inner {
    width: calc(100% - 8px) !important;
    max-width: 1440px !important;
  }

  body.tina-app .app-main {
    padding: 0 !important;
  }

  body.tina-app #randevu #booking-widget.booking-app-shell {
    min-height: clamp(435px, 38.35vw, 552px) !important;
  }

  body.tina-app #randevu .booking-app-header {
    min-height: clamp(435px, 38.35vw, 552px) !important;
  }

  body.tina-app #randevu .booking-app-body {
    min-height: clamp(347px, calc(38.35vw - 88px), 464px) !important;
  }

  body.tina-app .app-hero-section,
  body.tina-app .app-hero-copy,
  body.tina-app .gallery-card {
    height: clamp(356px, 32.8vw, 470px) !important;
    min-height: 0 !important;
  }

  body.tina-app .app-content-stack {
    gap: clamp(8px, 0.7vw, 10px) !important;
    margin-top: clamp(8px, 0.7vw, 10px) !important;
  }

  body.tina-app .app-reviews-section {
    min-height: clamp(232px, 21.1vw, 304px) !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.tina-app .app-contact-section {
    min-height: clamp(246px, calc(25.7vw - 37px), 333px) !important;
    height: clamp(246px, calc(25.7vw - 37px), 333px) !important;
  }

  body.tina-app .app-footer,
  body.tina-app .app-footer-inner {
    min-height: clamp(82px, 7.5vw, 108px) !important;
  }
}

/* Touch tablets keep the same dashboard composition without reintroducing
   nested vertical scrollers. Finger gestures always belong to the document. */
@media (min-width: 900px) and (max-width: 1099.98px) and (hover: none) and (pointer: coarse) {
  body.tina-app #randevu .booking-app-body {
    overflow: visible !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: static !important;
    inset: auto !important;
  }
}

@media (min-width: 900px) and (max-width: 1099.98px) and (hover: none) and (any-pointer: coarse),
       (min-width: 900px) and (max-width: 1099.98px) and (any-hover: none) and (pointer: coarse) {
  body.tina-app #randevu .booking-app-body {
    overflow: visible !important;
  }

  body.tina-app #randevu .step-panel[data-step="1"]:not(.hidden) #category-container,
  body.tina-app #randevu .category-services:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="2"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="3"]:not(.hidden),
  body.tina-app #randevu .step-panel[data-step="4"]:not(.hidden) {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  body.tina-app #randevu .booking-actions {
    position: static !important;
    inset: auto !important;
  }
}