/* === 00-tokens.css === */
/* =========================================================================
   Tasarım token'ları — tüm görsel dil burada bir kez karara bağlanır.
   Renk oranı hedefi: ~%80 siyah/nötr, %15 ivory, %5 bakır.
   ========================================================================= */

:root {
  /* --- Renk ------------------------------------------------------------ */
  --ink:        #0a0a0a;   /* ana zemin */
  --ink-2:      #101010;   /* bir kademe açık blok */
  --ink-3:      #161616;   /* kart / yüzey */
  --ink-4:      #1e1e1e;   /* hairline üstü yüzey */

  --ivory:      #f4f1ea;   /* ana metin */
  --ivory-70:   rgba(244, 241, 234, .70);
  --ivory-50:   rgba(244, 241, 234, .50);
  --ivory-32:   rgba(244, 241, 234, .32);
  --ivory-16:   rgba(244, 241, 234, .16);
  --ivory-08:   rgba(244, 241, 234, .08);

  --copper:     #b87333;
  --copper-2:   #d18f4e;   /* hover / parlak uç */
  --copper-40:  rgba(184, 115, 51, .40);
  --copper-16:  rgba(184, 115, 51, .16);

  --cizgi:      var(--ivory-16);   /* ince mimari çizgi */
  --cizgi-soft: var(--ivory-08);

  --ph-bg:      #131313;           /* placeholder zemini */

  /* --- Tipografi ------------------------------------------------------- */
  --font-grotesk: "Kadir Grotesk", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Kadir Serif", "Playfair Display", Georgia, "Times New Roman", serif;

  /* Akışkan skala — display başlıklar viewport'un %30-60'ı olabilir. */
  --t-dev:    clamp(3.2rem, 13vw, 13rem);
  --t-buyuk:  clamp(2.6rem, 7.6vw, 7.5rem);
  --t-orta:   clamp(2rem, 4.4vw, 4rem);
  --t-kucuk:  clamp(1.5rem, 2.4vw, 2.2rem);
  --t-govde:  clamp(1rem, 1.05vw, 1.125rem);
  --t-mini:   clamp(.75rem, .82vw, .8125rem);

  --iz-genis: .18em;   /* letter-spacing: üst başlıklar */
  --iz-orta:  .08em;
  --iz-dar:   -.02em;  /* display başlıklarda sıkı optik */

  /* --- Boşluk ---------------------------------------------------------- */
  --bosluk-1: .5rem;
  --bosluk-2: 1rem;
  --bosluk-3: 1.5rem;
  --bosluk-4: 2.5rem;
  --bosluk-5: 4rem;
  --bosluk-6: 6rem;
  --bosluk-7: 9rem;
  --bolum-y:  clamp(5rem, 11vh, 11rem);
  --kenar:    clamp(1.25rem, 4.4vw, 4.5rem);

  --tam:      min(1680px, 100%);
  --metin-en: 62ch;

  /* --- Hareket --------------------------------------------------------- */
  --e-out:      cubic-bezier(.16, 1, .3, 1);      /* power4.out benzeri */
  --e-inout:    cubic-bezier(.76, 0, .24, 1);     /* expo.inOut benzeri */
  --e-yumusak:  cubic-bezier(.33, 1, .68, 1);

  --s-hizli:  .38s;
  --s-ui:     .8s;
  --s-orta:   1.2s;
  --s-yavas:  1.6s;
  --s-sinema: 2.4s;

  /* --- Katman merdiveni (bir kez karara bağlanır) ---------------------- */
  --z-zemin:    0;
  --z-icerik:   1;
  --z-sabit:    50;
  --z-basli:    100;
  --z-menu:     900;
  --z-gecis:    1200;
  --z-onyuk:    1500;
  --z-imlec:    9999;

  --basli-y: 5.25rem;   /* header yüksekliği */
}

/* Geniş ekranda header biraz daha havalı dursun. */
@media (min-width: 1024px) {
  :root { --basli-y: 6.5rem; }
}

/* === 10-reset.css === */
/* =========================================================================
   Reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;      /* Lenis devralır; reduced-motion'da native */
}

body {
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

table { border-collapse: collapse; }

:target { scroll-margin-block: var(--basli-y); }

/* Ekran okuyucu metni */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* İçeriğe atlama bağlantısı */
.atlama {
  position: fixed;
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  z-index: var(--z-onyuk);
  padding: .75rem 1.25rem;
  background: var(--ivory);
  color: var(--ink);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--s-hizli) var(--e-out);
}
.atlama:focus-visible { transform: translateY(0); }

/* Odak halkası — koyu paletde bakır okunur ve markaya ait. */
:focus-visible {
  outline: 2px solid var(--copper-2);
  outline-offset: 3px;
}

main:focus { outline: none; }

::selection {
  background: var(--copper);
  color: var(--ink);
}

/* === 15-base.css === */
/* =========================================================================
   Temel tipografi ve ortak öğeler
   ========================================================================= */

/* Yatay taşmaya karşı kök seviyesinde tek güvenlik ağı.
   `html` üzerinde olması şart: yalnızca body'de olsaydı position:fixed
   öğeler (başlık, menü) yine belgeyi genişletebilirdi. */
html { overflow-x: hidden; }

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-grotesk);
  font-size: var(--t-govde);
  font-weight: 400;
  overflow-x: hidden;
  /* max-width olmadan sabit konumlu bir çocuk belgeyi genişletebilir. */
  max-width: 100%;
}

/* --- Başlık aileleri ---------------------------------------------------- */

.dev-baslik,
.buyuk-baslik,
.orta-baslik {
  font-weight: 700;
  line-height: .92;
  letter-spacing: var(--iz-dar);
  text-transform: uppercase;
}

.dev-baslik   { font-size: var(--t-dev); }
.buyuk-baslik { font-size: var(--t-buyuk); }
.orta-baslik  { font-size: var(--t-orta); line-height: 1.02; }

/* Editoryal serif — kompozisyonun ikinci sesi. */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.serif-duz {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
}

/* Üst başlık: bölümleri açan küçük bakır etiket. */
.ust-baslik {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
}

.ust-baslik::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--copper-40);
  flex: none;
}

.ust-baslik--sade::before { display: none; }

.govde {
  color: var(--ivory-70);
  max-width: var(--metin-en);
  line-height: 1.62;
}

.govde--buyuk {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ivory);
}

.mini {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-50);
}

/* --- Satır maskesi (reveal'ın taşıyıcısı) ------------------------------- */

.satir {
  display: block;
  overflow: hidden;
}

.satir__ic {
  display: block;
  will-change: transform;
}

/* İçerik VARSAYILAN OLARAK GÖRÜNÜRDÜR ve CSS onu gizlemez.
   Başlangıç konumunu (translateY %105) reveal modülü `fromTo` ile kendisi
   yazar; böylece animasyonun başı ve sonu tek bir yerde tanımlı olur.

   Burada ayrıca bir CSS kuralı tutmak, GSAP'ın satır içi transform'u ile
   yarışıp satırların maskenin altında takılı kalmasına yol açıyordu.
   JS çalışmazsa hiçbir dönüşüm uygulanmaz ve metin olduğu gibi okunur. */

/* --- Bağlantılar -------------------------------------------------------- */

.bag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ivory-16);
  transition: color var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out);
}

.bag__ok {
  display: inline-block;
  transition: transform var(--s-hizli) var(--e-out);
}

.bag:hover,
.bag:focus-visible {
  color: var(--copper-2);
  border-color: var(--copper-40);
}

.bag:hover .bag__ok,
.bag:focus-visible .bag__ok { transform: translateX(6px); }

/* --- Düğme -------------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
  min-width: 15rem;
  padding: 1.15rem 1.5rem;
  border: 1px solid var(--ivory-32);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color var(--s-ui) var(--e-out),
              border-color var(--s-ui) var(--e-out);
}

/* Dolgu aşağıdan yükselir — hover'da zıplama yok, ağır ve kontrollü. */
.dugme::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: translateY(101%);
  transition: transform var(--s-ui) var(--e-inout);
  z-index: 0;
}

.dugme > * { position: relative; z-index: 1; }

.dugme__ok { transition: transform var(--s-ui) var(--e-out); }

.dugme:hover,
.dugme:focus-visible {
  color: var(--ink);
  border-color: var(--ivory);
}

.dugme:hover::before,
.dugme:focus-visible::before { transform: translateY(0); }

.dugme:hover .dugme__ok,
.dugme:focus-visible .dugme__ok { transform: translateX(6px); }

.dugme--bakir { border-color: var(--copper-40); color: var(--copper-2); }
.dugme--bakir::before { background: var(--copper); }
.dugme--bakir:hover,
.dugme--bakir:focus-visible { color: var(--ink); border-color: var(--copper); }

.dugme--sade { border-color: var(--ivory-16); color: var(--ivory-70); }

/* --- Medya (img()/video() çıktısı) -------------------------------------- */

.medya {
  position: relative;
  overflow: hidden;
  background: var(--ph-bg);
  color: var(--ivory);
}

.medya > img,
.medya > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Siyah-beyaz sinematik varsayılan; hover'da hafif canlanır. */
.medya--gri > img,
.medya--gri > video {
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--s-orta) var(--e-out);
}

/* Şeffaf PNG ürün görseli: kırpılmaz, karanlıkta durur.
   `cover` bir şişeyi kadraja sığdırmak için keser; burada istenen tam tersi. */
.medya--seffaf {
  background: transparent;
  display: grid;
  place-items: center;
}

/* Ürün paketi küçük bir PNG'dir: kutuyu doldurmak için büyütmek onu
   bulanıklaştırır. Bu yüzden doğal boyuta yakın bir aralıkta tutulur. */
.medya--seffaf > img {
  width: auto;
  height: clamp(16rem, 42vh, 29rem);
  max-width: 70%;
  object-fit: contain;
  filter: drop-shadow(0 3rem 5rem rgba(0, 0, 0, .75));
}

.medya--bos .medya__ph {
  width: 100%;
  height: 100%;
  color: var(--ivory);
}

/* Placeholder'a ince bir doku: düz gri yüzey yerine film grenli zemin. */
.medya--bos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(184,115,51,.10), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(244,241,234,.05), transparent 50%);
  pointer-events: none;
}

/* Maskeli reveal (1.08 → 1) tamamen reveal modülünde tanımlıdır.
   Başlangıç ölçeğini burada da yazmak GSAP'ın satır içi transform'uyla
   çakışıyor ve görselleri büyümüş halde donduruyordu. */

/* --- Ayraç -------------------------------------------------------------- */

.cizgi {
  height: 1px;
  background: var(--cizgi);
  border: 0;
  width: 100%;
}

/* Dış bağlantı işareti — kullanıcı sekmeden çıkacağını önceden bilsin. */
.dis-ok {
  display: inline-block;
  margin-left: .3em;
  font-size: .8em;
  vertical-align: super;
  color: var(--copper-2);
}

/* === 20-layout.css === */
/* =========================================================================
   Yerleşim ilkelleri — editoryal grid, kart tabanlı değil.
   ========================================================================= */

.bolum {
  position: relative;
  padding-block: var(--bolum-y);
  padding-inline: var(--kenar);
}

.bolum--dar   { padding-block: calc(var(--bolum-y) * .6); }
.bolum--tasma { padding-inline: 0; }
.bolum--tam   { padding-block: 0; }

.bolum--koyu  { background: var(--ink-2); }
.bolum--kart  { background: var(--ink-3); }

/* Bölümler arasındaki ince mimari çizgi — tekrar eden motif. */
.bolum--cizgili { border-top: 1px solid var(--cizgi-soft); }

.sarmal {
  width: var(--tam);
  margin-inline: auto;
}

/* 12 sütun: asimetrik editoryal yerleşimlerin temeli. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-4);
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, 1fr); gap: var(--bosluk-3); }
}

/* Bölüm başlığı: üst başlık + dev başlık + isteğe bağlı yan metin. */
.bolum-basi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-4);
  align-items: end;
  margin-bottom: var(--bosluk-6);
}

.bolum-basi__sol  { grid-column: 1 / span 7; }
.bolum-basi__sag  { grid-column: 9 / span 4; }

@media (max-width: 900px) {
  .bolum-basi { grid-template-columns: 1fr; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
  .bolum-basi__sol,
  .bolum-basi__sag { grid-column: 1 / -1; }
}

/* Yığın */
.yigin      { display: flex; flex-direction: column; }
.yigin--1   { gap: var(--bosluk-1); }
.yigin--2   { gap: var(--bosluk-2); }
.yigin--3   { gap: var(--bosluk-3); }
.yigin--4   { gap: var(--bosluk-4); }
.yigin--5   { gap: var(--bosluk-5); }

.satir-akis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  align-items: center;
}

/* Tam ekran bölüm */
.tam-ekran {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Yapışkan sütun */
.yapiskan {
  position: sticky;
  top: var(--basli-y);
}

/* Yatay kaydırma rayı — mobilde native snap, masaüstünde GSAP devralır. */
.ray {
  display: flex;
  gap: var(--bosluk-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--kenar);
  scrollbar-width: none;
}
.ray::-webkit-scrollbar { display: none; }
.ray > * { scroll-snap-align: start; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .ray { scroll-snap-type: none; }
}

/* === 30-c-ba.css === */
/* =========================================================================
   Öncesi / Sonrası karşılaştırma.

   Konum tek bir custom property ile sürülür: --ba. Hem <input type=range>
   (JS'siz + klavye) hem sürükleme aynı değişkeni yazar.
   ========================================================================= */

.ba {
  --ba: 50%;
  position: relative;
  width: 100%;
}

.ba__sahne {
  position: relative;
  overflow: hidden;
  background: var(--ph-bg);
  touch-action: pan-y;   /* dikey kaydırma serbest, yatay sürükleme bizim */
}

.ba__kat { position: relative; }

.ba__kat--sonrasi { position: relative; }

/* Öncesi katmanı sonrasının üstünde durur ve soldan kırpılır. */
.ba__kat--oncesi {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba)) 0 0);
  will-change: clip-path;
}

.ba__kat .medya { height: 100%; }

.ba__kat img,
.ba__kat .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Sürükleme kolu ----------------------------------------------------- */

.ba__kol {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba);
  translate: -50% 0;
  width: 3.5rem;
  display: grid;
  place-items: center;
  will-change: left;
}

.ba__cizgi {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  translate: -50% 0;
  background: var(--ivory);
  opacity: .82;
}

.ba__tutamac {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--ivory);
  background: rgba(10, 10, 10, .35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--ivory);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out);
}

.ba:hover .ba__tutamac,
.ba[data-suruklenlyor="1"] .ba__tutamac {
  transform: scale(1.08);
  border-color: var(--copper-2);
}

.ba__ok { opacity: .85; }

/* --- Etiketler ---------------------------------------------------------- */

.ba__etiket {
  position: absolute;
  bottom: var(--bosluk-3);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-70);
  pointer-events: none;
  transition: opacity var(--s-hizli) var(--e-out);
}

.ba__etiket--sol { left: var(--bosluk-3); }
.ba__etiket--sag { right: var(--bosluk-3); }

/* Kol etikete yaklaşınca etiket çekilir. */
.ba__etiket--sol { opacity: clamp(0, (var(--ba) - 12%) / 10%, 1); }

/* --- Menzil girdisi ----------------------------------------------------- */

/* JS varken görsel olarak gizlenir ama klavyeye açık kalır: kol zaten
   sürüklenebilir. JS yoksa gerçek bir kaydırıcı olarak görünür. */
.ba__menzil {
  display: block;
  width: 100%;
  margin-top: var(--bosluk-2);
  accent-color: var(--copper);
  cursor: ew-resize;
}

html.hareket .ba__menzil {
  position: absolute;
  opacity: 0;
  inset: auto 0 0 0;
  height: 100%;
  margin: 0;
}

/* Klavye odağı geldiğinde girdi mutlaka görünür olmalı. */
html.hareket .ba__menzil:focus-visible {
  position: static;
  opacity: 1;
  height: auto;
  margin-top: var(--bosluk-2);
}

@media (max-width: 720px) {
  .ba__tutamac { width: 3rem; height: 3rem; font-size: 1rem; }
  .ba__etiket { font-size: .5625rem; }
}

/* === 30-c-basli.css === */
/* =========================================================================
   Başlık (header) — başta hero'ya karışır, kaydırınca yapılanır.
   ========================================================================= */

.basli {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-basli);
  height: var(--basli-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding-inline: var(--kenar);
  color: var(--ivory);
  transition: background-color var(--s-ui) var(--e-out),
              border-color var(--s-ui) var(--e-out),
              transform var(--s-ui) var(--e-out);
  border-bottom: 1px solid transparent;
}

/* Kaydırınca: hafif zemin + hairline. Cam efekti yok. */
.basli[data-yapili="1"] {
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--cizgi-soft);
}

/* Aşağı kaydırırken gizlenir, yukarı kaydırırken geri gelir. */
.basli[data-gizli="1"] { transform: translateY(-100%); }

/* Güvenlik ağı: geçiş sürerken başlık asla gizli kalmasın.
   JS zaten `ka:sayfa-degisti` ile durumu sıfırlıyor; bu kural, olayın
   herhangi bir sebeple kaçırıldığı durumda başlığın ekran dışında
   takılı kalmasını önler. */
body[data-gecis-aktif="1"] .basli[data-gizli="1"] { transform: none; }

.basli__marka {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  line-height: 1;
}

/* İmza logo. Yükseklikten sürülür; genişlik oranla gelir. */
.basli__logo {
  height: clamp(1.5rem, 2.4vw, 2.1rem);
  width: auto;
  transition: opacity var(--s-hizli) var(--e-out);
}

.basli__marka:hover .basli__logo { opacity: .78; }

.basli__yil {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  color: var(--ivory-50);
}

.basli__sag {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 2rem);
  /* Flex öğelerinin varsayılan min-width:auto'su daralmayı engeller ve
     dar ekranda başlığı viewport'un ötesine iter. */
  min-width: 0;
}

.basli__marka { min-width: 0; flex: none; }

.basli__randevu {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--ivory-32);
  transition: color var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out);
}

.basli__randevu:hover {
  color: var(--copper-2);
  border-color: var(--copper-40);
}

/* --- Menü açma düğmesi -------------------------------------------------- */

