/* === styles.css === */
:root{--paper:#f7f4ef;--ink:#302b25;--muted:#766f64;--gold:#9b7850;--line:#dbd4c9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{outline-offset:5px}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}.demo{background:#342e28;color:#e4d9c8;padding:8px 5%;font-size:10px;letter-spacing:1.8px;display:flex;justify-content:space-between}.demo span{letter-spacing:.4px;opacity:.7}header{display:flex;align-items:center;justify-content:space-between;padding:24px 5%;gap:24px}.brand{font:28px Georgia,serif;letter-spacing:6px}.brand small{display:block;font:9px Arial,sans-serif;letter-spacing:3px;text-align:center;margin-top:6px}nav{display:flex;gap:32px;font-size:13px}.pill{border:1px solid var(--line);border-radius:30px;padding:12px 22px;font-size:12px}.hero{display:grid;grid-template-columns:1fr 1fr;padding:28px 5% 60px;gap:5%;align-items:center}.eyebrow{font-size:10px;letter-spacing:2.7px;color:var(--gold);font-weight:bold}h1,h2,h3{font-family:Georgia,serif;font-weight:normal;line-height:1.07;margin:22px 0}h1{font-size:clamp(50px,6.3vw,96px);letter-spacing:-4px}em{font-weight:normal;color:var(--gold)}.hero-copy>p{color:var(--muted);line-height:1.9;margin:30px 0}.dark-button,.light-button{display:inline-flex;justify-content:space-between;gap:32px;padding:17px 25px;border:none;background:var(--ink);color:white;font-size:12px}.hero-foot{margin-top:55px;display:flex;align-items:center;gap:20px;font-size:9px;letter-spacing:1.6px}.hero-foot i{color:var(--gold);font-size:20px}.hero-art{height:570px;position:relative;border-radius:220px 220px 8px 8px}.hero-art>img{border-radius:inherit;object-position:60% center}.hero-art:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 60%,#211b15a1)}.image-label{position:absolute;bottom:25px;left:30px;color:white;letter-spacing:2px;font-size:9px;z-index:1}.image-label span{display:block;font:23px Georgia,serif;letter-spacing:0;margin-top:8px}.circle{position:absolute;right:28px;left:auto;bottom:28px;border-radius:50%;background:#e9ddca;width:110px;height:110px;display:grid;place-content:center;text-align:center;font-size:10px;letter-spacing:1px;line-height:1.8;z-index:1}.ribbon{background:#e8dfd0;border-block:1px solid #d9ccb8;overflow:hidden;padding:16px 0;color:#6c5942}.ribbon>div{white-space:nowrap;width:max-content;font:20px Georgia,serif;word-spacing:12px;animation:marquee 38s linear infinite}@keyframes marquee{to{transform:translateX(-35%)}}.services,.approach{padding:90px 5%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}h2{font-size:clamp(35px,4.3vw,64px);letter-spacing:-1.7px}.section-heading p{color:var(--muted);font-size:13px}.category-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);overflow-x:auto}.category-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:15px 2px;white-space:nowrap;font:21px Georgia,serif}.category-tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--gold)}.selection{display:flex;justify-content:space-between;align-items:center;margin-top:24px;color:var(--muted);font-size:12px;gap:16px}.selection input{background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px;max-width:220px;font-size:12px}#status{font-size:11px;color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 25px}.service-card{border:0;background:none;padding:0;text-align:left;color:var(--ink)}.card-picture{height:275px;overflow:hidden;position:relative;border-radius:4px}.card-picture img{transition:transform .65s}.service-card:hover img{transform:scale(1.055)}.card-picture span{position:absolute;bottom:12px;left:12px;background:#f7f4efe8;font-size:9px;letter-spacing:1px;padding:5px 10px}.card-title{display:flex;justify-content:space-between;align-items:center;padding-top:13px}.card-title h3{font-size:23px;margin:0}.card-title b{font-size:22px;font-weight:normal;color:var(--gold)}.service-card p{font-size:11px;color:var(--muted);margin:5px 0}.special{display:grid;grid-template-columns:1fr 1fr;background:#342e28;color:var(--paper);margin:0 5%}.special-image{min-height:570px}.special-copy{padding:65px 14%}.special-copy .eyebrow,.special-copy em{color:#cbb08c}.special-copy p{color:#cec6bb;font-size:13px;margin:28px 0}.light-button{background:#e8dfd0;color:var(--ink)}.approach{text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);text-align:left;gap:50px;margin-top:55px}.steps article{border-top:1px solid var(--line);padding-top:20px}.steps span{font-size:10px;letter-spacing:1.5px;color:var(--gold)}.steps h3{font-size:25px}.steps p{color:var(--muted);font-size:13px}.closing{text-align:center;background:#eae2d7;padding:65px 20px}.closing p{font-size:11px;color:var(--muted);margin-top:22px}footer{padding:45px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px}footer p,footer>span{font-size:10px;color:var(--muted)}dialog{border:0;padding:0;width:min(850px,92vw);background:var(--paper);color:var(--ink);max-height:90vh;overflow:auto}dialog::backdrop{background:#211b15bd;backdrop-filter:blur(5px)}dialog>img{height:330px}dialog .close{position:absolute;right:12px;top:12px;border:0;border-radius:50%;background:white;width:40px;height:40px;font-size:28px}.dialog-copy{padding:30px}.dialog-copy h2{font-size:40px}.demo-note,details{font-size:12px;color:var(--muted)}summary{cursor:pointer}.service-card{animation:appear .5s both}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-width:800px){nav{display:none}.hero{gap:30px}.hero-art{height:440px}.hero-foot{gap:8px;letter-spacing:0}h1{letter-spacing:-2px}.service-grid{grid-template-columns:repeat(2,1fr)}.special-copy{padding:35px}.special-image{min-height:450px}.steps{gap:20px}.demo{font-size:8px}}@media(max-width:560px){header{padding:22px 6%}.brand{font-size:23px}.pill{padding:10px;font-size:10px}.demo span{display:none}.hero{grid-template-columns:1fr;padding:25px 6% 35px}.hero h1{font-size:61px}.hero-copy>p{margin:20px 0}.hero-foot{margin-top:25px;gap:18px}.hero-art{height:390px;margin-left:18px}.circle{width:90px;height:90px;left:-20px;font-size:8px}.services,.approach{padding:55px 6%}.section-heading{display:block}.category-tabs{gap:24px}.category-tabs button{font-size:21px}.selection{align-items:start;flex-direction:column}.service-grid{gap:25px 14px}.card-picture{height:180px}.card-title h3{font-size:19px}.special{grid-template-columns:1fr}.special-image{min-height:0;height:370px}.special-copy{padding:35px}.steps{grid-template-columns:1fr;gap:20px}.steps h3{margin:14px 0}.closing h2{font-size:39px}footer{align-items:start;flex-direction:column}dialog>img{height:240px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* === before-after.css === */
.before-after{padding:80px 5%;background:#efe8de}.ba-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}.ba-heading p{font:13px/1.8 Arial,sans-serif;color:#766f64}.ba-stage{--split:50%;position:relative;height:480px;overflow:hidden;border-radius:8px;background:#ddd5c9}.ba-layer{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(130deg,#dfd7cb,#eae3d8);color:#8d7c65;font:italic 26px Georgia,serif}.ba-after{clip-path:inset(0 0 0 var(--split));background:linear-gradient(130deg,#d5c8b6,#ece4d7)}.ba-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.ba-layer img[hidden],.ba-layer span[hidden]{display:none}.ba-before>span{position:absolute;left:12%}.ba-after>span{position:absolute;right:12%}.ba-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:white;transform:translateX(-50%);pointer-events:none}.ba-divider b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;background:#fffcf5;border-radius:50%;box-shadow:0 3px 15px #302b2525;font:25px Arial,sans-serif;color:#806344}.ba-tag{position:absolute;top:20px;background:#fffaf0e8;padding:8px 13px;letter-spacing:2px;font:10px Arial,sans-serif;border-radius:3px;pointer-events:none}.ba-tag-left{left:20px}.ba-tag-right{right:20px}.ba-slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}.ba-stage:focus-within{outline:2px solid #927046;outline-offset:4px}.ba-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:18px}.ba-title{font:24px Georgia,serif;margin:0}.ba-nav{display:flex;align-items:center;gap:15px;font:12px Arial,sans-serif}.ba-nav button{width:40px;height:40px;border:1px solid #cdbcaa;background:transparent;border-radius:50%;font-size:20px}.ba-local{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.ba-local label{cursor:pointer;border:1px solid #cdbcaa;padding:10px 16px;font:12px Arial,sans-serif}.ba-local input{display:block;max-width:210px;margin-top:10px;font-size:11px}.ba-local small{width:100%;font:11px/1.6 Arial,sans-serif;color:#766f64}.ba-status{font:12px Arial,sans-serif;color:#766f64}.ba-nav[hidden],.ba-local[hidden],.before-after[hidden]{display:none}@media(max-width:560px){.before-after{padding:50px 6%}.ba-heading{display:block}.ba-stage{height:360px}.ba-layer{font-size:18px}.ba-before>span{left:5%}.ba-after>span{right:5%}.ba-tag{top:12px;padding:7px;font-size:9px}.ba-tag-left{left:12px}.ba-tag-right{right:12px}.ba-title{font-size:21px}}

/* === before-after-gallery.css === */
.ba-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.ba-card{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}.ba-card .ba-stage{height:auto;aspect-ratio:4/5;border-radius:130px 130px 8px 8px;transition:transform .25s}.ba-card:hover .ba-stage{transform:translateY(-5px)}.ba-card .ba-layer img{object-fit:cover}.ba-card .ba-tag{top:auto;bottom:18px;font-size:9px;padding:7px}.ba-card .ba-tag-left{left:12px}.ba-card .ba-tag-right{right:12px}.ba-card .ba-divider b{width:34px;height:34px;font-size:20px}.ba-caption{display:flex;justify-content:space-between;padding:18px 2px;font:23px Georgia,serif}.ba-caption span{color:#a48155}.ba-modal{width:min(940px,94vw);max-width:94vw;max-height:94dvh;box-sizing:border-box;border:0;border-radius:14px;padding:52px 24px 18px;background:#f6f2eb;color:#302b25;overflow:auto}.ba-modal::backdrop{background:#191511d9;backdrop-filter:blur(6px)}.ba-modal .ba-stage{height:min(62dvh,590px)}.ba-modal .ba-close{position:absolute;right:14px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#e7dfd2;font-size:26px;cursor:pointer}.ba-modal>p{font:12px Arial,sans-serif;color:#766f64}.ba-modal .ba-nav button{cursor:pointer}.ba-card:focus-visible{outline:2px solid #927046;outline-offset:6px}@media(max-width:700px){.ba-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ba-caption{font-size:19px}.ba-modal{padding:48px 12px 12px}.ba-modal .ba-title{font-size:20px}}@media(max-width:440px){.ba-gallery{grid-template-columns:1fr}.ba-card .ba-stage{aspect-ratio:1/1}}@media(prefers-reduced-motion:reduce){.ba-card .ba-stage{transition:none}}
.ba-modal>.ba-nav{justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#dbd4c9)}.ba-modal>.ba-nav button{width:44px;height:44px}
.ba-modal .ba-divider b{top:auto;bottom:18px;transform:translateX(-50%)}

/* === category-selector.css === */
/* Wrapping editorial category tiles: all services remain visible without scrolling. */
.category-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;overflow:visible;border:0;padding:8px 0 18px}
.category-tabs button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:66px;padding:18px 16px;border:1px solid #dfd4c6;border-radius:8px;background:#f0e9df;color:#675b4b;white-space:normal;text-align:left;font:21px/1.2 Georgia,serif;transition:background .2s,color .2s,border-color .2s,transform .2s}
.category-tabs button::after{content:'↗';font:18px Arial,sans-serif;color:#a58a65;flex-shrink:0}
.category-tabs button:hover{background:#e8ddce;border-color:#c3ae90;transform:translateY(-2px)}
.category-tabs button[aria-pressed=true]{background:#342e28;color:#fff8ee;border-color:#342e28;box-shadow:0 5px 15px #342e2812}
.category-tabs button[aria-pressed=true]::after{content:'✧';color:#dcc5a5}
.category-tabs button:focus-visible{outline:2px solid #927046;outline-offset:3px}
@media(max-width:700px){.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.category-tabs button{font-size:19px;padding:16px 12px;min-height:62px}}
@media(max-width:420px){.category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tabs button{font-size:20px}}
@media(prefers-reduced-motion:reduce){.category-tabs button{transition:none}.category-tabs button:hover{transform:none}}

/* === hero-categories.css === */
.hero-foot{display:flex;flex-wrap:wrap;gap:12px 0;line-height:1.7;max-width:100%;margin-top:24px}
.hero-foot a{display:inline-flex;align-items:center;gap:12px;margin-right:12px;text-transform:uppercase;font-size:12px;letter-spacing:1px;white-space:nowrap}
.hero-foot a:not(:last-child)::after{content:'✧';color:var(--gold);font-size:18px;line-height:1}
.hero-foot a:hover{color:var(--gold)}
.hero-foot a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* === social.css === */
.social-section{padding:65px 5%;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;background:#f2ece3}.social-section p{color:#766f64;font-size:13px}.social-actions{display:flex;flex-direction:column;gap:14px}.social-actions>a,.social-actions>button,.detail-whatsapp{display:flex;align-items:center;gap:16px;padding:18px 24px;border:1px solid #d6cbbb;background:transparent;color:#302b25;text-decoration:none;font:14px Arial,sans-serif}.social-actions svg,.footer-social svg,.floating-whatsapp svg,.detail-whatsapp svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}.social-actions .social-instagram{background:#342e28;color:#fff;border-color:#342e28}.social-actions .social-whatsapp,.detail-whatsapp{color:#215941;border-color:#adc2b3}.social-actions>a:hover,.social-actions>button:hover{filter:brightness(.94)}.social-status{min-height:20px;margin:0}.floating-whatsapp{position:fixed;right:24px;bottom:24px;z-index:10;display:flex;align-items:center;gap:10px;padding:15px 20px;background:#23654a;color:white;border-radius:32px;box-shadow:0 5px 24px #153b3330;font:13px Arial,sans-serif;text-decoration:none}.footer-social{display:flex;gap:18px}.footer-social a{display:flex;gap:8px;align-items:center;font-size:11px}.detail-whatsapp{margin-top:25px;justify-content:center}body:has(dialog[open]) .floating-whatsapp{visibility:hidden}@media(max-width:600px){.social-section{grid-template-columns:1fr;padding:45px 6%;gap:15px}.floating-whatsapp{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:13px 16px}footer{padding-bottom:100px}}

/* === online-booking.css === */
/* Online Randevu / Booking Component Styles */
:root {
  --muted: #786d63;
  --gold-light: rgba(155, 118, 83, 0.08);
  --gold-hover: #866547;
  --danger: #c0392b;
  --danger-bg: #fdf3f2;
}

.online-booking {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 80px 5% 40px !important;
  box-sizing: border-box !important;
}

.online-booking .booking-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--line);
  background: var(--surface, var(--paper));
  border-radius: 24px;
  color: var(--ink);
  box-shadow: 0 16px 40px -12px rgba(47, 41, 36, 0.07);
  transition: box-shadow 0.3s ease;
}

.online-booking .booking-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 24px;
}

.online-booking .booking-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.online-booking .booking-date-header strong {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.online-booking .booking-date-header button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.online-booking .booking-date-header button:hover:not(:disabled) {
  background: var(--gold-light);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.online-booking .booking-days {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.online-booking .booking-choice {
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.online-booking .booking-choice:hover:not(:disabled):not([aria-pressed=true]) {
  background: var(--gold-light);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}

.online-booking .booking-choice[aria-pressed=true] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(47, 41, 36, 0.25);
  font-weight: 600;
}

.online-booking .booking-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 4px;
  gap: 4px;
  border-radius: 14px;
}

.online-booking .booking-day span {
  font-size: 22px;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1;
}

.online-booking .booking-day small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.online-booking .booking-times,
.online-booking .booking-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
}

.online-booking .booking-times .booking-choice {
  border-radius: 50px;
  padding: 10px 20px;
}

.online-booking .booking-parts .booking-choice {
  border-radius: 12px;
  padding: 12px 20px;
}

.online-booking .booking-select,
.online-booking .booking-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 600px;
}

.online-booking input,
.online-booking select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.online-booking input:focus,
.online-booking select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(155, 118, 83, 0.15);
  outline: none;
}

.online-booking fieldset {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 24px 0;
}

.online-booking legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0;
  margin-bottom: 8px;
}

.online-booking .booking-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 0 auto;
  padding: 14px 32px;
  background: var(--gold);
  color: #ffffff;
  border: 1px solid var(--gold);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px -4px rgba(155, 118, 83, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.online-booking .booking-action:hover:not(:disabled) {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(155, 118, 83, 0.45);
}

.online-booking .booking-action:active:not(:disabled) {
  transform: translateY(0);
}

.online-booking .booking-back {
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.online-booking .booking-back:hover {
  color: var(--ink);
  transform: translateX(-3px);
}

.online-booking .booking-error {
  font-size: 14px;
  line-height: 1.6;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(192, 57, 43, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  font-weight: 500;
}

.online-booking .booking-summary {
  line-height: 1.8;
  font-size: 14px;
  padding: 16px;
  background: var(--gold-light);
  border: 1px dashed var(--line);
  border-radius: 12px;
  margin: 18px 0;
}

.online-booking .booking-turnstile-box {
  margin: 20px 0 16px;
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.online-booking .booking-otp-box {
  margin-top: 24px;
  padding: 24px;
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}

.online-booking .booking-otp-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.online-booking .booking-otp-hint {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

.online-booking .booking-otp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #128c7e;
  background: rgba(18, 140, 126, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.online-booking .booking-code-input {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 16px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  padding: 12px 14px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  transition: all 0.2s ease;
}

.online-booking .booking-code-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(155, 118, 83, 0.2);
  outline: none;
}

.online-booking .booking-resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.online-booking .booking-resend-btn {
  background: none;
  border: 0;
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.online-booking .booking-resend-btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.7;
}

.online-booking .booking-edit-phone-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: underline;
  display: inline-block;
}

.online-booking button:focus-visible,
.online-booking input:focus-visible,
.online-booking select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.online-booking button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.online-booking [hidden] {
  display: none !important;
}

dialog.booking-received,
.online-booking .booking-received,
.booking-received {
  box-sizing: border-box;
  width: min(500px, 92vw);
  margin: auto;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface, var(--paper));
  color: var(--ink);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

dialog.booking-received[open] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  z-index: 100000 !important;
}

.booking-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 36px) clamp(16px, 3vw, 28px);
  box-sizing: border-box;
  animation: popIn 0.3s ease;
}

.booking-success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2);
}

.booking-success-title {
  font-size: clamp(22px, 3.5vw, 28px);
  font-family: Georgia, serif;
  color: var(--ink);
  margin: 0 0 10px;
  text-align: center;
}

.booking-success-msg {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: center;
}

.booking-success-details {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 24px;
  margin: 0 auto 20px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
}

.booking-success-details strong {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.booking-success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(37, 211, 102, 0.12);
  color: #128c7e;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

.booking-success-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.booking-wa-redirect-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 36px) clamp(16px, 3vw, 28px);
  box-sizing: border-box;
  animation: popIn 0.3s ease;
}

.booking-wa-icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

.booking-wa-title {
  font-size: clamp(22px, 3.5vw, 28px);
  font-family: Georgia, serif;
  color: var(--ink);
  margin: 0 0 10px;
  text-align: center;
}

.booking-wa-msg {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: center;
}

.booking-wa-summary {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 24px;
  margin: 0 auto 18px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
}

.booking-wa-summary strong {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.booking-wa-preview {
  background: #f0faf4;
  border: 1.5px dashed #25D366;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 auto 22px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.booking-wa-preview-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #128C7E;
  margin-bottom: 6px;
}

.booking-wa-preview-text {
  font-size: 14.5px;
  color: #143d26;
  font-style: italic;
  line-height: 1.55;
}

.booking-wa-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
}

.booking-wa-direct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 30px;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.42);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  cursor: pointer;
}

