/* Yeliz Şahanoğlu Beauty — site stili. Kaynak: tasarim/isilti/stil.css + WordPress uyarlamaları. */
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/funnel-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/funnel-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --zemin: #F6F5F0;
  --kahve: #35271A;
  --zeytin: #5C5423;
  --zeytin-koyu: #464019;
  --isik: #D6CE9C;
  --adacayi: #E7E6D8;
  --tas: #EAE3D7;
  --ikincil: #6B6250;
  --cizgi: #E0DDD2;
  --acik: #F4F1E8;
  --sonuk: #BDB49B;
  --e: cubic-bezier(.22, 1, .36, 1);
  --e2: cubic-bezier(.76, 0, .24, 1);
  --kenar: clamp(16px, 4vw, 56px);
  --bas: "Marcellus", Georgia, serif;
  --sikis: .2; /* başlık harf aralığı çarpanı: Marcellus sıkıştırılınca harfler birbirine değiyor */
  --govde: "Funnel Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--zemin); color: var(--kahve);
  font: 400 17px/1.6 var(--govde); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--zeytin); outline-offset: 3px; border-radius: 8px; }
.kap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--kenar); }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bekliyor {
  display: inline-block; border: 1px dashed #B9B39A; border-radius: 8px; padding: 1px 10px;
  color: var(--ikincil); font-size: 14px; line-height: 1.6; white-space: nowrap;
}
svg.i { width: 20px; height: 20px; flex: none; }

/* Kelime maskesi: başlıklar alttan yükselir */
.k { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .03em .2em; margin: -.12em -.03em -.2em; }
.k > span { display: inline-block; }
.js .acil .k > span { transform: translateY(118%); }
.js .acil.gor .k > span { transform: none; transition: transform 1.1s var(--e) calc(var(--i, 0) * 70ms); }

