:root{--black:#080808;--soft:#111;--white:#e9e5db;--muted:#8c8982;--gold:#b59a68;--line:#292929;--pad:clamp(22px,5.5vw,88px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:Manrope,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.header{position:absolute;z-index:10;top:0;left:0;width:100%;height:100px;padding:0 var(--pad);display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.16)}.logo{display:grid;grid-template-columns:42px auto;column-gap:11px;align-items:center}.logo>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);font:500 17px "Cormorant Garamond";color:var(--gold)}.logo b{font:500 18px "Cormorant Garamond";letter-spacing:.32em}.logo small{font-size:7px;letter-spacing:.18em;color:#aaa}.header nav{margin:auto;display:flex;gap:44px}.header nav a{font-size:10px;text-transform:uppercase;letter-spacing:.15em}.header nav a:hover,.book-link:hover{color:var(--gold)}.book-link{font-size:10px;text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid var(--gold);padding:9px 0}.book-link i{font-style:normal;color:var(--gold);margin-left:12px}.menu-button{display:none;background:0;border:0}.menu-button span{display:block;background:white;width:26px;height:1px;margin:7px}.hero{height:100svh;min-height:720px;position:relative;overflow:hidden}.hero>img{width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.28) 58%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%)}.hero-copy{position:absolute;z-index:2;left:var(--pad);top:52%;transform:translateY(-45%);width:min(750px,64vw)}.label{font-size:9px;letter-spacing:.28em;color:var(--gold)}h1,h2,.lead,blockquote{font-family:"Cormorant Garamond",serif;font-weight:400}h1{font-size:clamp(76px,9.5vw,154px);line-height:.7;letter-spacing:-.055em;margin:54px 0}h1 em,h2 em,.lead em,blockquote em{font-weight:400;color:var(--gold)}.hero-bottom{display:flex;align-items:center;gap:65px}.hero-bottom p{color:#bbb;font-size:12px;line-height:1.8}.circle-link{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.45);border-radius:50%;transition:.3s}.circle-link:hover{background:var(--gold);border-color:var(--gold);color:#111}.hero-side{position:absolute;right:22px;bottom:70px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.18em;color:#aaa}.wrap{padding-left:var(--pad);padding-right:var(--pad)}.intro{padding-top:150px;padding-bottom:150px}.section-no{font-size:8px;letter-spacing:.23em;color:var(--gold);display:flex;align-items:center;gap:14px}.section-no span{width:38px;height:1px;background:var(--gold)}.intro-copy{display:grid;grid-template-columns:1.5fr .7fr;gap:10vw;align-items:end;margin:70px 0 100px}.lead{font-size:clamp(43px,5.7vw,86px);line-height:.98;margin:0}.body-copy{color:var(--muted);font-size:13px;line-height:2;max-width:400px}.stats{margin-left:30%;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding-top:32px}.stats div{display:flex;align-items:center;gap:18px}.stats strong{font:400 40px "Cormorant Garamond";color:var(--gold)}.stats span{font-size:9px;line-height:1.55;text-transform:uppercase;letter-spacing:.12em;color:#999}.services{padding-top:140px;padding-bottom:140px;background:var(--soft)}.section-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:80px}.section-title h2,.works h2,.contact h2{font-size:clamp(58px,7vw,104px);line-height:.8;letter-spacing:-.04em;margin:0;font-weight:400}.service-list{margin-left:25%}.service-list article{display:grid;grid-template-columns:55px 1.15fr 1fr 100px;gap:26px;align-items:center;border-top:1px solid #333;padding:33px 0;transition:.25s}.service-list article:last-child{border-bottom:1px solid #333}.service-list article:hover{padding-left:16px;background:#161616}.service-list span{font:400 16px "Cormorant Garamond";color:var(--gold)}.service-list h3{font:400 28px "Cormorant Garamond";margin:0}.service-list p{font-size:11px;color:#888;line-height:1.7}.service-list a{font-size:8px;letter-spacing:.12em;color:var(--gold)}.works{padding:150px 0}.works-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:70px}.works-head .section-no{margin-bottom:40px}.filters{display:flex;gap:9px}.filters button{border:1px solid #333;background:transparent;color:#999;padding:10px 16px;font-size:8px;letter-spacing:.1em;cursor:pointer}.filters button.active,.filters button:hover{border-color:var(--gold);color:var(--gold)}.gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:420px;gap:22px}.gallery-item{position:relative;padding:0;border:0;background:#111;overflow:hidden;color:white;cursor:pointer;text-align:left;transition:.5s}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:2}.gallery-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.8);transition:.7s}.gallery-item:hover img{transform:scale(1.035);filter:saturate(1) brightness(.95)}.gallery-item>span{position:absolute;left:24px;bottom:22px;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 20px #000}.gallery-item b{font:400 25px "Cormorant Garamond"}.gallery-item small{font-size:7px;letter-spacing:.18em}.gallery-item>i{position:absolute;right:22px;top:20px;font-style:normal;font-size:18px}.gallery-item.hidden{display:none}.promise{padding-top:150px;padding-bottom:150px;text-align:center}.promise blockquote{font-size:clamp(42px,6vw,88px);line-height:1;margin:60px 0}.promise-grid{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding-top:28px}.promise-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8c8982}.promise-grid span:before{content:'✦';color:var(--gold);margin-right:12px}.contact{background:var(--white);color:#111;padding:130px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:11vw}.contact-copy .label{color:#806a45}.contact-copy h2{margin:40px 0}.contact-copy p:not(.label){font-size:12px;line-height:1.8;color:#666}.contact-copy>a{font-size:9px;letter-spacing:.12em;border-bottom:1px solid #806a45;padding-bottom:7px}.contact form{padding-top:40px}.contact label{display:flex;align-items:center;border-bottom:1px solid #aaa;padding:20px 0}.contact label>span{font:400 13px "Cormorant Garamond";color:#806a45;width:45px}.contact input,.contact select,.contact textarea{width:100%;background:none;border:0;outline:0;color:#111;resize:none;font-size:13px}.contact textarea{height:55px}.contact form>button{margin-top:32px;width:100%;height:60px;background:#111;color:white;border:0;font-size:9px;letter-spacing:.18em;cursor:pointer}.contact form>button:hover{background:#806a45}.contact form>button i{color:var(--gold);font-style:normal;margin-left:20px}.form-status{font-size:11px;color:#806a45}footer{padding:65px var(--pad) 25px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;color:#777}footer p,footer a{font-size:9px;letter-spacing:.1em}footer>div{display:flex;flex-direction:column;gap:5px}footer>small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:35px;font-size:7px;letter-spacing:.14em}.lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center}.lightbox.open{display:flex}.lightbox figure{margin:0;max-width:min(85vw,1100px);height:82vh;display:flex;flex-direction:column;align-items:center}.lightbox img{max-width:100%;height:calc(100% - 40px);object-fit:contain}.lightbox figcaption{font:400 18px "Cormorant Garamond";padding-top:16px}.lightbox button{position:absolute;background:transparent;border:0;color:white;cursor:pointer}.lightbox-close{right:28px;top:20px;font:300 36px Manrope}.lightbox-prev,.lightbox-next{font-size:24px;top:50%;padding:20px}.lightbox-prev{left:3vw}.lightbox-next{right:3vw}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.header{height:78px}.header nav{display:none;position:absolute;top:78px;left:0;right:0;padding:28px var(--pad);background:#0c0c0c;flex-direction:column;gap:25px}.header nav.open{display:flex}.book-link{display:none}.menu-button{display:block;margin-left:auto}.hero-copy{width:75vw}.intro-copy{grid-template-columns:1fr;gap:38px}.stats{margin-left:0}.section-title{display:block}.section-title .section-no{margin-bottom:40px}.service-list{margin-left:0}.service-list article{grid-template-columns:40px 1fr 1fr}.service-list article a{display:none}.gallery{grid-auto-rows:340px}.contact{grid-template-columns:1fr;gap:50px}}
@media(max-width:600px){h1{font-size:76px;line-height:.78}.hero{min-height:680px}.hero>img{object-position:60%}.hero-copy{width:calc(100% - 44px);top:47%}.hero-bottom{gap:25px}.intro,.services,.works,.promise{padding-top:95px;padding-bottom:95px}.intro-copy{margin:55px 0}.stats{grid-template-columns:1fr;gap:18px}.service-list article{grid-template-columns:28px 1fr;padding:26px 0}.service-list article p{grid-column:2}.works-head{display:block}.filters{margin-top:40px;overflow:auto}.gallery{grid-template-columns:1fr;grid-auto-rows:430px;gap:14px}.gallery-item.tall{grid-row:auto}.gallery-item.wide{grid-column:auto;height:270px}.promise-grid{grid-template-columns:1fr;gap:18px}.contact{padding-top:90px;padding-bottom:90px}footer{grid-template-columns:1fr}.lightbox-prev{left:0}.lightbox-next{right:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}
/* Responsive overrides for the single-page Lapis gallery. */
@media (max-width: 1079px) {
  header { padding-left: 24px !important; padding-right: 24px !important; }
  nav { gap: 14px !important; }
}

@media (max-width: 699px) {
  header { padding: 10px 16px !important; }
  section { scroll-margin-top: 80px; }
  #dovme-piercing, #studyolar, #sss { padding-left: 18px !important; padding-right: 18px !important; }
  #dovme-piercing > div:first-child, #studyolar > div:first-child { display: block !important; }
  #dovme-piercing > div:first-child h2, #studyolar > div:first-child h2 { margin-bottom: 14px !important; }
  .tattoo-gallery-link { min-height: 100px; }
}

@media (min-width: 700px) and (max-width: 1079px) {
  #hizmetler > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #hizmetler article {
    min-width: 0 !important;
    padding: 20px !important;
  }
}

@media (max-width: 860px) {
  #hakkimizda-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  #hakkimizda-content > div:first-child {
    min-height: 380px !important;
  }

  #hizmetler > div:nth-child(2),
  #studyolar > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }

  #studyolar > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #hizmetler article,
  #studyolar article,
  #studyolar > div:nth-child(2) > div {
    min-height: 0 !important;
  }
}