.booking-wa-direct-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 28px rgba(37, 211, 102, 0.6);
  background: #20bd5a;
}


@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

dialog.booking-received::backdrop,
.online-booking .booking-received::backdrop,
.booking-received::backdrop {
  background: rgba(35, 30, 26, 0.55);
  backdrop-filter: blur(6px);
}

dialog.booking-received h3,
.online-booking .booking-received h3,
.booking-received h3 {
  margin-top: 0;
  font-size: 24px;
  font-family: Georgia, serif;
  line-height: 1.3;
  color: var(--ink);
}

dialog.booking-received p,
.online-booking .booking-received p,
.booking-received p {
  line-height: 1.7;
  font-size: 15px;
  color: var(--muted);
  margin: 12px 0 24px;
}

dialog.booking-received .booking-action,
.online-booking .booking-received .booking-action,
.booking-received .booking-action {
  margin: 0 auto;
}

@media (max-width: 600px) {
  .online-booking .booking-card {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .online-booking .booking-days {
    gap: 6px;
  }
  .online-booking .booking-day {
    padding: 10px 2px;
  }
  .online-booking .booking-day span {
    font-size: 18px;
  }
  .online-booking .booking-day small {
    font-size: 9px;
  }
  .online-booking .booking-action {
    width: 100%;
    margin-top: 20px;
  }
}

@media (max-width: 400px) {
  .online-booking .booking-days {
    gap: 4px;
  }
  .online-booking .booking-choice {
    font-size: 12px;
  }
  .online-booking .booking-day {
    padding: 8px 2px;
  }
}

.online-booking .booking-times .booking-custom-btn {
  border-style: dashed;
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
  font-weight: 600;
}
.online-booking .booking-times .booking-custom-btn:hover {
  background: var(--surface);
  border-color: var(--gold);
}
.online-booking .booking-custom-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 50px;
}
.online-booking .booking-custom-picker-wrap select.booking-custom-select {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
}
.online-booking .booking-custom-picker-wrap select.booking-custom-select:focus {
  border-color: var(--gold);
}
.online-booking .booking-custom-colon {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  padding: 0 2px;
}
.online-booking .booking-custom-picker-wrap button {
  border: none;
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: all 0.2s ease;
}
.online-booking .booking-custom-picker-wrap button.booking-custom-cancel {
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 14px;
}
.online-booking .booking-custom-picker-wrap button.booking-custom-cancel:hover {
  color: var(--ink);
}
.online-booking .booking-empty-hint {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 12px;
  border: 1px dashed var(--line);
  margin: 12px 0 20px;
}