.menu-ac {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
}

.menu-ac__cizgi {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--s-hizli) var(--e-out);
}

.menu-ac__cizgi + .menu-ac__cizgi { margin-left: -22px; transform: translateY(5px); }

.menu-ac:hover .menu-ac__cizgi + .menu-ac__cizgi { transform: translateY(5px) scaleX(.6); }
.menu-ac .menu-ac__cizgi + .menu-ac__cizgi { transform-origin: left; }

@media (max-width: 720px) {
  .basli__randevu { display: none; }
  .basli__yil { display: none; }

  /* Metin gizlenince gap de kalkmalı; yoksa düğme gereksiz genişler. */
  .menu-ac__metin { display: none; }
  .menu-ac { gap: 0; }
}

/* === 30-c-dip.css === */
/* =========================================================================
   Dip (footer)
   ========================================================================= */

.dip {
  padding: var(--bosluk-6) var(--kenar) var(--bosluk-4);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink);
}

/* Söylem sayfanın ortasına oturur, mühür sağda kalır.
   Boş ilk sütun şart: yalnız `justify-content: center` deseydik söylem
   mührün genişliği kadar sola kayar, gözle ortalanmış görünmezdi. */
.dip__ust {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--bosluk-4);
  padding-bottom: var(--bosluk-5);
  border-bottom: 1px solid var(--cizgi-soft);
  margin-bottom: var(--bosluk-5);
}

.dip__soz {
  grid-column: 2;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: clamp(1.75rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: var(--iz-dar);
  font-weight: 700;
}

.dip__soz--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ivory-50);
}

/* İmza — dipte marka mührü. Soluk bırakılır: mühür, başlık değil. */
.dip__logo {
  grid-column: 3;
  justify-self: end;
  width: clamp(11rem, 26vw, 22rem);
  height: auto;
  opacity: .22;
  flex: none;
  user-select: none;
}

.dip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--bosluk-4);
  margin-bottom: var(--bosluk-5);
}

.dip__blok--bulten { grid-column: span 2; }

@media (max-width: 720px) {
  .dip__blok--bulten { grid-column: span 1; }
  .dip__ust {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .dip__soz  { grid-column: 1; }
  .dip__logo { grid-column: 1; justify-self: center; }
}

.dip__baslik {
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.dip__nav li,
.dip__blok li {
  font-size: .9375rem;
  color: var(--ivory-50);
  line-height: 2;
}

.dip__nav a,
.dip__blok a {
  transition: color var(--s-hizli) var(--e-out);
}

.dip__nav a:hover,
.dip__blok a:hover { color: var(--ivory); }

.dip__blok p {
  color: var(--ivory-50);
  font-size: .9375rem;
  margin-bottom: var(--bosluk-2);
  max-width: 30ch;
}

/* --- Bülten formu ------------------------------------------------------- */

.bulten {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--cizgi);
  padding-bottom: .5rem;
  max-width: 22rem;
  transition: border-color var(--s-hizli) var(--e-out);
}

.bulten:focus-within { border-color: var(--copper-40); }

.bulten input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ivory);
  font-size: .9375rem;
  padding: .25rem 0;
}

.bulten input::placeholder { color: var(--ivory-32); }
.bulten input:focus { outline: none; }

.bulten button {
  flex: none;
  color: var(--ivory-50);
  font-size: 1.1rem;
  transition: color var(--s-hizli) var(--e-out),
              transform var(--s-hizli) var(--e-out);
}

.bulten button:hover {
  color: var(--copper-2);
  transform: translateX(4px);
}

/* --- Son satır ---------------------------------------------------------- */

.dip__son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-32);
}

.dip__yasal {
  display: flex;
  gap: var(--bosluk-3);
}

.dip__yasal a:hover { color: var(--ivory-70); }

/* --- Alt şerit: telif · yasal · CMS imzası ------------------------------- */

.dip__telif { flex: none; }

.dip__yasal {
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}

/* Yapımcı imzası: en sağda, sessiz. Marka logosuyla yarışmamalı. */
.dip__cms {
  flex: none;
  display: inline-flex;
  opacity: .38;
  transition: opacity var(--s-hizli) var(--e-out);
}

.dip__cms:hover,
.dip__cms:focus-visible { opacity: .8; }

.dip__cms img {
  width: 5.5rem;
  height: auto;
}

@media (max-width: 720px) {
  .dip__son { justify-content: center; text-align: center; }
  .dip__yasal { flex: 0 1 auto; }
}

/* === 30-c-imlec.css === */
/* =========================================================================
   Özel imleç — yalnızca (hover:hover) + (pointer:fine) cihazlarda.
   Makas biçimli imleç YOK; küçük ve sakin bir nişangâh.
   ========================================================================= */

.imlec { display: none; }

/* `imlec-var` yalnızca cihaz yeteneğini söyler (head.php'deki satır içi
   script). Görünürlük ise `imlec-etkin`e bağlıdır — bu sınıfı modül kurulunca
   ekler. Böylece önyükleyici çalışırken imleç ekranda hiç belirmez. */
html.imlec-var.imlec-etkin .imlec {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-imlec);
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.imlec__nokta,
.imlec__halka {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  translate: -50% -50%;
}

.imlec__nokta {
  width: 5px;
  height: 5px;
  background: var(--ivory);
  transition: opacity var(--s-hizli) var(--e-out);
}

.imlec__halka {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ivory-50);
  transition: width var(--s-hizli) var(--e-out),
              height var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out),
              opacity var(--s-hizli) var(--e-out);
}

.imlec__etiket {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--s-hizli) var(--e-out);
}

/* Etkileşimli öğe üzerinde: halka büyür, etiket görünür. */
.imlec[data-durum="etkilesim"] .imlec__halka {
  width: 74px;
  height: 74px;
  border-color: var(--ivory);
}

.imlec[data-durum="etkilesim"] .imlec__nokta { opacity: 0; }
.imlec[data-durum="etkilesim"] .imlec__etiket { opacity: 1; }

.imlec[data-durum="surukle"] .imlec__halka {
  width: 88px;
  height: 88px;
  border-color: var(--copper-2);
}

.imlec[data-durum="surukle"] .imlec__nokta { opacity: 0; }
.imlec[data-durum="surukle"] .imlec__etiket { opacity: 1; }

/* İmleç açıkken sistem imlecini gizle. */
html.imlec-etkin,
html.imlec-etkin * { cursor: none; }

/* Klavye kullanıcısını asla imleçsiz bırakma. */
html.imlec-etkin :focus-visible { cursor: auto; }

/* Geçiş perdesi kapalıyken imleç gizlenir: perdenin ortasındaki imzanın
   üstünde duruyordu ve o an tıklanacak bir şey de yok.
   `display` kullanılır çünkü modül `opacity`'yi satır içi yazar. */
html.imlec-var.imlec-etkin body[data-gecis-aktif="1"] .imlec { display: none; }

@media (prefers-reduced-motion: reduce) {
  .imlec { display: none !important; }
  html.imlec-etkin,
  html.imlec-etkin * { cursor: auto; }
}

/* === 30-c-kartlar.css === */
/* =========================================================================
   Kartlar — editoryal, kutu değil. Kenarlık yerine hairline ve boşluk.
   ========================================================================= */

.kart-izgara {
  display: grid;
  gap: var(--bosluk-4) var(--bosluk-3);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.kart-izgara--genis {
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  gap: var(--bosluk-5) var(--bosluk-4);
}

.kart-izgara--dar {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

/* --- Ortak kart davranışı ----------------------------------------------- */

.salon-kart__bag,
.kesim-kart__bag,
.urun-kart__bag,
.ekip-kart__bag {
  display: block;
  height: 100%;
}

.salon-kart__medya,
.kesim-kart__medya,
.urun-kart__medya,
.ekip-kart__medya {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--bosluk-3);
}

/* Görsel maskenin içinde büyür — kart kutusu hiç oynamaz. */
.salon-kart__medya .medya > img,
.kesim-kart__medya .medya > img,
.urun-kart__medya .medya > img,
.ekip-kart__medya .medya > img,
.salon-kart__medya .medya__ph,
.kesim-kart__medya .medya__ph,
.urun-kart__medya .medya__ph,
.ekip-kart__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out),
              filter var(--s-orta) var(--e-out);
}

@media (hover: hover) {
  .salon-kart__bag:hover .medya > img,
  .kesim-kart__bag:hover .medya > img,
  .urun-kart__bag:hover .medya > img,
  .ekip-kart__bag:hover .medya > img,
  .salon-kart__bag:hover .medya__ph,
  .kesim-kart__bag:hover .medya__ph,
  .urun-kart__bag:hover .medya__ph,
  .ekip-kart__bag:hover .medya__ph {
    transform: scale(1.045);
  }

  /* Hover'da gri tonlama hafifçe çözülür — sıcaklık geri gelir. */
  .salon-kart__bag:hover .medya--gri > img,
  .kesim-kart__bag:hover .medya--gri > img,
  .ekip-kart__bag:hover .medya--gri > img {
    filter: grayscale(.15) contrast(1.04);
  }
}

/* --- Salon kartı -------------------------------------------------------- */

.salon-kart__rozet,
.urun-kart__rozet {
  position: absolute;
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  padding: .4rem .7rem;
  background: var(--copper);
  color: var(--ink);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
}

.salon-kart__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-bottom: .6rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--cizgi-soft);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
}

.salon-kart__sehir { color: var(--copper); }
.salon-kart__yil   { color: var(--ivory-32); }

.salon-kart__ad {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  margin-bottom: .6rem;
}

.salon-kart__ozet,
.kesim-kart__ozet,
.urun-kart__ozet,
.ekip-kart__ozet {
  color: var(--ivory-50);
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: var(--bosluk-2);
}

/* --- Kesim kartı -------------------------------------------------------- */

.kesim-kart { position: relative; }

.kesim-kart__no {
  position: absolute;
  top: -.4rem;
  right: 0;
  z-index: 2;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
}

.kesim-kart__ad {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-dar);
  margin-bottom: .5rem;
}

.kesim-kart__meta,
.urun-kart__meta {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--cizgi-soft);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-50);
}

.urun-kart__meta { justify-content: space-between; }
.urun-kart__ucret { color: var(--copper-2); }

/* --- Ürün kartı --------------------------------------------------------- */

.urun-kart__medya { background: var(--ink-3); }

.urun-kart__kategori {
  display: block;
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .5rem;
}

.urun-kart__ad {
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  margin-bottom: .5rem;
}

/* --- Ekip kartı --------------------------------------------------------- */

.ekip-kart__unvan {
  display: block;
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .45rem;
}

.ekip-kart__ad {
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  margin-bottom: .5rem;
}

.ekip-kart__salon {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-32);
}

/* === 30-c-menu.css === */
/* =========================================================================
   Tam ekran menü — sağdan dikey maske ile açılır, fade değil.
   ========================================================================= */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
}

.menu[hidden] {
  display: none;
}

.menu__perde {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.72);
  opacity: 0;
  transition: opacity var(--s-ui) var(--e-out);
}

.menu[data-acik="1"] .menu__perde {
  opacity: 1;
}

.menu__ic {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(640px, 100%);
  background: var(--ink-2);
  border-left: 1px solid var(--cizgi-soft);
  display: flex;
  flex-direction: column;
  padding: 2rem var(--kenar) var(--kenar);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Kısa ekranlarda içerik taşabilir; kaydırma çalışsın ama çubuk
     görünmesin — koyu panelde açık gri bir çubuk kompozisyonu bozuyor. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Dikey maske: panel sağdan içeri kayar. */
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--s-orta) var(--e-inout);
}

.menu__ic::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.menu[data-acik="1"] .menu__ic {
  clip-path: inset(0 0 0 0);
}

/* JS yoksa menü hiç açılmaz; footer navigasyonu görevi devralır. */
.menu__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(var(--bosluk-3), 4vh, var(--bosluk-5));
}

.menu__logo {
  width: clamp(7rem, 16vw, 9.5rem);
  height: auto;
  opacity: 0.82;
}

.menu-kapat {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ivory-70);
  transition:
    color var(--s-hizli) var(--e-out),
    border-color var(--s-hizli) var(--e-out),
    transform var(--s-hizli) var(--e-out);
}

.menu-kapat > span {
  display: block;
  margin-top: -5px;
  margin-right: -1px;
}

.menu-kapat:hover {
  color: var(--ivory);
  border-color: var(--ivory-32);
  transform: rotate(90deg);
}

/* --- Bağlam görselleri (menü arkasında) --------------------------------- */

.menu__gorseller {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100vw - min(640px, 100%));
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  .menu__gorseller {
    display: block;
  }
}

.menu__gorsel {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(30vw, 26rem);
  translate: -50% -50%;
  opacity: 0;
  transition: opacity var(--s-ui) var(--e-out);
}

.menu__gorsel[data-etkin="1"] {
  opacity: 0.48;
}

.menu__gorsel .medya > img,
.menu__gorsel .medya > video {
  filter: grayscale(1) contrast(1.1);
}

/* --- Menü listesi ------------------------------------------------------- */

.menu__nav {
  margin-block: auto;
}

.menu__oge + .menu__oge {
  border-top: 1px solid var(--cizgi-soft);
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-3);
  padding-block: clamp(0.7rem, 1.6vh, 1.15rem);
  transition:
    opacity var(--s-hizli) var(--e-out),
    padding-left var(--s-ui) var(--e-out);
}

.menu__no {
  font-size: 0.625rem;
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  flex: none;
}

.menu__ad {
  /* vh de karışır: dar AMA kısa ekranlarda (yatay telefon, iPhone SE)
     yalnızca genişliğe bakan bir ölçek listeyi taşırıyordu. */
  font-size: clamp(1.25rem, 2.6vh + 1vw, 2.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--iz-dar);
  text-transform: uppercase;
}

/* Hover'da diğerleri sönümlenir — odak tek bir öğede toplanır. */
@media (hover: hover) {
  .menu__liste:hover .menu__link {
    opacity: 0.34;
  }
  .menu__liste .menu__link:hover,
  .menu__liste .menu__link:focus-visible {
    opacity: 1;
    padding-left: var(--bosluk-2);
  }
}

.menu__link[aria-current="page"] .menu__ad {
  color: var(--copper-2);
}

/* --- Menü altı ---------------------------------------------------------- */

.menu__alt {
  /* Sabit 4rem boşluk kısa ekranlarda taşmanın ikinci sebebiydi. */
  margin-top: clamp(var(--bosluk-3), 4vh, var(--bosluk-5));
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bosluk-3);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-50);
}

.menu__iletisim {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.menu__iletisim a:hover {
  color: var(--ivory);
}

.menu__sosyal {
  display: flex;
  gap: var(--bosluk-2);
  text-transform: uppercase;
}

.menu__sosyal a:hover {
  color: var(--copper-2);
}

/* Menü açıkken arka plan kaydırması durur. */
body[data-menu-acik="1"] {
  overflow: hidden;
}

/* === 30-c-onyuk.css === */
/* =========================================================================
   Önyükleyici + sayfa geçiş perdesi
   ========================================================================= */

.onyuk {
  position: fixed;
  inset: 0;
  z-index: var(--z-onyuk);
  background: var(--ink);
  display: grid;
  place-items: center;
}

/* !important şart: GSAP animasyon sırasında öğeye satır içi `display`
   yazabilir ve satır içi stil her seçiciyi yener. Bu olmadan `hidden`
   niteliği görsel olarak hiçbir şey yapmaz ve perde ekranda asılı kalır. */
.onyuk[hidden] { display: none !important; }

/* Yazılma ilerlemesi: 0 → 100. JS tek bir değeri sürer; hem logonun
   penceresi hem kalem ucu bundan beslenir, böylece asla birbirinden kaymaz. */
.onyuk { --yaz: 0; }

.onyuk__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-3);
}

.onyuk__imza {
  position: relative;
  line-height: 0;   /* img'nin altındaki satır boşluğu kalemi kaydırıyordu */
}

/* İmza soldan sağa açılan bir pencereden görünür — kalem hareketi. */
.onyuk__logo {
  width: clamp(11rem, 30vw, 19rem);
  height: auto;
  clip-path: inset(0 calc(100% - var(--yaz) * 1%) 0 0);
  will-change: clip-path;
}

/* Kalem ucu: pencerenin sağ kenarında ilerleyen ince bakır çizgi. */
.onyuk__kalem {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: calc(var(--yaz) * 1%);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--copper) 22%, var(--copper-2) 50%, var(--copper) 78%, transparent);
  will-change: left;
  pointer-events: none;
}

/* Ucun etrafında hafif bir parlama — kalemin kâğıda değdiği nokta. */
.onyuk__kalem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 115, 51, .28), transparent 70%);
}

.onyuk__yil {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  color: var(--copper);
}

/* Hareket kapalıysa imza tam görünür: JS hiç çalışmasa da logo eksik kalmaz. */
html:not(.hareket) .onyuk__logo { clip-path: none; }
html:not(.hareket) .onyuk__kalem { display: none; }

/* --- Sayfa geçiş perdesi ------------------------------------------------ */

.gecis {
  position: fixed;
  inset: 0;
  z-index: var(--z-gecis);
  pointer-events: none;
  display: grid;
}

.gecis__panel {
  grid-area: 1 / 1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

/* Perdenin ortasındaki imza — açılıştaki jestin kısa tekrarı. */
.gecis__imza {
  grid-area: 1 / 1;
  place-self: center;
  position: relative;
  line-height: 0;
  opacity: 0;
  --yaz: 0;
}

.gecis__logo {
  width: clamp(8rem, 20vw, 13rem);
  height: auto;
  clip-path: inset(0 calc(100% - var(--yaz) * 1%) 0 0);
  will-change: clip-path;
}

.gecis__kalem {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: calc(var(--yaz) * 1%);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--copper) 25%, var(--copper-2) 50%, var(--copper) 75%, transparent);
  will-change: left;
}

.gecis__kalem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  height: 3rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 115, 51, .26), transparent 70%);
}

/* Geçiş sırasında etkileşimi kilitle. */
body[data-gecis-aktif="1"] { pointer-events: none; }

/* === 60-p-anasayfa.css === */
/* =========================================================================
   Anasayfa bölümleri
   ========================================================================= */