/* Düğmeler */
.dugme {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--govde); text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate; transition: color .45s var(--e), transform .5s var(--e);
}
.dugme::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  transform: translateY(102%); transition: transform .55s var(--e);
}
.dugme:hover::before, .dugme:focus-visible::before { transform: none; }
.dugme-dolu { background: var(--zeytin); color: #fff; }
.dugme-dolu::before { background: var(--kahve); }
.dugme-dolu .i { color: var(--isik); transition: color .45s; }
.dugme-dolu:hover .i { color: #fff; }
.dugme-cizgi { background: transparent; color: var(--kahve); box-shadow: inset 0 0 0 1.5px var(--kahve); }
.dugme-cizgi::before { background: var(--kahve); }
.dugme-cizgi:hover, .dugme-cizgi:focus-visible { color: #fff; }
.dugme-kucuk { height: 46px; padding: 0 20px; font-size: 15px; }

/* Üst çubuk */
.ust { position: fixed; inset: 0 0 auto; z-index: 60; transition: transform .6s var(--e), background-color .4s, box-shadow .4s; }
/* Üç sütun: logo solda, menü sayfanın tam ortasında, düğme sağda (yanlardaki genişlik farkı menüyü kaydırmasın) */
.ust .kap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: 84px; }
.ust nav { justify-self: center; }
.ust .dugme-kucuk, .ust .menu-dugme { justify-self: end; }
.ust .dugme-kucuk { height: 44px; padding: 0 20px; gap: 8px; }
.ust.dolu { background: rgba(246, 245, 240, .8); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 rgba(53, 39, 26, .07); }
.ust.sakla { transform: translateY(-100%); }
.logo { display: flex; align-items: center; gap: 13px; justify-self: start; text-decoration: none; }
.logo svg { display: block; height: auto; }
.logo-isaret { width: 38px; }
.logo-yazi { width: 204px; }
.menu { display: flex; gap: clamp(24px, 3vw, 46px); list-style: none; margin: 0; padding: 0; }
.menu a { --harf-golge: var(--zeytin); position: relative; display: block; padding: 6px 0; font-size: 16.5px; font-weight: 500; text-decoration: none; }
/* Harf harf kayma: görünen satır kırpılır, her harfin gölgesi bir satır altta bekler; üzerine gelince sırayla yukarı kayar */
.harfler { display: inline-block; overflow: hidden; line-height: 1.4; vertical-align: top; white-space: nowrap; }
.harfler i { display: inline-block; font-style: normal; text-shadow: 0 1.4em var(--harf-golge); transition: transform .55s var(--e); transition-delay: calc(var(--i) * 18ms); }
.menu a:hover .harfler i, .menu a:focus-visible .harfler i { transform: translateY(-1.4em); }
.menu .current-menu-item > a, .menu a[aria-current="page"] { --harf-golge: var(--kahve); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
/* "Hizmetler"in altında açılan hizmet listesi (Ece, 27 Eylül). Fareyle üzerine gelince ya da
   klavyeyle odaklanınca açılır; başlıkla kutu arasındaki boşluk görünmez bir köprüyle doldurulur
   ki fare aşağı inerken menü kapanmasın. */
.menu > li { position: relative; }
.menu .menu-item-has-children > a { padding-right: 15px; }
.menu .menu-item-has-children > a::before { content: ""; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; border-right: 1.4px solid; border-bottom: 1.4px solid; rotate: 45deg; translate: 0 -70%; transition: rotate .35s var(--e), translate .35s var(--e); }
.menu .menu-item-has-children:hover > a::before, .menu .menu-item-has-children:focus-within > a::before { rotate: -135deg; translate: 0 -30%; }
.menu .menu-item-has-children::before { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 18px; }
.menu .sub-menu {
  position: absolute; left: -16px; top: calc(100% + 16px); z-index: 5;
  min-width: 238px; margin: 0; padding: 10px; list-style: none;
  border-radius: 18px; background: var(--acik); box-shadow: 0 20px 44px rgba(53, 39, 26, .14), inset 0 0 0 1px var(--cizgi);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity .3s var(--e), translate .3s var(--e), visibility .3s;
}
.menu .menu-item-has-children:hover > .sub-menu, .menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0; }
.menu .sub-menu a { padding: 9px 14px; border-radius: 12px; font-size: 16px; font-weight: 400; white-space: nowrap; transition: background-color .25s var(--e), color .25s var(--e); }
.menu .sub-menu a::after { content: none; }
.menu .sub-menu a:hover, .menu .sub-menu a:focus-visible { background: var(--adacayi); color: var(--zeytin); }
.menu-dugme { display: none; }
/* Menü adları uzayınca (Ücretsiz cilt analizi) dar dizüstü ekranlarda menü logonun üstüne biniyordu
   (27 Eylül, 1085 px'de 7 px çakışma). Bu aralıkta logo yazısı ve menü aralıkları biraz kısılıyor. */
@media (max-width: 1240px) {
  .menu { gap: 22px; }
  .logo { gap: 10px; }
  .logo-yazi { width: 168px; }
  .logo-isaret { width: 33px; }
}

/* Giriş: klinik düzen */
.giris { --ust-bosluk: calc(84px + clamp(16px, 3.5vh, 44px)); position: relative; isolation: isolate; overflow: hidden; padding: var(--ust-bosluk) 0 clamp(28px, 4vh, 44px); }
/* Giriş zemini: yavaş süzülen zeytin ışıkları, ince doku, büyük silik monogram, fotoğrafın arkasında adaçayı panel */
.giris-zemin { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #F2F0E6, var(--zemin) 70%); }
.giris-zemin::after {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .21 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ay { position: absolute; border-radius: 50%; translate: calc(var(--mx, 0) * var(--guc, 0)) calc(var(--my, 0) * var(--guc, 0)); }
.ay-1 { --guc: -5vw; width: 62vw; aspect-ratio: 1; right: -14vw; top: -26vw; background: radial-gradient(closest-side, rgba(190, 182, 118, .5), rgba(190, 182, 118, 0)); animation: ay-1 24s ease-in-out infinite alternate; }
.ay-2 { --guc: 4vw; width: 48vw; aspect-ratio: 1; left: -18vw; bottom: -24vw; background: radial-gradient(closest-side, rgba(214, 206, 156, .55), rgba(214, 206, 156, 0)); animation: ay-2 30s ease-in-out infinite alternate; }
.ay-3 { --guc: 3vw; width: 36vw; aspect-ratio: 1; left: 26vw; top: -8vw; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); animation: ay-3 20s ease-in-out infinite alternate; }
@keyframes ay-1 { to { transform: translate(-9%, 12%) scale(1.15); } }
@keyframes ay-2 { to { transform: translate(14%, -10%) scale(1.2); } }
@keyframes ay-3 { to { transform: translate(-18%, 22%) scale(.85); } }
/* Monogram başlık sütununa bağlı: her ekran genişliğinde başlığın arkasında, kesilmeden durur */
.giris-isaret, .giris-isik { position: absolute; z-index: -1; left: 50%; top: 50%; height: 116%; width: auto; aspect-ratio: 455 / 625; translate: -50% -50%; transform: translateY(calc(var(--giris-kay, 0) * .1px)); pointer-events: none; }
.giris-isaret { --logo-z: var(--zeytin); --logo-k: var(--zeytin); opacity: .085; }
/* Başlıktaki ışıltıyla aynı anda monogramın içinden geçen altın ışık (şekil maskesi, ışık yalnız transform ile kayar) */
.giris-isik { display: block; overflow: hidden; -webkit-mask: url(../img/logo-isaret.svg) center / 100% 100% no-repeat; mask: url(../img/logo-isaret.svg) center / 100% 100% no-repeat; }
.giris-isik::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(184, 160, 78, 0) 32%, rgba(184, 160, 78, .55) 50%, rgba(184, 160, 78, 0) 68%); transform: translateX(-100%); }
.js .giris.gorunur .giris-isik::before { animation: isik-gec 2.4s .6s ease-in-out infinite; }
.js .giris.gorunur.giris-disarida .giris-isik::before, .js .giris.gorunur.giris-disarida .baslik { animation-play-state: paused; }
@keyframes isik-gec { 0%, 12% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.isik { position: absolute; pointer-events: none; border-radius: 50%; }
.isik-1 { width: 64vw; height: 64vw; right: -18vw; top: -30vw; background: radial-gradient(closest-side, rgba(196, 190, 132, .38), rgba(196, 190, 132, 0)); }
.isik > i { position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: suzul 16s ease-in-out infinite alternate; }
@keyframes suzul { to { transform: translate(-6%, 8%) scale(1.12); } }
.giris-izgara { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: clamp(32px, 4.5vw, 72px); }
.giris-metin { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; }
.baslik { margin: 0; font: 400 clamp(48px, 6.2vw, 96px)/.98 var(--bas); letter-spacing: calc(-.045em * var(--sikis)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .baslik {
    background: linear-gradient(105deg, var(--kahve) 0 43%, #A39A5E 50%, var(--kahve) 57% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .js .giris.gorunur .baslik { animation: isilti 2.4s .6s ease-in-out infinite; }
}
@keyframes isilti { 0%, 12% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.giris-ozet { margin: 0; max-width: 42ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--ikincil); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; }
.guven { display: flex; flex-wrap: wrap; gap: 12px 18px; align-self: stretch; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; line-height: 1.3; }
.guven li { display: flex; align-items: center; gap: 8px; }
.guven .i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--zeytin); box-shadow: inset 0 0 0 1px var(--cizgi); }
/* Vitrin: yeni fotoğraf sağdan açılır, içindeki görüntü kayarak yerine oturur; gösterimde çok yavaş yakınlaşır.
   Geçişler JS'te Web Animations ile, sıraya alınarak yürür (birbirini kesmez). */
.giris-gorsel { position: relative; height: clamp(460px, calc(100svh - 300px), 680px); }
.giris-gorsel::before {
  content: ""; position: absolute; z-index: -1; left: 26%; top: -32px; bottom: 18%;
  right: calc((var(--kenar) + max(0px, (100vw - 1440px) / 2)) * -1); border-radius: 44px 0 0 44px;
  background: radial-gradient(70% 60% at 80% 20%, rgba(214, 206, 156, .55), rgba(214, 206, 156, 0)), rgba(231, 230, 216, .78);
}
.vitrin { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: var(--tas); isolation: isolate; transform: translateZ(0); box-shadow: 0 40px 80px -48px rgba(53, 39, 26, .5); }
.slayt { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.slayt.on { visibility: visible; z-index: 1; }
.slayt.ust { visibility: visible; z-index: 2; }
.slayt-ic { position: absolute; inset: -3%; transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0); transition: transform 1s var(--e); }
.slayt img { width: 100%; height: 100%; object-fit: cover; }
.vitrin-etiket { position: absolute; z-index: 5; left: 18px; top: 18px; padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--kahve); }
.vitrin-ok {
  position: absolute; z-index: 5; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--kahve);
  transition: background-color .35s var(--e), color .35s var(--e), transform .35s var(--e);
}
.vitrin-ok .i { width: 20px; height: 20px; transition: transform .45s var(--e); }
.vitrin-ok:hover { background: var(--kahve); color: #fff; }
.vitrin-ok[data-yon="-1"] { left: 16px; }
.vitrin-ok[data-yon="1"] { right: 16px; }
.vitrin-ok:hover .i { transform: translateX(calc(var(--ok-yon) * 3px)); }
.vitrin-ok:active { transform: scale(.92); }
.vitrin { touch-action: pan-y; }
/* Açılış: yazı tipleri inince giriş ekranı tek seferde, yerinden oynamadan belirir */
.js .giris .kap { opacity: 0; }
.js .giris.gorunur .kap { opacity: 1; animation: giris-bel .5s ease-out; }
@keyframes giris-bel { from { opacity: 0; } }
/* Hizmet kartları: çizgi, vitrindeki fotoğrafın ne zaman değişeceğini gösterir */
.giris-hizmet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 38px) clamp(20px, 2.6vw, 44px); margin: clamp(24px, 3.4vh, 40px) 0 0; padding: 0; list-style: none; }
.giris-hizmet a { display: block; text-decoration: none; }
.giris-hizmet a { color: var(--ikincil); transition: color .3s; }
.giris-hizmet a:hover, .giris-hizmet a.on { color: var(--kahve); }
/* Dolum çubuğu (Ece, 27 Eylül: "dolum animasyonu farklı olsun"). Eskiden düz zeytin bir çizgi
   soldan sağa uzuyordu. Artık çubuğun ucu altın rengine dönüyor, arkasında soluk bir iz bırakıyor:
   sitenin başka yerlerindeki ışık geçişiyle (logo huzmesi, altbilgi tabelası) aynı dil.
   Uzatma değil kaydırma yapıyor (translate), böylece uçtaki parlaklık bozulmadan ilerliyor. */