/* === editor.css === */
html{background:var(--paper)}body{margin:0}header{border-bottom:1px solid var(--line)}header .brand{max-width:65%;overflow-wrap:anywhere;font-size:24px}.hero h1{font-size:clamp(44px,9vw,72px);line-height:1.04}.hero-art{padding:0!important;display:block!important;position:relative;background:var(--surface)!important;border-radius:180px 180px 12px 12px;overflow:hidden}.hero-art>img{width:100%;height:100%;object-fit:cover}.hero-art .circle{left:16px;bottom:16px;top:auto;background:var(--paper);color:var(--ink)}.hero-foot{font-size:11px;line-height:2;color:var(--gold)}.service-card{padding:0!important;border:0!important}.service-card>img{height:240px!important;border-radius:70px 70px 8px 8px!important;background:var(--surface)}.service-card h3{font:24px/1.2 Georgia,serif;margin:14px 0}.service-card>button{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 14px;border-radius:24px}.category-tabs button{background:var(--surface);color:var(--ink);border-color:var(--line)}.category-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.special-copy{border-radius:16px}.special-copy>img{width:100%;height:280px;object-fit:cover;border-radius:140px 140px 8px 8px;margin-bottom:28px}.closing{background:var(--surface)}.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}.branch-card{padding:22px!important;border:1px solid var(--line)!important;border-radius:16px;background:var(--surface);min-width:0}.branch-card h3{font:28px Georgia,serif;margin:0 0 18px}.branch-card p{overflow-wrap:anywhere;color:var(--muted)}.branch-card iframe{margin:12px 0}.branch-card .dark-button{width:100%;border:0;border-radius:8px;background:var(--ink);color:var(--paper)}footer{border-top:1px solid var(--line)}@media(max-width:420px){.service-card>img{height:190px!important}.service-card h3{font-size:21px}.branch-grid{grid-template-columns:1fr}.hero-art{height:360px}}

/* === ribbons.css === */
.website-ribbon{overflow:hidden;background:var(--surface);border-block:1px solid var(--line);padding:20px 0;color:var(--gold)}.website-ribbon-track{display:flex;width:max-content;animation:website-flow 65s linear infinite}.website-ribbon-track span{flex:none;white-space:nowrap;font:24px Georgia,serif;padding-right:24px}.website-ribbon.reverse .website-ribbon-track{animation-direction:reverse}.website-ribbon:hover .website-ribbon-track{animation-play-state:paused}@keyframes website-flow{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.website-ribbon-track{animation:none;width:auto}.website-ribbon-track span{white-space:normal}.website-ribbon-track span[aria-hidden]{display:none}}

/* === gallery-cards.css === */
/* Compact arched previews; the comparison dialog remains full-size. */
#website-gallery.ba-gallery{grid-template-columns:repeat(auto-fit,minmax(140px,240px));justify-content:center;gap:20px;margin-top:28px}
#website-gallery .ba-card{max-width:240px;min-width:0}
#website-gallery .ba-card .ba-stage{height:auto;aspect-ratio:4/5;border-radius:120px 120px 8px 8px}
#website-gallery .ba-caption{font-size:18px;padding:12px 2px}
@media(max-width:440px){#website-gallery.ba-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#website-gallery .ba-card .ba-stage{aspect-ratio:4/5}#website-gallery .ba-caption{font-size:14px}#website-gallery .ba-tag{font-size:8px;letter-spacing:0;padding:5px}#website-gallery .ba-tag-left{left:6px}#website-gallery .ba-tag-right{right:6px}#website-gallery .ba-divider b{width:26px;height:26px}}

/* === site-modules.css === */
/* Shared additive styles; existing themes remain the default. */
.ws-module{padding:64px 5%;border-top:1px solid var(--line)}
.ws-module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;margin-top:26px}
.ws-story,.ws-review{padding:28px;text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;border-radius:12px}
.ws-story{cursor:pointer;transition:transform .2s}.ws-story:hover{transform:translateY(-3px)}
.ws-story h3{font-size:25px}.ws-story p{line-height:1.8;color:var(--muted)}
.ws-blog-link{display:block;color:inherit;text-decoration:none}
.ws-blog-entry summary{list-style:none;cursor:pointer}.ws-blog-entry summary::-webkit-details-marker{display:none}.ws-blog-entry summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.ws-blog-title,.ws-blog-snippet,.ws-blog-open,.ws-blog-close{display:block}.ws-blog-title{margin-top:12px;font-size:25px;font-weight:700;line-height:1.25}.ws-blog-snippet{margin-top:12px;line-height:1.8;color:var(--muted)}.ws-blog-open,.ws-blog-close{margin-top:16px;color:var(--gold);font-weight:700}.ws-blog-close{display:none}.ws-blog-entry[open] .ws-blog-snippet,.ws-blog-entry[open] .ws-blog-open{display:none}.ws-blog-entry[open] .ws-blog-close{display:block}.ws-blog-full{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}
.ws-blog-page{max-width:900px;margin:0 auto;min-height:70vh}.ws-blog-page h1{font-size:clamp(38px,6vw,68px);letter-spacing:-1.5px}.ws-blog-back{display:inline-block;margin-bottom:28px;color:var(--gold);font-weight:700}.ws-blog-article{margin:28px 0 36px;font-size:17px;color:var(--ink)}
.ws-stars{color:var(--gold);letter-spacing:4px}.ws-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
.ws-faq-list{max-width:900px;margin:28px auto 0}.ws-faq-item{border-bottom:1px solid var(--line);color:var(--ink);font:inherit}.ws-faq-item:first-child{border-top:1px solid var(--line)}.ws-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:22px 0;list-style:none;font-size:18px;line-height:1.5}.ws-faq-item summary::-webkit-details-marker{display:none}.ws-faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.ws-faq-indicator{flex:none;width:22px;text-align:center;color:var(--gold)}.ws-faq-indicator:before{content:'+'}.ws-faq-item[open] .ws-faq-indicator:before{content:'−'}.ws-faq-item>.ws-prose{margin:0;padding:0 42px 24px 0;color:var(--muted);font-size:15px}
.ws-add{border:1px solid var(--line);border-radius:50%;width:44px;height:44px;background:var(--paper);color:var(--ink);font-size:26px;margin-top:20px}
.ws-module-dialog{box-sizing:border-box;width:min(620px,92vw);max-height:85vh;padding:40px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:auto}
.ws-module-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.ws-close{float:right;font-size:26px;background:none;color:inherit;border:0;cursor:pointer}
.ws-icon{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--gold);vertical-align:middle}.ws-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.ws-heading-icon{display:block;margin-top:14px}.ws-ribbon-icon{width:17px;height:17px;margin:0 17px;vertical-align:-3px}.ribbon-segment .ws-ribbon-icon{display:inline-grid}.ws-hero-icon{width:14px;height:14px;margin:0 14px;flex:none;display:inline-grid;place-items:center;vertical-align:middle;color:var(--gold)}.ws-tab-icon{width:17px;height:17px;margin-left:auto;flex:none}.ws-badge-icon{width:14px;height:14px;margin-top:5px}
[data-icons] .hero-foot a:not(:last-child)::after,[data-icons] .category-tabs button[aria-pressed=true]::after{content:none!important}
[data-lines=dashed] .ws-module,[data-lines=dashed] .website-ribbon{border-style:dashed}
[data-lines=dotted] .ws-module,[data-lines=dotted] .website-ribbon{border-style:dotted}
[data-lines=double] .ws-module,[data-lines=double] .website-ribbon{border-style:double;border-width:3px}
[data-lines=fine] .ws-module,[data-lines=fine] .website-ribbon{border-width:.5px}
[data-lines=bold] .ws-module,[data-lines=bold] .website-ribbon{border-width:4px}
[data-lines=gradient] .ws-module,[data-lines=gradient] .website-ribbon{border-image:linear-gradient(90deg,transparent,var(--gold),transparent) 1}
[data-lines=none] .ws-module,[data-lines=none] .website-ribbon{border:0}
[data-buttons=pill] :is(.dark-button,.light-button,.category-tabs button){border-radius:99px!important}
[data-buttons=outline] :is(.dark-button,.light-button,.category-tabs button){background:transparent!important;color:var(--gold)!important;border:1px solid currentColor!important}
[data-buttons=drawer] .category-tabs{display:flex;flex-direction:column;align-items:stretch;gap:0}
[data-buttons=drawer] .category-tabs button{text-align:left;padding:20px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
[data-buttons=drawer] .category-tabs button:after{content:'+';float:right}
[data-buttons=drawer] .category-tabs button[aria-pressed=true]:after{content:'−'}
[data-buttons=drawer] .category-tabs .service-grid{padding:16px 0 28px}
@media(prefers-reduced-motion:reduce){.ws-story{transition:none}}

/* === design-themes.css === */
/* Independent of the palette: all colors follow the existing theme tokens. */
html[data-design]:not([data-design="arched"]) .hero-art,
html[data-design]:not([data-design="arched"]) .card-picture,
html[data-design]:not([data-design="arched"]) .service-card>img,
html[data-design]:not([data-design="arched"]) .special-copy>img,
html[data-design]:not([data-design="arched"]) .ba-card .ba-stage,
html[data-design]:not([data-design="arched"]) #website-gallery .ba-card .ba-stage{border-radius:var(--design-radius)!important}
/* Zarif Kemerli (Arched) Signature Design */
html[data-design="arched"] .hero-art,html:not([data-design]) .hero-art{border-radius:220px 220px 12px 12px!important;overflow:hidden!important}
html[data-design="arched"] .hero-art>img,html:not([data-design]) .hero-art>img{border-radius:inherit!important}
html[data-design="arched"] .service-card,html:not([data-design]) .service-card{border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
html[data-design="arched"] .card-picture,html:not([data-design]) .card-picture,html[data-design="arched"] .service-card>img,html:not([data-design]) .service-card>img{border-radius:110px 110px 12px 12px!important;overflow:hidden!important}
html[data-design="arched"] .card-picture img,html:not([data-design]) .card-picture img{border-radius:inherit!important}
html[data-design="arched"] .special-image,html:not([data-design]) .special-image,html[data-design="arched"] .special-image img,html:not([data-design]) .special-image img,html[data-design="arched"] .special-copy>img,html:not([data-design]) .special-copy>img{border-radius:200px 200px 12px 12px!important;overflow:hidden!important}
html[data-design="arched"] #website-gallery .ba-card,html:not([data-design]) #website-gallery .ba-card{border-radius:120px 120px 12px 12px!important;overflow:hidden!important;border:1px solid var(--line)!important}
html[data-design="arched"] #website-gallery .ba-stage,html:not([data-design]) #website-gallery .ba-stage{border-radius:120px 120px 8px 8px!important;overflow:hidden!important}
html[data-design="editorial"]{--design-radius:2px}
html[data-design="editorial"] h1,html[data-design="editorial"] h2{letter-spacing:-2px}
html[data-design="editorial"] .service-card{border-top:1px solid var(--ink)!important;padding-top:14px!important}
html[data-design="editorial"] .ribbon,html[data-design="editorial"] .website-ribbon{border-block:2px solid var(--ink);background:var(--paper)}
html[data-design="soft"]{--design-radius:28px}
html[data-design="soft"] h1,html[data-design="soft"] h2,html[data-design="soft"] h3{font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:-1px}
html[data-design="soft"] .hero-art{box-shadow:0 18px 45px color-mix(in srgb,var(--ink) 12%,transparent)}
html[data-design="soft"] .category-tabs button,html[data-design="soft"] .branch-card{border-radius:22px!important}
html[data-design="soft"] .ribbon,html[data-design="soft"] .website-ribbon{padding-block:26px;background:var(--surface,var(--paper));border:0}
html[data-design="frame"]{--design-radius:8px}
html[data-design="frame"] h1,html[data-design="frame"] h2,html[data-design="frame"] h3{font-family:Palatino,'Palatino Linotype',Georgia,serif;font-weight:normal}
html[data-design="frame"] .hero-art,html[data-design="frame"] .card-picture,html[data-design="frame"] .ba-card .ba-stage{outline:1px solid var(--gold);outline-offset:7px}
html[data-design="frame"] .service-grid,html[data-design="frame"] .ba-gallery{gap:32px}
html[data-design="frame"] .ribbon,html[data-design="frame"] .website-ribbon{border-block:3px double var(--gold);background:var(--paper)}
html[data-design="bold"]{--design-radius:0 64px 0 64px}
html[data-design="bold"] h1,html[data-design="bold"] h2,html[data-design="bold"] h3{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-1.5px}
html[data-design="bold"] .ribbon,html[data-design="bold"] .website-ribbon{padding-block:32px;background:var(--ink);color:var(--paper)}
html[data-design="bold"] .ribbon-track,html[data-design="bold"] .website-ribbon-track span{font-size:32px;font-weight:bold}
html[data-design="bold"] .ribbon-reverse .ribbon-track,html[data-design="bold"] .website-ribbon.reverse .website-ribbon-track{animation-direction:reverse}
html[data-design="minimal"]{--design-radius:0}
html[data-design="minimal"] .hero{gap:8%;padding-top:48px;padding-bottom:80px}
html[data-design="minimal"] h1,html[data-design="minimal"] h2{font-family:Arial,sans-serif;font-weight:300;letter-spacing:-1.5px}
html[data-design="minimal"] .category-tabs button{background:transparent!important;border-radius:0;border-width:0 0 1px}
html[data-design="minimal"] .ribbon,html[data-design="minimal"] .website-ribbon{background:transparent;padding-block:12px}
html[data-design="minimal"] .ribbon-track,html[data-design="minimal"] .website-ribbon-track span{font:16px Arial,sans-serif;letter-spacing:2px}
.design-picker{margin:24px 5%;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}.design-picker select{display:block;margin-top:10px;padding:12px;width:min(100%,360px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px}
@media(max-width:560px){html[data-design="bold"] .ribbon-track,html[data-design="bold"] .website-ribbon-track span{font-size:24px}html[data-design="frame"] .service-grid,html[data-design="frame"] .ba-gallery{gap:24px}}

/* === public-polish.css === */
/* Extra public polish */
:root {
  --gold-hover: #80603f;
  --gold-light: rgba(155, 120, 80, 0.12);
}
.brand small {
  display: block;
  font: 500 10px Inter, Arial, sans-serif;
  letter-spacing: .25em;
  color: var(--gold);
  margin-top: 4px;
}
.online-booking {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 80px 5% 40px !important;
  box-sizing: border-box !important;
}
.online-booking .booking-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--line);
  background: var(--surface, var(--paper));
  border-radius: 24px;
  color: var(--ink);
  box-shadow: 0 16px 40px -12px rgba(47, 41, 36, 0.07);
}
.online-booking .booking-branch-name,
.online-booking .booking-branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-light);
  color: var(--gold);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 20px 0;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 25px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.service-card > img,