/* --- 02 Yöntem: yapışkan portre + adımlar ------------------------------- */

.yontem {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
}

.yontem__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  max-width: var(--tam);
  margin-inline: auto;
}

.yontem__gorsel {
  grid-column: 1 / span 6;
}
.yontem__metin {
  grid-column: 8 / span 5;
}

@media (max-width: 900px) {
  .yontem__grid {
    grid-template-columns: 1fr;
    gap: var(--bosluk-4);
  }
  .yontem__gorsel,
  .yontem__metin {
    grid-column: 1 / -1;
  }
}

.yontem__yapiskan {
  position: sticky;
  top: calc(var(--basli-y) + var(--bosluk-3));
}

/* Yapışkan davranış yalnızca metnin kaydırılacak yeri olduğunda anlamlı. */
@media (max-width: 900px) {
  .yontem__yapiskan {
    position: static;
  }
}

.yontem__cerceve {
  position: relative;
  overflow: hidden;
}

.yontem__etiket {
  position: absolute;
  left: var(--bosluk-2);
  bottom: var(--bosluk-2);
  padding: 0.45rem 0.8rem;
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--cizgi);
  font-size: 0.5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-70);
}

/* Anatomik kılavuz çizgileri — 3D yok, ince SVG. */
.kilavuz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--copper);
}

.kilavuz__g {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.28;
  opacity: 0;
  transition: opacity var(--s-ui) var(--e-out);
}

.kilavuz__g circle,
.kilavuz__g rect {
  stroke-dasharray: 1.6 1.6;
}

/* Etkin adımın kılavuzu görünür. JS yoksa ilki açık kalır. */
.kilavuz__g[data-etkin="1"] {
  opacity: 0.55;
}

html:not(.hareket) .kilavuz__g[data-kilavuz="1"] {
  opacity: 0.45;
}

.yontem__baslik {
  margin-block: var(--bosluk-3) var(--bosluk-3);
}

/* --- Adım listesi ------------------------------------------------------- */

.adim-liste {
  margin-block: var(--bosluk-5) var(--bosluk-4);
  counter-reset: adim;
}

.adim-liste__oge {
  display: flex;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  opacity: 0.4;
  transition: opacity var(--s-ui) var(--e-out);
}

/* Etkin adım öne çıkar; JS yoksa hepsi okunur kalır. */
.adim-liste__oge[data-etkin="1"] {
  opacity: 1;
}
html:not(.hareket) .adim-liste__oge {
  opacity: 1;
}

.adim-liste__no {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  flex: none;
  padding-top: 0.25rem;
}

.adim-liste__ad {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  margin-bottom: 0.4rem;
}

.adim-liste__metin {
  color: var(--ivory-50);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --- 03 Dönüşüm --------------------------------------------------------- */

.donusum {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.donusum__basi {
  max-width: var(--tam);
  margin: 0 auto var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-2);
}

.donusum__sahne {
  max-width: var(--tam);
  margin-inline: auto;
}

/* --- 04 Ustalık: sinematik ara ------------------------------------------ */

.ustalik {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--cizgi-soft);
}

.ustalik__medya {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ustalik__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.ustalik__medya img,
.ustalik__medya video,
.ustalik__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ustalik__perde {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.58);
}

.ustalik__soz {
  font-size: clamp(1.9rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--iz-dar);
  text-transform: uppercase;
  text-align: center;
  padding-inline: var(--kenar);
}

/* --- 05 Koleksiyon: editoryal yatay ray --------------------------------- */

.koleksiyon,
.miras {
  padding-block: var(--bolum-y);
  border-top: 1px solid var(--cizgi-soft);
}

.editoryal {
  width: clamp(17rem, 26vw, 24rem);
}

.editoryal__medya {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--bosluk-3);
}

.editoryal__medya .medya > img,
.editoryal__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out);
}

@media (hover: hover) {
  .editoryal__bag:hover .medya > img,
  .editoryal__bag:hover .medya__ph {
    transform: scale(1.05);
  }
}

.editoryal__no {
  position: absolute;
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--ivory);
  mix-blend-mode: difference;
}

.editoryal__ad {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-dar);
  margin-bottom: 0.5rem;
}

.editoryal__ozet {
  color: var(--ivory-50);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: var(--bosluk-2);
}

/* --- 06 Miras: çerçeveler zamanla büyür --------------------------------- */

.miras__ray {
  align-items: center;
}

.miras__oge {
  width: calc(clamp(15rem, 30vw, 34rem) * var(--olcek, 1));
  transition: width var(--s-orta) var(--e-out);
}

.miras__cerceve {
  border: 1px solid var(--cizgi-soft);
  padding: var(--bosluk-2);
  background: var(--ink-2);
}

.miras__govde {
  padding-top: var(--bosluk-2);
}

.miras__yil {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  margin-bottom: 0.4rem;
}

.miras__baslik {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.miras__metin {
  color: var(--ivory-50);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 34ch;
}

/* --- 07 Manifesto ------------------------------------------------------- */

.manifesto {
  border-top: 1px solid var(--cizgi-soft);
  padding-block: var(--bolum-y);
}

.manifesto__blok {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: var(--bosluk-4);
  padding-inline: var(--kenar);
  margin-bottom: var(--bolum-y);
  max-width: var(--tam);
  margin-inline: auto;
}

.manifesto__soz {
  grid-column: 1 / span 7;
  font-size: clamp(2.6rem, 7vw, 8rem);
  line-height: 0.9;
}

.manifesto__medya {
  grid-column: 9 / span 4;
}

/* Sözler dönüşümlü hizalanır: sayfa tek bir sütuna hapsolmasın. */
.manifesto__blok:nth-child(even) .manifesto__soz {
  grid-column: 6 / span 7;
  text-align: right;
}
.manifesto__blok:nth-child(even) .manifesto__medya {
  grid-column: 1 / span 4;
  grid-row: 1;
}

@media (max-width: 900px) {
  .manifesto__blok,
  .manifesto__blok:nth-child(even) .manifesto__soz,
  .manifesto__blok:nth-child(even) .manifesto__medya {
    grid-template-columns: 1fr;
    grid-column: 1 / -1;
    text-align: left;
    grid-row: auto;
  }
}

.manifesto__kapanis {
  text-align: center;
  padding-inline: var(--kenar);
}

.manifesto__kapanis-soz {
  font-size: clamp(1.5rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--iz-dar);
  text-transform: uppercase;
  margin-bottom: var(--bosluk-3);
}

.manifesto__logo {
  width: clamp(9rem, 20vw, 15rem);
  height: auto;
  margin-inline: auto;
  opacity: 0.6;
}

/* --- 09 Kurucu ---------------------------------------------------------- */

.kurucu-bolum {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.kurucu-bolum__medya {
  grid-column: 1 / span 5;
}
.kurucu-bolum__govde {
  grid-column: 7 / span 6;
}

@media (max-width: 900px) {
  .kurucu-bolum {
    grid-template-columns: 1fr;
    gap: var(--bosluk-4);
  }
  .kurucu-bolum__medya,
  .kurucu-bolum__govde {
    grid-column: 1 / -1;
  }
}

.kurucu-bolum__baslik {
  margin-block: var(--bosluk-3) var(--bosluk-2);
}

.kurucu-bolum__ad {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--copper-2);
  margin-bottom: var(--bosluk-3);
}

.kurucu-bolum__alinti,
.ikili__alinti,
.ekip-hero__alinti {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--ivory);
  padding-left: var(--bosluk-3);
  border-left: 1px solid var(--copper-40);
  margin-bottom: var(--bosluk-3);
  max-width: 40ch;
}

/* --- 10 İmza ürün ------------------------------------------------------- */

.imza-urun {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
  max-width: none;
}

.imza-urun__medya {
  grid-column: 1 / span 5;
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}

.imza-urun__govde {
  grid-column: 7 / span 5;
}

@media (max-width: 900px) {
  .imza-urun {
    grid-template-columns: 1fr;
    gap: var(--bosluk-4);
  }
  .imza-urun__medya,
  .imza-urun__govde {
    grid-column: 1 / -1;
  }
}

/* Spot: fareyi izleyen yumuşak ışık. JS yoksa merkezde sabit durur. */
.imza-urun__spot,
.urun-hero__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    18rem 18rem at var(--spot-x, 50%) var(--spot-y, 42%),
    rgba(184, 115, 51, 0.22),
    transparent 68%
  );
  transition: background-position var(--s-ui) var(--e-out);
}

.imza-urun__ad {
  margin-block: var(--bosluk-3) var(--bosluk-2);
}

.imza-urun__marka {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  color: var(--copper-2);
  margin-bottom: var(--bosluk-3);
}

.imza-urun__faydalar {
  display: grid;
  gap: 0.55rem;
  margin-block: var(--bosluk-3);
}

.imza-urun__faydalar li,
.urun-hero__faydalar li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--ivory-70);
  font-size: 0.9375rem;
}

.imza-urun__faydalar li::before,
.urun-hero__faydalar li::before {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: var(--copper);
  flex: none;
}

.imza-urun__meta,
.urun-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-4);
  padding-block: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  border-bottom: 1px solid var(--cizgi-soft);
  margin-bottom: var(--bosluk-3);
}

.imza-urun__meta > div,
.urun-hero__meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.imza-urun__meta strong,
.urun-hero__meta strong {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
}

/* --- 11 Randevu çağrısı ------------------------------------------------- */

.randevu-cagri {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--cizgi-soft);
}

.randevu-cagri__medya {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.randevu-cagri__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.randevu-cagri__medya img,
.randevu-cagri__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--s-yavas) var(--e-out);
}

.randevu-cagri__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 8, 8, 0.92) 0%,
    rgba(8, 8, 8, 0.62) 55%,
    rgba(8, 8, 8, 0.42) 100%
  );
}

/* Hover'da görsel hafifçe açılır — davetin sıcaklığı. */
@media (hover: hover) {
  .randevu-cagri:hover .randevu-cagri__medya img,
  .randevu-cagri:hover .randevu-cagri__medya .medya__ph {
    filter: brightness(1.12);
  }
}

.randevu-cagri__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.randevu-cagri__baslik {
  margin-block: var(--bosluk-3) var(--bosluk-2);
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.randevu-cagri__alt {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  color: var(--ivory-70);
  margin-bottom: var(--bosluk-4);
}

.randevu-cagri__bag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
}

/* --- 07b Ünlü şeridi ---------------------------------------------------- */

.unlu-serit {
  padding-block: var(--bolum-y);
  border-top: 1px solid var(--cizgi-soft);
}

.unlu--serit { width: clamp(12rem, 18vw, 16rem); }

/* --- 07c İki bölüm: erkek / kadın --------------------------------------- */

.iki-bolum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cizgi-soft);
  border-block: 1px solid var(--cizgi-soft);
}

@media (max-width: 720px) {
  .iki-bolum { grid-template-columns: 1fr; }
}

.bolum-kart {
  position: relative;
  display: block;
  min-height: min(60svh, 30rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.bolum-kart__medya { position: absolute; inset: 0; z-index: -1; }

.bolum-kart__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.bolum-kart__medya img,
.bolum-kart__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--s-sinema) var(--e-out);
}

@media (hover: hover) {
  .bolum-kart:hover .bolum-kart__medya img,
  .bolum-kart:hover .bolum-kart__medya .medya__ph { transform: scale(1.05); }
}

.bolum-kart__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,10,10,.94) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.35) 100%);
}

.bolum-kart__govde {
  position: relative;
  display: grid;
  gap: .55rem;
  align-content: end;
  height: 100%;
  padding: var(--bosluk-4) var(--kenar);
}

.bolum-kart__adet {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.bolum-kart__ad {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.08;
}

.bolum-kart__ozet {
  color: var(--ivory-70);
  font-size: .9375rem;
  max-width: 34ch;
  margin-bottom: var(--bosluk-2);
}

/* --- Anasayfa haritası --------------------------------------------------- */

.anasayfa-harita {
  max-width: var(--tam);
  margin: 0 auto var(--bolum-y);
}

/* === 60-p-basvuru.css === */
/* =========================================================================
   Başvuru sayfaları — franchise, eğitim, kariyer
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

.basvuru-hero {
  position: relative;
  min-height: min(70svh, 40rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bolum-y);
  overflow: hidden;
  isolation: isolate;
}

.basvuru-hero__medya { position: absolute; inset: 0; z-index: -1; }

.basvuru-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.basvuru-hero__medya img,
.basvuru-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.basvuru-hero__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--ink) 0%, rgba(10,10,10,.86) 42%, rgba(10,10,10,.5) 100%);
}

.basvuru-hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.basvuru-hero__baslik {
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1.06;
  text-transform: uppercase;
  margin-block: var(--bosluk-3);
}

.basvuru-hero__ozet { max-width: 46ch; margin-bottom: var(--bosluk-4); }

.basvuru-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-5);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.basvuru-hero__meta dt {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .3rem;
}

.basvuru-hero__meta dd { font-family: var(--font-serif); font-size: 1.35rem; }

/* --- Gövde: yan bilgi + form -------------------------------------------- */

.basvuru {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  gap: var(--bosluk-5);
  align-items: start;
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .basvuru { grid-template-columns: 1fr; gap: var(--bosluk-4); }
}

.basvuru__yan {
  display: grid;
  gap: var(--bosluk-3);
  position: sticky;
  top: calc(var(--basli-y) + var(--bosluk-3));
}

@media (max-width: 900px) {
  .basvuru__yan { position: static; }
}

.basvuru__baslik {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.14;
}

/* Adım listesi: sürecin kaç aşama olduğunu peşinen söyler. */
.basvuru__adim {
  display: grid;
  gap: .7rem;
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.basvuru__adim > div {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .6rem;
  align-items: baseline;
}

.basvuru__adim dt {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  color: var(--copper);
}

.basvuru__adim dd {
  color: var(--ivory-50);
  font-size: .875rem;
  line-height: 1.5;
}

.basvuru__not {
  padding-top: var(--bosluk-2);
  border-top: 1px solid var(--cizgi-soft);
  color: var(--ivory-32);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
}

/* --- Form --------------------------------------------------------------- */

.basvuru__form { display: grid; gap: var(--bosluk-5); min-width: 0; }
.basvuru__form[hidden] { display: none; }

.basvuru__grup {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;   /* fieldset grid'i taşırmasın */
}

.basvuru__grup-baslik {
  padding: 0 0 var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
  width: 100%;
  border-bottom: 1px solid var(--cizgi-soft);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.basvuru__alt {
  display: grid;
  gap: var(--bosluk-2);
  justify-items: start;
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.basvuru__durum {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--copper-2);
  min-height: 1.2em;
}

/* --- Onay kutusu -------------------------------------------------------- */

.onay { display: grid; gap: var(--bosluk-2); }

.onay__satir {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  cursor: pointer;
}

/* Girdi görsel olarak gizli ama klavye ve ekran okuyucu için yerinde. */
.onay__satir input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.onay__kutu {
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--cizgi);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: .1rem;
  transition: border-color var(--s-hizli) var(--e-out),
              background-color var(--s-hizli) var(--e-out);
}

.onay__kutu::after {
  content: "";
  width: .45rem;
  height: .25rem;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  rotate: -45deg;
  translate: 0 -1px;
  opacity: 0;
  transition: opacity var(--s-hizli) var(--e-out);
}

.onay__satir:hover .onay__kutu { border-color: var(--ivory-32); }

.onay__satir input:checked + .onay__kutu {
  background: var(--copper);
  border-color: var(--copper);
}

.onay__satir input:checked + .onay__kutu::after { opacity: 1; }

/* Odak halkası girdi gizli olduğu için kutuya taşınır. */
.onay__satir input:focus-visible + .onay__kutu {
  outline: 2px solid var(--copper-2);
  outline-offset: 2px;
}

.onay__metin {
  color: var(--ivory-70);
  font-size: .9375rem;
  line-height: 1.5;
}

/* Açılır KVKK metni */
.onay__detay {
  border: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.onay__detay summary {
  padding: var(--bosluk-2) var(--bosluk-3);
  cursor: pointer;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-50);
  transition: color var(--s-hizli) var(--e-out);
}

.onay__detay summary:hover { color: var(--ivory); }
.onay__detay[open] summary { color: var(--copper-2); border-bottom: 1px solid var(--cizgi-soft); }

.onay__metin-govde {
  padding: var(--bosluk-3);
  display: grid;
  gap: var(--bosluk-2);
  max-height: 20rem;
  overflow-y: auto;
}

.onay__metin-govde p {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.7;
}

/* --- Dosya alanı -------------------------------------------------------- */

.alan--dosya { gap: .6rem; }

.dosya { display: block; cursor: pointer; }

/* Girdi gizli; görünen kutu etiketin kendisi. Girdi DOM'da kaldığı için
   JS olmadan da tıklayınca dosya seçici açılır. */
.dosya__girdi {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.dosya__ic {
  display: grid;
  gap: .4rem;
  place-items: center;
  padding: var(--bosluk-4) var(--bosluk-3);
  border: 1px dashed var(--cizgi);
  text-align: center;
  transition: border-color var(--s-hizli) var(--e-out),
              background-color var(--s-hizli) var(--e-out);
}

.dosya:hover .dosya__ic { border-color: var(--ivory-32); }

.dosya__girdi:focus-visible + .dosya__ic {
  outline: 2px solid var(--copper-2);
  outline-offset: 2px;
}

/* Sürükleme sırasında ve dosya seçildiğinde */
.alan--dosya[data-uzerinde] .dosya__ic,
.alan--dosya[data-dolu] .dosya__ic {
  border-color: var(--copper-40);
  border-style: solid;
  background: var(--copper-16);
}

.dosya__simge {
  font-size: 1.1rem;
  color: var(--copper);
}

.dosya__metin {
  font-size: .875rem;
  color: var(--ivory-70);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.alan--dosya[data-dolu] .dosya__metin { color: var(--copper-2); }

.dosya__ipucu {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

/* --- Başarı ekranı ------------------------------------------------------ */

.basvuru-tamam {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bosluk-3);
  justify-items: start;
  padding-block: var(--bolum-y);
}

.basvuru-tamam[hidden] { display: none; }

/* --- Hatalı alan -------------------------------------------------------- */

.alan__girdi[aria-invalid="true"] { border-bottom-color: #b4472f; }

.alan__hata {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: #d9714f;
  margin-top: .3rem;
}

/* === 60-p-dunya.css === */
/* =========================================================================
   Dünya — içerik merkezi (haber, duyuru, etkinlik, röportaj, blog)
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

.dunya-hero {
  position: relative;
  min-height: min(72svh, 44rem);
  display: flex;
  align-items: center;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bosluk-5);
  overflow: hidden;
  isolation: isolate;
}

.dunya-hero__medya {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
}

.dunya-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.dunya-hero__medya img,
.dunya-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Görsel sağdan gelir, metnin arkasında karanlığa karışır. */
.dunya-hero__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--ink) 0%, rgba(10,10,10,.92) 22%, rgba(10,10,10,.45) 62%, rgba(10,10,10,.62) 100%);
}

.dunya-hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.dunya-hero__baslik {
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: var(--iz-dar);
  text-transform: uppercase;
  margin-block: var(--bosluk-3) var(--bosluk-3);
}

/* İkinci satır serif: "DÜNYA." editoryal vurgu. */
.dunya-hero__vurgu {
  font-size: 1.18em;
  letter-spacing: .01em;
  text-transform: none;
}

.dunya-hero__ozet {
  max-width: 34ch;
  margin-bottom: var(--bosluk-4);
}

@media (max-width: 900px) {
  .dunya-hero__medya { inset: 0; }
  .dunya-hero__perde {
    background: linear-gradient(to top,
      var(--ink) 0%, rgba(10,10,10,.88) 42%, rgba(10,10,10,.55) 100%);
  }
}

/* --- Süzgeç sekmeleri --------------------------------------------------- */

.dunya {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.dunya-sekme {
  border-bottom: 1px solid var(--cizgi-soft);
  margin-bottom: var(--bosluk-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.dunya-sekme::-webkit-scrollbar { display: none; }

.dunya-sekme ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  min-width: max-content;
}

.dunya-sekme a {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding-bottom: var(--bosluk-2);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;   /* çizgi kabın kenarlığıyla çakışsın */
  transition: color var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out);
}

.dunya-sekme a:hover { color: var(--ivory); }

.dunya-sekme a[aria-current="true"] {
  color: var(--copper-2);
  border-bottom-color: var(--copper);
}

.dunya-sekme__adet {
  font-size: .5625rem;
  color: var(--ivory-32);
}

/* --- Manşet ------------------------------------------------------------- */

.dunya-manset {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--bosluk-3);
  margin-bottom: var(--bolum-y);
}

.dunya-manset__yan {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--bosluk-3);
  min-width: 0;
}

@media (max-width: 900px) {
  .dunya-manset { grid-template-columns: 1fr; }
}

/* --- Kart --------------------------------------------------------------- */

.dunya-kart { min-width: 0; }

.dunya-kart__bag {
  display: block;
  height: 100%;
  border: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
  transition: border-color var(--s-ui) var(--e-out),
              background-color var(--s-ui) var(--e-out);
}

.dunya-kart__bag:hover,
.dunya-kart__bag:focus-visible {
  border-color: var(--copper-40);
  background: var(--ink-3);
}

.dunya-kart__medya { overflow: hidden; }

.dunya-kart__medya .medya > img,
.dunya-kart__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out),
              filter var(--s-orta) var(--e-out);
}