/* Hijyen kartları: masaüstünde satıra iki tane */
#studyolar > div:nth-child(2) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 620px) {
  #studyolar > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 599px) {
  #hizmetler > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}

#hakkimizda {
  background: oklch(0.145 0.006 260);
}

.about-combined-heading {
  padding: clamp(32px, 3.8vw, 52px) clamp(22px, 5vw, 56px) 20px;
}

.about-combined-heading span {
  color: oklch(0.76 0.075 85);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: none;
}

.about-combined-heading h2 {
  margin: 16px 0 14px;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
}

.about-combined-heading p {
  max-width: 52ch;
  margin: 0;
  color: oklch(0.72 0.01 260);
  font-size: 16px;
  line-height: 1.7;
}

/* Metinler CSS tarafından otomatik büyük harfe çevrilmesin. */
body * {
  text-transform: none !important;
}

body h1,
body h2 {
  color: #a88952 !important;
}

body h1,
body h2,
body h3,
body strong {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body > x-dc,
body > x-dc * {
  font-family: 'Manrope', sans-serif;
}

body h1,
body h2,
body h3,
body strong {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

@media (max-width: 699px) {
  #hizmetler {
    width: 100% !important;
    padding: 20px !important;
  }

  #hizmetler > div:first-child {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #hizmetler > div:first-child p {
    max-width: none !important;
    text-align: left !important;
  }

  #hizmetler > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #hizmetler article {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  #hakkimizda-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  #hakkimizda-content > div:first-child {
    min-height: 360px !important;
  }

  #hakkimizda-content > div:nth-child(2) {
    width: 100% !important;
  }
}

/* ============================================================
   Hizmet panelleri — Cover Up / Dövme Sildirme
   İki bölüm aynı şablondan basıldığı için tek bir blok gibi
   görünüyordu. Sıra değişimi, katmanlı derinlik ve altın
   editoryal detaylarla birbirinden ayrılıyor.
   ============================================================ */

/* Bölüm zemini + ayraç: hizmet panelleri, SSS ve İletişim aynı ritmi paylaşıyor */
.svc,
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(118% 88% at 10% 0%, oklch(0.205 0.013 260) 0%, transparent 60%),
    radial-gradient(86% 72% at 100% 100%, oklch(0.24 0.045 255 / 0.34) 0%, transparent 62%),
    oklch(0.128 0.006 260);
}

.svc {
  scroll-margin-top: 110px;
  padding: clamp(76px, 9vw, 136px) clamp(22px, 5vw, 56px);
}