.hk-cubuk { display: block; height: 2px; margin: 0 0 14px; overflow: hidden; border-radius: 999px; background: var(--cizgi); }
.hk-cubuk i { display: block; width: 100%; height: 100%; border-radius: 999px; translate: -100% 0;
  background: linear-gradient(90deg, rgba(92, 84, 35, .5) 0%, var(--zeytin) 52%, var(--isik) 92%, #FFF7DF 100%); }
.giris-hizmet a.on .hk-cubuk i { animation: hk-ilerle 3s linear both; }
.vitrin-durdu .giris-hizmet a.on .hk-cubuk i { animation-play-state: paused; }
@keyframes hk-ilerle { to { translate: 0 0; } }
.giris-hizmet b { display: block; font: 500 clamp(20px, 1.9vw, 27px)/1.18 var(--bas); letter-spacing: calc(-.015em * var(--sikis)); }
.giris-hizmet small { display: block; max-width: 34ch; margin-top: 6px; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.45; color: var(--ikincil); }

/* Söz: pencere açılır */
.soz { position: relative; height: 290vh; }
.soz-yapis { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.soz-pencere { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--dikey, 18vh) var(--yatay, 35vw) round var(--yuvarlak, 32px)); background: var(--tas); }
/* Görüntü, pencere küçükken pencereye sığacak kadar küçülür; böylece kartta fotoğrafın tamamı görünür, pencere büyüdükçe tam ekrana açılır */
.soz-resim { position: absolute; inset: 0; transform: translate3d(var(--odak-x, 0), var(--odak-y, 0), 0) scale(var(--olcek, .7)); will-change: transform; }
.soz-resim picture { display: contents; }
.soz-resim img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } /* odak panelden, satır içi */
.soz-perde { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(53, 39, 26, .05) 30%, rgba(53, 39, 26, .72)); opacity: var(--perde, 0); }
.soz-yan { position: absolute; top: 50%; margin: 0; font: 300 clamp(34px, 4.6vw, 104px)/1 var(--bas); letter-spacing: calc(-.04em * var(--sikis)); white-space: nowrap; opacity: var(--yan-op, 1); }
.soz-yan-sol { right: calc(50% + min(15vw, 300px) + clamp(20px, 2.4vw, 48px)); transform: translate(calc(var(--kay, 0) * -1), -50%); }
.soz-yan-sag { left: calc(50% + min(15vw, 300px) + clamp(20px, 2.4vw, 48px)); transform: translate(var(--kay, 0), -50%); }
.soz-metin { position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px); color: #fff; opacity: var(--metin-op, 0); }
.soz-cumle { margin: 0; max-width: 15ch; font: 300 clamp(42px, 6.6vw, 108px)/.98 var(--bas); letter-spacing: calc(-.045em * var(--sikis)); }
.soz-cumle .w { opacity: .22; transition: opacity .5s var(--e); }
.soz-cumle .w.yan { opacity: 1; }
.soz-kaynak { margin: 22px 0 0; max-width: 52ch; font-size: 16px; color: rgba(255, 255, 255, .86); opacity: var(--kaynak-op, 0); }

/* Ücretsiz cilt analizi */
.analiz { padding-top: clamp(72px, 9vw, 140px); }
.analiz-kutu { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 34px; overflow: hidden; background: var(--adacayi); }
.analiz-foto { position: relative; min-height: clamp(360px, 42vw, 560px); overflow: hidden; }
.analiz-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.analiz-metin { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; padding: clamp(32px, 5vw, 80px); }
.analiz-metin p { margin: 0; max-width: 38ch; font-size: clamp(17px, 1.3vw, 19px); color: var(--ikincil); }
/* Ece, 27 Eylül: kutunun kenarından taşınca logo kesik görünüyordu; tamamı içeride duruyor. */
.analiz-isaret { position: absolute; right: 5%; bottom: 6%; width: 30%; max-width: 240px; height: auto; opacity: .1; pointer-events: none; }

/* Hizmet şeridi */
.serit { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.serit-ray { display: flex; width: max-content; will-change: transform; }
.serit-grup { display: flex; align-items: center; gap: .32em; padding-right: .32em; font: 300 clamp(46px, 7.2vw, 116px)/1.1 var(--bas); letter-spacing: calc(-.045em * var(--sikis)); white-space: nowrap; }
.serit-isaret { --logo-z: var(--zeytin); --logo-k: var(--zeytin); flex: none; height: .66em; width: auto; aspect-ratio: 455 / 625; margin: 0 .12em; opacity: .55; }

/* Hizmetler */
.hizmetler { padding-bottom: clamp(96px, 12vw, 180px); }
.bolum-bas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 72px); }
.b2 { margin: 0; font: 300 clamp(44px, 6vw, 96px)/.98 var(--bas); letter-spacing: calc(-.045em * var(--sikis)); }
.bolum-bas p { margin: 0; max-width: 44ch; font-size: clamp(17px, 1.3vw, 19px); color: var(--ikincil); }
/* Hizmet kartları: her hizmetin kendi görseli; imleci izleyen fotoğraf yok, sayfa hafif kalsın */
.hzk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); list-style: none; margin: 0; padding: 0; }
/* Hizmet sayfasındaki "Diğer hizmetler" dört kart: geniş ekranda 3+1 dizilip yanında boşluk kalıyordu. */
@media (min-width: 1100px) { .hs-diger .hzk { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hzk > li { display: flex; }
.hzk a {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 22px; background: var(--acik);
  box-shadow: inset 0 0 0 1px var(--cizgi); color: inherit; text-decoration: none;
  transition: transform .6s var(--e), box-shadow .6s var(--e);
}
.hzk a:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--sonuk), 0 26px 44px -30px rgba(53, 39, 26, .55); }
.hzk-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tas); }
.hzk-foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--e); }
.hzk a:hover .hzk-foto img { scale: 1.05; }
.hzk-ic { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 1.7vw, 26px); }
.hzk h3, .hzk h2 { margin: 0; font: 300 clamp(25px, 2.1vw, 34px)/1.06 var(--bas); letter-spacing: calc(-.035em * var(--sikis)); }
.hzk p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ikincil); }
.hzk-bak { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--zeytin); }
.hzk-bak i { display: block; width: 18px; height: 1px; background: currentColor; transition: width .55s var(--e); }
.hzk a:hover .hzk-bak i { width: 32px; }
.hzk-cagri { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(22px, 2.2vw, 34px); border-radius: 22px; background: var(--adacayi); }
.hzk-cagri h3 { margin: 0; font: 300 clamp(25px, 2.1vw, 34px)/1.08 var(--bas); letter-spacing: calc(-.035em * var(--sikis)); }
.hzk-cagri p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ikincil); }
.fiyat { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ikincil); }

/* Randevu adımları */
.yol { padding-bottom: clamp(96px, 12vw, 180px); }
.yol-bassiz { padding-top: clamp(48px, 6vw, 96px); }
.yol .bolum-bas { margin-bottom: clamp(32px, 4vw, 56px); }
.kartlar { list-style: none; margin: 0; padding: 0; }
.kart {
  --k: 0; position: sticky; top: calc(100px + var(--s) * 22px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(640px, calc(100svh - 150px));
  margin-bottom: 28vh; border-radius: 34px; overflow: hidden; transform-origin: 50% 0;
  transform: scale(calc(1 - var(--k) * .06)); box-shadow: 0 30px 70px -50px rgba(53, 39, 26, .45);
}
.kart:last-child { margin-bottom: 0; }
.kart::after { content: ""; position: absolute; inset: 0; background: var(--kahve); opacity: calc(var(--k) * .06); pointer-events: none; }
.kart:nth-child(4n+1) { background: #fff; }
.kart:nth-child(4n+2) { background: var(--tas); }
.kart:nth-child(4n+3) { background: var(--adacayi); }
.kart:nth-child(4n) { background: var(--kahve); color: var(--acik); }
.kart-metin { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 64px); }
.kart-no { order: 3; margin-top: auto; padding-top: 32px; font: 300 clamp(88px, 11vw, 176px)/.8 var(--bas); letter-spacing: calc(-.06em * var(--sikis)); color: var(--zeytin); }
.kart:nth-child(4n) .kart-no { color: var(--isik); }
.kart :is(h2, h3) { margin: 0 0 14px; font: 400 clamp(30px, 3.4vw, 54px)/1.02 var(--bas); letter-spacing: calc(-.035em * var(--sikis)); }
.kart p { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.3vw, 19px); }
.kart-foto { position: relative; overflow: hidden; }
.kart-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--g, 1) * .18)); }

/* Galeri */