@media (hover: hover) {
  .dunya-kart__bag:hover .medya > img,
  .dunya-kart__bag:hover .medya__ph { transform: scale(1.05); }
  .dunya-kart__bag:hover .medya--gri > img { filter: grayscale(.2) contrast(1.05); }
}

.dunya-kart__govde {
  padding: var(--bosluk-3);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.dunya-kart__ust {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-2);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
}

.dunya-kart__tur   { color: var(--copper); }
.dunya-kart__tarih { color: var(--ivory-32); }

.dunya-kart__baslik {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.24;
  color: var(--ivory);
}

.dunya-kart__ozet {
  color: var(--ivory-50);
  font-size: .9375rem;
  line-height: 1.6;
}

.dunya-kart__oku { margin-top: auto; align-self: flex-start; }

/* Manşet: büyük dikey kart, iki sütunlu iç yerleşim. */
@media (min-width: 900px) {
  .dunya-kart--manset .dunya-kart__bag {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dunya-kart--manset .dunya-kart__medya { height: 100%; }
  .dunya-kart--manset .dunya-kart__medya .medya {
    height: 100%;
    aspect-ratio: auto !important;
  }
  .dunya-kart--manset .dunya-kart__govde {
    justify-content: center;
    padding: var(--bosluk-4);
    gap: var(--bosluk-2);
  }
  .dunya-kart--manset .dunya-kart__baslik {
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  }
}

/* Yatay: küçük görsel solda. */
@media (min-width: 560px) {
  .dunya-kart--yatay .dunya-kart__bag {
    display: grid;
    grid-template-columns: 13rem 1fr;
    height: 100%;
  }
  .dunya-kart--yatay .dunya-kart__medya { height: 100%; }
  .dunya-kart--yatay .dunya-kart__medya .medya {
    height: 100%;
    aspect-ratio: auto !important;
  }
  .dunya-kart--yatay .dunya-kart__govde { justify-content: center; }
  .dunya-kart--yatay .dunya-kart__baslik { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
  .dunya-kart--yatay .dunya-kart__ozet {
    font-size: .875rem;
    /* Yan kartlarda özet iki satırı geçerse kutu dengesi bozuluyor. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Akış --------------------------------------------------------------- */

.dunya-akis__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding-bottom: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
  border-bottom: 1px solid var(--cizgi-soft);
}

.dunya-bos {
  color: var(--ivory-50);
  padding-block: var(--bosluk-5);
  text-align: center;
}

/* --- Ölçek bölümü ------------------------------------------------------- */

.dunya-olcek {
  position: relative;
  padding: var(--bolum-y) var(--kenar);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--cizgi-soft);
}

.dunya-olcek__medya {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: -1;
}

.dunya-olcek__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.dunya-olcek__medya img,
.dunya-olcek__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dunya-olcek__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--ink) 0%, rgba(10,10,10,.9) 26%, rgba(10,10,10,.42) 70%, rgba(10,10,10,.6) 100%);
}

.dunya-olcek__ic {
  position: relative;
  margin-inline: auto;
  display: grid;
  gap: var(--bosluk-3);
  max-width: min(var(--tam), 46rem);
}

.dunya-olcek__sayilar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-block: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  border-bottom: 1px solid var(--cizgi-soft);
}

.dunya-olcek__sayilar dt {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  margin-top: .35rem;
  order: 2;
}

.dunya-olcek__sayilar dd {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--copper-2);
}

.dunya-olcek__sayilar > div { display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .dunya-olcek__medya { inset: 0; }
  .dunya-olcek__perde {
    background: linear-gradient(to top, var(--ink) 0%, rgba(10,10,10,.88) 46%, rgba(10,10,10,.6) 100%);
  }
}

/* --- Bülten ------------------------------------------------------------- */

.dunya-bulten {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.dunya-bulten__ic {
  max-width: var(--tam);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-5);
  align-items: center;
}

@media (max-width: 900px) {
  .dunya-bulten__ic { grid-template-columns: 1fr; gap: var(--bosluk-3); }
}

.dunya-bulten__baslik {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom: var(--bosluk-2);
}

.bulten--genis { max-width: none; }

.bulten--genis button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper-2);
}

/* --- Yazı detayı -------------------------------------------------------- */

.yazi-hero {
  position: relative;
  min-height: min(76svh, 46rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bolum-y);
  overflow: hidden;
  isolation: isolate;
}

.yazi-hero__medya { position: absolute; inset: 0; z-index: -1; }

.yazi-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.yazi-hero__medya img,
.yazi-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yazi-hero__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,10,10,.96) 0%, rgba(10,10,10,.62) 55%, rgba(10,10,10,.4) 100%);
}

.yazi-hero__ic {
  position: relative;
  width: 100%;
  max-width: min(var(--tam), 62rem);
  margin-inline: auto;
}

.yazi-hero__baslik {
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1.08;
  margin-block: var(--bosluk-3) var(--bosluk-3);
  max-width: 22ch;
}

.yazi-hero__ozet { max-width: 52ch; margin-bottom: var(--bosluk-4); }

.yazi-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-5);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.yazi-hero__meta dt {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .3rem;
}

.yazi-hero__meta dd { font-family: var(--font-serif); font-size: 1.1rem; }

/* Okuma sütunu: satır uzunluğu okunabilirlik için sınırlı. */
.yazi-govde {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--bolum-y) var(--kenar);
}

.yazi-govde__paragraf {
  color: var(--ivory-70);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.78;
  margin-bottom: var(--bosluk-3);
}

.yazi-govde__baslik {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  margin-block: var(--bosluk-5) var(--bosluk-2);
}

.yazi-govde__alinti {
  margin-block: var(--bosluk-5);
  padding-left: var(--bosluk-3);
  border-left: 1px solid var(--copper-40);
}

.yazi-govde__alinti p {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.45;
  color: var(--ivory);
  margin-bottom: .7rem;
}

.yazi-govde__alinti cite {
  font-style: normal;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.yazi-govde__liste {
  display: grid;
  gap: .7rem;
  margin-block: var(--bosluk-3) var(--bosluk-4);
}

.yazi-govde__liste li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  color: var(--ivory-70);
  line-height: 1.65;
}

.yazi-govde__liste li::before {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: var(--copper);
  flex: none;
  transform: translateY(-.4em);
}

.yazi-govde__etiketler {
  margin-top: var(--bosluk-5);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.yazi-govde__geri { margin-top: var(--bosluk-4); }
.yazi-govde__geri .bag__ok { display: inline-block; }

/* === 60-p-hakkimizda.css === */
/* =========================================================================
   Hakkımızda
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

.hk-hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  grid-template-columns: 1fr minmax(14rem, 20rem);
  align-items: center;
  gap: var(--bosluk-4);
  padding: calc(var(--basli-y) + var(--bosluk-5)) clamp(3rem, 6vw, 5rem) var(--bosluk-5) var(--kenar);
  overflow: hidden;
  isolation: isolate;
}

/* Portre ortada durur; metin soldan, alıntı sağdan çerçeveler. */
.hk-hero__medya {
  position: absolute;
  inset: 0 22% 0 30%;
  z-index: -1;
}

.hk-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hk-hero__medya img,
.hk-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.hk-hero__perde {
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(to right, var(--ink) 0%, rgba(10,10,10,.86) 26%, rgba(10,10,10,.15) 52%, rgba(10,10,10,.88) 88%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.55) 0%, transparent 24%, transparent 72%, var(--ink) 100%);
}

.hk-hero__ic {
  position: relative;
  max-width: 32rem;
}

.hk-hero__baslik {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin-bottom: var(--bosluk-3);
}

/* Üçüncü satır bakır: "AYNI TUTKU." vurgusu. */
.hk-hero__vurgu { color: var(--copper-2); }

.hk-hero__ozet {
  max-width: 34ch;
  margin-bottom: var(--bosluk-4);
}

/* Sağdaki alıntı bloğu */
.hk-hero__alinti {
  position: relative;
  display: grid;
  gap: var(--bosluk-2);
  padding-right: var(--bosluk-4);
  border-right: 1px solid var(--cizgi-soft);
}

.hk-hero__tirnak {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--copper);
  line-height: .6;
}

.hk-hero__alinti blockquote {
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ivory);
}

.hk-hero__alinti figcaption {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.hk-hero__dikey {
  position: absolute;
  right: clamp(.75rem, 1.4vw, 1.4rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

@media (max-width: 1024px) {
  .hk-hero {
    grid-template-columns: 1fr;
    align-items: flex-end;
    padding-inline: var(--kenar);
  }
  .hk-hero__medya { inset: 0; }
  .hk-hero__perde {
    background: linear-gradient(to top,
      var(--ink) 0%, rgba(10,10,10,.9) 44%, rgba(10,10,10,.5) 100%);
  }
  .hk-hero__alinti {
    padding-right: 0;
    padding-top: var(--bosluk-3);
    border-right: 0;
    border-top: 1px solid var(--cizgi-soft);
    margin-top: var(--bosluk-3);
  }
  .hk-hero__dikey { display: none; }
}

/* --- Hikâyemiz ---------------------------------------------------------- */

.hk-hikaye {
  display: grid;
  grid-template-columns: minmax(16rem, 26rem) 1fr;
  gap: var(--bosluk-5);
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.hk-hikaye__sol { display: grid; gap: var(--bosluk-3); align-content: center; }

.hk-hikaye__baslik {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.16;
  text-transform: uppercase;
}

.hk-hikaye__medya {
  /* Çerçeve hissi: görsel kenarlıkla ayrılır, dokunun içine oturur. */
  border: 1px solid var(--cizgi-soft);
  padding: .5rem;
  background: var(--ink-2);
}

@media (max-width: 900px) {
  .hk-hikaye { grid-template-columns: 1fr; gap: var(--bosluk-4); }
}

/* --- Zaman çizelgesi ---------------------------------------------------- */

.hk-zaman {
  padding-block: var(--bolum-y);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.hk-zaman__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding-inline: var(--kenar);
  margin-bottom: var(--bosluk-4);
  max-width: var(--tam);
  margin-inline: auto;
}

.hk-zaman__ray { align-items: stretch; }

.hk-donem {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: var(--bosluk-2);
  width: clamp(17rem, 26vw, 21rem);
  padding-bottom: var(--bosluk-4);
}

.hk-donem__medya { overflow: hidden; }

.hk-donem__medya img,
.hk-donem__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out);
}

@media (hover: hover) {
  .hk-donem:hover .hk-donem__medya img,
  .hk-donem:hover .hk-donem__medya .medya__ph { transform: scale(1.05); }
}

.hk-donem__govde { display: grid; gap: .5rem; }

.hk-donem__yil {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--copper-2);
  line-height: 1;
}

.hk-donem__metin {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

/* Alt çizgi + nokta: dönemleri birbirine bağlayan zaman ekseni. */
.hk-donem::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--bosluk-3) * -1);
  bottom: .55rem;
  height: 1px;
  background: var(--cizgi-soft);
}

.hk-donem:last-child::after { right: 0; }

.hk-donem__nokta {
  position: absolute;
  left: 0;
  bottom: .55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  translate: 0 50%;
  background: var(--copper);
}

@media (max-width: 560px) {
  .hk-donem { grid-template-columns: 5.5rem 1fr; width: clamp(15rem, 82vw, 19rem); }
}

/* --- Vizyon ------------------------------------------------------------- */

.hk-vizyon {
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 40%);
  gap: var(--bosluk-5);
  align-items: center;
  border-top: 1px solid var(--cizgi-soft);
}

.hk-vizyon__sol {
  display: grid;
  gap: var(--bosluk-3);
  padding: var(--bolum-y) 0 var(--bolum-y) var(--kenar);
}

.hk-vizyon__baslik {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  text-transform: uppercase;
  margin-bottom: var(--bosluk-2);
}

/* Dört değer tek satırda kalmalı: `auto-fit` + minmax, dar sütunda
   dördüncüyü alt satıra atıyordu. Sabit dört sütun, yalnızca gerçekten
   dar ekranda ikiye iner. */
.hk-vizyon__izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bosluk-3);
}

@media (max-width: 1200px) {
  .hk-vizyon__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .hk-vizyon__izgara { grid-template-columns: 1fr; }
}

.hk-deger {
  display: grid;
  gap: .45rem;
  align-content: start;
  padding-left: var(--bosluk-3);
  border-left: 1px solid var(--cizgi-soft);
}

/* Satır başındaki öğede ayraç olmamalı — sütun sayısı değiştiğinde bu
   "ilk çocuk" değil, "satırın ilki" demektir. */
.hk-deger:nth-child(4n + 1) { border-left: 0; padding-left: 0; }

@media (max-width: 1200px) {
  .hk-deger { border-left: 1px solid var(--cizgi-soft); padding-left: var(--bosluk-3); }
  .hk-deger:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

.hk-deger__simge {
  width: 2.25rem;
  max-width: none;
  margin: 0 0 var(--bosluk-2);
  opacity: .85;
}

.hk-deger__ad {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  color: var(--ivory);
}

.hk-deger__metin {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

.hk-vizyon__medya { align-self: stretch; overflow: hidden; }

.hk-vizyon__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hk-vizyon__medya img,
.hk-vizyon__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hk-vizyon { grid-template-columns: 1fr; }
  .hk-vizyon__sol { padding: var(--bolum-y) var(--kenar) var(--bosluk-4); }
  .hk-vizyon__medya { aspect-ratio: 16 / 10; }
  .hk-deger { border-left: 0; padding-left: 0; }
}

/* --- Ödüller ------------------------------------------------------------ */

.hk-odul {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.hk-odul__basi {
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 28rem);
  gap: var(--bosluk-4);
  align-items: end;
  padding-bottom: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
  border-bottom: 1px solid var(--cizgi-soft);
}

.hk-odul__baslik {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: var(--bosluk-2);
}

.hk-odul__not { font-size: .9375rem; }

@media (max-width: 900px) {
  .hk-odul__basi { grid-template-columns: 1fr; gap: var(--bosluk-2); }
}

/* Ödül satırı: yıl · ad/veren · açıklama · kategori */
.hk-odul__oge {
  display: grid;
  grid-template-columns: 6rem 1fr 1.2fr 8rem;
  align-items: center;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi-soft);
  transition: background-color var(--s-ui) var(--e-out),
              padding-left var(--s-ui) var(--e-out);
}

@media (hover: hover) {
  .hk-odul__oge:hover {
    background: var(--ink-2);
    padding-left: var(--bosluk-2);
  }
}

.hk-odul__yil {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--copper-2);
  line-height: 1;
}

.hk-odul__ad {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  margin-bottom: .3rem;
}

.hk-odul__veren {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.hk-odul__aciklama {
  color: var(--ivory-50);
  font-size: .875rem;
  line-height: 1.6;
}

.hk-odul__kategori {
  justify-self: end;
  padding: .35rem .75rem;
  border: 1px solid var(--copper-40);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper-2);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hk-odul__oge {
    grid-template-columns: 4.5rem 1fr;
    row-gap: .5rem;
    align-items: start;
  }
  .hk-odul__aciklama { grid-column: 2; }
  .hk-odul__kategori { grid-column: 2; justify-self: start; }
}

/* --- Kapanış sözü ------------------------------------------------------- */

.hk-soz {
  display: grid;
  grid-template-columns: minmax(14rem, 34%) 1fr;
  align-items: stretch;
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.hk-soz__medya { overflow: hidden; }

.hk-soz__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hk-soz__medya img,
.hk-soz__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hk-soz__ic {
  display: grid;
  gap: var(--bosluk-3);
  align-content: center;
  padding: var(--bolum-y) var(--kenar);
  max-width: 46rem;
}

.hk-soz__tirnak {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: .5;
  color: var(--copper);
}

.hk-soz__metin {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  line-height: 1.45;
  color: var(--ivory);
}

.hk-soz__kaynak {
  display: grid;
  gap: .3rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.hk-soz__nesil { color: var(--ivory-32); }

@media (max-width: 900px) {
  .hk-soz { grid-template-columns: 1fr; }
  .hk-soz__medya { aspect-ratio: 16 / 9; }
}

/* === 60-p-hero.css === */
/* =========================================================================
   Hero — tam ekran sinematik açılış
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--basli-y) var(--kenar) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__medya {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;   /* tam ekran: oran kısıtı geçersiz */
}

.hero__medya img,
.hero__medya video,
.hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Perde: tipografinin okunabilirliği tesadüfe bırakılmaz. */
.hero__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.45) 42%, rgba(10,10,10,.30) 100%),
    linear-gradient(to right, rgba(10,10,10,.72) 0%, transparent 58%);
}

.hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.hero__ust {
  margin-bottom: var(--bosluk-3);
  color: var(--ivory-50);
  letter-spacing: var(--iz-genis);
}

/* Referanstaki dev editoryal başlık: grotesk + serif italik karışımı. */
.hero__baslik {
  font-size: clamp(2.9rem, 11.5vw, 11rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: var(--bosluk-3);
}

.hero__baslik .serif {
  font-size: 1.06em;      /* serif optik olarak küçük durur, dengelenir */
  line-height: .92;
  color: var(--ivory);
}

.hero__alt {
  color: var(--ivory-70);
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  max-width: 34ch;
  margin-bottom: var(--bosluk-4);
  line-height: 1.6;
}

.hero__cagri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
}

/* --- Kenar detayları ---------------------------------------------------- */

.hero__kenar {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  color: var(--ivory-32);
}

.hero__kenar--sol { left: clamp(.75rem, 1.6vw, 1.6rem); }

.hero__noktalar {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.hero__noktalar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--ivory-32);
}

.hero__noktalar span:first-child {
  background: var(--copper);
  border-color: var(--copper);
}

/* --- Kaydır göstergesi -------------------------------------------------- */

.hero__kaydir {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  transition: color var(--s-hizli) var(--e-out);
}

.hero__kaydir:hover { color: var(--ivory); }

.hero__kaydir-cizgi {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--ivory-32), transparent);
  position: relative;
  overflow: hidden;
}

/* İnce bir ışık aşağı doğru akar — davet, dikkat dağıtmadan. */
.hareket .hero__kaydir-cizgi::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--copper);
  animation: kaydir-akis 2.4s var(--e-inout) infinite;
}

@keyframes kaydir-akis {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}

@media (max-width: 720px) {
  .hero { align-items: flex-end; }
  .hero__kenar { display: none; }
  .hero__baslik { font-size: clamp(2.5rem, 13vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__kaydir-cizgi::after { animation: none; }
}

/* --- İç sayfa hero'su --------------------------------------------------- */

.sayfa-hero {
  position: relative;
  min-height: min(78svh, 46rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--basli-y) + var(--bosluk-4)) var(--kenar) var(--bosluk-5);
  overflow: hidden;
  isolation: isolate;
}

.sayfa-hero__medya {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sayfa-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.sayfa-hero__medya img,
.sayfa-hero__medya video,
.sayfa-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sayfa-hero__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.50) 55%, rgba(10,10,10,.35) 100%),
    linear-gradient(to right, rgba(10,10,10,.68) 0%, transparent 62%);
}

.sayfa-hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.sayfa-hero__baslik {
  margin-block: var(--bosluk-3) var(--bosluk-3);
}

.sayfa-hero__ozet {
  max-width: 46ch;
  margin-bottom: var(--bosluk-4);
}

.sayfa-hero__meta,
.kesim-hero__meta,
.ekip-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-5);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.sayfa-hero__meta dt,
.kesim-hero__meta dt,
.ekip-hero__meta dt {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .35rem;
}

.sayfa-hero__meta dd,
.kesim-hero__meta dd,
.ekip-hero__meta dd {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-family: var(--font-serif);
}

/* === 60-p-hizmet-detay.css === */
/* =========================================================================
   Hizmet detay sayfası
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

.hd-hero {
  position: relative;
  min-height: min(88svh, 52rem);
  display: flex;
  align-items: center;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bosluk-5)
           clamp(4.5rem, 8vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}

/* Görsel sağ yarıyı kaplar, sola doğru karanlığa karışır. */
.hd-hero__medya {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
}

.hd-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hd-hero__medya img,
.hd-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-hero__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--ink) 0%, rgba(10,10,10,.95) 18%, rgba(10,10,10,.35) 58%, rgba(10,10,10,.5) 100%);
}

.hd-hero__kirinti {
  position: absolute;
  top: calc(var(--basli-y) + var(--bosluk-2));
  left: clamp(4.5rem, 8vw, 8rem);
  display: flex;
  gap: .6rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.hd-hero__kirinti a { color: var(--copper); transition: color var(--s-hizli) var(--e-out); }
.hd-hero__kirinti a:hover { color: var(--copper-2); }

.hd-hero__ic {
  position: relative;
  width: 100%;
  max-width: 34rem;
}

.hd-hero__baslik {
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  margin-block: var(--bosluk-2) var(--bosluk-3);
}

/* Başlık altındaki kısa bakır çizgi — markanın "kesim" motifi. */
.hd-hero__cizgi {
  display: block;
  width: 7rem;
  height: 1px;
  margin-bottom: var(--bosluk-3);
  background: linear-gradient(to right, var(--copper), transparent);
  position: relative;
}

.hd-hero__cizgi::after {
  content: "→";
  position: absolute;
  right: -.2rem;
  top: 50%;
  translate: 0 -50%;
  font-size: .7rem;
  color: var(--copper);
}

.hd-hero__ozet { max-width: 38ch; margin-bottom: var(--bosluk-4); }

/* --- Sol kenar gezinme -------------------------------------------------- */

.hd-yan {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-3);
  padding-inline: clamp(.9rem, 2vw, 1.6rem);
  border-right: 1px solid var(--cizgi-soft);
}

.hd-yan__liste { display: grid; gap: .55rem; }

.hd-yan__liste a {
  display: block;
  font-size: .625rem;
  letter-spacing: var(--iz-orta);
  color: var(--ivory-32);
  padding-block: .2rem;
  transition: color var(--s-hizli) var(--e-out);
}

.hd-yan__liste a:hover { color: var(--ivory); }

.hd-yan__liste a[aria-current="page"] {
  color: var(--copper-2);
  font-size: .8125rem;
}

.hd-yan__kaydir {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

@media (max-width: 900px) {
  .hd-hero {
    padding-inline: var(--kenar);
    align-items: flex-end;
    min-height: min(80svh, 42rem);
  }
  .hd-hero__medya { inset: 0; }
  .hd-hero__perde {
    background: linear-gradient(to top,
      var(--ink) 0%, rgba(10,10,10,.9) 46%, rgba(10,10,10,.5) 100%);
  }
  .hd-hero__kirinti { left: var(--kenar); }
  .hd-yan { display: none; }
}

/* --- Süreç -------------------------------------------------------------- */

.hd-surec {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) 1fr;
  gap: var(--bosluk-5);
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.hd-surec__sol { display: grid; gap: var(--bosluk-3); align-content: start; }

.hd-surec__baslik {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.hd-adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--bosluk-4);
}

/* Adımlar arasında ince ayraç — soldan sağa akış hissi. */
.hd-adim {
  position: relative;
  padding-left: var(--bosluk-3);
  border-left: 1px solid var(--cizgi-soft);
  display: grid;
  gap: .5rem;
  align-content: start;
}

.hd-adim:first-child { border-left: 0; padding-left: 0; }

.hd-adim__no {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--ivory);
  line-height: 1;
}

.hd-adim__ad {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  color: var(--copper-2);
}

.hd-adim__metin {
  color: var(--ivory-50);
  font-size: .875rem;
  line-height: 1.6;
}

/* Referansta simgeler adımın görsel ağırlık merkezidir; küçük kalırsa
   süslemeye dönüşüyor. */
.adim-simge {
  width: 100%;
  max-width: 10rem;
  height: auto;
  margin-top: var(--bosluk-3);
  color: var(--copper);
  opacity: .75;
}

@media (max-width: 900px) {
  .hd-surec { grid-template-columns: 1fr; gap: var(--bosluk-4); }
  .hd-adim { border-left: 0; padding-left: 0; padding-top: var(--bosluk-2);
             border-top: 1px solid var(--cizgi-soft); }
  .hd-adim:first-child { border-top: 0; padding-top: 0; }
}

/* --- Dönüşüm ------------------------------------------------------------ */

.hd-donusum {
  display: grid;
  grid-template-columns: minmax(15rem, 24rem) 1fr;
  gap: var(--bosluk-4);
  align-items: center;
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.hd-donusum__sol {
  display: grid;
  gap: var(--bosluk-3);
  padding: var(--bolum-y) 0 var(--bolum-y) var(--kenar);
  align-content: center;
}

.hd-donusum__baslik {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.06;
  text-transform: uppercase;
}

.hd-donusum__ipucu {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
}

.hd-donusum__sahne { align-self: stretch; }
.hd-donusum__sahne .ba { height: 100%; }
.hd-donusum__sahne .ba__sahne { height: 100%; }

@media (max-width: 900px) {
  .hd-donusum { grid-template-columns: 1fr; }
  .hd-donusum__sol { padding: var(--bolum-y) var(--kenar) var(--bosluk-4); }
}

/* --- Künye şeridi ------------------------------------------------------- */

.hd-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  border-top: 1px solid var(--cizgi-soft);
  border-bottom: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.hd-kunye__oge {
  display: grid;
  gap: .45rem;
  align-content: start;
  padding: var(--bosluk-4) var(--bosluk-3);
  border-left: 1px solid var(--cizgi-soft);
}

.hd-kunye__oge:first-child { border-left: 0; }

.hd-kunye__simge {
  width: 2rem;
  max-width: none;
  margin: 0 0 var(--bosluk-2);
  opacity: .8;
}

.hd-kunye__ad {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.hd-kunye__deger {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  color: var(--ivory);
}

.hd-kunye__not {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .hd-kunye__oge { border-left: 0; border-top: 1px solid var(--cizgi-soft); }
  .hd-kunye__oge:first-child { border-top: 0; }
}

/* --- Alt bölüm: ürünler + randevu --------------------------------------- */

.hd-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-3);
  padding: var(--bolum-y) var(--kenar);
  max-width: var(--tam);
  margin-inline: auto;
  align-items: stretch;
}

@media (max-width: 900px) {
  .hd-alt { grid-template-columns: 1fr; }
}

.hd-urun { display: grid; gap: var(--bosluk-3); align-content: start; }

.hd-urun__ray { padding-inline: 0; }

.hd-urun__kart {
  width: min(20rem, 78vw);
  border: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
  transition: border-color var(--s-ui) var(--e-out);
}

.hd-urun__kart:hover { border-color: var(--copper-40); }

.hd-urun__kart a { display: grid; grid-template-columns: 8rem 1fr; height: 100%; }

.hd-urun__medya { overflow: hidden; background: var(--ink-3); }

.hd-urun__medya img,
.hd-urun__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out);
}

@media (hover: hover) {
  .hd-urun__kart:hover .hd-urun__medya img,
  .hd-urun__kart:hover .hd-urun__medya .medya__ph { transform: scale(1.06); }
}

.hd-urun__govde {
  padding: var(--bosluk-3);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
}

.hd-urun__ad { font-size: 1.15rem; }

.hd-urun__ozet {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

/* Randevu kutusu */
.hd-randevu {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 18rem;
  border: 1px solid var(--cizgi-soft);
}

.hd-randevu__medya { position: absolute; inset: 0 0 0 42%; z-index: -1; }

.hd-randevu__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hd-randevu__medya img,
.hd-randevu__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-randevu__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--ink-2) 0%, rgba(16,16,16,.92) 30%, rgba(16,16,16,.45) 72%, rgba(16,16,16,.6) 100%);
}

.hd-randevu__ic {
  position: relative;
  display: grid;
  gap: var(--bosluk-3);
  justify-items: start;
  padding: var(--bosluk-4);
  max-width: 24rem;
}

.hd-randevu__baslik {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.12;
}

/* === 60-p-hizmetler.css === */
/* =========================================================================
   Hizmetler (Kesimler) — satır tabanlı editoryal liste
   ========================================================================= */

/* --- Hero --------------------------------------------------------------- */

.hizmet-hero {
  position: relative;
  min-height: min(78svh, 46rem);
  display: flex;
  align-items: center;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bosluk-5);
  overflow: hidden;
  isolation: isolate;
}

.hizmet-hero__medya {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: -1;
}

.hizmet-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hizmet-hero__medya img,
.hizmet-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hizmet-hero__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--ink) 0%, rgba(10,10,10,.94) 20%, rgba(10,10,10,.4) 58%, rgba(10,10,10,.55) 100%);
}

.hizmet-hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.hizmet-hero__baslik {
  font-size: clamp(2.1rem, 5.6vw, 5rem);
  line-height: 1.06;
  margin-block: var(--bosluk-3);
}

.hizmet-hero__ozet {
  max-width: 42ch;
  margin-bottom: var(--bosluk-4);
}

/* Sağ kenardaki dikey etiket — referanstaki mimari işaret. */
.hizmet-hero__dikey {
  position: absolute;
  right: clamp(.75rem, 1.6vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

@media (max-width: 900px) {
  .hizmet-hero__medya { inset: 0; }
  .hizmet-hero__perde {
    background: linear-gradient(to top,
      var(--ink) 0%, rgba(10,10,10,.9) 44%, rgba(10,10,10,.55) 100%);
  }
  .hizmet-hero__dikey { display: none; }
}

/* --- Bölüm başı --------------------------------------------------------- */

.hizmetler {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.hizmetler__basi {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--bosluk-4);
  padding-bottom: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
  border-bottom: 1px solid var(--cizgi-soft);
}

.hizmetler__baslik {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin-top: .4rem;
}

.hizmetler__not { font-size: .9375rem; }

/* --- Bölüm sekmeleri (erkek / kadın) ------------------------------------ */

.bolum-sekme { display: flex; gap: .35rem; }

.bolum-sekme__oge {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .55rem 1rem;
  border: 1px solid var(--cizgi-soft);
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  transition: color var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out),
              background-color var(--s-hizli) var(--e-out);
}

.bolum-sekme__oge:hover,
.bolum-sekme__oge:focus-visible {
  color: var(--ivory);
  border-color: var(--ivory-32);
}

.bolum-sekme__oge[aria-current] {
  color: var(--copper-2);
  border-color: var(--copper-40);
  background: var(--copper-16);
}

.bolum-sekme__adet { font-size: .5625rem; color: var(--ivory-32); }
.bolum-sekme__oge[aria-current] .bolum-sekme__adet { color: var(--copper); }

@media (max-width: 900px) {
  .hizmetler__basi { grid-template-columns: 1fr; gap: var(--bosluk-2); }
  .hizmetler__tumu { justify-self: start; }
}

/* --- Hizmet satırı ------------------------------------------------------ */

.hizmet-liste-satir {
  border-top: 1px solid var(--cizgi-soft);
}

.hizmet-satir {
  display: grid;
  grid-template-columns: 4.5rem 15rem 1fr 14rem 12rem;
  align-items: stretch;
  gap: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi-soft);
  transition: background-color var(--s-ui) var(--e-out);

  /* Satır yüksekliğini görselin kendi oranı değil, bu değer belirler.
     Aksi halde her fotoğrafın oranı satırı farklı boyda şişiriyordu. */
  min-height: 10.5rem;
}

@media (hover: hover) {
  .hizmet-satir:hover { background: var(--ink-2); }
}

.hizmet-satir__no {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--ivory-32);
  text-align: center;
  transition: color var(--s-hizli) var(--e-out);
}

.hizmet-satir:hover .hizmet-satir__no { color: var(--copper); }

/* Görsel satırın tam yüksekliğini doldurur — kutu değil, şerit.
   `position:absolute` şart: figure normal akışta kalırsa kendi
   yüksekliğini dayatır ve satırlar farklı boylarda olur. */
.hizmet-satir__medya {
  position: relative;
  overflow: hidden;
}

.hizmet-satir__medya .medya {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hizmet-satir__medya img,
.hizmet-satir__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--s-yavas) var(--e-out),
              filter var(--s-orta) var(--e-out);
}

@media (hover: hover) {
  .hizmet-satir:hover .hizmet-satir__medya img { transform: scale(1.06); filter: grayscale(.2) contrast(1.05); }
  .hizmet-satir:hover .hizmet-satir__medya .medya__ph { transform: scale(1.06); }
}

.hizmet-satir__govde {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-block: var(--bosluk-3);
  min-width: 0;
}

.hizmet-satir__ad {
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.hizmet-satir__ad a {
  transition: color var(--s-hizli) var(--e-out);
}

.hizmet-satir__ad a:hover,
.hizmet-satir__ad a:focus-visible { color: var(--copper-2); }

.hizmet-satir__ozet {
  color: var(--ivory-50);
  font-size: .875rem;
  line-height: 1.6;
  max-width: 42ch;
}

.hizmet-satir__detay { align-self: flex-start; }

/* Öne çıkanlar: bakır çizgili kısa liste. */
.hizmet-satir__ozellikler {
  display: grid;
  gap: .5rem;
  padding-inline: var(--bosluk-3);
  border-left: 1px solid var(--cizgi-soft);
  align-self: stretch;
  align-content: center;
  padding-block: var(--bosluk-3);
}

.hizmet-satir__ozellikler li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .8125rem;
  color: var(--ivory-70);
  line-height: 1.4;
}