.service-card .card-picture img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.service-card h3 {
  padding: 16px 18px 8px;
  margin: 0;
  font-size: 20px;
}
.service-card p {
  padding: 0 18px 16px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Zarif Kemerli (Arched) Signature Oval Window Styling */
html[data-design="arched"] .hero-art,
html:not([data-design]) .hero-art {
  border-radius: 220px 220px 12px 12px !important;
  overflow: hidden !important;
}
html[data-design="arched"] .hero-art > img,
html:not([data-design]) .hero-art > img {
  border-radius: inherit !important;
}

html[data-design="arched"] .service-card,
html:not([data-design]) .service-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
html[data-design="arched"] .card-picture,
html:not([data-design]) .card-picture,
html[data-design="arched"] .service-card > img,
html:not([data-design]) .service-card > img {
  border-radius: 110px 110px 12px 12px !important;
  overflow: hidden !important;
}
html[data-design="arched"] .card-picture img,
html:not([data-design]) .card-picture img {
  border-radius: inherit !important;
}

html[data-design="arched"] .special-image,
html:not([data-design]) .special-image,
html[data-design="arched"] .special-image img,
html:not([data-design]) .special-image img,
html[data-design="arched"] .special-copy > img,
html:not([data-design]) .special-copy > img {
  border-radius: 200px 200px 12px 12px !important;
  overflow: hidden !important;
}

html[data-design="arched"] #website-gallery .ba-card,
html:not([data-design]) #website-gallery .ba-card {
  border-radius: 120px 120px 12px 12px !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
}
html[data-design="arched"] #website-gallery .ba-stage,
html:not([data-design]) #website-gallery .ba-stage {
  border-radius: 120px 120px 8px 8px !important;
  overflow: hidden !important;
}