/* Yorumlar */
.yorumlar { position: relative; overflow: hidden; padding: clamp(66px, 7.5vw, 118px) 0; background: var(--kahve); color: var(--acik); }
.yorumlar .isik-1 { top: auto; bottom: -40vw; right: -24vw; opacity: .55; }
.yorumlar .kap { position: relative; }
.yr-ust { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.2vw, 48px); }
.yr-ust a { font-size: 15px; font-weight: 500; color: var(--isik); text-underline-offset: 5px; }
.yr-izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.yr {
  --yr-yazi: rgba(244, 241, 232, .6);
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px; grid-column: span 5; margin: 0;
  padding: clamp(22px, 2.1vw, 32px); border-radius: 20px; background: rgba(244, 241, 232, .06); box-shadow: inset 0 0 0 1px rgba(244, 241, 232, .12);
  transition: transform .6s var(--e), background-color .6s var(--e), box-shadow .6s var(--e);
}
.yr:nth-child(4n+1), .yr:nth-child(4n) { grid-column: span 7; }
.yr:hover { transform: translateY(-6px); background: rgba(244, 241, 232, .09); box-shadow: inset 0 0 0 1px rgba(214, 206, 156, .4); }
.yr-one { --yr-yazi: var(--ikincil); background: var(--isik); color: var(--kahve); box-shadow: none; }
.yr-one:hover { background: #DDD6A8; box-shadow: none; }
.yr blockquote { margin: 0; }
.yr blockquote::before { content: "\201C"; display: block; height: .42em; margin-bottom: 12px; font: 400 58px/.8 var(--bas); color: var(--isik); }
.yr-one blockquote::before { color: var(--zeytin); }
.yr p { margin: 0; max-width: 36ch; font: 400 clamp(17px, 1.25vw, 20px)/1.42 var(--bas); letter-spacing: calc(-.01em * var(--sikis)); }
.yr-one p { font-size: clamp(19px, 1.55vw, 25px); line-height: 1.35; }
.yr figcaption { display: flex; align-items: center; gap: 12px; }
.yr-harf { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--isik); color: var(--kahve); font: 400 14px/1 var(--bas); }
.yr-one .yr-harf { background: var(--kahve); color: var(--isik); }
.yr figcaption b { display: block; font-weight: 600; }
.yr figcaption small { font-size: 13px; color: var(--yr-yazi); }
/* Bölüme gelince kartlar sırayla belirir (yalnız kaydırınca; açılışta değil) */
.js .yorumlar:not(.gorundu) .yr { opacity: 0; }
.js .yorumlar.gorundu .yr { animation: yr-gel 1s var(--e) backwards; animation-delay: calc(var(--s, 0) * 110ms); }
@keyframes yr-gel { from { opacity: 0; transform: translateY(36px); } }

/* İletişim */
.iletisim { padding: clamp(96px, 12vw, 180px) 0; }
.il-izgara { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.il-ozet { margin: 22px 0 0; max-width: 40ch; font-size: clamp(17px, 1.3vw, 19px); color: var(--ikincil); }
.il-liste { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cizgi); }
.il-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--cizgi); line-height: 1.45; }
.il-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); color: var(--zeytin); }
.il-ikon .i { width: 19px; height: 19px; }
.il-liste small { display: block; margin-bottom: 1px; font-size: 13px; color: var(--ikincil); }
.il-liste a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--e); }
.il-liste a:hover { background-size: 100% 1px; }
.il-liste .il-bag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--zeytin); white-space: nowrap; }
.il-bag .i { width: 16px; height: 16px; }
.harita { position: relative; height: 240px; margin-top: 28px; border-radius: 24px; overflow: hidden; background: var(--adacayi); box-shadow: inset 0 0 0 1px var(--cizgi); }
.harita > img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--zeytin); box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 8px 20px rgba(53, 39, 26, .35); }
.pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--zeytin); animation: nabiz 2.4s var(--e) infinite; }
@keyframes nabiz { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.harita-ad { position: absolute; left: 50%; top: calc(50% - 58px); translate: -50% 0; padding: 7px 13px; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -12px rgba(53, 39, 26, .45); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.harita-ac { position: absolute; left: 14px; bottom: 14px; }
.harita-telif { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .75); font-size: 11px; color: var(--ikincil); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:root { --hata: #A5412F; }
/* Randevu talep formu: koyu başlık şeridi, etiketli alanlar, KVKK bilgisi, alan hataları */
.rk { position: relative; overflow: hidden; border-radius: 30px; background: #fff; box-shadow: 0 28px 56px -36px rgba(53, 39, 26, .3), inset 0 0 0 1px var(--cizgi); }
.rk-bas { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 44px); background: var(--kahve); color: var(--acik); }
/* Ece, 27 Eylül: başlık kutusu overflow:hidden olduğu için %140 yükseklikteki işaret kesik
   görünüyordu; tamamı içeride dursun diye küçültüldü. */
.rk-isaret { --logo-z: var(--isik); --logo-k: var(--isik); position: absolute; right: clamp(16px, 2vw, 28px); top: 50%; height: 76%; width: auto; aspect-ratio: 455 / 625; translate: 0 -50%; opacity: .13; pointer-events: none; }
.rk-etiket-ust { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--isik); }
.rk-etiket-ust .i { width: 17px; height: 17px; }
.rk-bas h3 { position: relative; margin: 10px 0 0; font: 400 clamp(28px, 2.5vw, 38px)/1.1 var(--bas); color: #fff; }
.rk-bas p { position: relative; margin: 10px 0 0; max-width: 42ch; font-size: 15.5px; line-height: 1.55; color: rgba(244, 241, 232, .78); }
.rk-govde { padding: clamp(24px, 3.2vw, 44px); }
.rk-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.rk-tam { grid-column: 1 / -1; }
.rk-alan > label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; }
.rk-alan > label b { font-weight: 600; color: var(--zeytin); }
.rk-alan > label span { font-weight: 400; color: var(--ikincil); }
.rk input:is([type="text"], [type="tel"], [type="date"]), .rk select, .rk textarea {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #9E9478; border-radius: 12px; background: #fff;
  color: var(--kahve); font: 400 16px var(--govde); -webkit-appearance: none; appearance: none; transition: border-color .25s, box-shadow .25s;
}
.rk textarea { height: auto; min-height: 96px; padding: 13px 16px; line-height: 1.5; resize: vertical; }
.rk :is(input, select, textarea)::placeholder { color: #7A7260; }
.rk :is(input, select, textarea):hover { border-color: var(--kahve); }
.rk :is(input, select, textarea):focus-visible { outline: none; border-color: var(--zeytin); box-shadow: 0 0 0 3px rgba(92, 84, 35, .16); }
.rk :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--hata); }
.rk input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.rk-sec { position: relative; }
.rk-sec select { padding-right: 44px; cursor: pointer; }
.rk-sec select:invalid, .rk-sec select.bos { color: var(--ikincil); }
.rk-sec .i { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--ikincil); pointer-events: none; }
.rk-hata { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--hata); }
.rk-hata:empty { display: none; }
.rk-bilgi { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: var(--ikincil); }
.rk-bilgi a { color: var(--kahve); font-weight: 600; text-underline-offset: 3px; }
.rk-ipucu { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ikincil); }
.rk-gonder { width: 100%; height: 58px; margin-top: 22px; }
.rk-ayrac { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; font-size: 13px; color: var(--ikincil); }
.rk-ayrac::before, .rk-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.rk-hizli { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rk-hizli a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border: 1px solid #9E9478; border-radius: 12px; color: var(--kahve); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .25s, background-color .25s; }
.rk-hizli a:hover { border-color: var(--kahve); background: var(--zemin); }
.rk-hizli .i { width: 18px; height: 18px; color: var(--zeytin); }
.rk-tamam { padding: clamp(32px, 4vw, 56px); text-align: center; }
.rk-ozet { display: inline-block; max-width: 46ch; margin: 0 auto 16px; padding: 10px 16px; border-radius: 12px; background: var(--zemin); color: var(--ikincil); font-size: 15px; line-height: 1.45; }
.rk-tamam[hidden], .rk-govde[hidden] { display: none; }
.rk-tamam-ikon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--adacayi); color: var(--zeytin); }
.rk-tamam-ikon .i { width: 28px; height: 28px; }
.rk-tamam h4 { margin: 0; font: 400 clamp(28px, 2.4vw, 34px)/1.1 var(--bas); }
.rk-tamam p { margin: 10px auto 0; max-width: 40ch; color: var(--ikincil); }
.rk-tamam .bekliyor { display: block; max-width: 44ch; margin: 18px auto 0; white-space: normal; text-align: left; }
.rk-tamam .dugme { margin-top: 24px; }
.rk-geri { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; color: var(--ikincil); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Alt bilgi */
/* Alt bilgi: sayfa sonunda içerik yukarı kalkar, alt bilgi perde gibi altından açılır
   (sığdığı ekranlarda). --son-p: 0 kapalı → 1 tamamen açık. Açıldıkça karartı çekilir ve
   dev logonun üzerinden soldan sağa bir ışık geçer: harfler ışığın arkasında yanar. */
.son { --son-p: 1; position: relative; overflow: hidden; padding: clamp(52px, 5.5vw, 96px) 0 24px; background: var(--kahve); color: var(--acik); }
.son::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(214, 206, 156, 0), rgba(214, 206, 156, .5) 50%, rgba(214, 206, 156, 0)); opacity: var(--son-p); }
.son::after { content: ""; position: absolute; inset: 0; background: #17100A; opacity: calc((1 - var(--son-p)) * .72); pointer-events: none; }
.son .isik-1 { top: auto; right: auto; bottom: -46vw; left: -24vw; opacity: calc(.1 + var(--son-p) * .28); }
.son-ic { position: relative; }
.son-izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .75fr) minmax(0, .75fr) minmax(0, 1.1fr); gap: 44px clamp(28px, 4.4vw, 72px); transform: translateY(calc((1 - var(--son-p)) * 20px)); }
.son-isaret { --logo-z: var(--isik); --logo-k: var(--acik); display: block; width: 50px; height: auto; }
/* İşaret imza gibi çizilir: alt bilgi açılıp işaret tamamen görününce önce Y'nin, ardından S'nin çevresi
   ince altın çizgiyle çizilir, sonra içi dolar ve çizgi söner. Simge deposundaki yollarda pathLength="1" var;
   --logo-cizim-z / -k (1 boş → 0 tam) iki renk grubuna ayrı geçer. Sınıfı site.js verir, örtülünce geri alır. */
