:root {
  --cream: #faf5f0;
  --blush: #f1dcd3;
  --rose: #c9787a;
  --rose-dark: #a85a5e;
  --ink: #2b2024;
  --muted: #7d6c70;
  --line: #e8d8d0;
  --radius: 22px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ---------- Butonlar ---------- */
.btn {
  font: 500 15px var(--sans);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--rose-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; padding: 14px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 5vw;
  background: rgba(250, 245, 240, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { font: 500 26px var(--serif); letter-spacing: -.5px; }
.logo span { font-style: italic; color: var(--rose); }
.nav { display: flex; gap: 32px; font-size: 15px; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.user-greet { font-size: 14px; color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5vw;
  align-items: center;
  padding: 7vh 5vw 10vh;
  min-height: calc(100vh - 72px);
}
.eyebrow {
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--rose); font-weight: 600; margin-bottom: 18px;
}
.hero h1 {
  font: 400 clamp(42px, 5.4vw, 80px)/1.04 var(--serif);
  letter-spacing: -1.5px;
}
.hero h1 em { color: var(--rose); font-weight: 300; }
.lead { margin: 26px 0 36px; font-size: 18px; color: var(--muted); max-width: 440px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Slider ---------- */
.slider {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  width: 100%;
  border-radius: 200px 200px var(--radius) var(--radius); /* kemer formu */
  overflow: hidden;
  background: var(--blush);
  box-shadow: 0 30px 60px -30px rgba(120, 60, 60, .35);
}
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 6s ease;
  background-size: cover; background-position: center;
}
.slide.active { opacity: 1; transform: scale(1); }
.slide-placeholder {
  display: flex; align-items: center; justify-content: center;
  font: italic 300 28px var(--serif); color: rgba(255,255,255,.85);
}
.slide-caption {
  position: absolute; left: 24px; bottom: 56px;
  background: rgba(250, 245, 240, .92);
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: opacity .4s;
}
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(250, 245, 240, .85);
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink);
  opacity: 0; transition: opacity .3s;
}
.slider:hover .slider-arrow { opacity: 1; }
.slider-arrow.prev { left: 16px; }
.slider-arrow.next { right: 16px; }
.dots {
  position: absolute; bottom: 22px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.dot {
  width: 8px; height: 8px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.6); cursor: pointer;
  transition: width .3s, background .3s;
}
.dot.active { width: 26px; background: #fff; }

/* ---------- Instagram ---------- */
.insta { padding: 10vh 0 12vh; background: #fff; border-top: 1px solid var(--line); }
.section-head { text-align: center; padding: 0 5vw; margin-bottom: 48px; }
.section-head h2 { font: 400 clamp(32px, 3.6vw, 52px) var(--serif); letter-spacing: -1px; }
.insta-handle { display: inline-block; margin-top: 10px; color: var(--rose-dark); font-weight: 500; }
.insta-handle:hover { text-decoration: underline; }

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 18px; width: max-content;
  animation: scroll 50s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }

.post {
  position: relative;
  width: 260px; aspect-ratio: 1;
  border-radius: 16px; overflow: hidden; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.post::after {
  content: "Instagram'da gör";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43, 32, 36, .45); color: #fff; font-weight: 500;
  opacity: 0; transition: opacity .3s;
}
.post:hover::after { opacity: 1; }

/* ---------- Randevu ---------- */
.booking { padding: 10vh 5vw 12vh; }
.booking-card {
  max-width: 880px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 30px 60px -40px rgba(120, 60, 60, .3);
}
.step { margin-bottom: 30px; }
.step h4 {
  display: flex; align-items: center; gap: 10px;
  font: 500 18px var(--serif); margin-bottom: 14px;
}
.step h4 span {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush); color: var(--rose-dark);
  font: 600 13px var(--sans);
}
.step h4 small { font: 400 13px var(--sans); color: var(--muted); }

.step-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-head h4 { margin-bottom: 0; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: var(--line); transition: background .2s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--rose); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:checked ~ * , .switch:has(input:checked) { color: var(--ink); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--rose); outline-offset: 2px; }