.hizmet-satir__ozellikler li::before {
  content: "";
  width: .75rem;
  height: 1px;
  background: var(--copper);
  flex: none;
  transform: translateY(-.3em);
}

/* --- Satır sonu: ücret + randevu ---------------------------------------- */

.hizmet-satir__cagri {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding-inline: var(--bosluk-3) var(--bosluk-2);
  border-left: 1px solid var(--cizgi-soft);
  align-self: stretch;
  justify-content: center;
  padding-block: var(--bosluk-3);
}

.hizmet-satir__meta {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-50);
}

.hizmet-satir__meta strong {
  color: var(--copper-2);
  font-weight: 400;
}

.hizmet-satir__randevu {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper-2);
  transition: gap var(--s-hizli) var(--e-out);
}

.hizmet-satir__randevu:hover,
.hizmet-satir__randevu:focus-visible { gap: .9rem; }

.hizmet-satir__randevu .bag__ok { transition: transform var(--s-hizli) var(--e-out); }

/* --- Duyarlı ------------------------------------------------------------ */

@media (max-width: 1200px) {
  .hizmet-satir {
    grid-template-columns: 3.5rem 11rem 1fr 11rem;
  }
  /* Dar ekranda çağrı sütunu alt satıra iner. */
  .hizmet-satir__cagri {
    grid-column: 3 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-left: 0;
    border-top: 1px solid var(--cizgi-soft);
    padding-inline: 0;
    padding-block: var(--bosluk-2);
  }
}

@media (max-width: 860px) {
  .hizmet-satir {
    grid-template-columns: 2.75rem 1fr;
    gap: var(--bosluk-2);
    padding-block: var(--bosluk-3);
    min-height: 0;   /* mobilde satır yüksekliği içerikten gelir */
  }

  .hizmet-satir__no { align-self: start; padding-top: .35rem; }

  .hizmet-satir__medya {
    grid-column: 2;
    aspect-ratio: 16 / 9;
  }

  /* Masaüstündeki absolute yerleşimi geri al: mobilde oran belirleyici. */
  .hizmet-satir__medya .medya {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9 !important;
  }

  .hizmet-satir__govde { grid-column: 2; padding-block: 0; }

  .hizmet-satir__ozellikler {
    grid-column: 2;
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 0;
    padding-block: 0;
    border-left: 0;
  }

  .hizmet-satir__cagri { grid-column: 2; }
}

/* --- KA Deneyimi -------------------------------------------------------- */

.deneyim {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) 1fr;
  gap: var(--bosluk-5);
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.deneyim__sol { display: grid; gap: var(--bosluk-3); }

.deneyim__baslik {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.06;
}

.deneyim__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--bosluk-4);
}

.deneyim__oge {
  border-top: 1px solid var(--copper-40);
  padding-top: var(--bosluk-2);
}

.deneyim__no {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.deneyim__ad {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.deneyim__metin {
  color: var(--ivory-50);
  font-size: .875rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .deneyim { grid-template-columns: 1fr; gap: var(--bosluk-4); }
}

/* === 60-p-icerik.css === */
/* =========================================================================
   İç sayfa ortak yapıları
   ========================================================================= */

/* --- İkili yerleşim ----------------------------------------------------- */

.ikili {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  align-items: center;
  max-width: var(--tam);
  margin-inline: auto;
}

.ikili__sol { grid-column: 1 / span 5; }
.ikili__sag { grid-column: 7 / span 6; }

.ikili--ters .ikili__sol { grid-column: 8 / span 5; }
.ikili--ters .ikili__sag { grid-column: 1 / span 6; }

@media (max-width: 900px) {
  .ikili { grid-template-columns: 1fr; gap: var(--bosluk-4); }
  .ikili__sol,
  .ikili__sag,
  .ikili--ters .ikili__sol,
  .ikili--ters .ikili__sag { grid-column: 1 / -1; }

  /* Mobilde metin her zaman görselden sonra gelmez; okuma sırası korunur. */
  .ikili--ters .ikili__sag { order: -1; }
}

.ikili__sag--metin > * + * { margin-top: var(--bosluk-3); }

/* --- Künye (salon bilgileri) -------------------------------------------- */

.kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--bosluk-4);
  max-width: var(--tam);
  margin-inline: auto;
}

.kunye__baslik,
.uygunluk__baslik {
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  padding-bottom: .7rem;
  margin-bottom: var(--bosluk-2);
  border-bottom: 1px solid var(--cizgi-soft);
}

.kunye__metin {
  font-style: normal;
  color: var(--ivory-70);
  line-height: 1.7;
  margin-bottom: var(--bosluk-2);
  max-width: 26ch;
}

.kunye__liste li { line-height: 2; }
.kunye__liste a { color: var(--ivory-70); transition: color var(--s-hizli) var(--e-out); }
.kunye__liste a:hover { color: var(--copper-2); }

.kunye__olcu {
  display: flex;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-3);
  padding-top: var(--bosluk-2);
  border-top: 1px solid var(--cizgi-soft);
}

.kunye__olcu dt,
.olcek dt {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
  margin-bottom: .3rem;
}

.kunye__olcu dd,
.olcek dd {
  font-family: var(--font-serif);
  font-size: 1.35rem;
}

.kunye__blok--cagri { display: flex; align-items: flex-end; }

/* --- Saatler ------------------------------------------------------------ */

.saatler__satir {
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-block: .55rem;
  border-bottom: 1px solid var(--cizgi-soft);
  font-size: .9375rem;
}

.saatler__satir dt { color: var(--ivory-50); }
.saatler__satir dd { color: var(--ivory); font-variant-numeric: tabular-nums; }
.saatler__kapali { color: var(--ivory-32); }

/* --- Ölçek (istatistik) ------------------------------------------------- */

.olcek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-4);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

/* --- Hizmet listesi ----------------------------------------------------- */

.hizmet-liste {
  max-width: var(--tam);
  margin-inline: auto;
  border-top: 1px solid var(--cizgi-soft);
}

.hizmet-liste__oge { border-bottom: 1px solid var(--cizgi-soft); }

.hizmet-liste__oge a {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto 2rem;
  align-items: center;
  gap: var(--bosluk-3);
  padding-block: clamp(1rem, 2.4vh, 1.6rem);
  transition: padding-left var(--s-ui) var(--e-out),
              color var(--s-hizli) var(--e-out);
}

@media (hover: hover) {
  .hizmet-liste__oge a:hover,
  .hizmet-liste__oge a:focus-visible { padding-left: var(--bosluk-2); }
}

.hizmet-liste__no {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
}

.hizmet-liste__ad {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-dar);
}

.hizmet-liste__sure,
.hizmet-liste__ucret {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-50);
}

.hizmet-liste__ucret { color: var(--copper-2); }

.hizmet-liste__ok {
  text-align: right;
  color: var(--ivory-32);
  transition: transform var(--s-hizli) var(--e-out),
              color var(--s-hizli) var(--e-out);
}

.hizmet-liste__oge a:hover .hizmet-liste__ok {
  transform: translateX(5px);
  color: var(--copper-2);
}

@media (max-width: 720px) {
  .hizmet-liste__oge a {
    grid-template-columns: 2.4rem 1fr auto;
    row-gap: .3rem;
  }
  .hizmet-liste__sure { grid-column: 2; }
  .hizmet-liste__ok { display: none; }
}

/* --- Salon satırı ------------------------------------------------------- */

.salon-satir {
  max-width: var(--tam);
  margin-inline: auto;
  border-top: 1px solid var(--cizgi-soft);
}

.salon-satir li { border-bottom: 1px solid var(--cizgi-soft); }

.salon-satir a {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: baseline;
  gap: var(--bosluk-3);
  padding-block: clamp(.9rem, 2vh, 1.4rem);
  transition: padding-left var(--s-ui) var(--e-out);
}

@media (hover: hover) {
  .salon-satir a:hover { padding-left: var(--bosluk-2); }
}

.salon-satir__sehir {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.salon-satir__semt {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
}

.salon-satir__ok {
  color: var(--ivory-32);
  transition: transform var(--s-hizli) var(--e-out);
}

.salon-satir a:hover .salon-satir__ok { transform: translateX(5px); }

/* --- Adımlar (numaralı süreç) ------------------------------------------- */

.adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--bosluk-4);
  max-width: var(--tam);
  margin-inline: auto;
}

.adimlar__oge { border-top: 1px solid var(--copper-40); padding-top: var(--bosluk-2); }

.adimlar__no {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.adimlar__ad {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-orta);
  margin-bottom: .5rem;
}

.adimlar__metin { color: var(--ivory-50); font-size: .9375rem; line-height: 1.6; }

/* --- Uygunluk blokları -------------------------------------------------- */

.uygunluk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--bosluk-4);
  max-width: var(--tam);
  margin-inline: auto;
}

.uygunluk__deger {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: .4rem;
}

/* --- Etiketler ---------------------------------------------------------- */

.etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--bosluk-2);
}

.etiketler li {
  padding: .45rem .8rem;
  border: 1px solid var(--cizgi);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-70);
}

.etiketler--bakir li { border-color: var(--copper-40); color: var(--copper-2); }

/* --- Tablo -------------------------------------------------------------- */

.tablo-sarmal {
  max-width: var(--tam);
  margin-inline: auto;
  overflow-x: auto;
}

.tablo {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: .9375rem;
}

.tablo th,
.tablo td {
  text-align: left;
  padding: var(--bosluk-2) var(--bosluk-2) var(--bosluk-2) 0;
  border-bottom: 1px solid var(--cizgi-soft);
}

.tablo thead th {
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.tablo tbody th { font-weight: 500; }
.tablo tbody th a { border-bottom: 1px solid transparent; transition: border-color var(--s-hizli) var(--e-out); }
.tablo tbody th a:hover { border-bottom-color: var(--copper-40); }
.tablo td { color: var(--ivory-50); }

/* --- Zaman çizgisi ------------------------------------------------------ */

.zaman {
  max-width: var(--tam);
  margin-inline: auto;
  border-top: 1px solid var(--cizgi-soft);
}

.zaman__oge {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--bosluk-4);
  padding-block: var(--bosluk-4);
  border-bottom: 1px solid var(--cizgi-soft);
}

.zaman__yil {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--copper);
  line-height: 1;
}

.zaman__baslik {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-orta);
  margin-bottom: .6rem;
}

.zaman__metin { color: var(--ivory-50); line-height: 1.65; max-width: 60ch; }

@media (max-width: 720px) {
  .zaman__oge { grid-template-columns: 1fr; gap: var(--bosluk-2); }
}

/* --- Değer ızgarası ----------------------------------------------------- */

.deger-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--bosluk-4);
  max-width: var(--tam);
  margin-inline: auto;
}

.deger { border-top: 1px solid var(--copper-40); padding-top: var(--bosluk-2); }

.deger__no {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.deger__ad {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--iz-orta);
  margin-bottom: .5rem;
}

.deger__metin { color: var(--ivory-50); font-size: .9375rem; line-height: 1.6; }

/* --- Plan listesi (dünya) ----------------------------------------------- */

.plan-liste {
  max-width: var(--tam);
  margin-inline: auto;
  border-top: 1px solid var(--cizgi-soft);
}

.plan-liste__oge {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr auto 5rem;
  align-items: baseline;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi-soft);
}

.plan-liste__no { font-size: var(--t-mini); letter-spacing: var(--iz-genis); color: var(--copper); }

.plan-liste__sehir {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
}

.plan-liste__semt { color: var(--ivory-50); font-size: .9375rem; }

.plan-liste__durum {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  padding: .35rem .7rem;
  border: 1px solid var(--cizgi);
  color: var(--ivory-50);
}

.plan-liste__durum[data-durum="açık"] { border-color: var(--copper-40); color: var(--copper-2); }

.plan-liste__yil {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-32);
  font-size: var(--t-mini);
}

@media (max-width: 720px) {
  .plan-liste__oge { grid-template-columns: 2.5rem 1fr auto; row-gap: .35rem; }
  .plan-liste__semt { grid-column: 2 / -1; }
}

/* --- Galeri ------------------------------------------------------------- */

.galeri-oge { width: clamp(15rem, 28vw, 26rem); }

.galeri-oge figcaption {
  margin-top: .8rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-32);
}

/* --- Büyük alıntı ------------------------------------------------------- */

.buyuk-alinti { text-align: center; }

.buyuk-alinti__soz {
  font-size: clamp(1.8rem, 6vw, 5rem);
  line-height: 1.05;
  font-style: italic;
  max-width: 20ch;
  margin: 0 auto var(--bosluk-3);
}

.buyuk-alinti__kaynak {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  font-style: normal;
}

/* --- Bilgi satırı ------------------------------------------------------- */

.bilgi-satir {
  max-width: var(--tam);
  margin-inline: auto;
}

.bilgi-satir .orta-baslik { margin-block: var(--bosluk-2) var(--bosluk-3); }
.bilgi-satir .govde { margin-bottom: var(--bosluk-3); }

.bolum__alt-bag { margin-top: var(--bosluk-4); }

/* --- Kurucu (ekip sayfası) ---------------------------------------------- */

.kurucu {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  align-items: center;
  max-width: var(--tam);
  margin-inline: auto;
}

.kurucu__medya { grid-column: 1 / span 4; }
.kurucu__govde { grid-column: 6 / span 6; }

@media (max-width: 900px) {
  .kurucu { grid-template-columns: 1fr; gap: var(--bosluk-4); }
  .kurucu__medya, .kurucu__govde { grid-column: 1 / -1; }
}

.kurucu__unvan {
  display: block;
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .5rem;
}

.kurucu__ad { font-size: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: var(--bosluk-2); }

.kurucu__alinti {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-style: italic;
  color: var(--ivory);
  padding-left: var(--bosluk-3);
  border-left: 1px solid var(--copper-40);
  margin-bottom: var(--bosluk-3);
}

.sosyal-liste { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); }

/* --- Detay hero varyantları --------------------------------------------- */

.salon-hero,
.kesim-hero {
  position: relative;
  min-height: min(88svh, 52rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--basli-y) + var(--bosluk-4)) var(--kenar) var(--bosluk-5);
  overflow: hidden;
  isolation: isolate;
}

.salon-hero__medya,
.kesim-hero__medya {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.salon-hero__medya .medya,
.kesim-hero__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.salon-hero__medya img, .salon-hero__medya video, .salon-hero__medya .medya__ph,
.kesim-hero__medya img, .kesim-hero__medya video, .kesim-hero__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salon-hero__perde,
.kesim-hero__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.48) 58%, rgba(10,10,10,.32) 100%),
    linear-gradient(to right, rgba(10,10,10,.7) 0%, transparent 60%);
}

.salon-hero__ic,
.kesim-hero__ic {
  position: relative;
  width: 100%;
  max-width: var(--tam);
  margin-inline: auto;
}

.salon-hero__baslik,
.kesim-hero__baslik { margin-block: var(--bosluk-3); }

.salon-hero__ozet,
.kesim-hero__ozet { max-width: 46ch; margin-bottom: var(--bosluk-4); }

/* --- Ürün / ekip hero --------------------------------------------------- */

.urun-hero,
.ekip-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  align-items: center;
  padding: calc(var(--basli-y) + var(--bolum-y)) var(--kenar) var(--bolum-y);
  max-width: var(--tam);
  margin-inline: auto;
}

.urun-hero__medya,
.ekip-hero__medya {
  grid-column: 1 / span 5;
  position: relative;
  overflow: hidden;
}

.urun-hero__medya { background: var(--ink-3); }

.urun-hero__govde,
.ekip-hero__govde { grid-column: 7 / span 6; }

@media (max-width: 900px) {
  .urun-hero, .ekip-hero { grid-template-columns: 1fr; gap: var(--bosluk-4); }
  .urun-hero__medya, .urun-hero__govde,
  .ekip-hero__medya, .ekip-hero__govde { grid-column: 1 / -1; }
}

.urun-hero__baslik,
.ekip-hero__baslik { margin-block: var(--bosluk-3) var(--bosluk-3); }

.urun-hero__faydalar { display: grid; gap: .55rem; margin-block: var(--bosluk-3); }

/* --- Kesim çağrısı (dönüşüm) -------------------------------------------- */

.kesim-cagri {
  padding: var(--bolum-y) var(--kenar);
  border-top: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.kesim-cagri__ic {
  max-width: var(--tam);
  margin-inline: auto;
  display: grid;
  gap: var(--bosluk-3);
}

.kesim-cagri__ic .buyuk-baslik {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Hata sayfası ------------------------------------------------------- */

/* --- Hata sayfası -------------------------------------------------------
   Kompozisyon markanın ana motifi üzerine kurulu: ekranı ortadan bölen ince
   bir "kesim" çizgisi. Rakam çizginin üstünde, makas görseli altında durur.
   ------------------------------------------------------------------------ */

.hata {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Makas görseli: alt yarıda, yukarı doğru karanlığa karışır. */
.hata__medya {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: -2;
}

.hata__medya .medya {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.hata__medya img,
.hata__medya .medya__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* Görsel bir doku olmalı, konu değil: tipografiyle yarışmasın. */
  filter: grayscale(1) contrast(1.15) brightness(.42);
}

.hata__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(10,10,10,.94) 34%, rgba(10,10,10,.72) 68%, rgba(10,10,10,.9) 100%);
}

/* Kesim çizgisi — bakır bir ışık. Rakamın arkasından geçer. */
.hata__cizgi {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--copper-40) 14%,
    var(--copper-2) 46%,
    var(--copper) 62%,
    var(--copper-40) 78%,
    transparent 100%);
}

/* Çizginin makasa değdiği yerde hafif bir parlama. */
.hata__cizgi::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 15rem;
  height: 15rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,115,51,.30), transparent 68%);
  pointer-events: none;
}

.hareket .hata__cizgi {
  animation: hata-cizgi 1.6s var(--e-out) both;
}