@property --logo-cizim-z { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --logo-cizim-k { syntax: "<number>"; inherits: true; initial-value: 0; }
.js .son-isaret { --logo-cizim-z: 1; --logo-cizim-k: 1; fill-opacity: 0; stroke: var(--isik); stroke-width: 380px; stroke-linejoin: round; stroke-dasharray: 1; }
.js .son-isaret.ciz { animation: ciz-z 1.7s cubic-bezier(.5, 0, .3, 1) forwards, ciz-k 1.2s .8s cubic-bezier(.5, 0, .3, 1) forwards, ciz-dol 1s 1.6s ease forwards, ciz-son 1s 2.1s ease forwards; }
@keyframes ciz-z { to { --logo-cizim-z: 0; } }
@keyframes ciz-k { to { --logo-cizim-k: 0; } }
@keyframes ciz-dol { to { fill-opacity: 1; } }
@keyframes ciz-son { to { stroke-opacity: 0; } }
.son-tanit p { margin: 22px 0 0; max-width: 32ch; font-size: 15px; line-height: 1.65; color: rgba(244, 241, 232, .72); }
.son-sosyal { display: flex; gap: 10px; margin-top: 26px; }
.son-sosyal a, .son-yukari b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(244, 241, 232, .22); color: var(--acik); transition: color .4s var(--e); }
.son-sosyal a::before, .son-yukari b::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--isik); scale: 0; transition: scale .5s var(--e); }
.son-sosyal a:hover, .son-yukari:hover b { color: var(--kahve); }
.son-sosyal a:hover::before, .son-yukari:hover b::before { scale: 1; }
.son-sosyal .i { position: relative; width: 19px; height: 19px; }
.son-sutun h2 { margin: 0 0 18px; font: 600 14px/1.2 var(--govde); color: var(--isik); }
.son-sutun ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: #E6E0CF; }
.son-sutun li > a { display: inline-flex; align-items: center; color: #E6E0CF; text-decoration: none; transition: color .3s; }
.son-sutun li > a::before { content: ""; width: 0; height: 1px; margin-right: 0; background: var(--isik); transition: width .45s var(--e), margin-right .45s var(--e); }
.son-sutun li > a:hover { color: #fff; }
.son-sutun li > a:hover::before { width: 14px; margin-right: 8px; }
.son .bekliyor { border-color: rgba(244, 241, 232, .3); color: rgba(244, 241, 232, .7); }

/* Randevu sütunu: telefon en okunur öğe */
.son-tel { position: relative; display: inline-block; font: 400 clamp(27px, 2.5vw, 36px)/1.1 var(--bas); letter-spacing: calc(-.02em * var(--sikis)); color: var(--acik); text-decoration: none; }
.son-tel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--isik); scale: 0 1; transform-origin: 0 50%; transition: scale .55s var(--e); }
.son-tel:hover::after { scale: 1 1; }
.son-adres { margin: 22px 0 0; max-width: 28ch; font-size: 14.5px; line-height: 1.6; color: rgba(244, 241, 232, .68); }
.son-adres + .son-adres { margin-top: 10px; }
.son-adres a { color: rgba(244, 241, 232, .68); text-decoration: none; transition: color .3s; }
.son-adres a:hover { color: var(--acik); }
.son-simdi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 20px 0 0; font-size: 14.5px; color: rgba(244, 241, 232, .68); font-variant-numeric: tabular-nums; }
.son-simdi[hidden] { display: none; }
.son-simdi i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 241, 232, .32); }
.son-simdi.acik i { background: var(--isik); box-shadow: 0 0 0 0 rgba(214, 206, 156, .5); animation: son-nabiz 2.6s var(--e) infinite; }
@keyframes son-nabiz { 60%, 100% { box-shadow: 0 0 0 9px rgba(214, 206, 156, 0); } }
.son-simdi b { font-weight: 500; color: var(--acik); }
.son-simdi + .son-saatler { margin-top: 12px; }
.son-iletisim .bekliyor { margin-top: 16px; }

/* Işıklı tabela: sönük harfler, kaydırmayla geçen ışık, altında yansıma */
.son-marka { --tab-p: 1; position: relative; max-width: min(100%, 132vh); margin: clamp(38px, 5vw, 84px) auto clamp(14px, 2vw, 26px); }
.son-tabela { position: relative; }
.son-tabela svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.son-hale { position: absolute; left: 50%; top: 45%; width: 112%; height: 300%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(228, 212, 148, .26), rgba(228, 212, 148, 0) 72%); opacity: var(--tab-p); pointer-events: none; }
.son-isin { position: absolute; z-index: 2; top: -26%; bottom: -26%; left: calc(var(--tab-p) * 100%); width: clamp(76px, 8vw, 150px); translate: -50% 0; background: linear-gradient(90deg, rgba(255, 238, 198, 0), rgba(255, 240, 206, .26) 40%, rgba(255, 251, 238, .6) 50%, rgba(255, 240, 206, .26) 60%, rgba(255, 238, 198, 0)); filter: blur(11px); opacity: calc(min(var(--tab-p), 1 - var(--tab-p)) * 3.6); -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); pointer-events: none; }
.son-isik-kat { opacity: 0; transition: opacity .6s var(--e); }
.son-tabela:hover .son-isik-kat { opacity: 1; }
.son-yansima { overflow: hidden; aspect-ratio: 1265 / 60; opacity: calc(var(--tab-p) * .26); -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .9), transparent 76%); mask-image: linear-gradient(rgba(0, 0, 0, .9), transparent 76%); pointer-events: none; }
.son-yansima svg { display: block; width: 100%; height: auto; transform-origin: 50% 0; translate: 0 100%; scale: 1 -1; }