.switch-auth { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.switch-auth a { color: var(--rose-dark); font-weight: 500; }
.switch-auth a:hover { text-decoration: underline; }
.admin-link { display: block; width: fit-content; margin: 14px auto 0; font-size: 12.5px; color: var(--muted); letter-spacing: .3px; }
.admin-link:hover { color: var(--rose-dark); text-decoration: underline; }

.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.service, .date, .time {
  border: 1px solid var(--line); background: var(--cream);
  border-radius: 14px; cursor: pointer; color: var(--ink);
  font-family: var(--sans);
  transition: border-color .2s, background .2s, color .2s;
}
.service { padding: 14px 16px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.service strong { font-weight: 500; font-size: 15px; }
.service span { font-size: 13px; color: var(--muted); }
.service:hover, .date:not(:disabled):hover, .time:not(:disabled):hover { border-color: var(--rose); }
.service.active, .date.active, .time.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.service.active span { color: var(--blush); }

.date-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.date {
  flex-shrink: 0; width: 64px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; line-height: 1.3;
}
.date strong { font: 500 22px var(--serif); }
.date small { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .75; }
.date:disabled, .time:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.time { padding: 10px 0; font-size: 15px; font-weight: 500; }
.hint { color: var(--muted); font-size: 15px; }

.booking textarea {
  width: 100%; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px;
  font: 15px var(--sans); background: var(--cream); color: var(--ink);
}
.booking textarea:focus { outline: none; border-color: var(--rose); }

.booking-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.booking-summary p { color: var(--muted); }
.booking-summary strong { color: var(--ink); font-weight: 600; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--ink); }

.modal-title { font: 400 28px var(--serif); margin-bottom: 20px; }
.appt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.appt div { display: flex; flex-direction: column; }
.appt span { font-size: 14px; color: var(--muted); }
.appt .btn { padding: 6px 14px; font-size: 13px; }

/* ---------- İletişim ---------- */
.contact { padding: 10vh 5vw 12vh; background: #fff; border-top: 1px solid var(--line); }
.contact-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: stretch;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-item { display: flex; gap: 18px; }
.contact-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blush);
}
.contact-icon svg, .wa-float svg {
  width: 22px; height: 22px; fill: none; stroke: var(--rose-dark);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.contact-item h4 { font: 500 20px var(--serif); margin-bottom: 4px; }
.contact-item p { color: var(--muted); margin-bottom: 8px; }
.contact-item a:not(.btn) { color: var(--rose-dark); font-weight: 500; font-size: 15px; }
.contact-item a:not(.btn):hover { text-decoration: underline; }
.btn-whatsapp { background: #25d366; color: #fff; padding: 9px 20px; font-size: 14px; }
.btn-whatsapp:hover { background: #1ebe5b; }
.hours { list-style: none; min-width: 260px; }
.hours li {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 15px;
}
.hours li.today { color: var(--ink); font-weight: 600; }
.map {
  border-radius: var(--radius); overflow: hidden; min-height: 380px;
  border: 1px solid var(--line); background: var(--blush);
}
.map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; box-shadow: 0 10px 25px -8px rgba(37, 211, 102, .7);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { stroke: #fff; width: 28px; height: 28px; }

/* ---------- Footer ---------- */
.footer {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 48px 5vw; border-top: 1px solid var(--line); color: var(--muted);
}
.footer p { margin-top: 8px; }
.copy { font-size: 14px; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(43, 32, 36, .45); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--cream); border-radius: var(--radius);
  padding: 32px; animation: pop .3s ease;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-close {
  position: absolute; top: 14px; right: 18px;
  border: none; background: none; font-size: 28px; cursor: pointer; color: var(--muted);
}
.tabs { display: flex; gap: 6px; background: var(--blush); padding: 4px; border-radius: 999px; margin-bottom: 26px; }
.tab {
  flex: 1; border: none; background: none; padding: 9px; border-radius: 999px;
  font: 500 14px var(--sans); cursor: pointer; color: var(--muted);
}
.tab.active { background: var(--cream); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.auth-form h3 { font: 400 28px var(--serif); margin-bottom: 20px; }
.auth-form label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.auth-form input:not([type=checkbox]) {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  font: 15px var(--sans); background: #fff; color: var(--ink);
  transition: border-color .2s;
}
.auth-form input:focus { outline: none; border-color: var(--rose); }
.check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.check input { margin-top: 3px; accent-color: var(--rose); }
.form-error { color: #b23a3a; font-size: 14px; min-height: 20px; margin-bottom: 8px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  padding: 12px 22px; border-radius: 999px; font-size: 15px; z-index: 200;
  animation: pop .3s ease;
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 5vh; min-height: auto; }
  .hero-text { text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .slider { max-height: none; border-radius: 140px 140px var(--radius) var(--radius); }
  .slider-arrow { opacity: 1; }
  .post { width: 200px; }
  .booking-card { padding: 22px; }
  .booking-summary .btn { width: 100%; }
  .contact-grid { grid-template-columns: 1fr; }
  .map, .map iframe { min-height: 300px; }
  .hours { min-width: 0; }
}
@media (max-width: 480px) {
  .header { padding: 14px 4vw; }
  .logo { font-size: 22px; }
  .header-actions .btn { padding: 8px 14px; font-size: 14px; }
  .user-greet { display: none; }
  .header-actions { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .slide { transition: opacity .3s; transform: none; }
}

/* ---------- Durum rozetleri ---------- */
.badge {
  display: inline-block; font: 600 11px var(--sans); font-style: normal;
  padding: 3px 9px; border-radius: 999px; vertical-align: 2px; margin-left: 4px;
  letter-spacing: .2px;
}
.badge-pending  { background: #fdf0d9; color: #9a6510; }
.badge-active   { background: #e3f4e6; color: #2e7a3e; }
.badge-rejected, .badge-cancelled { background: #f6e1e1; color: #a33a3a; }
.badge-expired  { background: var(--line); color: var(--muted); }
.appt .badge { align-self: flex-start; margin: 6px 0 0; }

/* ---------- Mağaza (Shopier) ---------- */
.shop { padding: 10vh 5vw 12vh; background: var(--cream); border-top: 1px solid var(--line); }
.shop-lead { max-width: 520px; margin: 12px auto 0; color: var(--muted); }
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px;
  max-width: 1180px; margin: 0 auto;
}
.product {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.product:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(120, 60, 60, .45); }
.product-img { position: relative; aspect-ratio: 4 / 5; }
.product-tag {
  position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--rose); color: #fff; font-size: 12px; font-weight: 600;
}
.product-out {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(250, 245, 240, .65); font: 500 18px var(--serif); color: var(--ink);
}
.product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-body h3 { font: 500 17px var(--sans); }
.product-price { font-size: 16px; }
.product-price s { color: var(--muted); font-size: 14px; margin-right: 4px; }
.product-price strong { font-weight: 600; }
.product-cta { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--rose-dark); font-weight: 500; }
.product.is-out .product-price { color: var(--muted); }
.shop-more { text-align: center; margin-top: 40px; }

@media (max-width: 860px) {
  /* Telefonda yana kayan kartlar */
  .shop { padding: 8vh 0 10vh; }
  .shop-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 5vw 12px; scrollbar-width: none;
  }
  .shop-grid::-webkit-scrollbar { display: none; }
  .product { flex: 0 0 64%; scroll-snap-align: center; }
  .shop-more { margin-top: 24px; }
}

/* ---------- Hesap menüsü ---------- */
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: 6px; }
.account-btn .caret { font-size: 11px; color: var(--muted); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(90, 50, 50, .35);
}
.account-menu button {
  border: none; background: none; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; font: 500 15px var(--sans); color: var(--ink);
}
.account-menu button:hover { background: var(--blush); }
.account-menu button#logoutBtn { color: var(--muted); }

/* ---------- Mobil menü ---------- */
.nav-toggle { display: none; }
.mobile-menu { display: none; }
@media (max-width: 960px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  #registerBtn, .account { display: none !important; }

  .mobile-menu:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; z-index: 49;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px 5vw 20px; box-shadow: 0 30px 40px -30px rgba(60, 30, 30, .35);
    animation: mmDown .22s ease;
  }
  @keyframes mmDown { from { opacity: 0; transform: translateY(-8px); } }
  .mm-links { display: flex; flex-direction: column; }
  .mm-links a { padding: 14px 4px; font: 400 22px var(--serif); border-bottom: 1px solid var(--line); }
  .mm-account { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
  .mm-account > button:not(.btn) {
    border: none; background: none; text-align: left; padding: 10px 4px; cursor: pointer;
    font: 500 16px var(--sans); color: var(--ink);
  }
  .mm-hello { font-size: 14px; color: var(--muted); }
}

/* ---------- Örnek tasarım fotoğrafları ---------- */
.ref-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ref-photo { position: relative; width: 84px; height: 84px; }
.ref-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.ref-photo button {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: var(--ink); color: #fff; cursor: pointer; font-size: 14px; line-height: 1;
}
.ref-add {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left;
  padding: 12px 16px; border: 1.5px dashed var(--line); border-radius: 14px; background: none; cursor: pointer;
  font: inherit; color: var(--ink); min-height: 84px;
}
.ref-add:hover { border-color: var(--rose); background: #fdf3f1; }
.ref-add span { grid-row: span 2; font-size: 26px; color: var(--rose); }
.ref-add strong { font-weight: 500; font-size: 15px; }
.ref-add small { color: var(--muted); font-size: 13px; }

.booking-policy { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.appt-lock { flex-basis: 100%; font-size: 13px; color: var(--muted); margin-top: 6px; }
.appts-list .appt, #apptsList .appt { flex-wrap: wrap; }

/* ---------- KVKK ---------- */
.legal-card { max-width: 620px; }
.legal-text { max-height: 55vh; overflow-y: auto; margin-bottom: 18px; padding-right: 6px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.legal-text h4 { font: 600 15px var(--sans); margin: 16px 0 4px; }
.legal-text p { margin-bottom: 8px; }
.check a, .copy a { color: var(--rose-dark); text-decoration: underline; }

/* ---------- Profilim ---------- */
.pw-form { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pw-form h4 { font: 500 18px var(--serif); margin-bottom: 12px; }
.auth-form input:disabled { opacity: .6; }

/* ---------- WhatsApp düğmesi ---------- */
.wa-float { transition: transform .25s, opacity .25s; }
.wa-float.is-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }

.auth-note { margin: 0 28px 18px 0; padding: 10px 14px; border-radius: 12px; background: #fdf3f1; border: 1px solid #efc9c3; font-size: 14px; color: var(--rose-dark); }

/* ---------- Hakkımda ---------- */
.about {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center;
  padding: 12vh 8vw; background: #fff; border-top: 1px solid var(--line);
}
.about-media { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.about-photo {
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: var(--radius) 200px var(--radius) var(--radius);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 40px 70px -45px rgba(120, 60, 60, .55);
}
.about-photo span { font: italic 300 26px var(--serif); color: rgba(255, 255, 255, .85); }
.about-badge {
  position: absolute; left: -24px; bottom: 36px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px 22px; border-radius: 18px; background: var(--cream);
  border: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(90, 50, 50, .45);
}
.about-badge strong { font: 400 34px/1 var(--serif); color: var(--rose-dark); }
.about-badge span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.about-text h2 { font: 400 clamp(32px, 3.4vw, 50px)/1.1 var(--serif); letter-spacing: -1px; margin: 6px 0 20px; }
.about-body p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-bottom: 14px; max-width: 560px; }
.about-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; padding: 0; }
.about-tags li { padding: 7px 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 14px; }
.about-stats { display: flex; gap: 36px; flex-wrap: wrap; margin: 28px 0 8px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 560px; }
.about-stats div { display: flex; flex-direction: column; }
.about-stats strong { font: 400 34px/1.1 var(--serif); }
.about-stats span { font-size: 14px; color: var(--muted); }
.about-sign { font: italic 400 19px var(--serif); color: var(--rose-dark); margin-top: 14px; }
.about-cta { margin-top: 26px; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 40px; padding: 8vh 6vw; text-align: center; }
  .about-media { max-width: 340px; }
  .about-badge { left: -10px; bottom: 20px; }
  .about-body p { margin-left: auto; margin-right: auto; font-size: 16px; }
  .about-tags, .about-stats, .about-cta { justify-content: center; }
  .about-stats { gap: 24px; margin-left: auto; margin-right: auto; }
  .about-stats strong { font-size: 28px; }
}

/* ---------- Logo (amblem + iki satırlı ad) ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 16px -8px rgba(60, 30, 30, .6); }
.logo .logo-word { display: flex; flex-direction: column; line-height: 1; font-style: normal; color: var(--ink); }
.logo .logo-word b { font: 500 25px/1 var(--serif); letter-spacing: .6px; }
.logo .logo-word i { font: 600 9.5px/1 var(--sans); font-style: normal; letter-spacing: 3.4px; text-transform: uppercase; color: var(--rose-dark); margin-top: 5px; }
@media (max-width: 480px) {
  .logo-mark { width: 38px; height: 38px; border-radius: 11px; }
  .logo .logo-word b { font-size: 21px; }
  .logo .logo-word i { font-size: 8.5px; letter-spacing: 2.6px; }
}

/* ---------- Alt kısım: koyu zeminde tam logo ---------- */
.footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 30px 5vw 34px; background: #000; color: rgba(255, 255, 255, .62); border-top: none;
}
.footer-logo {
  width: min(420px, 82vw); height: auto; display: block;
  /* logonun kenarındaki parlama siyah zemine yumuşakça karışsın */
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 62%, transparent 100%);
}
.footer-text-logo .logo-word { color: #fff; }
.footer .footer-note { margin-top: 0; font-size: 15px; }
.footer .copy { margin-top: 2px; color: rgba(255, 255, 255, .45); }
.footer .copy a { color: #e6b7ad; }

/* ---------- Logo görseli (verilen PNG olduğu gibi) ---------- */
.logo-img { display: block; height: 58px; width: auto; border-radius: 10px; }
.footer .footer-logo { -webkit-mask-image: none; mask-image: none; border-radius: 16px; width: min(380px, 80vw); }
@media (max-width: 480px) { .logo-img { height: 46px; border-radius: 8px; } }
/* Açık zeminde: beyaz "NAIL SECRET" yazısı okunsun diye ince gölge (koyu alt kısımda gerek yok) */
.header .logo-img, .mobile-menu .logo-img { height: 62px; border-radius: 0; filter: drop-shadow(0 0 .6px rgba(90, 45, 40, .9)) drop-shadow(0 1px 2px rgba(90, 45, 40, .25)); }
.footer .footer-logo { width: min(340px, 76vw); border-radius: 0; margin: 10px 0 14px; }
@media (max-width: 480px) { .header .logo-img { height: 50px; } }

/* NAIL SECRET artık siyah: kalın kontur gerekmiyor, sadece hafif gölge */
.header .logo-img, .mobile-menu .logo-img { filter: drop-shadow(0 1px 1.5px rgba(90, 45, 40, .28)); }

/* ---------- Yorumlar şeridi ---------- */
.reviews { padding: 9vh 0 10vh; background: var(--cream); border-top: 1px solid var(--line); }
.reviews .section-head { margin-bottom: 36px; }
.rev-avg { margin-top: 10px; color: var(--muted); font-size: 15px; }
.rev-avg b { color: var(--ink); font-weight: 600; }
.rev-avg-star { color: #d4a24c; }
.rev-track { gap: 20px; align-items: stretch; }
.rev-card {
  width: 330px; margin: 0; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 40px -34px rgba(120, 60, 60, .5);
}
.rev-stars { color: #d4a24c; letter-spacing: 2px; font-size: 17px; }
.rev-stars span { color: var(--line); }
.rev-card blockquote {
  margin: 0; flex: 1; font: italic 400 17px/1.55 var(--serif); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.rev-card blockquote::before { content: "“"; color: var(--rose); }
.rev-card blockquote::after { content: "”"; color: var(--rose); }
.rev-card figcaption { display: flex; flex-direction: column; font-size: 14px; }
.rev-card figcaption span { color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .rev-card { width: 270px; padding: 20px; } .rev-card blockquote { font-size: 16px; } }

/* ---------- Randevularım sayfası ---------- */
body.page-open { overflow: hidden; }
.page { position: fixed; inset: 0; z-index: 90; background: var(--cream); overflow-y: auto; animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.page-bar {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 5vw; background: rgba(250, 245, 240, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.page-inner { max-width: 820px; margin: 0 auto; padding: 36px 5vw 90px; }
.page-title { font: 400 clamp(34px, 4vw, 48px) var(--serif); letter-spacing: -1px; margin-top: 4px; }
.page-sub { color: var(--muted); margin: 6px 0 24px; }
.page-tabs { margin: 8px 0 22px; width: max-content; max-width: 100%; overflow-x: auto; }
.page-tabs button { white-space: nowrap; }
.page-tabs i { font-style: normal; color: var(--muted); }

.review-due {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  padding: 16px 20px; margin-bottom: 18px; border-radius: 18px; border: 1px solid #f0d79a; background: #fff8e6;
}
.review-due:hover { border-color: #d4a24c; }
.review-due span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.review-due small { color: var(--muted); }
.review-due-stars { color: #d4a24c; font-size: 18px; letter-spacing: 1px; }
.review-due-go { color: var(--rose-dark); font-weight: 600; white-space: nowrap; }

.mycard {
  display: grid; grid-template-columns: 86px 1fr; gap: 20px;
  padding: 22px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .3s, border-color .3s;
}
.mycard.is-past { background: #fffdfb; }
.mycard.is-flash { border-color: #d4a24c; box-shadow: 0 0 0 4px #fff0c8; }
.mycard-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12px 6px; border-radius: 16px; background: var(--blush); align-self: start;
}
.mycard.is-past .mycard-date { background: var(--cream); }
.mycard-date strong { font: 400 36px/1 var(--serif); }
.mycard-date span { font-size: 14px; font-weight: 500; margin-top: 4px; }
.mycard-date small { font-size: 12px; color: var(--muted); }
.mycard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mycard-top h3 { font: 500 20px var(--sans); }
.mycard-top h3 small { font-size: 14px; color: var(--muted); font-weight: 400; }
.mycard-status-text { font-size: 14px; color: var(--muted); margin-top: 2px; }
.badge-done { background: #ece4f3; color: #6a4c86; }
.mycard-services { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px dashed var(--line); }
.mycard-services li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.mycard-services li span { flex: 1; }
.mycard-services li small { color: var(--muted); font-size: 13px; }
.mycard-services li b { font-weight: 500; min-width: 70px; text-align: right; }
.mycard-total { margin-top: 10px; text-align: right; font-size: 15px; color: var(--muted); }
.mycard-total b { color: var(--ink); font-size: 18px; font-weight: 600; }
.mycard-pay { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--cream); margin-left: 4px; }
.mycard-note { margin-top: 10px; font-style: italic; color: var(--rose-dark); font-size: 14px; }
.mycard-photos { display: flex; gap: 8px; margin-top: 12px; }
.mycard-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.mycard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn.danger { color: #a33a3a; }
.mycard-empty { padding: 50px 20px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.mycard-empty .link { color: var(--rose-dark); font-weight: 500; }

/* Değerlendirme formu */
.rv-form, .rv-done { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: #fff8e6; border: 1px solid #f3e1b4; }
.rv-form strong { display: block; margin-bottom: 6px; }
.rv-form textarea {
  width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid #ecdcb4; border-radius: 12px;
  font: 15px var(--sans); background: #fff; resize: vertical;
}
.rv-form textarea:focus { outline: none; border-color: #d4a24c; }
.rv-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.rv-actions small { color: var(--muted); font-size: 12px; flex: 1; min-width: 200px; }
.star-input { display: flex; align-items: center; gap: 2px; }
.star-input .star {
  border: none; background: none; cursor: pointer; padding: 0 2px; font-size: 32px; line-height: 1;
  color: #e7dccb; transition: transform .12s, color .12s;
}
.star-input .star.on { color: #d4a24c; }
.star-input .star:hover { transform: scale(1.15); }
.star-label { margin-left: 10px; font-size: 14px; color: var(--muted); }
.rv-done .stars { color: #d4a24c; font-size: 20px; letter-spacing: 2px; }
.rv-done .stars-off { color: #e7dccb; }
.rv-done p { font: italic 16px var(--serif); margin: 6px 0; }
.rv-done small { color: var(--muted); font-size: 13px; }

.zoom { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(20, 14, 16, .85); cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: 90vh; border-radius: 14px; }

/* Sitede değerlendirme hatırlatması */
.review-prompt {
  position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(320px, calc(100vw - 40px));
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(90, 50, 50, .45);
  animation: pageIn .4s ease;
}
.review-prompt small { color: var(--muted); }
.review-prompt-x { position: absolute; top: 6px; right: 10px; border: none; background: none; font-size: 22px; color: var(--muted); cursor: pointer; }
.review-prompt-stars { display: flex; gap: 2px; margin-top: 8px; }
.review-prompt-stars button { border: none; background: none; cursor: pointer; font-size: 30px; line-height: 1; color: #e7dccb; padding: 0 2px; }
.review-prompt-stars button.on { color: #d4a24c; }

@media (max-width: 600px) {
  .mycard { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .mycard-date { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 8px 14px; align-self: stretch; }
  .mycard-date strong { font-size: 24px; }
  .mycard-date span, .mycard-date small { margin: 0; font-size: 14px; }
  .mycard-top { flex-direction: column-reverse; }
  .review-due { flex-wrap: wrap; }
  .review-prompt { left: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) { .rev-marquee { overflow-x: auto; } }

/* Sekmeli seçim (Randevularım sayfası) */
.segmented { display: flex; gap: 4px; background: var(--blush); padding: 4px; border-radius: 999px; }
.segmented button {
  border: none; background: none; padding: 8px 16px; border-radius: 999px;
  font: 500 14px var(--sans); color: var(--muted); cursor: pointer;
}
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.page-tabs { scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.rev-empty::before, .rev-empty::after { content: none !important; }
.rev-empty { color: var(--muted) !important; }
.rev-spacer { flex: 1; }
@media (max-width: 400px) { .page-tabs button { padding: 8px 12px; font-size: 13px; } }

/* Instagram şeridi yorumların tersine (soldan sağa) kaysın */
#instaTrack { animation-direction: reverse; }

/* ---------- Logonun arkasında oje darbesi ---------- */
.logo.has-stroke { position: relative; isolation: isolate; padding: 4px 6px; }
.logo-stroke {
  position: absolute; z-index: -1; left: 50%; top: 52%;
  width: 195%; height: 105%;
  transform: translate(-50%, -50%) rotate(-5deg);
  filter: drop-shadow(0 6px 8px rgba(150, 80, 70, .16));
  pointer-events: none;
}
/* Darbe logonun arkasından başlayıp sağa uzansın (telefonda ekrandan taşmasın) */
.logo-stroke { left: -16%; width: 180%; transform: translateY(-50%) rotate(-5deg); }
@media (max-width: 480px) { .logo-stroke { left: -8%; width: 165%; } }

/* ---------- Kavisli oje darbesi (önceki kısa lekenin yerine) ---------- */
.logo-stroke { display: none; }
.header.has-swoosh > *:not(.header-swoosh) { position: relative; z-index: 1; }
.header-swoosh {
  position: absolute; left: 0; top: 0; height: 100%; width: 55%;
  z-index: 0; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 5px 6px rgba(150, 80, 70, .14));
}

/* ---------- Menü tırnakları ---------- */
.nav-nails .nav a { position: relative; }
.nav-nail {
  position: absolute; left: 50%; top: calc(100% + 3px); width: 19px; height: 28px;
  transform: translate(-50%, 12px) scale(.3) rotate(0deg); transform-origin: 50% 100%;
  opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  filter: drop-shadow(0 3px 4px rgba(120, 60, 50, .25));
}
.nav-nail svg { display: block; width: 100%; height: 100%; }
.nav a:nth-child(odd) .nav-nail { --tilt: -9deg; }
.nav a:nth-child(even) .nav-nail { --tilt: 9deg; }
.nav a:hover .nav-nail, .nav a:focus-visible .nav-nail { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(var(--tilt)); }
/* Telefon menüsünde linkin yanında küçük tırnak */
.mm-links a { display: flex; align-items: center; gap: 14px; }
.mm-nail { display: inline-block; width: 16px; height: 24px; flex-shrink: 0; transform: rotate(-8deg); filter: drop-shadow(0 2px 3px rgba(120, 60, 50, .2)); }
.mm-nail svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .nav-nail { transition: opacity .2s; } }

/* ---------- Düğmelerde oje efekti ---------- */
/* Üstüne gelince soldan fırça darbesiyle oje sürülür; uçta kıl izleri, üstte parlak yansıma */
.btn-polish .btn-primary:not(:disabled), .btn-polish-demo {
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-polish .btn-primary:not(:disabled):hover { background: var(--ink); }
.btn-polish .btn-primary:not(:disabled)::before, .btn-polish-demo::before {
  content: ""; position: absolute; z-index: -1; top: -2px; bottom: -2px; left: -30%; width: 145%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .12) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 5px),
    var(--polish, #c4606f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H128 L136 3 L131 7 L141 10 L133 14 L145 18 L134 22 L142 26 L132 30 L139 34 L129 37 L126 40 H0 Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H128 L136 3 L131 7 L141 10 L133 14 L145 18 L134 22 L142 26 L132 30 L139 34 L129 37 L126 40 H0 Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform: translateX(-102%) skewX(-12deg);
  transition: transform .6s cubic-bezier(.65, 0, .25, 1);
}
.btn-polish .btn-primary:not(:disabled):hover::before, .btn-polish .btn-primary:not(:disabled):focus-visible::before,
.btn-polish-demo:hover::before { transform: translateX(0) skewX(-12deg); }
/* Sürülen ojenin üstünden geçen parlak çizgi */
.btn-polish .btn-primary:not(:disabled)::after, .btn-polish-demo::after {
  content: ""; position: absolute; z-index: -1; top: 22%; left: 8%; width: 0; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .65); opacity: 0;
  transition: width .5s ease .25s, opacity .3s ease .25s;
}
.btn-polish .btn-primary:not(:disabled):hover::after, .btn-polish-demo:hover::after { width: 60%; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-polish .btn-primary:not(:disabled)::before { transition: none; }
}
/* Oje sürülüp bitince düğmenin kendi rengi de değişsin (köşelerde koyu kenar kalmasın); çizgiler daha hafif */
.btn-polish .btn-primary:not(:disabled) { transition: background-color .15s ease .5s, transform .2s; }
.btn-polish .btn-primary:not(:disabled):hover { background: var(--polish, #c4606f); transition-delay: .48s; }
.btn-polish .btn-primary:not(:disabled)::before, .btn-polish-demo::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .1) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 7px),
    var(--polish, #c4606f);
  transition-duration: .55s;
}
.btn-polish .btn-primary:not(:disabled):hover::after, .btn-polish-demo:hover::after { width: 52%; }

/* Menüden bölüme gidince başlık sabit menünün altında kalmasın; ilk bölüm (Çalışmalar) en üste gelsin */
html { scroll-padding-top: var(--header-h, 80px); }

/* ============ ANİMASYONLAR ============ */
/* Ana ekran: fotoğraf fırça darbesiyle değişir */
.slider.fx-brush .slide { transition: transform 6s ease; }
.slider.fx-brush .slide.prev { opacity: 1; z-index: 1; }
.slider.fx-brush .slide.active { z-index: 2; }
.slider.fx-brush .slide.brush-in {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H138 L146 3 L140 8 L151 12 L142 18 L154 24 L144 30 L152 36 L141 42 L155 49 L145 55 L152 62 L142 68 L153 74 L144 80 L150 87 L141 93 L147 100 H0 Z'/%3E%3Cg opacity='.55'%3E%3Crect x='146' y='15' width='14' height='1.6'/%3E%3Crect x='150' y='33' width='12' height='1.4'/%3E%3Crect x='148' y='58' width='15' height='1.6'/%3E%3Crect x='146' y='77' width='11' height='1.4'/%3E%3C/g%3E%3C/svg%3E") 100% 0 / 300% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H138 L146 3 L140 8 L151 12 L142 18 L154 24 L144 30 L152 36 L141 42 L155 49 L145 55 L152 62 L142 68 L153 74 L144 80 L150 87 L141 93 L147 100 H0 Z'/%3E%3Cg opacity='.55'%3E%3Crect x='146' y='15' width='14' height='1.6'/%3E%3Crect x='150' y='33' width='12' height='1.4'/%3E%3Crect x='148' y='58' width='15' height='1.6'/%3E%3Crect x='146' y='77' width='11' height='1.4'/%3E%3C/g%3E%3C/svg%3E") 100% 0 / 300% 100% no-repeat;
  animation: brushIn 1.15s cubic-bezier(.62, 0, .22, 1) forwards;
}
@keyframes brushIn {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
.slider.fx-brush .slide-caption, .slider.fx-brush .dots, .slider.fx-brush .slider-arrow { z-index: 3; }

/* 5 yıldız konfetisi */
.confetti { position: fixed; z-index: 400; pointer-events: none; will-change: transform, opacity; }
.confetti svg { display: block; width: 100%; height: 100%; }
.confetti-nail { width: 14px; height: 21px; filter: drop-shadow(0 2px 2px rgba(90, 40, 40, .25)); }
.confetti-spark { width: 13px; height: 13px; }

/* WhatsApp: nabız + baloncuk */
.wa-fx::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1;
  animation: waPulse 4.5s ease-out infinite;
}
@keyframes waPulse {
  0%, 62% { transform: scale(1); opacity: 0; }
  64% { opacity: .55; }
  100% { transform: scale(1.75); opacity: 0; }
}
.wa-bubble {
  position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap;
  padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: #fff; color: var(--ink);
  font: 500 14px var(--sans); box-shadow: 0 12px 28px -12px rgba(60, 30, 30, .4); border: 1px solid var(--line);
  opacity: 0; transform: translate(8px, -50%) scale(.92); transform-origin: right center; pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.wa-fx:hover .wa-bubble, .wa-fx.bubble-show .wa-bubble { opacity: 1; transform: translate(0, -50%) scale(1); }
.wa-fx.is-hidden .wa-bubble { opacity: 0; }

/* Altın sim izi */
.glitter {
  position: fixed; z-index: 300; pointer-events: none; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c);
}
.glitter-star { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; }

/* Kaydırınca belirme */
.fx-reveal .reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .85s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.fx-reveal .reveal.is-in { opacity: 1; transform: none; }
/* Fırça ucu fotoğrafın üzerinden baştan sona eşit hızda geçsin */
.slider.fx-brush .slide.brush-in { -webkit-mask-position: 83% 0; mask-position: 83% 0; animation: brushIn2 1.25s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes brushIn2 {
  from { -webkit-mask-position: 83% 0; mask-position: 83% 0; }
  to   { -webkit-mask-position: 20% 0; mask-position: 20% 0; }
}

/* WhatsApp düğmesi: gerçek logo, içi dolu beyaz */
.wa-float svg.wa-logo { width: 30px; height: 30px; fill: #fff; stroke: none; }

.contact-icon svg.wa-logo { width: 21px; height: 21px; fill: var(--rose-dark); stroke: none; }

/* ---------- Yorumlar: desenli arka plan (tırnak, oje şişesi, parıltı) ---------- */
.reviews.rev-pattern {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 45% 60% at 8% 20%, rgba(233, 178, 170, .35), transparent 70%),
    radial-gradient(ellipse 40% 55% at 95% 85%, rgba(212, 162, 76, .16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg opacity='.26'%3E%3Cg transform='translate%2824 28%29 rotate%28-18%29 scale%281%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23c9787a'/%3E%3Cpath d='M-6.5 -3.5 Q0 0 6.5 -3.5 L6.5 -10 L-6.5 -10Z' fill='%23fff' clip-path='url%28%23c%29'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Cpath transform='translate%2872 18%29 scale%280.9%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Cpath transform='translate%28122 30%29 rotate%2810%29 scale%281%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23e39aa8'/%3E%3Ccircle cx='158' cy='12' r='1.6' fill='%23c9787a'/%3E%3Ccircle cx='50' cy='64' r='1.3' fill='%23d4a24c'/%3E%3Cg transform='translate%2898 80%29 rotate%2822%29 scale%280.9%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23e39aa8'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Cpath transform='translate%28152 72%29 scale%280.7%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='14' cy='90' r='1.8' fill='%23c9787a'/%3E%3Cpath transform='translate%2842 122%29 rotate%28-12%29 scale%280.9%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23d4a24c'/%3E%3Cpath transform='translate%2890 134%29 scale%281.1%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Cg transform='translate%28142 130%29 rotate%28-28%29 scale%281.05%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23c9787a'/%3E%3Cpath d='M-6.5 -3.5 Q0 0 6.5 -3.5 L6.5 -10 L-6.5 -10Z' fill='%23fff' clip-path='url%28%23c%29'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Ccircle cx='120' cy='104' r='1.2' fill='%23d4a24c'/%3E%3Ccircle cx='68' cy='106' r='1.5' fill='%23e39aa8'/%3E%3Cpath transform='translate%2816 152%29 scale%280.6%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='170' cy='162' r='1.4' fill='%23d4a24c'/%3E%3Ccircle cx='102' cy='174' r='1.6' fill='%23c9787a'/%3E%3Cg transform='translate%28176 40%29 rotate%2838%29 scale%280.85%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23e39aa8'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 190px 190px,
    linear-gradient(180deg, #f6e6e0 0%, #fbf2ee 100%);
}
/* Kartların arkası biraz daha sakin kalsın diye ortada yumuşak bir ışık */
.reviews.rev-pattern::before {
  content: ""; position: absolute; inset: 22% 6% 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(251, 242, 238, .85), transparent 70%);
}
.reviews.rev-pattern .rev-card { box-shadow: 0 24px 46px -30px rgba(150, 80, 70, .45); }
.reviews.rev-pattern .marquee {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ---------- Desenli arka planlar: ana ekran ve Instagram (yorumlarla aynı aile) ---------- */
/* Ana ekran: krem zemin, çok soluk tırnak deseni sol üstten fotoğrafa doğru silikleşir */
.bg-patterns .hero { position: relative; isolation: isolate; }
.bg-patterns .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 55% at 72% 48%, rgba(233, 178, 170, .38), transparent 70%),
    radial-gradient(ellipse 35% 40% at 96% 96%, rgba(212, 162, 76, .16), transparent 70%),
    radial-gradient(ellipse 40% 45% at 4% 8%, rgba(241, 220, 211, .9), transparent 70%),
    linear-gradient(180deg, #fbf5f1 0%, #f8ece6 100%);
}
.bg-patterns .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg opacity='.26'%3E%3Cg transform='translate%2824 28%29 rotate%28-18%29 scale%281%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23c9787a'/%3E%3Cpath d='M-6.5 -3.5 Q0 0 6.5 -3.5 L6.5 -10 L-6.5 -10Z' fill='%23fff' clip-path='url%28%23c%29'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Cpath transform='translate%2872 18%29 scale%280.9%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Cpath transform='translate%28122 30%29 rotate%2810%29 scale%281%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23e39aa8'/%3E%3Ccircle cx='158' cy='12' r='1.6' fill='%23c9787a'/%3E%3Ccircle cx='50' cy='64' r='1.3' fill='%23d4a24c'/%3E%3Cg transform='translate%2898 80%29 rotate%2822%29 scale%280.9%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23e39aa8'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Cpath transform='translate%28152 72%29 scale%280.7%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='14' cy='90' r='1.8' fill='%23c9787a'/%3E%3Cpath transform='translate%2842 122%29 rotate%28-12%29 scale%280.9%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23d4a24c'/%3E%3Cpath transform='translate%2890 134%29 scale%281.1%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Cg transform='translate%28142 130%29 rotate%28-28%29 scale%281.05%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23c9787a'/%3E%3Cpath d='M-6.5 -3.5 Q0 0 6.5 -3.5 L6.5 -10 L-6.5 -10Z' fill='%23fff' clip-path='url%28%23c%29'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3Ccircle cx='120' cy='104' r='1.2' fill='%23d4a24c'/%3E%3Ccircle cx='68' cy='106' r='1.5' fill='%23e39aa8'/%3E%3Cpath transform='translate%2816 152%29 scale%280.6%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='170' cy='162' r='1.4' fill='%23d4a24c'/%3E%3Ccircle cx='102' cy='174' r='1.6' fill='%23c9787a'/%3E%3Cg transform='translate%28176 40%29 rotate%2838%29 scale%280.85%29'%3E%3Cpath d='M0 -10 C5 -10 6.5 -4.5 6.5 1 L6.5 8.5 Q6.5 10 5 10 L-5 10 Q-6.5 10 -6.5 8.5 L-6.5 1 C-6.5 -4.5 -5 -10 0 -10Z' fill='%23e39aa8'/%3E%3Cpath d='M-3.2 -5 C-4 -1 -4 3 -3.6 6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='.55' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 190px 190px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 18% 30%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 85% at 18% 30%, #000 25%, transparent 78%);
}
/* Instagram: şampanya-pudra geçişi, sadece parıltılar ve damlalar */
.bg-patterns .insta {
  position: relative; isolation: isolate; border-top: none;
  background:
    radial-gradient(ellipse 45% 70% at 92% 15%, rgba(212, 162, 76, .18), transparent 70%),
    radial-gradient(ellipse 45% 70% at 6% 90%, rgba(233, 178, 170, .32), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg opacity='.42'%3E%3Cpath transform='translate%2820 22%29 scale%281.1%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='60' cy='14' r='1.4' fill='%23c9787a'/%3E%3Cpath transform='translate%2898 40%29 rotate%2814%29 scale%280.85%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23e39aa8'/%3E%3Cpath transform='translate%28140 26%29 scale%280.7%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='170' cy='60' r='1.8' fill='%23d4a24c'/%3E%3Ccircle cx='30' cy='70' r='1.2' fill='%23e39aa8'/%3E%3Cpath transform='translate%2878 88%29 scale%280.8%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23e6b7ad'/%3E%3Ccircle cx='124' cy='96' r='1.5' fill='%23c9787a'/%3E%3Cpath transform='translate%28162 118%29 scale%281.2%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Cpath transform='translate%2840 128%29 rotate%28-16%29 scale%280.8%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23d4a24c'/%3E%3Ccircle cx='92' cy='140' r='1.3' fill='%23d4a24c'/%3E%3Cpath transform='translate%2820 168%29 scale%280.7%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23e6b7ad'/%3E%3Ccircle cx='64' cy='176' r='1.6' fill='%23e39aa8'/%3E%3Cpath transform='translate%28118 170%29 scale%280.9%29' d='M0 -6 C.6 -1.6 1.6 -.6 6 0 C1.6 .6 .6 1.6 0 6 C-.6 1.6 -1.6 .6 -6 0 C-1.6 -.6 -.6 -1.6 0 -6Z' fill='%23d4a24c'/%3E%3Ccircle cx='152' cy='160' r='1.2' fill='%23c9787a'/%3E%3Cpath transform='translate%28178 8%29 rotate%288%29 scale%280.7%29' d='M0 -7 C2.5 -3 4.5 -.5 4.5 2 A4.5 4.5 0 0 1 -4.5 2 C-4.5 -.5 -2.5 -3 0 -7Z' fill='%23e39aa8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 190px 190px,
    linear-gradient(180deg, #f8efe4 0%, #f6e3dd 100%);
}
.bg-patterns .insta .post { box-shadow: 0 22px 40px -28px rgba(130, 70, 60, .55); }
/* Üst menü düğmeleri tek satırda kalsın; dar ekranda menü yazıları biraz sıklaşsın */
.header-actions .btn { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 861px) { .nav { gap: 20px; font-size: 14px; } .header { gap: 16px; } }
.header .logo { flex-shrink: 0; }
/* 861–960 px arası da üst menü yerine ☰ (yazılar sığmıyor) */
@media (max-width: 960px) { .nav { display: none; } }

/* Sunucuya bağlanılamazsa */
.boot-error { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 14px; align-items: center;
  background: #2b1d1b; color: #fff; padding: 14px 18px; border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); font-size: 14px; max-width: calc(100% - 32px); }
.boot-error p { margin: 0; }
.boot-error button { background: #fff; color: #2b1d1b; border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }