/* Mary Nails · Sürüm 2 "Kartela" — porselen zemin, mürdüm aksan, Bodoni italik.
   İmza: salonun kendi tırnaklarından alınan renk çipleri. */
:root {
  --porselen: #ECEAE6;
  --kagit: #F4F2EE;
  --murekkep: #17141A;
  --grafit: #6B6670;
  --murdum: #A0175F;
  --lila: #D9D5F2;
  --rule: rgba(23,20,26,.12);
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --govde: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --kenar: clamp(1.1rem, 4vw, 4rem);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--porselen); color: var(--murekkep); font-family: var(--govde); font-size: 1.0625rem; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: .98; font-variation-settings: "opsz" 96; }
h1 em, h2 em { font-style: italic; color: var(--murdum); }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafit); }
:focus-visible { outline: 2px solid var(--murdum); outline-offset: 3px; }

.satir { display: block; overflow: hidden; }
.satir-ic { display: block; }
.js .satir-ic { transform: translateY(110%); }
.js [data-reveal] { opacity: 0; }
.js [data-reveal-cocuk] { opacity: 1; }
.js [data-reveal-cocuk] > * { opacity: 0; }

.nav { position: fixed; inset-inline: 0; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--kenar); background: linear-gradient(var(--porselen) 60%, transparent); }
.nav-marka { font-family: var(--display); font-size: 1.35rem; letter-spacing: -.01em; }
.nav-ic { display: flex; gap: 1.5rem; font-size: .88rem; font-weight: 500; }
.nav-ic a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav-ic a:hover { border-color: var(--murekkep); }
.nav-cta { font-size: .85rem; font-weight: 600; background: var(--murekkep); color: var(--kagit); padding: .55rem 1.05rem; border-radius: 999px; }
@media (max-width: 720px) { .nav-ic { display: none; } .hero { padding-bottom: 5.5rem; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .8rem 1.5rem; background: var(--murdum); color: #fff; font-weight: 600; font-size: .95rem; border-radius: 999px; transition: transform .5s cubic-bezier(.19,1,.22,1), background .3s; }
.btn:hover { transform: translateY(-2px); background: #85124E; }
.cizgili { display: inline-flex; align-items: center; min-height: 3.1rem; font-weight: 500; border-bottom: 1px solid var(--rule); }
.cizgili:hover { border-color: var(--murekkep); }

/* HERO */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; min-height: 100svh; padding: 6.5rem var(--kenar) 3rem; }
.hero-metin { display: flex; flex-direction: column; gap: 1.6rem; }
.hero h1 { font-size: clamp(3rem, 7.2vw, 7.4rem); max-width: 100%; }
.hero-alt { max-width: 36ch; color: var(--grafit); font-size: 1.05rem; }
.hero-eylem { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.hero-gorsel { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); }
.hero-buyuk { grid-column: 3 / 13; margin: 0; height: min(68svh, 640px); overflow: hidden; }
.hero-buyuk img { width: 100%; height: 100%; object-fit: cover; }
.hero-kucuk { grid-column: 1 / 6; margin: -22% 0 0; height: min(26svh, 250px); overflow: hidden; border: 6px solid var(--porselen); }
.hero-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.hero-puan { position: absolute; top: 0; left: 0; width: 7rem; display: flex; flex-direction: column; gap: .2rem; }
.hero-puan strong { font-family: var(--display); font-size: 3rem; font-weight: 400; line-height: 1; }
.hero-puan span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafit); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 6rem; min-height: 0; }
  .hero-gorsel { margin-top: 2.5rem; }
  .hero-buyuk { grid-column: 3 / 13; height: auto; aspect-ratio: 4 / 5; }
  .hero-kucuk { grid-column: 1 / 6; height: auto; aspect-ratio: 4 / 5; margin-top: -30%; }
  .hero-puan { position: static; grid-column: 1 / -1; width: auto; flex-direction: row; align-items: baseline; gap: .7rem; margin-top: 1rem; }
  .hero-puan strong { font-size: 2rem; }
}

/* TICKER */
.ticker { overflow: hidden; border-block: 1px solid var(--rule); padding: .9rem 0; }
.ticker-ic { display: flex; gap: 0; width: max-content; animation: ak 38s linear infinite; }
.ticker-ic span { font-family: var(--display); font-style: italic; font-size: 1.35rem; padding: 0 1.6rem; position: relative; white-space: nowrap; }
.ticker-ic span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--murdum); transform: translateY(-50%); }
@keyframes ak { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-ic { animation: none; } }

/* KARTELA */
.kartela { padding: clamp(5rem, 10vw, 8rem) var(--kenar); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 5vw, 6rem); align-items: start; }
.kartela-bas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
.kartela-bas h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.kartela-bas p { max-width: 42ch; color: var(--grafit); }
.cipler { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.cip { display: flex; flex-direction: column; gap: .55rem; text-align: left; }
.cip::before { content: ""; display: block; aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 1px solid rgba(23,20,26,.12); transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s; }
.cip span { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grafit); }
.cip:hover::before, .cip.aktif::before { transform: scale(1.08); box-shadow: 0 0 0 4px var(--porselen), 0 0 0 5px var(--murekkep); }
.cip.aktif span { color: var(--murekkep); }
.kartela-kart { margin: 0; position: sticky; top: 6rem; }
.kartela-kart img { width: 100%; height: min(68svh, 640px); object-fit: cover; }
.kartela-kart figcaption { margin-top: .8rem; font-family: var(--display); font-style: italic; font-size: 1.3rem; }
.kartela-kart.degisiyor img { animation: sol .55s cubic-bezier(.19,1,.22,1); }
@keyframes sol { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 860px) {
  .kartela { grid-template-columns: 1fr; }
  .cipler { grid-template-columns: repeat(4, 1fr); gap: .7rem; }
  .kartela-kart { position: relative; top: auto; }
  .kartela-kart img { height: auto; aspect-ratio: 4 / 3; }
}

/* HİZMETLER */
.hizmet { position: relative; padding: 2rem var(--kenar) clamp(4rem, 8vw, 7rem); }
.hizmet-bas { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.hizmet-bas h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.hizmet-liste { list-style: none; margin: 0; padding: 0; }
.hizmet-liste li { border-top: 1px solid var(--rule); }
.hizmet-liste li:last-child { border-bottom: 1px solid var(--rule); }
.hizmet-liste a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 1.35rem 0; transition: color .3s; }
.h-ad { font-family: var(--display); font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.05; letter-spacing: -.015em; }
.h-ac { color: var(--grafit); font-size: .95rem; }
.h-ok { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .5; transition: opacity .3s, transform .5s cubic-bezier(.19,1,.22,1); }
.hizmet-liste a:hover .h-ok { opacity: 1; transform: translateX(4px); }
.hizmet-liste a:hover .h-ad { font-style: italic; color: var(--murdum); }
.hizmet-takip { position: fixed; left: 0; top: 0; width: 15vw; min-width: 160px; aspect-ratio: 4 / 5; pointer-events: none; z-index: 30; opacity: 0; transform: translate(-50%, -50%) rotate(-3deg); overflow: hidden; }
.hizmet-takip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .hizmet-liste a { grid-template-columns: 1fr; gap: .4rem; }
  .h-ok { display: none; }
  .hizmet-takip { display: none; }
}

/* GALERİ */
.galeri { padding: clamp(4rem, 8vw, 7rem) var(--kenar); background: var(--kagit); }
.galeri-bas { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.galeri-bas h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.sutunlar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.sutun { display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 2.5rem); }
.sutun figure { margin: 0; overflow: hidden; }
.sutun img { width: 100%; object-fit: cover; }
.sutun-a figure:nth-child(odd) img { aspect-ratio: 4 / 5; }
.sutun-a figure:nth-child(even) img { aspect-ratio: 4 / 3; }
.sutun-b { padding-top: clamp(3rem, 8vw, 7rem); }
.sutun-b figure:nth-child(odd) img { aspect-ratio: 4 / 3; }
.sutun-b figure:nth-child(even) img { aspect-ratio: 4 / 5; }
.sutun-c { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.sutun-c figure img { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .sutunlar { grid-template-columns: 1fr 1fr; } .sutun-c { display: none; } .sutun-b { padding-top: 3rem; } }

/* YORUM */
.yorum { padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden; }
.yorum-bas { padding: 0 var(--kenar); margin-bottom: 2rem; }
.akis { overflow: hidden; }
.akis-ic { display: flex; gap: 1.2rem; width: max-content; padding: 0 var(--kenar); animation: ak 60s linear infinite; }
.akis:hover .akis-ic { animation-play-state: paused; }
.akis blockquote { margin: 0; width: clamp(280px, 30vw, 440px); padding: 1.8rem; border: 1px solid var(--rule); background: var(--kagit); display: flex; flex-direction: column; gap: 1.6rem; }
.akis p { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; }
.akis footer { margin-top: auto; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafit); }
@media (prefers-reduced-motion: reduce) { .akis-ic { animation: none; width: auto; flex-wrap: wrap; } }

/* ZİYARET */
.ziyaret { padding: clamp(4rem, 8vw, 7rem) var(--kenar); background: var(--lila); }
.ziyaret-ust { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: end; margin-bottom: 3rem; }
.ziyaret-ust h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); margin: 1rem 0 1.2rem; }
.ziyaret address { font-style: normal; color: #4E4760; max-width: 40ch; }
.ziyaret-eylem { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.gunler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid rgba(23,20,26,.18); }
.gunler li { padding: 1rem .6rem; display: flex; flex-direction: column; gap: .4rem; border-right: 1px solid rgba(23,20,26,.18); }
.gunler li:last-child { border-right: 0; }
.gunler span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #4E4760; }
.gunler b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.gunler .kapali b { color: #4E4760; text-decoration: line-through; text-decoration-thickness: 1px; font-size: 1.05rem; }
@media (max-width: 860px) {
  .ziyaret-ust { grid-template-columns: 1fr; }
  .gunler { grid-template-columns: repeat(4, 1fr); }
  .gunler li { border-bottom: 1px solid rgba(23,20,26,.18); }
  .gunler li:nth-child(4n) { border-right: 0; }
  .gunler li:nth-child(n+5) { border-bottom: 0; }
  .gunler li:nth-child(3) { border-right: 1px solid rgba(23,20,26,.18); }
}

.alt { display: flex; gap: 1.5rem; justify-content: space-between; padding: 1.4rem var(--kenar) 6rem; font-size: .82rem; color: var(--grafit); }
@media (min-width: 721px) { .alt { padding-bottom: 1.6rem; } }
.wa-mobil { display: none; }
@media (max-width: 720px) {
  .wa-mobil { display: flex; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 45; justify-content: center; align-items: center; min-height: 3.2rem; background: var(--murdum); color: #fff; font-weight: 600; border-radius: 999px; box-shadow: 0 10px 30px rgba(23,20,26,.25); }
}