/* Vitrin modülü: ana sayfa, hizmet listesi/detay, ekip.
   Yalnızca tema token'ları (--color-*, --radius, --shadow, --space-*, --text-*, --ease, --dur).
   Sabit renk yok; 8 temada da yüzey/çizgi/metin token'larından okunur. */

:root {
  --sf-gap: var(--space-5);
  --sf-pad: var(--section-y);
  --sf-narrow: 46rem;
  --sf-nav-offset: var(--nav-h);
  --sf-tint: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
  --sf-soft: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  --sf-hover-lift: translateY(-3px);
}

/* Yardımcılar */
.sf-title { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--space-5); }
.sf-meta, .sf-cite, .sf-kicker, .sf-card-text { margin: 0; }
.sf-meta { color: var(--color-muted); font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sf-kicker { color: var(--color-primary); font-size: 0.92rem; font-weight: 600; margin-bottom: var(--space-2); }
.sf-price { font-weight: 600; color: var(--color-text); }
.sf-card-text { color: var(--color-muted); }
.sf-empty { color: var(--color-muted); margin: 0; }
.sf-narrow { max-width: var(--sf-narrow); }
.sf-block { padding-block: var(--sf-pad); }
.sf-page-head { padding-top: var(--space-7); padding-bottom: 0; }
.sf-page-head .sf-title { font-size: var(--text-h1); margin: 0; }

.sf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-6); }
.sf-head .sf-title { margin: 0; }
.sf-head .link { color: var(--color-primary); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; }
.sf-head .link:hover, .sf-head .link:focus-visible { border-bottom-color: currentColor; }

.sf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.sf-crumbs { padding-top: var(--space-4); font-size: 0.9rem; color: var(--color-muted); }
.sf-crumbs a { color: inherit; }

.sf-card-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 600; line-height: 1.3; margin: 0; }
.sf-card-title a { color: var(--color-text); text-decoration: none; }
.sf-card-title a::after { content: ""; position: absolute; inset: 0; } /* tüm kart tıklanabilir */
.sf-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.sf-card-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--sf-tint); }
.sf-person .sf-card-img { aspect-ratio: 4 / 5; }
.sf-card-title a:focus-visible, .sf-chip:focus-visible, .sf-faq summary:focus-visible, .sf-book-btn:focus-visible, .sf-hero .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.sf-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.sf-grid-staff { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-4); }
.sf-grid-services .sf-card { padding: var(--space-4); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sf-grid-services .sf-card-img { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-2); width: calc(100% + var(--space-4) * 2); border-radius: var(--radius) var(--radius) 0 0; }
.sf-grid-services .sf-card:hover { box-shadow: var(--shadow); }
.sf-grid-staff .sf-card { gap: var(--space-2); }
.sf-grid-posts .sf-card { padding: var(--space-5); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sf-grid-services .sf-card, .sf-grid-posts .sf-card, .sf-grid-staff .sf-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .sf-grid-services .sf-card:hover, .sf-grid-posts .sf-card:hover, .sf-grid-staff .sf-card:hover { transform: var(--sf-hover-lift); }
}

/* Hero: asimetrik, sıcak tonlu zemin */
.sf-hero { padding-block: var(--sf-pad); background: linear-gradient(165deg, var(--sf-tint) 0%, var(--color-bg) 62%); }
.sf-hero-inner { display: grid; gap: var(--space-6); align-items: center; }
.sf-hero-title { font-family: var(--font-heading); font-size: var(--text-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; margin: 0; max-width: 16ch; }
.sf-hero-lead { margin: var(--space-5) 0 0; max-width: 36ch; color: var(--color-muted); font-size: 1.125rem; }
.sf-hero-media { margin: 0; justify-self: end; width: min(100%, 26rem); }
.sf-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.sf-hero .btn.secondary { background: transparent; color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }

/* Öne çıkanlar: zig-zag, eşit kart yok */
.sf-highlights .stack { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.sf-zigzag .sf-highlight { max-width: 34rem; padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.sf-zigzag .sf-highlight:nth-child(odd) { margin-right: auto; }
.sf-zigzag .sf-highlight:nth-child(even) { margin-left: auto; }
.sf-highlight h3 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-2); }
.sf-highlight p { margin: 0; color: var(--color-muted); }

/* Yorumlar: ilk yorum öne çıkar, diğerleri kart */
.sf-reviews { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sf-review { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); margin: 0; }
.sf-review blockquote { margin: 0; }
.sf-review blockquote p { margin: 0; font-size: 1rem; }
.sf-rating { font-size: 0.9rem; font-weight: 600; color: var(--color-muted); margin: 0; }
.sf-cite { font-size: 0.9rem; color: var(--color-muted); margin-top: auto; }
@media (min-width: 48rem) {
  .sf-reviews > :first-child { grid-column: 1 / -1; background: var(--sf-soft); padding: var(--space-6); }
  .sf-reviews > :first-child blockquote p { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.5; max-width: 40ch; }
}

/* SSS */
.sf-faq { border-bottom: 1px solid var(--color-line); }
.sf-faq:first-of-type { border-top: 1px solid var(--color-line); }
.sf-faq summary { cursor: pointer; font-weight: 600; padding: var(--space-4) var(--space-6) var(--space-4) 0; position: relative; list-style: none; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); transition: transform var(--dur) var(--ease); }
.sf-faq[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.sf-faq-answer { padding: 0 0 var(--space-5); color: var(--color-muted); max-width: 60ch; }

/* Blog kartı: tarih */
.sf-post .sf-meta { color: var(--color-muted); }

/* Randevu çağrı bandı */
.sf-cta { display: grid; gap: var(--space-5); justify-items: start; padding-block: var(--sf-pad); }
.sf-cta .sf-title { margin: 0 0 var(--space-2); }
.sf-cta-inner { max-width: 36rem; }
.sf-cta p { margin: 0; color: var(--color-muted); }
.sf-cta .btn { margin-top: var(--space-2); }
.sf-cta { background: var(--sf-soft); border-radius: var(--radius); padding-inline: var(--space-6); }

/* Hizmet kategorileri: yapışkan chip şeridi */
.sf-chips-bar { position: sticky; top: var(--sf-nav-offset); z-index: 5; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.sf-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-chips::-webkit-scrollbar { display: none; }
.sf-chip { flex: 0 0 auto; text-decoration: none; padding: 0.45rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-btn); color: var(--color-text); background: var(--color-surface); font-size: 0.95rem; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sf-chip:hover { border-color: var(--color-primary); }
.sf-chip.is-on { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* Hizmet detay: ana gövde + yapışkan randevu kutusu */
.sf-service-layout { display: grid; gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--sf-pad); align-items: start; }
.sf-service-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.sf-service-head .sf-title { font-size: var(--text-h1); margin: 0; }
.sf-service-head .lead { margin: 0; color: var(--color-muted); }
.sf-figure { margin: 0 0 var(--space-6); }
.sf-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.sf-body { max-width: 66ch; }
.sf-book { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sf-book-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: 1.1rem; }
.sf-book-info .sf-price { font-size: 1.25rem; }
.sf-book-btn { justify-self: stretch; text-align: center; }
.sf-book > .sf-meta { margin-top: calc(var(--space-2) * -1); }
@media (min-width: 60rem) {
  .sf-service-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-7); }
  .sf-book { position: sticky; top: calc(var(--sf-nav-offset) + var(--space-5)); }
  .sf-book-btn { justify-self: start; }
}

/* Ekip detay */
.sf-person-detail { display: grid; gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--sf-pad); align-items: start; }
.sf-person-photo { margin: 0; }
.sf-person-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.sf-person-text .sf-title { font-size: var(--text-h1); margin: 0 0 var(--space-2); }
.sf-person-text .sf-kicker { margin: 0 0 var(--space-5); }
@media (min-width: 48rem) {
  .sf-person-detail { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); }
}

/* Mobil: hizmet detayda randevu kutusu alta sabitlenir */
@media (max-width: 59.99rem) {
  .sf-service-layout { padding-bottom: calc(var(--space-7) + 5.5rem); }
  .sf-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius) var(--radius) 0 0; border-width: 1px 0 0; box-shadow: 0 -6px 18px color-mix(in srgb, var(--color-text) 10%, transparent); }
  .sf-book > .sf-meta { grid-column: 1; font-size: 0.85rem; }
  .sf-book-info { font-size: 1rem; }
  .sf-book-btn { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* Mobil: ekip ve hizmet grid'i 2 sütun kalsın, sahne taşmasın */
@media (max-width: 47.99rem) {
  .sf-grid-services { grid-template-columns: minmax(0, 1fr); }
  .sf-grid-services .sf-card { flex-direction: column; }
  .sf-grid-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-hero-media { justify-self: stretch; width: 100%; }
  .sf-hero-media img { aspect-ratio: 4 / 3; }
  .sf-zigzag .sf-highlight:nth-child(even) { margin-left: 0; }
  .sf-zigzag .sf-highlight:nth-child(odd) { margin-right: 0; }
}

/* Masaüstü: hizmet kartlarında ilk kart geniş */
@media (min-width: 60rem) {
  :root { --sf-nav-offset: calc(var(--nav-h) + 2rem); }
  .sf-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); }
  .sf-hero-media { transform: translateY(var(--space-6)); }
  .sf-grid-services > :first-child { grid-column: span 2; }
  .sf-grid-services > :first-child .sf-card-img { aspect-ratio: 16 / 9; }
  .sf-zigzag .sf-highlight:nth-child(even) { margin-left: auto; }
  .sf-chips-bar { top: var(--sf-nav-offset); }
}
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .sf-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-card, .sf-chip, .sf-faq summary::after, .sf-head .link { transition: none !important; }
  .sf-grid-services .sf-card:hover, .sf-grid-posts .sf-card:hover, .sf-grid-staff .sf-card:hover { transform: none !important; }
  .sf-hero-media { transform: none !important; }
}


/* ---- Hizmetler: editoryal liste ---- */
.sf-chips-bar{border-top:1px solid var(--color-line)}
.sf-chips{gap:var(--space-2);padding-block:var(--space-4)}
.sf-chip{padding:.55rem 1.15rem}
.svc-cat{display:grid;gap:var(--space-5);padding-block:clamp(36px,6vw,88px);border-bottom:1px solid var(--color-line)}
.svc-cat:last-of-type{border-bottom:0}
.svc-cat-head h2{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:400;letter-spacing:-.01em}
@media(min-width:1000px){
  .svc-cat{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--space-7);align-items:start}
  .svc-cat-head{position:sticky;top:calc(var(--nav-h) + 72px)}
}
.svc-list{display:grid;gap:clamp(28px,4vw,56px);list-style:none;margin:0;padding:0}
.svc-row{display:grid;gap:var(--space-4);align-items:center}
@media(min-width:720px){.svc-row.has-img{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,56px)}}
.svc-img{display:block;overflow:hidden;border-radius:var(--radius);background:var(--tint)}
.svc-img img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .7s var(--ease)}
.svc-row:hover .svc-img img{transform:scale(1.035)}
.svc-txt h3{font-family:var(--font-heading);font-size:clamp(1.35rem,2vw,1.8rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-bottom:var(--space-3)}
.svc-txt h3 a{color:var(--color-text);text-decoration:none}
.svc-txt h3 a:hover{color:var(--color-primary)}
.svc-txt>p{color:var(--color-muted);max-width:52ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-meta{display:flex!important;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-4) 0 0!important;font-size:.9rem;color:var(--color-muted)!important;-webkit-line-clamp:unset!important;overflow:visible!important}
.svc-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin-right:var(--space-4);border-radius:50%;background:currentColor;vertical-align:middle}
.svc-price{color:var(--color-text);font-weight:600}
.svc-more{margin-left:auto;font-weight:600;color:var(--color-primary);text-decoration:none;letter-spacing:.02em}
.svc-more::after{content:" \2192";transition:margin-left .2s var(--ease)}
.svc-more:hover::after{margin-left:6px}
.svc-more:hover{text-decoration:underline}

/* ---- Hizmet detay ---- */
.svc-hero{display:grid;gap:clamp(28px,4vw,64px);padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(36px,6vw,88px);align-items:center}
@media(min-width:960px){.svc-hero.has-img{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.svc-hero-img{margin:0;overflow:hidden;border-radius:calc(var(--radius) * 1.5);background:var(--tint)}
.svc-hero-img img{display:block;width:100%;aspect-ratio:4/5;max-height:78vh;object-fit:cover}
.svc-facts{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);list-style:none;margin:var(--space-6) 0 var(--space-5);padding:var(--space-4) 0;border-block:1px solid var(--color-line)}
.svc-facts li{display:grid;gap:2px}
.svc-facts span{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted)}
.svc-facts b{font-family:var(--font-heading);font-size:1.5rem;font-weight:500}
.svc-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0 0}
.svc-body{display:grid;gap:var(--space-6);padding-block:clamp(32px,5vw,72px);border-top:1px solid var(--color-line)}
@media(min-width:1000px){.svc-body{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(48px,7vw,112px);align-items:start}}
.svc-body .prose{font-size:1.075rem}
.svc-side{position:sticky;top:calc(var(--nav-h) + 24px);padding:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.svc-side .btn{width:100%}
.svc-more-sec{padding-block:clamp(32px,5vw,72px);border-top:1px solid var(--color-line)}
.svc-more-sec h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;margin-bottom:var(--space-6)}
.svc-chips{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0}
.svc-chips a{display:grid;padding:var(--space-3) var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius);color:var(--color-text);text-decoration:none;font-weight:600;background:var(--color-surface)}
.svc-chips a:hover{border-color:var(--color-primary)}
.svc-chips small{font-weight:400;color:var(--color-muted)}
.svc-list--compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.svc-list--compact .svc-row{padding:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface);align-items:start}
@media(prefers-reduced-motion:reduce){.svc-img img,.svc-more::after{transition:none}.svc-row:hover .svc-img img{transform:none}}


/* ---- Ana sayfa hero: masaüstünde 16:9'a oturan bölünmüş düzen ---- */
@media(min-width:1000px){
  .sf-hero-inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);min-height:clamp(560px,calc(100svh - var(--nav-h) - 48px),860px)}
  .sf-hero-title{font-size:clamp(3rem,5.2vw,5rem);max-width:13ch}
  .sf-hero-lead{max-width:44ch;font-size:1.2rem}
  .sf-hero-media{width:100%}
  .sf-hero-media img{aspect-ratio:4/5;max-height:calc(100svh - var(--nav-h) - 96px);border-radius:calc(var(--radius) * 1.5)}
}

/* Hero görseli yoksa: randevu/iletişim kartı (yönetimden 'hero' banner'ı eklenince görsel gelir) */
.sf-hero-card{padding:clamp(24px,3vw,44px);border:1px solid var(--color-line);border-radius:calc(var(--radius) * 1.5);background:color-mix(in srgb,var(--color-surface) 82%,transparent);box-shadow:var(--shadow-lift)}
.sf-hero-card p{margin:0 0 var(--space-3);color:var(--color-muted)}
.sf-hero-card-big{font-family:var(--font-heading);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.25;color:var(--color-text)!important}
.sf-hero-card-cta{margin-top:var(--space-5)!important}
@media(min-width:1000px){.sf-hero-card{justify-self:end;width:min(100%,30rem)}}

/* Mobil ana sayfa: uzun yığılmış kartlar yerine yatay kaydırmalı şeritler, daha sıkı bölüm boşluğu */
@media (max-width: 699.98px) {
  :root { --sf-pad: clamp(36px, 10vw, 56px); }
  .sf-head { margin-bottom: var(--space-4); }
  .sf-title { margin-bottom: var(--space-4); }
  .sf-highlights .stack { gap: var(--space-4); }
  .sf-highlight h3 { font-size: 1.25rem; }
  [aria-labelledby="sf-svc-title"] .sf-grid, [aria-labelledby="sf-rev-title"] .sf-grid, [aria-labelledby="sf-blog-title"] .sf-grid, .sf-reviews {
    display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  [aria-labelledby="sf-svc-title"] .sf-grid::-webkit-scrollbar, [aria-labelledby="sf-rev-title"] .sf-grid::-webkit-scrollbar, [aria-labelledby="sf-blog-title"] .sf-grid::-webkit-scrollbar, .sf-reviews::-webkit-scrollbar { display: none; }
  [aria-labelledby="sf-svc-title"] .sf-grid > li, [aria-labelledby="sf-rev-title"] .sf-grid > li, [aria-labelledby="sf-blog-title"] .sf-grid > li, .sf-reviews > li { flex: 0 0 82%; max-width: 20rem; scroll-snap-align: start; }
  .sf-review { height: 100%; }
  .sf-review blockquote p { display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; }
  .sf-grid-services .sf-card-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}