.son-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 22px; border-top: 1px solid rgba(244, 241, 232, .14); font-size: 14px; color: var(--sonuk); }
.son-alt a { color: var(--sonuk); text-decoration: none; transition: color .3s; }
.son-alt a:hover { color: var(--acik); }
.son-yukari { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.son-yukari b { width: 40px; height: 40px; font-weight: 400; }
.son-yukari .i { width: 18px; height: 18px; transition: translate .45s var(--e); }
.son-yukari:hover .i { translate: 0 -3px; }
@media (min-width: 981px) and (max-height: 820px) {
  .son { padding-top: clamp(36px, 4vw, 58px); }
  .son-izgara { gap: 32px clamp(28px, 4.4vw, 72px); }
  .son-marka { margin-top: clamp(24px, 3vw, 44px); }
  .son-alt { padding-top: 18px; }
}
.perde main { position: relative; z-index: 1; background: var(--zemin); box-shadow: 0 34px 70px -18px rgba(20, 14, 8, .45); }
.perde .son { position: sticky; bottom: 0; z-index: 0; }

/* Ekran görüntüsü kipi (?cek=kaydırma): geçişler anında biter */
.cek *, .cek *::before, .cek *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* Telefon alt çubuğu */
.alt-cubuk { display: none; }

@media (max-width: 1020px) {
  .menu { display: none; }
  .ust .dugme-kucuk { display: none; }
  .menu-dugme { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--kahve); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; }
  .menu-dugme b { position: relative; width: 16px; height: 8px; border-top: 1.5px solid; border-bottom: 1.5px solid; transition: transform .4s var(--e); }
  .menu-dugme b::after { content: ""; position: absolute; left: 0; top: -1.5px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(90deg); opacity: 0; }
  .menu-acik .menu-dugme b { height: 0; border-bottom: 0; transform: rotate(45deg); }
  .menu-acik .menu-dugme b::after { opacity: 1; }
  .menu-acik .menu {
    display: flex; position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 4px;
    padding: 100px var(--kenar) 120px; background: var(--kahve);
  }
  .menu-acik .menu a { --harf-golge: var(--isik); font: 300 clamp(40px, 11vw, 64px)/1.15 var(--bas); letter-spacing: calc(-.04em * var(--sikis)); color: var(--acik); animation: menu-gel .8s var(--e) both; }
  /* Harf kayma efekti tek satır gerektiriyor (nowrap + overflow: hidden); "Ücretsiz cilt analizi"
     telefonda satıra sığmayıp kırpılıyordu (27 Eylül). Telefonda zaten üzerine gelme yok: efekti
     kapatıp yazının satır kırmasına izin veriyoruz. */
  .menu-acik .harfler { display: inline; overflow: visible; white-space: normal; line-height: 1.1; }
  /* Her harf ayrı kutu olduğu için satır kelimenin ortasından kırılıyordu; düz metne çeviriyoruz. */
  .menu-acik .harfler i { display: inline; text-shadow: none; transition: none; }
  .menu-acik .menu a:hover .harfler i, .menu-acik .menu a:focus-visible .harfler i { transform: none; }
  .menu-acik .menu li:nth-child(2) a { animation-delay: .05s; }
  .menu-acik .menu li:nth-child(3) a { animation-delay: .1s; }
  .menu-acik .menu li:nth-child(4) a { animation-delay: .15s; }
  .menu-acik .menu li:nth-child(5) a { animation-delay: .2s; }
  .menu-acik .menu li:nth-child(6) a { animation-delay: .25s; }
  /* Telefonda açılan liste kutu değil, "Hizmetler"in altında küçük yazılı bir sıra. */
  .menu-acik .menu { overflow-y: auto; }
  .menu-acik .menu-item-has-children > a::before { content: none; }
  .menu-acik .menu-item-has-children::before { content: none; }
  .menu-acik .sub-menu { position: static; display: flex; flex-wrap: wrap; gap: 0 22px; min-width: 0; margin: 2px 0 12px; padding: 0; list-style: none; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; translate: none; }
  .menu-acik .sub-menu a { padding: 2px 0; font: 400 17px/1.8 var(--govde); letter-spacing: 0; color: var(--isik); animation: none; }
  .menu-acik .sub-menu a:hover, .menu-acik .sub-menu a:focus-visible { background: none; color: var(--acik); }
  .menu-acik .logo { --logo-z: var(--isik); --logo-k: var(--acik); }
  .menu-acik .menu-dugme { background: var(--isik); color: var(--kahve); }
  .menu-acik.ust { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .giris-izgara { grid-template-columns: 1fr; }
  .giris-metin { max-width: 720px; }
  .giris-gorsel { height: clamp(420px, 66vw, 640px); }
    /* Tablette de 3'e 3: yatay kaydırma yalnız telefonda kaldı (Ece, 26 Eylül). */
  .giris-hizmet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px) clamp(16px, 2.4vw, 26px); }
  .bolum-bas { grid-template-columns: 1fr; }
  .hzk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-izgara { grid-template-columns: 1fr; gap: 0; }
  .son-izgara { grid-template-columns: 1fr 1fr; gap: 40px clamp(24px, 4vw, 48px); }
  .son-tanit { grid-column: 1 / -1; }
  .il-sol { display: contents; }
  .il-sol > h2 { order: 1; }
  .il-ozet { order: 2; }
  .rk { order: 3; margin-top: 32px; }
  .il-liste { order: 4; margin-top: 40px; }
  .harita { order: 5; }
  .analiz-kutu { grid-template-columns: 1fr; }
  .analiz-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .yr, .yr:nth-child(4n+1), .yr:nth-child(4n) { grid-column: span 6; }
}
@keyframes menu-gel { from { opacity: 0; transform: translateY(40px); } }