@keyframes hata-cizgi {
  from { transform: scaleY(0); transform-origin: center; opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.hata__ic {
  position: relative;
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Dev serif rakam — sayfanın taşıyıcı öğesi. */
.hata__kod {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(7rem, 26vw, 19rem);
  /* Serif rakamların optik yüksekliği satır kutusundan küçüktür; line-height
     1'e yakın tutulmazsa altındaki başlık rakamın üstüne biner. */
  line-height: 1;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ivory);
  margin: 0;
}

.hata__soz {
  font-size: clamp(.85rem, 2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-top: var(--bosluk-3);
}

.hata__metin {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  color: var(--ivory-50);
  margin-block: var(--bosluk-4) var(--bosluk-4);
  line-height: 1.6;
}

.hata__bag { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); justify-content: center; }

/* Öneriler: kullanıcıyı çıkmazda bırakma. */
.hata__oneri {
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  width: 100%;
}

.hata__oneri-baslik {
  display: block;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.hata__oneri ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-3);
}

.hata__oneri a {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-70);
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--s-hizli) var(--e-out),
              border-color var(--s-hizli) var(--e-out);
}

.hata__oneri a:hover,
.hata__oneri a:focus-visible {
  color: var(--copper-2);
  border-bottom-color: var(--copper-40);
}

@media (max-width: 720px) {
  .hata { min-height: 92svh; }
  .hata__medya { height: 50%; }
  .hata__cizgi::after { width: 9rem; height: 9rem; }
}

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

/* === 60-p-iletisim.css === */
/* =========================================================================
   İletişim · Ünlüler · Yasal metinler
   ========================================================================= */

/* --- İletişim: hızlı kartlar -------------------------------------------- */

.iletisim-hizli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1px;
  background: var(--cizgi-soft);
  border-block: 1px solid var(--cizgi-soft);
  max-width: var(--tam);
  margin-inline: auto;
}

.iletisim-kart {
  background: var(--ink);
  padding: var(--bosluk-4) var(--kenar);
  display: grid;
  gap: .6rem;
  align-content: start;
}

.iletisim-kart__deger {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}

.iletisim-kart__deger a {
  transition: color var(--s-hizli) var(--e-out);
}

.iletisim-kart__deger a:hover,
.iletisim-kart__deger a:focus-visible { color: var(--copper-2); }

.iletisim-kart__not {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

/* --- İletişim: merkez salon --------------------------------------------- */

.iletisim-merkez {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--bosluk-5);
  align-items: center;
  padding: var(--bolum-y) var(--kenar);
  max-width: var(--tam);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .iletisim-merkez { grid-template-columns: 1fr; gap: var(--bosluk-4); }
}

.iletisim-merkez__govde { display: grid; gap: var(--bosluk-3); }

.iletisim-merkez__baslik {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.06;
  text-transform: uppercase;
}

.iletisim-merkez__adres {
  font-style: normal;
  color: var(--ivory-70);
  line-height: 1.7;
  max-width: 30ch;
}

/* --- İletişim: telefon listesi ------------------------------------------ */

.tel-liste {
  max-width: var(--tam);
  margin-inline: auto;
  border-top: 1px solid var(--cizgi-soft);
}

.tel-liste__oge {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: baseline;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-2);
  border-bottom: 1px solid var(--cizgi-soft);
}

.tel-liste__sehir {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.tel-liste__semt {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  transition: color var(--s-hizli) var(--e-out);
}

.tel-liste__semt:hover { color: var(--copper-2); }

.tel-liste__tel {
  font-size: .9375rem;
  color: var(--ivory-50);
  font-variant-numeric: tabular-nums;
  transition: color var(--s-hizli) var(--e-out);
}

.tel-liste__tel:hover { color: var(--ivory); }

@media (max-width: 640px) {
  .tel-liste__oge { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .tel-liste__sehir { grid-column: 1 / -1; }
}

/* --- Ünlüler ------------------------------------------------------------ */

.unlu-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--bosluk-4) var(--bosluk-3);
  max-width: var(--tam);
  margin-inline: auto;
}

.unlu { margin: 0; }

.unlu__medya { overflow: hidden; margin-bottom: var(--bosluk-2); }

.unlu__medya img,
.unlu__medya .medya__ph {
  transition: transform var(--s-yavas) var(--e-out),
              filter var(--s-orta) var(--e-out);
}

@media (hover: hover) {
  .unlu:hover .unlu__medya img { transform: scale(1.04); filter: grayscale(.15) contrast(1.05); }
  .unlu:hover .unlu__medya .medya__ph { transform: scale(1.04); }
}

.unlu__govde { display: grid; gap: .35rem; }

.unlu__alan {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.unlu__ad { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

.unlu__not {
  color: var(--ivory-50);
  font-size: .8125rem;
  line-height: 1.55;
}

/* --- Yasal metinler ----------------------------------------------------- */

.yasal {
  max-width: 46rem;
  margin-inline: auto;
  padding: calc(var(--basli-y) + var(--bolum-y)) var(--kenar) var(--bolum-y);
}

.yasal__basi {
  padding-bottom: var(--bosluk-4);
  margin-bottom: var(--bosluk-5);
  border-bottom: 1px solid var(--cizgi-soft);
}

.yasal__baslik {
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.08;
  text-transform: uppercase;
  margin-block: var(--bosluk-3) var(--bosluk-3);
}

.yasal__ozet { margin-bottom: var(--bosluk-3); }

.yasal__tarih {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.yasal__govde { display: grid; gap: var(--bosluk-5); }

.yasal__bolum-baslik {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-2);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  margin-bottom: var(--bosluk-2);
  padding-bottom: var(--bosluk-2);
  border-bottom: 1px solid var(--cizgi-soft);
}

.yasal__no {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  flex: none;
}

.yasal__bolum p {
  color: var(--ivory-70);
  line-height: 1.78;
  margin-bottom: var(--bosluk-2);
}

.yasal__bolum p:last-child { margin-bottom: 0; }

.yasal__iletisim-liste {
  display: grid;
  gap: .5rem;
  margin-top: var(--bosluk-2);
}

.yasal__iletisim-liste li { color: var(--ivory-50); }

.yasal__iletisim-liste a {
  color: var(--copper-2);
  transition: color var(--s-hizli) var(--e-out);
}

.yasal__iletisim-liste a:hover { color: var(--ivory); }

.yasal__diger {
  margin-top: var(--bolum-y);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
  display: grid;
  gap: var(--bosluk-2);
}

.yasal__diger ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-4);
}

/* === 60-p-randevu.css === */
/* =========================================================================
   Randevu sihirbazı.

   Klasik form görünümü yok: büyük tipografi, net seçimler.
   JS'siz tüm adımlar açık; JS varsa teker teker gösterilir.
   ========================================================================= */

.randevu-sayfa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk-5);
  padding: calc(var(--basli-y) + var(--bolum-y)) var(--kenar) var(--bolum-y);
  max-width: var(--tam);
  margin-inline: auto;
}

.randevu-sayfa__basi { grid-column: 1 / -1; margin-bottom: var(--bosluk-3); }
.randevu-sayfa__baslik { margin-block: var(--bosluk-3) var(--bosluk-2); }

.sihirbaz    { grid-column: 1 / span 8; }
.randevu-yan { grid-column: 10 / span 3; }

@media (max-width: 1024px) {
  .randevu-sayfa { grid-template-columns: 1fr; gap: var(--bosluk-4); }
  .sihirbaz, .randevu-yan, .randevu-sayfa__basi { grid-column: 1 / -1; }
}

/* --- İlerleme göstergesi ------------------------------------------------ */

.sihirbaz__ilerleme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  padding-bottom: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
  border-bottom: 1px solid var(--cizgi-soft);
}

.sihirbaz__ilerleme li {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
  transition: color var(--s-hizli) var(--e-out);
}

.sihirbaz__ilerleme li[data-etkin="1"] { color: var(--copper-2); }
.sihirbaz__ilerleme li[data-tamam="1"] { color: var(--ivory-50); }

/* JS yoksa ilerleme göstergesi yanıltıcı olur — gizle. */
html:not(.hareket) .sihirbaz__ilerleme { display: none; }

/* --- Adımlar ------------------------------------------------------------ */

.adim {
  border: 0;
  padding: 0;
  margin: 0 0 var(--bosluk-6);
  min-width: 0;    /* fieldset'in grid'i taşırmasını engeller */
}

.adim__baslik {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-2);
  padding: 0;
  margin-bottom: .6rem;
}

.adim__no {
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  color: var(--copper);
}

.adim__ad {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--iz-dar);
}

.adim__yardim {
  color: var(--ivory-50);
  margin-bottom: var(--bosluk-3);
}

/* --- Seçim kartları ----------------------------------------------------- */

.secim-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--bosluk-2);
}

.secim { position: relative; display: block; cursor: pointer; }

/* Girdi görsel olarak gizli ama klavye ve ekran okuyucu için yerinde. */
.secim input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.secim__ic {
  display: block;
  height: 100%;
  padding: var(--bosluk-3);
  border: 1px solid var(--cizgi);
  transition: border-color var(--s-hizli) var(--e-out),
              background-color var(--s-hizli) var(--e-out);
}

.secim:hover .secim__ic { border-color: var(--ivory-32); }

.secim input:checked + .secim__ic {
  border-color: var(--copper);
  background: var(--copper-16);
}

/* Odak halkası girdi gizli olduğu için kutuya taşınır. */
.secim input:focus-visible + .secim__ic {
  outline: 2px solid var(--copper-2);
  outline-offset: 2px;
}

.secim__ust {
  display: block;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .5rem;
}

.secim__ad {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: .45rem;
}

.secim__alt {
  display: block;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ivory-50);
}

/* --- Saat ızgarası ------------------------------------------------------ */

.saat-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: .5rem;
}

.saat { position: relative; display: block; cursor: pointer; }

.saat input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.saat__ic {
  display: block;
  padding: .9rem .5rem;
  text-align: center;
  border: 1px solid var(--cizgi);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-70);
  transition: border-color var(--s-hizli) var(--e-out),
              background-color var(--s-hizli) var(--e-out),
              color var(--s-hizli) var(--e-out);
}

.saat:hover .saat__ic { border-color: var(--ivory-32); color: var(--ivory); }

.saat input:checked + .saat__ic {
  border-color: var(--copper);
  background: var(--copper);
  color: var(--ink);
}

.saat input:focus-visible + .saat__ic {
  outline: 2px solid var(--copper-2);
  outline-offset: 2px;
}

/* --- Metin alanları ----------------------------------------------------- */

.alan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--bosluk-3);
}

.alan--genis { grid-column: 1 / -1; }

.alan { display: flex; flex-direction: column; gap: .5rem; }

.alan__etiket {
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.alan__ops {
  color: var(--ivory-32);
  letter-spacing: var(--iz-orta);
  /* Etiketle bitişik durmasın: PHP tarafındaki satır sonu boşluğa
     dönüşmediği için aralığı burada veriyoruz. */
  margin-inline-start: .4em;
}

.alan__girdi {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cizgi);
  padding: .7rem 0;
  color: var(--ivory);
  font-size: 1.05rem;
  transition: border-color var(--s-hizli) var(--e-out);
  border-radius: 0;              /* iOS'un kendi yuvarlamasını iptal eder */
  -webkit-appearance: none;
  appearance: none;
}

.alan__girdi::placeholder { color: var(--ivory-32); }

.alan__girdi:focus {
  outline: none;
  border-bottom-color: var(--copper);
}

.alan__girdi:focus-visible { outline: none; }   /* alt çizgi zaten gösteriyor */

textarea.alan__girdi { resize: vertical; min-height: 5rem; }

/* Tarih girdisinin takvim ikonu koyu zeminde görünmüyor. */
.alan__girdi[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .5;
  cursor: pointer;
}

.alan__girdi[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.alan--tarih { max-width: 18rem; }

/* Hatalı alan */
.alan__girdi[aria-invalid="true"],
.adim[data-hatali="1"] .secim__ic { border-color: #b4472f; }

.alan__hata,
.adim__hata {
  font-size: var(--t-mini);
  color: #d9714f;
  letter-spacing: var(--iz-orta);
}

/* --- Özet --------------------------------------------------------------- */

.ozet {
  margin-top: var(--bosluk-4);
  padding: var(--bosluk-3);
  border: 1px solid var(--copper-40);
  background: var(--ink-2);
}

.ozet[hidden] { display: none; }

.ozet__baslik {
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--bosluk-2);
}

.ozet__liste { display: grid; gap: .55rem; }

.ozet__liste > div {
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cizgi-soft);
  font-size: .9375rem;
}

.ozet__liste dt { color: var(--ivory-50); }
.ozet__liste dd { color: var(--ivory); text-align: right; }

.sihirbaz__kvkk {
  margin-top: var(--bosluk-3);
  font-size: var(--t-mini);
  color: var(--ivory-32);
  line-height: 1.6;
  max-width: 48ch;
}

/* --- Gezinme ------------------------------------------------------------ */

.sihirbaz__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.sihirbaz__alt [hidden] { display: none; }

.sihirbaz__durum {
  margin-top: var(--bosluk-2);
  font-size: var(--t-mini);
  letter-spacing: var(--iz-orta);
  color: var(--copper-2);
  min-height: 1.2em;
}

/* --- Başarı ekranı ------------------------------------------------------ */

.randevu-tamam {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bosluk-3);
  padding-block: var(--bolum-y);
}

.randevu-tamam[hidden] { display: none; }

.randevu-tamam .buyuk-baslik {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Yan sütun ---------------------------------------------------------- */

.randevu-yan__blok {
  position: sticky;
  top: calc(var(--basli-y) + var(--bosluk-3));
  padding: var(--bosluk-3);
  border: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.randevu-yan__blok .govde { font-size: .875rem; margin-bottom: var(--bosluk-3); }

.randevu-yan__liste { display: grid; gap: .7rem; }

.randevu-yan__liste li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--cizgi-soft);
}

.randevu-yan__liste span {
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.randevu-yan__liste a {
  font-size: .9375rem;
  color: var(--ivory-70);
  transition: color var(--s-hizli) var(--e-out);
}

.randevu-yan__liste a:hover { color: var(--copper-2); }

@media (max-width: 1024px) {
  .randevu-yan__blok { position: static; }
}

/* --- Sonuç sayfası ------------------------------------------------------ */

.randevu-sonuc {
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--basli-y) + var(--bolum-y));
  max-width: var(--tam);
  margin-inline: auto;
}

.randevu-sonuc .buyuk-baslik { margin-block: var(--bosluk-3); }
.randevu-sonuc .govde { margin-bottom: var(--bosluk-4); }
.randevu-sonuc__ozet { max-width: 32rem; margin-bottom: var(--bosluk-4); }
.randevu-sonuc__bag { margin-top: var(--bosluk-2); }

.hata-liste {
  display: grid;
  gap: .5rem;
  margin-bottom: var(--bosluk-4);
  max-width: 40rem;
}

.hata-liste li {
  padding: .8rem 1rem;
  border-left: 2px solid #b4472f;
  background: var(--ink-2);
  color: var(--ivory-70);
  font-size: .9375rem;
}

/* =========================================================================
   Dış randevu sistemi — formun alternatifi, rakibi değil.
   Bu yüzden sayfanın üstünde ama daha sakin bir yüzeyde durur.
   ========================================================================= */

.dis-randevu {
  grid-column: 1 / -1;          /* randevu-sayfa 12 sütunlu bir ızgara */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bosluk-4);
  align-items: center;
  margin-bottom: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--cizgi-soft);
  background: var(--ink-2);
}

.dis-randevu__metin {
  margin-top: var(--bosluk-2);
  max-width: 56ch;
  color: var(--ivory-50);
  font-size: .9375rem;
  line-height: 1.65;
}

.dis-randevu__bag {
  display: grid;
  justify-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--ivory-16);
  transition: border-color var(--s-ui) var(--e-out),
              background var(--s-ui) var(--e-out);
}

.dis-randevu__bag:hover,
.dis-randevu__bag:focus-visible {
  border-color: var(--copper-40);
  background: var(--ink-3);
}

.dis-randevu__logo {
  width: clamp(9rem, 14vw, 12rem);
  height: auto;
}

.dis-randevu__cagri {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-mini);
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper-2);
}

.dis-randevu__ok { transition: transform var(--s-hizli) var(--e-out); }
.dis-randevu__bag:hover .dis-randevu__ok { transform: translate(3px, -3px); }

@media (max-width: 860px) {
  .dis-randevu {
    grid-template-columns: 1fr;
    padding-inline: var(--bosluk-3);
  }
  .dis-randevu__bag { justify-self: stretch; }
}

/* === 60-p-salon-detay.css === */
/* =========================================================================
   Salon detayı — hero, galeri, bilgi ızgarası, konum kartı.
   Hero'nun taşıyıcı kuralları 60-p-icerik.css'tedir; burada yalnızca
   bu sayfaya özgü katmanlar var.
   ========================================================================= */

.salon-hero { min-height: min(94svh, 58rem); }

/* --- İz (breadcrumb) ----------------------------------------------------- */

.salon-hero__iz {
  position: absolute;
  top: calc(var(--basli-y) + var(--bosluk-1));
  left: var(--kenar);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.salon-hero__iz a { color: var(--ivory-50); transition: color var(--s-hizli) var(--e-out); }
.salon-hero__iz a:hover { color: var(--copper-2); }
.salon-hero__iz [aria-current] { color: var(--copper-2); }

.salon-hero__marka {
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  letter-spacing: var(--iz-orta);
  color: var(--ivory-70);
  margin-top: var(--bosluk-2);
}

.salon-hero__baslik { margin-block: .2rem var(--bosluk-3); }

.salon-hero__cagri { margin-top: var(--bosluk-2); }

/* Aşağı kaydır: sayfanın devamı olduğunu söyleyen sessiz işaret. */
.salon-hero__kaydir {
  position: absolute;
  left: 50%;
  bottom: var(--bosluk-3);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
  transition: color var(--s-hizli) var(--e-out);
}

.salon-hero__kaydir:hover { color: var(--ivory); }

.salon-hero__ok {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(to bottom, var(--copper), transparent);
}

.hareket .salon-hero__ok { animation: salon-kaydir 2.6s var(--e-yumusak) infinite; }

@keyframes salon-kaydir {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

@media (max-width: 720px) {
  .salon-hero__kaydir { display: none; }
}

/* --- Bölüm başlığı (küçük, iki uçlu) ------------------------------------- */

.salon-bolum-basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-inline: var(--kenar);
  margin-bottom: var(--bosluk-3);
}

.salon-bolum-basi h2 { margin: 0; color: var(--copper-2); font-size: .6875rem; }
.salon-bolum-basi__sag { color: var(--ivory-32); }

.bolum:not(.bolum--tasma) > .salon-bolum-basi { padding-inline: 0; }

/* --- Söz bölümü ---------------------------------------------------------- */

.salon-soz .etiketler { margin-block: var(--bosluk-1); }

/* --- Galeri -------------------------------------------------------------- */

.salon-galeri__ray { align-items: stretch; }

.salon-galeri__oge {
  width: clamp(15rem, 26vw, 24rem);
  overflow: hidden;
}

.salon-galeri__oge .medya { height: 100%; }

.salon-galeri__oge img,
.salon-galeri__oge .medya__ph {
  transition: transform var(--s-yavas) var(--e-out), filter var(--s-orta) var(--e-out);
}

@media (hover: hover) {
  .salon-galeri__oge:hover img { transform: scale(1.04); filter: grayscale(.15) contrast(1.04); }
}

.salon-galeri__noktalar {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: var(--bosluk-3);
}

.salon-galeri__nokta {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ivory-16);
  transition: background var(--s-hizli) var(--e-out), transform var(--s-hizli) var(--e-out);
}