/* Üstteki altın saç teli: bölümleri birbirinden ayıran ayraç */
/* Bölümler arası ayraç: eski düz altın saç teli */
.svc::before,
.band::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(22px, 5vw, 56px);
  right: clamp(22px, 5vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.72 0.07 85 / 0.5) 22%, oklch(0.72 0.07 85 / 0.5) 78%, transparent);
}

/* Hakkımızda bölümü JS ile kurulduğu için ayracını gerçek bir eleman
   olarak alıyor; görünümü diğer bölüm ayraçlarıyla birebir aynı. */
.section-needle {
  display: block;
  height: 1px;
  margin: 0 clamp(22px, 5vw, 56px);
  background: linear-gradient(90deg, transparent, oklch(0.72 0.07 85 / 0.5) 22%, oklch(0.72 0.07 85 / 0.5) 78%, transparent);
}


.svc-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(36px, 5.5vw, 86px);
  max-width: 1320px;
  margin: 0 auto;
}

/* Aynalanmış zemin: ardışık bölümlerin arka planı birbirinin tersi olsun */
.svc--reverse,
.band--alt {
  background:
    radial-gradient(118% 88% at 90% 0%, oklch(0.205 0.013 260) 0%, transparent 60%),
    radial-gradient(86% 72% at 0% 100%, oklch(0.24 0.045 255 / 0.34) 0%, transparent 62%),
    oklch(0.128 0.006 260);
}

.svc--reverse .svc-media { order: 2; }

/* --- Görsel: üç katman (arkada ışık, ortada ofset çerçeve, önde fotoğraf) --- */

.svc-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
}

.svc-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(18px, 18px);
  border: 1px solid oklch(0.7 0.07 85 / 0.4);
  border-radius: 2px;
}

.svc--reverse .svc-media::before { transform: translate(-18px, 18px); }

.svc-media::after {
  content: '';
  position: absolute;
  inset: -14% -10%;
  z-index: -2;
  background: radial-gradient(58% 54% at 50% 46%, oklch(0.55 0.13 250 / 0.16), transparent 70%);
  filter: blur(26px);
}

.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(0.18) contrast(1.06) brightness(0.93);
  box-shadow:
    0 2px 6px oklch(0 0 0 / 0.5),
    0 26px 50px -20px oklch(0 0 0 / 0.72),
    0 64px 120px -46px oklch(0 0 0 / 0.9),
    0 0 0 1px oklch(1 0 0 / 0.07);
}


/* --- Metin sütunu --- */

.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: oklch(0.74 0.07 85);
}

.svc-eyebrow i {
  flex: 0 0 42px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.svc h2 {
  margin: 0 0 20px;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 0.96;
}

.svc-copy { max-width: 560px; }

.svc-lead {
  margin: 0 0 34px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: oklch(0.8 0.01 260);
  text-wrap: pretty;
}

.svc-points {
  counter-reset: svcpoint;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
  border-top: 1px solid oklch(1 0 0 / 0.09);
}

.svc-points li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 16px;
  padding: 17px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.09);
}

.svc-points li::before {
  counter-increment: svcpoint;
  content: '0' counter(svcpoint);
  grid-row: 1 / 3;
  padding-top: 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  font-size: 15px;
  color: oklch(0.74 0.07 85);
}

.svc-points b {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: oklch(0.94 0.01 260);
}

.svc-points span {
  font-size: 13.5px;
  line-height: 1.65;
  color: oklch(0.68 0.01 260);
}

.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 17px 30px;
  border: 1px solid oklch(0.7 0.07 85 / 0.55);
  background: oklch(0.7 0.07 85 / 0.05);
  color: oklch(0.79 0.07 85);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.svc-cta i {
  font-style: normal;
  transition: transform 0.35s ease;
}

.svc-cta:hover {
  transform: translateY(-2px);
  border-color: oklch(0.74 0.075 85);
  background: oklch(0.74 0.075 85);
  color: oklch(0.16 0.008 260);
  box-shadow: 0 18px 36px -14px oklch(0.74 0.075 85 / 0.5);
}

.svc-cta:hover i { transform: translateX(5px); }

@media (max-width: 899px) {
  .svc-shell {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }

  /* Mobilde her iki panelde de görsel önce gelsin */
  .svc--reverse .svc-media { order: 0; }

  .svc-media::before,
  .svc--reverse .svc-media::before { transform: translate(11px, 11px); }

}

@media (prefers-reduced-motion: reduce) {
  .svc-cta,
  .svc-cta i { transition: none; }
  .svc-cta:hover { transform: none; }
}

/* ============================================================
   İletişim — stüdyo kartları
   Eskiden yan yana iki uzun kart vardı; fotoğraflar alt alta
   olduğu için kartlar iç içe geçmiş gibi duruyordu. Artık
   kartlar alt alta, içerik yatay ve kompakt.
   ============================================================ */

.lapis-contact {
  scroll-margin-top: 110px;
  padding: clamp(64px, 8vw, 112px) clamp(22px, 5vw, 56px) clamp(44px, 5vw, 72px);
}

.lapis-contact-head {
  max-width: 620px;
  margin: 0 0 clamp(30px, 3.6vw, 48px);
}

.lapis-contact h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
}

.lapis-contact-lead {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: oklch(0.8 0.01 260);
  text-wrap: pretty;
}

.lapis-contact-hours {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid oklch(1 0 0 / 0.09);
}

.lapis-contact-hours span {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: oklch(0.6 0.01 260);
}

.lapis-contact-hours b {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: oklch(0.92 0.01 260);
}

/* Kartlar alt alta */
.studio-list {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}

.studio {
  display: grid;
  /* Fotoğraflar 2x2 solda; sağ sütunda bilgiler ve altında harita.
     Harita bilgi sütununun içinde durduğu için ızgarada satır yayılımı yok —
     fotoğraf bloğunun sabit oranı hiçbir genişlikte alanından taşamıyor. */
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  align-items: stretch;
  min-height: 0;
  gap: clamp(16px, 1.9vw, 26px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 4px;
  background: linear-gradient(135deg, oklch(0.19 0.008 260), oklch(0.152 0.007 260));
  box-shadow: 0 18px 42px -28px oklch(0 0 0 / 0.9);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.studio:hover {
  transform: translateY(-2px);
  border-color: oklch(0.7 0.07 85 / 0.38);
  box-shadow: 0 28px 54px -30px oklch(0 0 0 / 0.95);
}

.studio-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  /* Oran bloğun yüksekliğini belirlesin; stretch onu ezmesin diye align-self */
  align-self: center;
  aspect-ratio: 3 / 2;
}

.studio-shots a {
  display: block;
  overflow: hidden;
  border-radius: 2px;
}

.studio-shots img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* --- Google Maps: koyu tasarıma uyması için ters çevirip tonu geri döndürüyoruz --- */

.studio-map {
  position: relative;
  height: 205px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / 0.09);
  border-radius: 2px;
  background: oklch(0.17 0.008 260);
}