@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .son-izgara { gap: 34px 20px; }
  .son-tanit, .son-iletisim { grid-column: 1 / -1; }
  .son-alt { gap: 14px 20px; }
  .ust .kap { height: 68px; }
  .logo-isaret { width: 28px; }
  .logo-yazi { width: 150px; }
  .giris { padding: 88px 0 24px; }
  .giris-izgara { gap: 20px; }
  .giris-metin { display: contents; }
  .baslik { font-size: clamp(44px, 13.4vw, 64px); }
  .giris-ozet { order: 2; }
  .eylemler { order: 3; display: grid; grid-template-columns: 1fr; align-self: stretch; }
  .eylemler .dugme { width: 100%; }
  .giris-gorsel { order: 4; height: auto; }
  .giris-gorsel::before { display: none; }
  .giris-isaret, .giris-isik { top: -12px; height: 330px; translate: -50% 0; }
  .vitrin { height: auto; aspect-ratio: 4 / 5; border-radius: 22px; }
  .vitrin-etiket { left: 14px; top: 14px; }
  .vitrin-ok { width: 44px; height: 44px; }
  .vitrin-ok[data-yon="-1"] { left: 12px; }
  .vitrin-ok[data-yon="1"] { right: 12px; }
  .guven { order: 5; flex-direction: column; margin: 8px 0 0; gap: 12px; }
  .giris-hizmet { margin-top: 24px; grid-template-columns: repeat(6, 58vw); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar); }
  .giris-hizmet::-webkit-scrollbar { display: none; }
  .giris-hizmet li { scroll-snap-align: start; }
  .soz { height: 240vh; }
  .soz-yan { top: calc(var(--dikey-ham, 24vh) - 16px); transform: translate(0, -100%); font-size: clamp(30px, 9vw, 44px); }
  .soz-yan-sol { left: var(--kenar); right: auto; transform: translate(calc(var(--kay, 0) * -1), -100%); }
  .soz-yan-sag { top: auto; bottom: calc(var(--dikey-ham, 24vh) - 16px); left: auto; right: var(--kenar); transform: translate(var(--kay, 0), 100%); }
  .hzk { grid-template-columns: 1fr; gap: 14px; }
  .hzk-foto { aspect-ratio: 16 / 10; }
  .kart { grid-template-columns: 1fr; grid-template-rows: 38svh auto; min-height: 0; top: calc(78px + var(--s) * 12px); margin-bottom: 16vh; border-radius: 26px; }
  .kart-foto { order: -1; }
  .kart-metin { padding: 22px 22px 28px; }
  .kart-no { position: absolute; z-index: 2; top: 14px; left: 18px; margin: 0; padding: 0; font-size: 64px; color: #fff; mix-blend-mode: normal; text-shadow: 0 2px 20px rgba(53, 39, 26, .25); }
  .kart:nth-child(4n) .kart-no { color: #fff; }
  .kart :is(h2, h3) { margin: 0 0 8px; font-size: 30px; }
  .kart p { font-size: 16px; }
  .yr, .yr:nth-child(4n+1), .yr:nth-child(4n) { grid-column: 1 / -1; border-radius: 18px; }
  .yr blockquote::before { font-size: 80px; }
  .harita { height: 220px; }
  .rk { border-radius: 24px; }
  .rk-izgara { grid-template-columns: 1fr; }
  .rk-isaret { right: 14px; height: 52%; opacity: .1; }
  .il-liste li { grid-template-columns: 44px minmax(0, 1fr); }
  .il-liste .il-bag { grid-column: 2; justify-self: start; margin-top: -6px; }
  .alt-cubuk {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55;
    padding: 6px; border-radius: 22px; background: rgba(53, 39, 26, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -20px rgba(53, 39, 26, .6);
  }
  .alt-cubuk a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 16px; color: var(--acik); font-size: 15px; font-weight: 600; text-decoration: none; }
  .alt-cubuk a:first-child { background: var(--isik); color: var(--kahve); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto !important; } /* sayfa içi atlamalar da kaymasın */
  .js .k > span, .js .yr { transform: none !important; opacity: 1 !important; }
  .giris-hizmet a.on .hk-cubuk i { translate: none; }
  .ay, .slayt-ic { translate: none; transform: none; }
  .giris-isaret, .giris-isik { transform: none; }
  .js .son-isaret { --logo-cizim-z: 0; --logo-cizim-k: 0; fill-opacity: 1; stroke: none; }
  .soz { height: auto; }
  .soz-yapis { position: relative; height: 90svh; }
  .soz-pencere { clip-path: none; }
  .soz-resim { transform: none; }
  .soz-perde, .soz-metin, .soz-kaynak { opacity: 1; }
  .soz-yan { display: none; }
  .soz-cumle .w { opacity: 1; }
  .kart { transform: none; }
  .kart::after { display: none; }
}

/* ---------- Ayrı sayfalar (hizmetler, cilt analizi, nasıl ilerler, yorumlar, iletişim) ---------- */
.menu .current-menu-item > a, .menu a[aria-current="page"] { color: var(--zeytin); }
.menu .current-menu-item > a::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* Bir hizmet sayfasındayken üstteki "Hizmetler" de işaretli dursun (alt öğe seçili olduğu için). */
.menu .current-menu-ancestor > a { color: var(--zeytin); }
.menu .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.menu .sub-menu .current-menu-item > a { background: var(--adacayi); }
@media (max-width: 1020px) {
  /* Tam ekran menüde seçili sayfa zeytin yeşiline dönüyordu, koyu zeminde okunmuyordu; altı çizgisi
     de bütün satırı boydan boya geçiyordu (27 Eylül incelemesi). Açılan listedeki vurgu kutusu da
     burada kutu değil, yalnız renk farkı. */
  .menu-acik .menu .current-menu-item > a, .menu-acik .menu .current-menu-ancestor > a,
  .menu-acik .menu a[aria-current="page"] { color: var(--isik); }
  .menu-acik .menu a::after { content: none; }
  .menu-acik .menu .sub-menu .current-menu-item > a { background: none; color: var(--acik); }
}

/* Sayfa başlığı bandı: girişin ışıklı zeminiyle aynı aile, daha alçak */
.sayfa-bas { position: relative; isolation: isolate; overflow: hidden; padding: calc(84px + clamp(30px, 6vh, 76px)) 0 clamp(44px, 5vw, 80px); }
.sayfa-bas .kap { position: relative; }
.kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 clamp(16px, 2vw, 26px); font-size: 14px; color: var(--ikincil); }
.kirinti a { text-decoration: none; }
.kirinti a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sayfa-bas h1 { max-width: 15ch; }
/* Ece, 27 Eylül: banttaki işaret %210 yükseklikteyken üstten ve alttan kesiliyordu
   (.sayfa-bas overflow:hidden). Tamamı bandın içinde kalacak ölçüye çekildi. */
.sayfa-isaret { --logo-z: var(--zeytin); --logo-k: var(--zeytin); position: absolute; z-index: -1; right: 3%; top: 50%; height: 118%; max-height: 300px; width: auto; aspect-ratio: 455 / 625; opacity: .085; translate: 0 -50%; pointer-events: none; }
/* Ana sayfadaki girişle aynı: monogramın içinden geçen altın ışık (şekil maskesi, ışık yalnız transform ile kayar). */
.sayfa-isik { position: absolute; z-index: -1; right: 3%; top: 50%; height: 118%; max-height: 300px; width: auto; aspect-ratio: 455 / 625; translate: 0 -50%; pointer-events: none; display: block; overflow: hidden; -webkit-mask: url(../img/logo-isaret.svg) center / 100% 100% no-repeat; mask: url(../img/logo-isaret.svg) center / 100% 100% no-repeat; }
.sayfa-isik::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(184, 160, 78, 0) 32%, rgba(184, 160, 78, .55) 50%, rgba(184, 160, 78, 0) 68%); transform: translateX(-100%); }
.js .sayfa-bas.gorunur .sayfa-isik::before { animation: isik-gec 2.4s .6s ease-in-out infinite; }
.js .sayfa-bas.gorunur.sayfa-disarida .sayfa-isik::before { animation-play-state: paused; }
.sayfa-ozet { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--ikincil); }
.sayfa-bas .eylemler { margin-top: clamp(24px, 3vw, 38px); }

.bolum { padding: clamp(62px, 7vw, 112px) 0; }
.bolum-acik { background: var(--acik); }
.ic-bag { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--zeytin); text-decoration: none; white-space: nowrap; }
.ic-bag i { display: block; width: 18px; height: 1px; background: currentColor; transition: width .5s var(--e); }
.ic-bag:hover i { width: 32px; }

/* Hizmet ayrıntısı: fotoğraf ve metin sırayla yer değiştirir */
.hzd { display: grid; gap: clamp(52px, 6vw, 104px); list-style: none; margin: 0; padding: 0; }
.hzd > li, .hzd-oge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); scroll-margin-top: 104px; }
.hzd > li:nth-child(even) .hzd-foto, .hzd-ters .hzd-foto { order: 2; }
.hzd-foto { display: block; overflow: hidden; border-radius: 26px; background: var(--tas); aspect-ratio: 3 / 2; }
.hzd-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Telefonla çekilmiş dikey kareler 3:2 kutuda kafayı kesiyordu: blokta "dikey" seçilince kutu 4:5 olur. */
.hzd-dikey .hzd-foto { aspect-ratio: 4 / 5; }
.hzd h2 { margin: 0; font: 300 clamp(32px, 3.4vw, 54px)/1.02 var(--bas); letter-spacing: calc(-.04em * var(--sikis)); }
.hzd-ic > p { margin: 16px 0 0; max-width: 46ch; color: var(--ikincil); }
.hzd-etiket { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hzd-etiket li { padding: 7px 15px; border-radius: 999px; background: var(--adacayi); font-size: 14.5px; }
.hzd-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }

/* Soru kutuları */
.soru { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.soru > li { padding: clamp(22px, 2.2vw, 32px); border-radius: 20px; background: var(--acik); box-shadow: inset 0 0 0 1px var(--cizgi); }
.bolum-acik .soru > li { background: var(--zemin); }
.soru h3 { margin: 0 0 10px; font: 400 clamp(19px, 1.5vw, 23px)/1.25 var(--bas); }
.soru p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ikincil); }
.soru .bekliyor { margin-top: 4px; }

/* Sayfa sonu çağrısı */
.cagri { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 4vw, 60px); border-radius: 28px; background: var(--adacayi); }
.cagri h2 { margin: 0; font: 300 clamp(30px, 3vw, 48px)/1.04 var(--bas); letter-spacing: calc(-.04em * var(--sikis)); }
.cagri p { margin: 14px 0 0; max-width: 46ch; color: var(--ikincil); }
.cagri .eylemler { justify-self: end; }

@media (max-width: 1020px) {
  .hzd > li, .hzd-oge { grid-template-columns: 1fr; gap: 22px; }
  .hzd > li:nth-child(even) .hzd-foto, .hzd-ters .hzd-foto { order: 0; }
  .cagri { grid-template-columns: 1fr; }
  .cagri .eylemler { justify-self: start; }
}
@media (max-width: 720px) {
  .soru { grid-template-columns: 1fr; }
  .sayfa-isaret, .sayfa-isik { display: none; }
  .sayfa-bas { padding-top: calc(68px + 34px); }
  .hzd-foto { aspect-ratio: 4 / 3; }
}