.salon-galeri__nokta:hover { background: var(--ivory-50); }
.salon-galeri__nokta[data-etkin] { background: var(--copper); transform: scale(1.35); }

/* --- Hizmet / bilgi / konum ---------------------------------------------- */

.salon-bilgi__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
  gap: var(--bosluk-5) var(--bosluk-4);
  align-items: start;
}

.salon-bilgi__blok {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
}

.salon-bilgi__blok > h3 { margin: 0; color: var(--copper-2); font-size: .6875rem; }

@media (max-width: 1024px) {
  .salon-bilgi__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salon-bilgi__blok--konum { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .salon-bilgi__izgara { grid-template-columns: 1fr; }
}

.salon-hizmet {
  display: grid;
  list-style: none;
}

.salon-hizmet li { border-bottom: 1px solid var(--cizgi-soft); }

.salon-hizmet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding-block: .85rem;
  font-size: .9375rem;
  letter-spacing: var(--iz-orta);
  text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--s-hizli) var(--e-out), padding-left var(--s-ui) var(--e-out);
}

.salon-hizmet__ok {
  color: var(--ivory-32);
  transition: transform var(--s-ui) var(--e-out), color var(--s-hizli) var(--e-out);
}

@media (hover: hover) {
  .salon-hizmet a:hover { color: var(--ivory); padding-left: .5rem; }
  .salon-hizmet a:hover .salon-hizmet__ok { transform: translateX(5px); color: var(--copper-2); }
}

.salon-kunye__saat {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  color: var(--ivory-50);
}

.salon-kunye__saat + .salon-kunye__saat { margin-top: .25rem; }
.salon-kunye__saat b { color: var(--ivory); font-weight: 400; font-variant-numeric: tabular-nums; }

/* --- Konum kartı --------------------------------------------------------- */

.salon-konum {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--cizgi-soft);
  color: var(--ivory-16);
}

.salon-konum__zemin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.salon-konum__pin {
  position: relative;
  color: var(--copper);
  filter: drop-shadow(0 0 1.2rem rgba(184, 115, 51, .5));
}

.salon-konum__pin .ikon { width: 2rem; height: 2rem; }

.salon-konum__etiket {
  position: relative;
  margin-top: .4rem;
  font-size: .625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-70);
  text-align: center;
  padding-inline: var(--bosluk-2);
}

.salon-konum__ac {
  position: absolute;
  right: var(--bosluk-2);
  bottom: var(--bosluk-2);
  padding: .55rem .9rem;
  border: 1px solid var(--ivory-16);
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(6px);
  font-size: .5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--s-hizli) var(--e-out), border-color var(--s-hizli) var(--e-out);
}

.salon-konum__ac:hover { color: var(--copper-2); border-color: var(--copper-40); }

/* Google gömme açık temadır; sayfayla aynı dile çevrilir. */
.salon-konum__cerceve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) grayscale(35%) contrast(.9) brightness(.95);
}

/* --- Yakındaki salonlar -------------------------------------------------- */

/* Numaralar burada sıfırdan başlar — liste sayfasının sayacından bağımsız. */
.salon-yakin .salon-siralar {
  border-top: 1px solid var(--cizgi-soft);
  counter-reset: salon;
}

/* === 60-p-salonlar.css === */
/* =========================================================================
   Salonlar sayfası — giriş + harita + süzgeç sekmeleri + salon listesi.
   ========================================================================= */

/* --- Giriş: solda söz, sağda harita -------------------------------------- */

.salon-giris {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--bosluk-5);
  align-items: center;
  padding: calc(var(--basli-y) + var(--bosluk-5)) var(--kenar) var(--bolum-y);
  min-height: min(92svh, 60rem);
}

.salon-giris__baslik {
  margin-top: var(--bosluk-3);
  text-transform: uppercase;
}

/* İkinci satır ("KA.") serif ve daha iri — mizanpajın imzası. */
.salon-giris__baslik .satir:last-child .satir__ic {
  font-family: var(--font-serif);
  font-size: 1.32em;
  letter-spacing: var(--iz-dar);
}

.salon-giris__ozet {
  margin-top: var(--bosluk-3);
  max-width: 34ch;
  color: var(--ivory-50);
}

.salon-giris__olcu {
  display: flex;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-4);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi-soft);
}

.salon-giris__olcu dt {
  font-size: 0.625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-32);
}

.salon-giris__olcu dd {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ivory);
}

.salon-giris__bag {
  margin-top: var(--bosluk-4);
}

@media (max-width: 1023px) {
  .salon-giris {
    grid-template-columns: 1fr;
    gap: var(--bosluk-4);
    min-height: 0;
    padding-top: calc(var(--basli-y) + var(--bosluk-4));
  }
  .salon-giris__ozet {
    max-width: none;
  }
}

/* --- Harita --------------------------------------------------------------
   Mobilde gizlenir: dokunmatikte nokta hedefleri fazla küçük kalır ve
   altındaki liste zaten aynı işi yapar.
   ------------------------------------------------------------------------ */

/* --- Harita üstü ülke sekmeleri ----------------------------------------- */

.harita-sekme {
  display: none; /* harita gibi: yalnızca masaüstünde */
}

@media (min-width: 900px) {
  .harita-sekme {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-bottom: var(--bosluk-2);
  }
}

.harita-sekme__oge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cizgi-soft);
  font-size: 0.625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  transition:
    color var(--s-hizli) var(--e-out),
    border-color var(--s-hizli) var(--e-out),
    background-color var(--s-hizli) var(--e-out);
}

.harita-sekme__oge:hover,
.harita-sekme__oge:focus-visible {
  color: var(--ivory);
  border-color: var(--ivory-32);
}

.harita-sekme__oge[aria-current] {
  color: var(--copper-2);
  border-color: var(--copper-40);
  background: var(--copper-16);
}

.harita-sekme__adet {
  font-size: 0.5625rem;
  color: var(--ivory-32);
}

.harita-sekme__oge[aria-current] .harita-sekme__adet {
  color: var(--copper);
}

/* --- Harita ------------------------------------------------------------- */

.harita {
  display: none;
}

@media (min-width: 900px) {
  .harita {
    display: block;
    position: relative;
  }
}

.harita__kat {
  position: relative;
}
.harita__kat[hidden] {
  display: none;
}

.harita__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.harita__il {
  fill: rgba(244, 241, 234, 0.028);
  stroke: rgba(244, 241, 234, 0.1);
  stroke-width: 0.8;
  stroke-linejoin: round;
  transition:
    fill var(--s-orta) var(--e-out),
    stroke var(--s-orta) var(--e-out);
}

/* Salonu olan il, süzgeç o ile geldiğinde bakır ışığı alır. */
.harita[data-vurgu] .harita__il[data-il] {
  fill: rgba(244, 241, 234, 0.018);
}

.harita__il[data-vurgu] {
  fill: rgba(184, 115, 51, 0.16);
  stroke: var(--copper-40);
}

/* --- Noktalar ------------------------------------------------------------ */

.harita__nokta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--ivory-50);
}

.harita__nabiz {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow:
    0 0 0 0 var(--copper-40),
    0 0 1.2rem 0.2rem rgba(184, 115, 51, 0.45);
  transition: transform var(--s-hizli) var(--e-out);
}

.hareket .harita__nabiz {
  animation: harita-nabiz 3.4s var(--e-out) infinite;
  animation-delay: calc(var(--gecikme, 0) * 1s);
}

@keyframes harita-nabiz {
  0%,
  70%,
  100% {
    box-shadow:
      0 0 0 0 rgba(184, 115, 51, 0.3),
      0 0 1.2rem 0.2rem rgba(184, 115, 51, 0.35);
  }
  35% {
    box-shadow:
      0 0 0 0.9rem rgba(184, 115, 51, 0),
      0 0 1.2rem 0.2rem rgba(184, 115, 51, 0.35);
  }
}

.harita__ad {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  transition: color var(--s-hizli) var(--e-out);
}

.harita__nokta[data-yon="sag"] .harita__ad {
  left: 100%;
  margin-left: 0.1rem;
}
.harita__nokta[data-yon="sol"] .harita__ad {
  right: 100%;
  margin-right: 0.1rem;
}
.harita__nokta[data-yon="ust"] .harita__ad {
  bottom: 100%;
  margin-bottom: -0.2rem;
}
.harita__nokta[data-yon="alt"] .harita__ad {
  top: 100%;
  margin-top: -0.2rem;
}

.harita__adet {
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.2rem;
  border: 1px solid var(--copper-40);
  border-radius: 999px;
  font-size: 0.5rem;
  letter-spacing: 0;
  color: var(--copper-2);
}

.harita__nokta:hover,
.harita__nokta:focus-visible,
.harita__nokta[data-etkin="1"] {
  color: var(--ivory);
}

.harita__nokta:hover .harita__nabiz,
.harita__nokta:focus-visible .harita__nabiz,
.harita__nokta[data-etkin="1"] .harita__nabiz {
  transform: scale(1.55);
  animation: none;
}

.harita__nokta[data-etkin="1"] .harita__nabiz {
  background: var(--copper-2);
}

@media (prefers-reduced-motion: reduce) {
  .harita__nabiz {
    animation: none !important;
  }
}

/* --- Liste bölümü -------------------------------------------------------- */

.salon-liste {
  padding-block: 0;
}

.salon-liste__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3) var(--bosluk-4);
  padding: var(--bosluk-4) var(--kenar);
  border-bottom: 1px solid var(--cizgi-soft);
}

.salon-liste__baslik {
  margin: 0;
  color: var(--copper-2);
  font-size: 0.6875rem;
}

/* Sekmeler: ülke solda, şehirler sağda; ikisi de aynı dil. */
.salon-sekme {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
}

.salon-sekme--ulke {
  gap: 0.15rem 0.35rem;
  padding-inline-end: var(--bosluk-3);
  border-inline-end: 1px solid var(--cizgi-soft);
}

.salon-sekme--sehir {
  margin-inline-start: auto;
}
.salon-sekme[hidden] {
  display: none;
}

.salon-sekme__oge {
  position: relative;
  padding: 0.45rem 0;
  font-size: 0.6875rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
  transition: color var(--s-hizli) var(--e-out);
}

.salon-sekme--ulke .salon-sekme__oge {
  padding-inline: 0.7rem;
}

.salon-sekme__oge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--s-ui) var(--e-out);
}

.salon-sekme--ulke .salon-sekme__oge::after {
  left: 0.7rem;
  right: 0.7rem;
}

.salon-sekme__oge:hover,
.salon-sekme__oge:focus-visible {
  color: var(--ivory);
}

.salon-sekme__oge[aria-current] {
  color: var(--copper-2);
}
.salon-sekme__oge[aria-current]::after {
  transform: scaleX(1);
}

.salon-sekme__adet {
  margin-left: 0.35rem;
  font-size: 0.5625rem;
  color: var(--ivory-32);
}

@media (max-width: 900px) {
  .salon-liste__basi {
    gap: var(--bosluk-2);
  }
  .salon-sekme--sehir {
    margin-inline-start: 0;
    width: 100%;
    gap: 0.15rem 1rem;
  }
  .salon-sekme--ulke {
    border-inline-end: 0;
    padding-inline-end: 0;
  }
}

/* Sayaç: yalnızca GÖRÜNEN kayıtlar numara alır. */
.salon-liste__govde {
  counter-reset: salon;
}

.salon-one__no::before,
.salon-sira__no::before {
  counter-increment: salon;
  content: counter(salon, decimal-leading-zero);
}

/* --- Öne çıkan salon ----------------------------------------------------- */

.salon-one {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.75fr);
  border-bottom: 1px solid var(--cizgi-soft);
}

.salon-one[hidden] {
  display: none;
}

.salon-one__medya {
  position: relative;
  display: block;
  overflow: hidden;
  border-inline-end: 1px solid var(--cizgi-soft);
}

.salon-one__medya .medya {
  height: 100%;
}

.salon-one__rozet {
  position: absolute;
  top: var(--bosluk-2);
  left: var(--bosluk-2);
  padding: 0.4rem 0.7rem;
  background: var(--copper);
  color: var(--ink);
  font-size: 0.5625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
}

.salon-one__govde,
.salon-one__kunye {
  padding: var(--bosluk-4) var(--bosluk-4) var(--bosluk-4) var(--bosluk-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bosluk-2);
}

.salon-one__kunye {
  border-inline-start: 1px solid var(--cizgi-soft);
  gap: var(--bosluk-3);
}

.salon-one__no,
.salon-sira__no {
  font-size: 0.6875rem;
  letter-spacing: var(--iz-genis);
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}

.salon-one__sehir {
  font-size: 0.6875rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--ivory-50);
}

.salon-one__ad {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1;
}

.salon-one__ad a {
  color: inherit;
}
.salon-one__ad a:hover {
  color: var(--copper-2);
}

.salon-one__ozet {
  color: var(--ivory-50);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 34ch;
}

.salon-one__cagri {
  margin-top: var(--bosluk-2);
}

/* Künye listesi: ikon + metin, iki sütunlu hizalı grid. */
.salon-kunye {
  display: grid;
  gap: var(--bosluk-2);
}

.salon-kunye__oge {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ivory-70);
}

.salon-kunye__oge address {
  font-style: normal;
}
.salon-kunye__oge a {
  color: inherit;
  transition: color var(--s-hizli) var(--e-out);
}
.salon-kunye__oge a:hover {
  color: var(--copper-2);
}

.salon-kunye__ikon {
  color: var(--copper);
}
.ikon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

@media (max-width: 1100px) {
  .salon-one {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .salon-one__medya {
    grid-row: span 2;
  }
  .salon-one__kunye {
    border-inline-start: 0;
    border-top: 1px solid var(--cizgi-soft);
    padding-top: var(--bosluk-3);
  }
}

@media (max-width: 720px) {
  .salon-one {
    grid-template-columns: 1fr;
  }
  .salon-one__medya {
    grid-row: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--cizgi-soft);
  }
  .salon-one__govde,
  .salon-one__kunye {
    padding-inline: var(--kenar);
  }
}

/* --- Satırlar ------------------------------------------------------------ */

.salon-siralar {
  list-style: none;
}

.salon-sira {
  border-bottom: 1px solid var(--cizgi-soft);
}
.salon-sira[hidden] {
  display: none;
}

.salon-sira__bag {
  display: grid;
  grid-template-columns: 13rem 3.5rem minmax(9rem, 1fr) minmax(0, 1.1fr) minmax(
      0,
      0.6fr
    ) 3rem;
  align-items: center;
  gap: var(--bosluk-3);
  height: 8rem;
  padding-inline-end: var(--kenar);
  color: inherit;
  transition: background var(--s-ui) var(--e-out);
}

@media (hover: hover) {
  .salon-sira__bag:hover {
    background: var(--ink-2);
  }
  .salon-sira__bag:hover .salon-sira__ok {
    transform: translateX(6px);
    color: var(--copper-2);
  }
  .salon-sira__bag:hover .salon-sira__ad {
    color: var(--copper-2);
  }
}

/* Küçük görsel satırın tam boyunu kaplar: satır yüksekliğini görsel değil,
   metin belirler. Aksi halde her satır farklı yükseklikte olur. */
.salon-sira__medya {
  display: block;
  align-self: stretch;
  overflow: hidden;
}

.salon-sira__medya .medya {
  height: 100%;
  aspect-ratio: auto !important;
}

.salon-sira__kimlik {
  display: grid;
  gap: 0.35rem;
}

.salon-sira__sehir {
  font-size: 0.625rem;
  letter-spacing: var(--iz-genis);
  text-transform: uppercase;
  color: var(--copper);
}

.salon-sira__ad {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
  transition: color var(--s-hizli) var(--e-out);
}

.salon-sira__ozet {
  color: var(--ivory-50);
  font-size: 0.8125rem;
  line-height: 1.65;
  max-width: 34ch;
}

.salon-sira__iletisim {
  display: grid;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ivory-70);
  font-variant-numeric: tabular-nums;
}

.salon-sira__saat {
  color: var(--ivory-32);
}

.salon-sira__ok {
  justify-self: end;
  color: var(--ivory-32);
  transition:
    transform var(--s-ui) var(--e-out),
    color var(--s-hizli) var(--e-out);
}

@media (max-width: 1200px) {
  .salon-sira__bag {
    grid-template-columns: 10rem 3rem minmax(8rem, 1fr) minmax(0, 0.8fr) 2.5rem;
  }
  .salon-sira__ozet {
    display: none;
  }
}

@media (max-width: 720px) {
  .salon-sira__bag {
    grid-template-columns: 7rem 1fr auto;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2) var(--kenar) var(--bosluk-2) 0;
  }
  .salon-sira__no {
    display: none;
  }
  .salon-sira__iletisim {
    grid-column: 2;
    font-size: 0.75rem;
  }
}

.salon-liste__bos {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-5) var(--kenar);
  color: var(--ivory-50);
}

.salon-liste__bos[hidden] {
  display: none;
}