.studio-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) grayscale(0.32) contrast(0.88) brightness(0.94);
}

.studio-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.studio-shots a:hover img { transform: scale(1.04); }

.studio-tag {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: oklch(0.72 0.07 85);
}

.studio-info h3 {
  margin: 6px 0 18px;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.15;
  text-wrap: balance;
  color: oklch(0.95 0.01 260);
}

/* Adres / telefon: ikon yerine hizalı etiket sütunu — hem kompakt hem okunur */
.studio-facts {
  margin: 0 0 22px;
  display: grid;
}

.studio-facts > div {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid oklch(1 0 0 / 0.08);
}

.studio-facts > div:last-child {
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}

.studio-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 1px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: oklch(0.64 0.01 260);
}

.studio-facts dt svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: oklch(0.73 0.07 85);
}

.studio-facts dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: oklch(0.87 0.01 260);
  text-wrap: pretty;
}

.studio-facts a {
  color: inherit;
  border-bottom: 1px solid oklch(0.7 0.07 85 / 0.35);
}

.studio-facts a:hover { color: oklch(0.79 0.07 85); }

.studio-cta {
  align-self: flex-start;
  padding: 13px 22px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* Harita köşesinden Google Maps yol tarifine çıkış */
.studio-map-link {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid oklch(0.7 0.07 85 / 0.5);
  border-radius: 2px;
  background: oklch(0.15 0.008 260 / 0.86);
  backdrop-filter: blur(6px);
  color: oklch(0.82 0.07 85);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.studio-map-link:hover {
  border-color: oklch(0.74 0.075 85);
  background: oklch(0.74 0.075 85);
  color: oklch(0.16 0.008 260);
}

/* 1080px altında iki sütun fazla sıkışıyor: tek sütuna geçiyoruz */
@media (max-width: 1080px) {
  .studio {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }

  /* Tek sütuna inince yerleşim sırası: fotoğraflar, bilgiler, harita */
  .studio-shots { aspect-ratio: auto; grid-template-rows: auto auto; }
  .studio-shots img { aspect-ratio: 4 / 3; height: auto; }
  .studio-map { height: 190px; margin-top: 18px; }

  .studio-facts > div {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }

  .studio-facts dt {
    gap: 7px;
    letter-spacing: 0.1em;
  }
}

/* Tek sütuna geçtiği ama ekranın hâlâ geniş olduğu bant: kareler tam genişlikte
   4:3 olunca aşırı büyüyor. Biraz basıklaştırıp kart yüksekliğini kısıyoruz. */
@media (min-width: 761px) and (max-width: 1080px) {
  .studio-shots img { aspect-ratio: 16 / 10; }
  .studio-map { height: 230px; }
}

/* SSS başlığı: İletişim bölümüyle aynı format — üstte altın etiket, altta başlık */
.faq-head {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
}

.faq-head h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
}

/* ------------------------------------------------------------
   Cover Up görsel yığını: masaya atılmış baskılar gibi — her kare
   büyük, birbirinin üstüne binmiş, farklı açılarda. Öndeki kare
   baskın, arkadakiler yalnızca kenarlarından görünüyor.
   ------------------------------------------------------------ */

.svc-media--stack {
  aspect-ratio: 7 / 5;
}

/* Tek görsel için olan ofset altın çerçeve yığında kalabalık yapıyor */
.svc-media--stack::before { display: none; }

.svc-media--stack .svc-shot {
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 2px;
  object-fit: cover;
  /* Yerleşmiş hâl. Giriş animasyonu bu değere doğru iner. */
  transform: translateY(0) rotate(var(--rot, 0deg));
  box-shadow:
    0 3px 8px oklch(0 0 0 / 0.6),
    0 30px 55px -20px oklch(0 0 0 / 0.85),
    0 70px 120px -50px oklch(0 0 0 / 0.95),
    0 0 0 1px oklch(1 0 0 / 0.11);
}

/* Üç kare de yan yana öncesi/sonrası. Basamak sağ üstten sol alta iniyor;
   böylece her karenin sağ yarısı ("sonrası") açıkta kalıyor. */
/* Üç kare de yan yana öncesi/sonrası. Basamak sağ üstten sol alta iniyor;
   böylece her karenin sağ yarısı ("sonrası") açıkta kalıyor.
   Açı --rot değişkeninde: giriş animasyonu bu değere doğru yerleşiyor. */
/* Zikzak: üst sol, orta sağ, alt sol. Dikey yayılım kısa tutuldu. */
.svc-media--trio .svc-shot--a {
  --rot: -4deg;
  --from: -120px;
  left: 0;
  top: 0;
  width: 56%;
  z-index: 1;
}

.svc-media--trio .svc-shot--b {
  --rot: 3.5deg;
  --from: 120px;
  left: 42%;
  top: 18%;
  width: 56%;
  z-index: 2;
}

.svc-media--trio .svc-shot--c {
  --rot: -2.5deg;
  --from: -120px;
  left: 5%;
  top: 36%;
  width: 56%;
  z-index: 3;
}

/* Kare oranları görsel setine göre */
.svc-media--trio .svc-shot { aspect-ratio: 1448 / 1086; }
#cover-up .svc-shot--b { aspect-ratio: 1408 / 1117; }
#dovme-sildirme .svc-shot--b { aspect-ratio: 1374 / 1145; }

@media (max-width: 899px) {
  .svc-media--trio .svc-shot--a { left: 0; width: 60%; }
  .svc-media--trio .svc-shot--b { left: 40%; width: 60%; }
  .svc-media--trio .svc-shot--c { left: 4%; width: 60%; }
}

/* ============================================================
   SSS akordiyonu — iki kolon
   Cevaplar kapalıyken de DOM'da duruyor (sc-if ile basılmayan
   içeriği arama motorları göremiyordu), yalnızca yükseklikle
   gizleniyor ve yumuşak biçimde açılıyor.
   ============================================================ */

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  border-top: 1px solid oklch(0.27 0.01 260);
}