/* Announcement Banner Styling */
aside.announcement {
  background: var(--gold);
  color: var(--paper);
  text-align: center;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
aside.announcement strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ba-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 30px;
  margin-top: 35px;
}
.ba-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* Drawer Button Style Overrides */
[data-buttons="drawer"] .category-tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
[data-buttons="drawer"] .category-tabs button {
  text-align: left !important;
  padding: 22px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  font: 22px Georgia, serif !important;
  width: 100% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
  transform: none !important;
  min-height: 60px !important;
  position: relative !important;
}
[data-buttons="drawer"] .category-tabs button:hover {
  background: var(--surface) !important;
  color: var(--gold) !important;
  transform: none !important;
}
[data-buttons="drawer"] .category-tabs button:after {
  content: '+' !important;
  float: right !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}
[data-buttons="drawer"] .category-tabs button[aria-pressed="true"] {
  background: transparent !important;
  color: var(--gold) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
[data-buttons="drawer"] .category-tabs button[aria-pressed="true"]:after {
  content: '−' !important;
  float: right !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}
[data-buttons="drawer"] .category-tabs .service-grid {
  padding: 20px 0 32px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Before & After Luxury Cards & Dialog */
.ba-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 280px)) !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 28px !important;
}
.ba-card {
  display: block !important;
  width: 100% !important;
  max-width: 280px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  color: inherit !important;
  cursor: pointer !important;
  outline: none !important;
}
.ba-card .ba-stage {
  height: auto !important;
  aspect-ratio: 4/5 !important;
  border-radius: 130px 130px 8px 8px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--surface) !important;
}
.ba-card:hover .ba-stage {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 30px -10px rgba(47, 41, 36, 0.18) !important;
}
.ba-card .ba-layer img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
.ba-card .ba-tag {
  top: auto !important;
  bottom: 16px !important;
  font-size: 9px !important;
  padding: 6px 10px !important;
  letter-spacing: 1px !important;
}
.ba-card .ba-tag-left { left: 12px !important; }
.ba-card .ba-tag-right { right: 12px !important; }
.ba-card .ba-divider b {
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
}
.ba-caption {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 4px 6px !important;
  font: 20px Georgia, serif !important;
  color: var(--ink) !important;
}
.ba-caption span:first-child {
  color: var(--gold) !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  font-family: inherit !important;
}
.ba-caption span:last-child {
  font-size: 16px !important;
  color: var(--gold) !important;
}