/* ================================================================ WordPress uyarlamaları */
/* Adım numarası ve yapışma sırası: kart sayısı panelden değişebilir */
.kartlar { counter-reset: adim; }
.kart { counter-increment: adim; }
.kart-no::before { content: counter(adim); }
.kart:nth-child(1) { --s: 0; } .kart:nth-child(2) { --s: 1; } .kart:nth-child(3) { --s: 2; } .kart:nth-child(4) { --s: 3; }
.kart:nth-child(5) { --s: 4; } .kart:nth-child(6) { --s: 5; } .kart:nth-child(7) { --s: 6; } .kart:nth-child(8) { --s: 7; }

/* Yönetici çubuğu açıkken üst menü altına kayar */
.admin-bar .ust { top: 32px; }
@media (max-width: 782px) { .admin-bar .ust { top: 46px; } }

/* Erişilebilirlik: klavyeyle "içeriğe geç" bağlantısı ve yalnız ekran okuyucuya metin */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icerige-gec { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--kahve); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s; }
.icerige-gec:focus { top: 16px; }

/* Hizmet ayrıntısındaki başlık bağlantısı */
.hzd h2 a { color: inherit; text-decoration: none; }
.hzd h2 a:hover { color: var(--zeytin); }
.fiyat b { font-weight: 600; color: var(--kahve); }

/* Form: robot tuzağı, gönderim uyarısı, çalışma saatleri */
.rk-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rk-uyari { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #F6E3DE; color: var(--hata); font-size: 15px; }
.rk-gonder[disabled] { opacity: .6; cursor: progress; }
.il-saat { display: block; }
.il-saat b { font-weight: 600; }
.son-saatler { display: grid; gap: 4px; margin: 16px 0 0; font-size: 14.5px; color: rgba(244, 241, 232, .68); }
.son-saatler b { font-weight: 500; color: var(--acik); }

/* Düz metin sayfaları (KVKK, çerez politikası, blog yazısı) */
.metin { max-width: 72ch; padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px); font-size: 17px; line-height: 1.75; }
.metin > * + * { margin-top: 1.1em; }
.metin h2 { margin-top: 1.8em; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--bas); }
.metin h3 { margin-top: 1.5em; font: 400 22px/1.25 var(--bas); }
.metin a { color: var(--zeytin); text-underline-offset: 3px; }
.metin ul, .metin ol { padding-left: 1.3em; }
.metin img { height: auto; border-radius: 18px; }
.metin blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--isik); font: 400 22px/1.4 var(--bas); }

/* Hizmet sayfası */
.hs-govde { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 104px); }
.hs-foto { overflow: hidden; border-radius: 26px; background: var(--tas); aspect-ratio: 3 / 2; }
.hs-foto img { width: 100%; height: 100%; object-fit: cover; }
.hs-govde .metin { padding: 0; margin-top: clamp(28px, 3vw, 44px); }
.hs-yan { position: sticky; top: 110px; display: grid; gap: 18px; padding: clamp(22px, 2.2vw, 32px); border-radius: 22px; background: var(--acik); box-shadow: inset 0 0 0 1px var(--cizgi); }
.hs-yan h2 { margin: 0; font: 400 24px/1.2 var(--bas); }
/* Künyedeki uygulamalar: dar sütunda baloncuklar kırık kırık diziliyordu (Ece, 27 Eylül).
   Alt alta, ince çizgiyle ayrılmış düz liste olarak veriliyor. */
.hs-yan .hzd-etiket { display: block; margin: 0; }
.hs-yan .hzd-etiket li { padding: 11px 0; border-radius: 0; background: none; border-top: 1px solid var(--cizgi); font-size: 15.5px; line-height: 1.35; }
.hs-yan .hzd-etiket li:first-child { padding-top: 2px; border-top: 0; }
.hs-yan .dugme { width: 100%; justify-content: center; }
/* Uygulama listesi olmayan hizmette künye kutusu yok (Ece, 27 Eylül). Önce tek sütun yaptık,
   ama fotoğraf yazıdan taşıyor ve sayfanın sağ yarısı boş kalıyordu ("yazılar hizasız",
   "sağ taraf bomboş kaldı"). Şimdi sayfanın kendi yapısı korunuyor: solda fotoğraf ve düğmeler,
   sağda yazı. Yazı okunur genişlikte kalsın diye sütunlar neredeyse eşit. */
.hs-govde.hs-tek { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hs-govde.hs-tek .metin { max-width: none; margin-top: 0; }
.hs-eylem { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }
.hs-diger { padding: 0 0 clamp(64px, 7vw, 104px); }
.hs-diger h2 { margin: 0 0 clamp(20px, 2.4vw, 32px); font: 300 clamp(30px, 3vw, 44px)/1.05 var(--bas); letter-spacing: calc(-.04em * var(--sikis)); }
@media (max-width: 1020px) {
  .hs-govde, .hs-govde.hs-tek { grid-template-columns: 1fr; }
  /* Tek sütuna inince sıra fotoğraf → yazı → düğmeler olsun (düğmeler yazıdan önce gelmesin). */
  .hs-govde.hs-tek .hs-ana { display: contents; }
  .hs-govde.hs-tek .hs-foto { order: 1; }
  .hs-govde.hs-tek .metin { order: 2; margin-top: 0; }
  .hs-govde.hs-tek .hs-eylem { order: 3; margin-top: 0; }
  .hs-yan { position: static; }
}

/* Blog: yazı sayfası ve liste. Kartlar hizmet kartlarının (.hzk) aynısı; yazı başlıkları uzun olduğu için küçük. */
.single-post .sayfa-bas h1 { max-width: 22ch; font-size: clamp(32px, 3.9vw + 17px, 70px); line-height: 1.04; }
.single-post .kirinti > :nth-last-child(-n+2) { display: none; } /* yazı adı hemen altında başlık olarak var */
.yazi-tarih { margin: 0 0 16px; font-size: 14.5px; color: var(--ikincil); }
.yazi-yan-metin { margin: -8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ikincil); }
.yazi-kartlari h2, .yazi-kartlari h3 { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.12; }
.blog-liste { padding: clamp(36px, 4vw, 64px) 0 clamp(72px, 8vw, 120px); }
.blog-liste .nav-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.blog-liste .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--cizgi); text-decoration: none; }
.blog-liste .page-numbers.current { background: var(--kahve); color: var(--acik); box-shadow: none; }

/* 404 */
.bulunamadi { min-height: 100svh; padding: calc(84px + clamp(60px, 12vh, 140px)) 0 clamp(80px, 10vw, 140px); }
.bulunamadi p { max-width: 46ch; color: var(--ikincil); }

/* Telefonda dokunma alanı (29 Eylül 2026, Ece onayı). İletişim bağlantılarının yazı yüksekliği
   20-24 px'ti; parmakla isabet ettirmek zordu. Satır içi bağlantılara dikey dolgu veriliyor:
   satır yüksekliğini değiştirmediği için sayfa görünümü aynı kalıyor, dokunulabilir alan büyüyor.
   .il-bag satır içi kutu olduğu için dolgusu eksi kenar boşluğuyla dengeleniyor.
   Alt çizgi vurgusu yazının altında kalsın diye background-origin: content-box. */
@media (max-width: 720px) {
  .il-liste a { padding-block: 11px; background-origin: content-box; }
  .il-liste .il-bag { padding: 10px 14px; margin: -16px -14px -10px; }
  .son-adres a { padding-block: 9px; }
  .kirinti a { padding-block: 9px; }
  .ic-bag { padding: 10px 12px; margin: -10px -12px; }
  /* Altbilgi bağlantı listeleri: aradaki boşluk 11 px'ti, dolgu verince alanlar üst üste
     binerdi; boşluk 20 px'e çıkarılıp 8 px dolgu veriliyor (alanlar 38 px, aralarında 4 px). */
  .son-sutun ul { gap: 20px; }
  .son-sutun li > a { padding-block: 8px; margin-block: -8px; }
}