.faq-item {
  border-bottom: 1px solid oklch(0.27 0.01 260);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 19px 0;
  border: 0;
  background: none;
  color: oklch(0.94 0.01 260);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-q:hover,
.faq-q[aria-expanded="true"] {
  color: oklch(0.8 0.07 85);
}

/* +/- işareti: veriden gelen metin gizlenip iki çubukla çiziliyor.
   Açılışta yalnızca dikey çubuk dönüyor, böylece artı eksiye dönüşüyor.
   (Framework {{ f.q }} metnini de bir span'e sardığı için sınıfla hedefliyoruz.) */
.faq-sign {
  position: relative;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  font-size: 0;
}

.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 1.5px;
  margin-top: -0.75px;
  background: oklch(0.78 0.07 85);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.faq-sign::after {
  transform: rotate(90deg);
}

.faq-q[aria-expanded="true"] .faq-sign::after {
  transform: rotate(0deg);
  opacity: 0;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer[data-open="true"] {
  grid-template-rows: 1fr;
}

.faq-answer > p {
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: oklch(0.74 0.01 260);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), padding 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer[data-open="true"] > p {
  padding-bottom: 22px;
  opacity: 1;
  transform: none;
  transition-delay: 0.08s, 0.08s, 0s;
}

@media (max-width: 899px) {
  .faq-list { grid-template-columns: 1fr; }

  /* Dar ekranda tüm sorular sola gidiyor; boş sütunun çizgisi kalmasın */
  .faq-col:not(:has(.faq-item)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-answer > p,
  .faq-sign::before,
  .faq-sign::after { transition: none; }
}

/* Dövme Sildirme: iki karelik yığın. Panel aynalandığı için eğim de ters yönde. */
/* ------------------------------------------------------------
   Hero perdeleri
   Eskiden yatay perde altı farklı gri tonunu (rgb 3,3,4 → 22,22,22)
   karıştırıyordu ve hiçbiri sayfa zemininin rengi değildi; bu yüzden
   isli cam gibi duruyordu. Artık tek renk — sayfa zemininin ta kendisi —
   ve yalnızca saydamlık değişiyor. Rampalar da lineer değil, yumuşatılmış.
   ------------------------------------------------------------ */

.hero-scrim-x {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Sağ uçta sıfıra inmiyor: 0.30 taban hem fotoğrafları geri plana atıyor
     hem de üstteki menü yazılarını okunur tutuyor. */
  background: linear-gradient(90deg,
    oklch(0.145 0.006 260 / 0.96) 0%,
    oklch(0.145 0.006 260 / 0.94) 12%,
    oklch(0.145 0.006 260 / 0.89) 24%,
    oklch(0.145 0.006 260 / 0.81) 36%,
    oklch(0.145 0.006 260 / 0.7) 48%,
    oklch(0.145 0.006 260 / 0.58) 60%,
    oklch(0.145 0.006 260 / 0.47) 72%,
    oklch(0.145 0.006 260 / 0.39) 82%,
    oklch(0.145 0.006 260 / 0.34) 91%,
    oklch(0.145 0.006 260 / 0.3) 100%);
}

.hero-scrim-y {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: min(58vh, 540px);
  z-index: 1;
  pointer-events: none;
  /* %93'te tam opaklığa ulaşıp öyle kalıyor: hero'nun overflow:hidden kesimi
     tamamen siyah bir alana denk geliyor, kenarda çizgi oluşmuyor. */
  background: linear-gradient(180deg,
    oklch(0.145 0.006 260 / 0) 0%,
    oklch(0.145 0.006 260 / 0.03) 20%,
    oklch(0.145 0.006 260 / 0.09) 34%,
    oklch(0.145 0.006 260 / 0.18) 46%,
    oklch(0.145 0.006 260 / 0.29) 56%,
    oklch(0.145 0.006 260 / 0.42) 65%,
    oklch(0.145 0.006 260 / 0.57) 73%,
    oklch(0.145 0.006 260 / 0.72) 80%,
    oklch(0.145 0.006 260 / 0.86) 86%,
    oklch(0.145 0.006 260 / 0.96) 90%,
    oklch(0.145 0.006 260) 93%,
    oklch(0.145 0.006 260) 100%);
}

/* Üst bant: başlık çubuğunun arkasını sakinleştirir, aşağı doğru tamamen kaybolur */
.hero-scrim-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(32vh, 280px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    oklch(0.145 0.006 260 / 0.66) 0%,
    oklch(0.145 0.006 260 / 0.55) 18%,
    oklch(0.145 0.006 260 / 0.4) 38%,
    oklch(0.145 0.006 260 / 0.25) 58%,
    oklch(0.145 0.006 260 / 0.12) 76%,
    oklch(0.145 0.006 260 / 0.04) 90%,
    oklch(0.145 0.006 260 / 0) 100%);
}

/* ------------------------------------------------------------
   Hero başlığı
   Üç satır, üç ayrı punto ve iki farklı tipografik ses:
   ince italik serif + geniş aralıklı büyük harf.
   ------------------------------------------------------------ */

/* Tam ekran: alttaki bölümün başlığı ilk ekranda görünmesin.
   svh, mobil tarayıcı çubuğu açılıp kapandığında zıplamayı önlüyor.
   Geçersiz birim eski tarayıcıda düşer, satır içi 100vh yedekte kalır. */
#anasayfa { min-height: 100svh !important; }

.hero-intro h1 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  padding-bottom: 0.06em;
  line-height: 1;
}

.hero-intro h1 span { display: block; }

/* 1. satır — diğer ikisiyle aynı kesim, büyük punto, aynı altın akışa dahil */
.hero-l1 {
  /* "Taksim": eski 0.84em puntoda 504px'e yayılmak için 0.56em aralık
     gerekiyordu, harfler kopuk okunuyordu. 1.2em'de gereken aralık 0.222em —
     LAPİS satırının 0.2255em'iyle aynı ritim. */
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.02;
  letter-spacing: 0.222em;
}

/* 1. satır — marka adı, DÖVME ile aynı punto ve ağırlık */
.hero-l0 {
  font-size: 1.34em;
  font-weight: 600;
  line-height: 0.96;
  /* Harf aralığı, satırı diğer üçüyle aynı genişliğe getirmek için açıldı */
  letter-spacing: 0.2255em;
  margin-bottom: 0.02em;
}

/* 2. satır — asıl kelime, oversize ve sıkı */
.hero-l2 {
  /* "TATTOO" (6 harf): LAPİS'le aynı puntoda (1.34em) 504px'e sığması için
     −0.09em aralık gerekiyordu, T'ler birbirine giriyordu. 1.18em'de aralık
     doğal (eski DÖVME satırı 0.012em idi). */
  font-size: 1.18em;
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: 0.0046em;
  margin-top: 0.03em;
}

/* 3. satır — daha küçük ama geniş harf aralığıyla aynı genişliğe yayılıyor */
.hero-l3 {
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.173em;
  margin-top: 0.1em;
}

/* Altın gradyan dolgu h1 üzerinde: iki büyük harf satırı tek bir sürekli
   geçişi paylaşıyor. 1. satır kendi rengiyle bunun dışında kalıyor.
   -webkit-text-fill-color, global "color: #a88952 !important" kuralını geçer. */
/* Altın akış: gradyan elemanın iki katı yükseklikte ve iki tam çevrim içeriyor.
   Arka planı bir eleman boyu kaydırınca desen kendine denk geliyor, yani döngü
   dikişsiz. Aydınlık bant yukarıdan aşağı süzülüyor. */
@keyframes heroSheen {
  from { background-position: 50% 100%; }
  to   { background-position: 50% 0%; }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-intro h1 {
    background-image: linear-gradient(180deg,
      #7a5f33 0%,
      #9d7f43 10%,
      #d9bd83 20%,
      #fbefd0 25%,
      #d9bd83 30%,
      #9d7f43 40%,
      #7a5f33 50%,
      #9d7f43 60%,
      #d9bd83 70%,
      #fbefd0 75%,
      #d9bd83 80%,
      #9d7f43 90%,
      #7a5f33 100%);
    background-size: 100% 200%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 26px oklch(0 0 0 / 0.5));
    animation: heroSheen 5s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro h1 { animation: none; background-position: 50% 62%; }
}

.hero-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding-top: clamp(13px, 1.4vw, 18px);
  border-top: 1px solid oklch(0.72 0.07 85 / 0.32);
  /* Genişlik satır içi style ile başlık puntosundan geliyor */
  justify-content: center;
}

.hero-tags span {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(12.5px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: oklch(0.92 0.035 85);
}

/* Aralara küçük altın eşkenar dörtgen */
/* Ayırıcı: içbükey kenarlı dört uçlu parıltı yıldızı */
.hero-tags i {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  --parilti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 7 17 12 24 12 17 12 12 17 12 24 12 17 7 12 0 12 7 12 12 7 12 0Z' fill='%23fff'/%3E%3C/svg%3E");
  background: oklch(0.84 0.1 88);
  -webkit-mask: var(--parilti) center / contain no-repeat;
  mask: var(--parilti) center / contain no-repeat;
}

@media (max-width: 699px) {
  .hero-tags {
    padding-top: 20px;
    gap: 0 11px;
  }

  .hero-tags span { letter-spacing: 0.2em; }
}

/* WhatsApp yüzen düğmesi: metinli kutu yerine ikon */
.wa-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  align-items: center;
  justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 10px 26px oklch(0 0 0 / 0.6));
  animation: lapisFade 0.25s ease;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), filter 0.32s ease;
}

.wa-fab img {
  display: block;
  width: clamp(52px, 5.2vw, 62px);
  height: auto;
}

.wa-fab:hover {
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 16px 32px oklch(0 0 0 / 0.7));
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; transition: none; }
  .wa-fab:hover { transform: none; }
}

/* Not: şerit karelerinin canlılığı CSS filtresiyle değil, images/hero/
   kopyalarına kalıcı işlenerek sağlanıyor. Filtre 180 görselde kare hızını
   yarıya düşürüyordu (296 -> 141 kare / 5 sn). */

/* Header logosu */
.brand {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.brand img {
  display: block;
  /* Header satırının yüksekliğini menü belirliyor; logo o satırı tam dolduruyor */
  /* Logo boyutu korunuyor; header yalnızca dolgu daraltılarak inceltildi */
  width: clamp(150px, 15vw, 218px);
  height: auto;
}

/* Hijyen kartları — Hizmetlerimiz kartlarıyla aynı hover davranışı */
.hygiene-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 22px;
  border: 1px solid oklch(0.28 0.012 260);
  border-radius: 16px;
  background: linear-gradient(145deg, oklch(0.2 0.01 260), oklch(0.165 0.008 260));
  box-shadow: 0 14px 34px oklch(0.06 0.01 260 / 0.2);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hygiene-card:hover {
  transform: translateY(-5px);
  border-color: oklch(0.76 0.075 85 / 0.7);
  background: linear-gradient(145deg, oklch(0.235 0.014 260), oklch(0.18 0.01 260));
  box-shadow: 0 18px 42px oklch(0.05 0.01 260 / 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .hygiene-card { transition: none; }
  .hygiene-card:hover { transform: none; }
}

/* ------------------------------------------------------------
   Görsel yığınlarının giriş animasyonu
   Kareler yukarıdan masaya düşüyor: sırayla, hafif fazla dönerek
   gelip kendi açısına oturuyorlar. IntersectionObserver eşiği 1,
   yani ziyaretçi yığını tam gördüğünde başlıyor.
   ------------------------------------------------------------ */

.svc-media--stack.is-armed .svc-shot {
  opacity: 0;
  /* Her kare kendi tarafından gelir: sol karelerde --from negatif, sağdakinde pozitif */
  transform: translateX(var(--from, -110px)) rotate(calc(var(--rot, 0deg) * 0.15));
}

.svc-media--stack.is-in .svc-shot {
  opacity: 1;
  transform: translateX(0) rotate(var(--rot, 0deg));
  /* Sonunda hafif bir aşma var: kare yerine "oturuyor" hissi veriyor */
  transition: opacity 0.4s ease, transform 0.74s cubic-bezier(0.22, 1.18, 0.36, 1);
}

.svc-media--stack.is-in .svc-shot--a { transition-delay: 0s; }
.svc-media--stack.is-in .svc-shot--b { transition-delay: 0.12s; }
.svc-media--stack.is-in .svc-shot--c { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .svc-media--stack.is-armed .svc-shot { opacity: 1; transform: translateX(0) rotate(var(--rot, 0deg)); }
  .svc-media--stack.is-in .svc-shot { transition: none; }
}

/* Kart ikonları — halka yerine dolgulu altın madalyon, daha canlı */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid oklch(0.82 0.09 85 / 0.55);
  background:
    radial-gradient(110% 110% at 30% 22%, oklch(0.88 0.1 88 / 0.34), transparent 62%),
    linear-gradient(150deg, oklch(0.5 0.06 85 / 0.5), oklch(0.32 0.03 85 / 0.35));
  color: oklch(0.93 0.1 88);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.16),
    0 0 14px oklch(0.8 0.09 85 / 0.22);
  transition: color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#hizmetler article:hover .card-icon,
.hygiene-card:hover .card-icon {
  border-color: oklch(0.86 0.1 88 / 0.85);
  color: oklch(0.97 0.11 90);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    0 0 22px oklch(0.82 0.1 86 / 0.42);
}

/* İletişim — sosyal medya bağlantıları */
.lapis-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 18px 0 0;
}

.lapis-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid oklch(0.7 0.07 85 / 0.42);
  border-radius: 2px;
  background: oklch(0.7 0.07 85 / 0.04);
  color: oklch(0.85 0.03 85);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.lapis-social svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: oklch(0.78 0.08 85);
  transition: color 0.3s ease;
}

.lapis-social a:hover {
  transform: translateY(-2px);
  border-color: oklch(0.74 0.075 85);
  background: oklch(0.74 0.075 85);
  color: oklch(0.16 0.008 260);
}

.lapis-social a:hover svg { color: oklch(0.16 0.008 260); }

@media (prefers-reduced-motion: reduce) {
  .lapis-social a { transition: none; }
  .lapis-social a:hover { transform: none; }
}

/* ------------------------------------------------------------
   İmleci izleyen beyaz parıltı
   Sabit boyutlu bir daire, yalnızca transform ile taşınıyor —
   gradyanın kendisi hiç yeniden çizilmiyor, hareket GPU'da kalıyor.
   z-index -1: bölüm zemininin üstünde, içeriğin altında.
   ------------------------------------------------------------ */
.cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    oklch(1 0 0 / 0.085) 0%,
    oklch(1 0 0 / 0.045) 38%,
    oklch(1 0 0 / 0.015) 62%,
    transparent 78%);
  transition: opacity 0.45s ease;
  will-change: transform;
}

.cursor-glow.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

@media (hover: none) {
  .cursor-glow { display: none; }
}

/* ------------------------------------------------------------
   Dokunmatik cihazlarda parıltı: imleç olmadığı için fotoğraf
   yığınının çevresinde saat yönünde dönüyor. Yalnızca transform
   değiştiği için animasyon derleyici katmanında kalıyor.
   ------------------------------------------------------------ */
@keyframes glowOrbit {
  from { transform: rotate(0deg) translateX(var(--orbit, 150px)); }
  to   { transform: rotate(360deg) translateX(var(--orbit, 150px)); }
}

@media (hover: none) {
  /* Tek görsel varyantı için kullanılan ofset çerçeve yığınlarda kapalıydı;
     dokunmatikte aynı pseudo-element parıltı olarak yeniden kullanılıyor. */
  .svc-media--stack::before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 400px;
    height: 400px;
    margin: -200px 0 0 -200px;
    border: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side,
      oklch(1 0 0 / 0.17) 0%,
      oklch(1 0 0 / 0.1) 34%,
      oklch(1 0 0 / 0.045) 58%,
      oklch(1 0 0 / 0.012) 74%,
      transparent 86%);
    will-change: transform;
    animation: glowOrbit 11s linear infinite;
    animation-play-state: paused;
  }

  /* Yalnızca bölüm ekrandayken dönsün — kapalıyken pil harcamasın */
  .svc-media--stack.is-visible::before { animation-play-state: running; }
}

@media (hover: none) and (max-width: 520px) {
  .svc-media--stack::before {
    --orbit: 110px;
    width: 320px;
    height: 320px;
    margin: -160px 0 0 -160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-media--stack::before { animation: none; }
}

/* ── PhotoSwipe küçük resim şeridi ────────────────────────────────────────
   Galeri açıkken alt kenarda yatay şerit. Albüm için images/hero/ altındaki
   400px kopyalar kullanılır; şeridin kendisi tıklamayı yutmasın diye
   pointer-events yalnızca iç kapsayıcıda açık. */
.pswp-serit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(to top, oklch(0.128 0.006 260 / 0.94), oklch(0.128 0.006 260 / 0));
}

.pswp-serit-ic {
  display: flex;
  gap: 8px;
  max-width: min(100%, 1080px);
  padding: 10px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  pointer-events: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pswp-serit-ic::-webkit-scrollbar { display: none; }

.pswp-serit-ic button {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: oklch(0.2 0.01 260);
  opacity: 0.45;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  transition: opacity 0.18s ease, outline-color 0.18s ease;
}

.pswp-serit-ic button:hover { opacity: 0.85; }

.pswp-serit-ic button.pswp-serit-aktif {
  opacity: 1;
  outline-color: oklch(0.74 0.075 85);
}

.pswp-serit-ic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 699px) {
  .pswp-serit { height: 76px; }
  .pswp-serit-ic { gap: 6px; padding: 8px 12px; }
  .pswp-serit-ic button { width: 44px; height: 44px; border-radius: 6px; }
}

/* ── Mobil menü: alttaki sosyal medya satırı ──────────────────────────────
   margin-top:auto ile menü linkleri ne kadar olursa olsun en alta yaslanır. */