/* Modal comparison dialog */
.ba-modal {
  width: min(940px, 94vw);
  max-width: 94vw;
  max-height: 94dvh;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px 28px 24px;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}
.ba-modal::backdrop {
  background: rgba(25, 21, 17, 0.85);
  backdrop-filter: blur(8px);
}
.ba-modal .ba-stage {
  height: min(62dvh, 560px);
  border-radius: 14px;
}
.ba-modal .ba-close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
}
.ba-modal .ba-close:hover {
  background: var(--ink);
  color: var(--paper);
}
.ba-modal > p {
  font: 13px Arial, sans-serif;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 0;
}
.ba-modal .ba-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
}
.ba-modal .ba-title {
  font: 22px Georgia, serif;
  color: var(--gold);
  margin: 0;
}
.ba-modal .ba-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ba-modal .ba-nav button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ba-modal .ba-nav button:hover:not(:disabled) {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}
.ba-modal .ba-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ba-modal .ba-counter {
  font: 14px Arial, sans-serif;
  font-weight: 600;
  color: var(--muted);
}

.branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.branch-working-hours {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line, #dbd4c9);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #ffffff) 88%, transparent);
  color: var(--ink, #302b25);
  font-size: 13.5px;
}
.branch-hours-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #dbd4c9);
}
.branch-hours-heading > div {
  display: grid;
  gap: 2px;
}
.branch-hours-heading strong {
  font-weight: 700;
}
.branch-hours-heading small {
  color: var(--muted, #766f64);
  font-size: 11.5px;
}
.branch-hours-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold, #87643e) 14%, transparent);
  color: var(--gold, #87643e);
  font-size: 20px;
  line-height: 1;
}
.branch-hours-list {
  display: grid;
  padding-top: 10px;
}
.branch-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 6px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #dbd4c9) 68%, transparent);
}
.branch-hours-row:last-child {
  border-bottom: 0;
}
.branch-hours-row > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.branch-hours-row i {
  color: var(--muted, #766f64);
  font-style: normal;
}
.branch-hours-row.is-closed {
  color: var(--muted, #766f64);
}
.branch-hours-row.is-closed strong {
  color: #a04444;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn-branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  background: var(--surface, var(--paper, #ffffff));
  border: 1px solid var(--line, #dbd4c9);
  color: var(--ink, #302b25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.btn-branch .brand-badge {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: block;
}
.btn-branch:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-whatsapp:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.09);
  color: #128C7E;
}
.btn-instagram:hover {
  border-color: #e1306c;
  background: rgba(225, 48, 108, 0.09);
  color: #c13584;
}
.btn-facebook:hover {
  border-color: #1877F2;
  background: rgba(24, 119, 242, 0.09);
  color: #1877F2;
}
.btn-x:hover {
  border-color: var(--ink, #000);
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink, #000);
}
.btn-directions:hover {
  border-color: #EA4335;
  background: rgba(234, 67, 53, 0.09);
  color: #d93025;
}
.branch-phone a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.branch-phone svg {
  color: var(--gold);
}
.footer-ig-link {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footer-ig-link:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}
.floating-whatsapp {
  background: #25D366 !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6) !important;
}
.floating-whatsapp svg {
  fill: #ffffff !important;
  stroke: none !important;
}


/* Hero badge: icon on top, centered text underneath */
.hero-art .circle,
.circle {
  position: absolute !important;
  right: 28px !important;
  left: auto !important;
  bottom: 28px !important;
  top: auto !important;
  border-radius: 50% !important;
  background: var(--paper, #e9ddca) !important;
  color: var(--ink, #302b25) !important;
  width: 110px !important;
  height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 3px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.circle .circle-icon,
.circle .ws-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold, #9b7850) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  order: -1 !important;
}

.circle .ws-badge-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.circle .circle-text {
  display: block !important;
  font-size: 9.5px !important;
  letter-spacing: 1.1px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--ink, #302b25) !important;
}

@media (max-width: 560px) {
  .online-booking {
    padding: 50px 6% 30px !important;
  }
  .hero-art .circle,
  .circle {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 90px !important;
    height: 90px !important;
    gap: 2px !important;
    padding: 6px !important;
  }
  .circle .circle-icon,
  .circle .ws-badge-icon {
    font-size: 15px !important;
  }
  .circle .ws-badge-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  .circle .circle-text {
    font-size: 8px !important;
    letter-spacing: 0.8px !important;
    line-height: 1.3 !important;
  }
}