.lapis-nav-sosyal {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid oklch(0.27 0.01 260);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lapis-nav-sosyal > div {
  display: flex;
  gap: 14px;
}

.lapis-nav-sosyal a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid oklch(0.34 0.02 260);
  border-radius: 50%;
  color: oklch(0.92 0.01 260);
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.lapis-nav-sosyal a:hover,
.lapis-nav-sosyal a:focus-visible {
  color: oklch(0.145 0.006 260);
  background: oklch(0.74 0.075 85);
  border-color: oklch(0.74 0.075 85);
}

.lapis-nav-sosyal svg {
  width: 22px;
  height: 22px;
}

/* Kısa ekranlarda (yatay telefon, küçük cihazlar) menü sığsın diye boşlukları
   kıs. Katmanın kendi stilleri satır içi olduğu için !important şart. */
@media (max-height: 720px) {
  .lapis-nav-katman {
    padding-top: 74px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
  .lapis-nav-katman > button:not([aria-label]) { padding: 11px 0 !important; }
  .lapis-nav-sosyal { padding-top: 20px; }
  .lapis-nav-sosyal a { width: 44px; height: 44px; }
}

/* ── Hamburger → X dönüşümü ───────────────────────────────────────────────
   Düğme header'da yerinde kalır, sadece çubuklar döner. Böylece açılış ve
   kapanış ikonu aynı noktada durur. Menü açıkken header z-index 90'a çıkıp
   katmanın üstünde kaldığı için düğme tıklanabilir olmayı sürdürür. */
.lapis-burger {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

.lapis-burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 2px;
  margin: -1px 0 0 -12.5px;
  border-radius: 2px;
  background: oklch(0.95 0.01 260);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease,
              background 0.28s ease;
}

.lapis-burger span:nth-child(1) { transform: translateY(-8px); }
.lapis-burger span:nth-child(3) { transform: translateY(8px); }

/* Açık hâl: altın dolu daire, içinde koyu bir X */
.lapis-burger--acik {
  background: oklch(0.74 0.075 85);
  border-color: oklch(0.74 0.075 85);
  transform: rotate(90deg);
}

.lapis-burger--acik span { background: oklch(0.145 0.006 260); }
.lapis-burger--acik span:nth-child(1) { transform: rotate(45deg); }
.lapis-burger--acik span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.lapis-burger--acik span:nth-child(3) { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .lapis-burger,
  .lapis-burger span { transition: none; }
  .lapis-burger--acik { transform: none; }
}

/* iOS WebKit'te background-attachment:fixed arka planı öğeye değil viewport'a
   göre boyutluyor; bölümün üst ve alt kenarında arka plan hiç boyanmıyor.
   Değer JS'ten satır içi yazıldığı için !important şart. */
@media (hover: none) {
  #hakkimizda { background-attachment: scroll !important; }
}

/* ── WhatsApp sohbet kutusu ───────────────────────────────────────────────
   Referans: zbtattoostudio.com.tr'deki destek kutusu. Kapalıyken sağ altta
   yeşil hap düğme; açılınca başlık kartı, karşılama balonu ve mesaj kutusu.
   Yeşil sadece eylem öğelerinde (düğme, kapat, gönder): tek aksan (altın)
   kuralına bilinçli istisna, WhatsApp'ın kendi rengi. Başlık kartı site rengi. */
.lapis-wa {
  --wa: #25d366;
  --wa-koyu: #1ebe5b;
  --wa-kenar: #16873f;   /* düğme kenarı: kendi yeşilinin koyu tonu */
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: Manrope, sans-serif;
  /* Kap tıklamayı hiç yakalamaz: kapalı pencerenin yer tuttuğu boş alan
     sağ altta görünmez bir engel olurdu. Tıklanabilir öğeler kendi açar. */
  pointer-events: none;
  /* Sayfa çizilince belirir, hero'nun altında durur (JS: lapis-wa--gorunur) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.lapis-wa--gorunur {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.lapis-wa-hap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;   /* 2px kenar eklendi; boy aynı kalsın */
  border: 2px solid var(--wa-kenar);
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.45);
  pointer-events: auto;
  transition: transform 0.25s ease, background 0.25s ease;
}

.lapis-wa-hap:hover { background: var(--wa-koyu); transform: translateY(-2px); }
.lapis-wa-hap svg { width: 20px; height: 20px; flex: 0 0 20px; }

.lapis-wa-pencere {
  width: min(300px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.lapis-wa--acik .lapis-wa-pencere {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.lapis-wa-kapat {
  align-self: flex-end;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px oklch(0 0 0 / 0.35);
}

.lapis-wa-kapat svg { width: 13px; height: 13px; }

/* Başlık kartı sitenin kart rengi: yeşil zeminde beyaz yazı ~2:1 kontrastla
   okunmuyordu. Koyu kart + altın başlık + açık metin. */
.lapis-wa-baslik {
  padding: 16px 18px;
  border: 1px solid oklch(0.74 0.075 85 / 0.6);
  border-radius: 12px;
  background: linear-gradient(145deg, oklch(0.25 0.012 260), oklch(0.19 0.01 260));
  color: oklch(0.9 0.01 260);
  text-align: center;
  /* Koyu sayfanın içinde kaybolup ona yapışık durmasın: derin iki katmanlı
     gölge + hafif altın hale ile sayfadan ayrılıp üstünde yüzsün. */
  box-shadow:
    0 22px 50px oklch(0 0 0 / 0.7),
    0 6px 14px oklch(0 0 0 / 0.5),
    0 0 36px oklch(0.74 0.075 85 / 0.18);
}

.lapis-wa-baslik b {
  display: block;
  margin-bottom: 6px;
  color: oklch(0.74 0.075 85);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}

.lapis-wa-baslik span { display: block; font-size: 13.5px; line-height: 1.55; }

.lapis-wa-balon { display: flex; align-items: center; gap: 10px; }

/* Logo siyah zeminde: beyazda gözlerin iç boşlukları zeminle birleşip
   seçilmiyordu. lapis-wa-avatar.png, apple-touch-icon'dan gözler sıkıca
   kırpılarak üretildi (orijinal tuvalin %94'ü boştu, gözler küçük kalıyordu);
   gözler dairenin %90'ını dolduruyor (4:1 yatık şekil dairede ~%97'ye kadar
   sığıyor), o yüzden iç boşluk yok.
   Altın halka, koyu sayfada dairenin sınırını belli ediyor. */
.lapis-wa-balon img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  padding: 0;
  border-radius: 50%;
  background: #000;
  object-fit: contain;
  box-shadow: 0 0 0 1px oklch(0.74 0.075 85 / 0.6), 0 6px 16px oklch(0 0 0 / 0.45);
}

.lapis-wa-balon p {
  flex: 1;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: #27313a;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.3);
}

.lapis-wa-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 6px 6px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.3);
}

.lapis-wa-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1c252c;
  font-size: 16px; /* iOS 16px altındaki alanda odaklanınca sayfayı yakınlaştırıyor */
}

.lapis-wa-form input::placeholder { color: #8a949c; }

.lapis-wa-form button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wa);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lapis-wa-form button:hover { background: #eefaf2; }
.lapis-wa-form button svg { width: 22px; height: 22px; }

.lapis-wa-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lapis-wa :focus-visible { outline: 2px solid oklch(0.74 0.075 85); outline-offset: 2px; }

@media (max-width: 699px) {
  .lapis-wa { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lapis-wa-hap { padding: 9px 16px 9px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lapis-wa,
  .lapis-wa--gorunur,
  .lapis-wa-hap,
  .lapis-wa-pencere,
  .lapis-wa--acik .lapis-wa-pencere { transition: none; }
}