/* ============================================================
   STİLMERKEZİM — Tasarım Sistemi
   Kişisel bakım & güzellik randevu platformu
   Font: Manrope (variable)  ·  h1 700 · h2 650 · body 400 · btn 600
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENLAR
   ------------------------------------------------------------ */
:root {
  /* Marka renkleri */
  --ink: #1a1614;
  --ink-soft: #6b625c;
  --ink-soluk: #9a8f88;
  --cream: #fbf8f5;
  --surface: #ffffff;
  --surface-2: #f6f1ec;
  --line: #e8e0d8;
  --line-strong: #d8cec3;

  --marka: #a85a3c;
  --marka-koyu: #8c4730;
  --marka-acik: #f7ece6;
  --vurgu: var(--marka);
  --vurgu-koyu: var(--marka-koyu);
  --vurgu-acik: var(--marka-acik);

  /* Durum renkleri */
  --basari: #2f7a4d;
  --basari-zemin: #e6f2ea;
  --uyari: #a9741a;
  --uyari-zemin: #fbf1de;
  --tehlike: #b3402f;
  --tehlike-zemin: #fbeae6;
  --bilgi: #2c6b7a;
  --bilgi-zemin: #e4eff2;
  --notr: #6b625c;
  --notr-zemin: #efeae5;

  /* Ölçek */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-tam: 999px;

  --golge-1: 0 1px 2px rgba(26, 22, 20, .05);
  --golge-2: 0 2px 10px rgba(26, 22, 20, .06);
  --golge-3: 0 10px 34px rgba(26, 22, 20, .10);

  --gecis: .18s cubic-bezier(.4, 0, .2, 1);

  /* Geriye uyumluluk: eski değişken adları */
  --birincil: var(--marka);
  --birincil-koyu: var(--marka-koyu);
  --yazi: var(--ink);
  --gri: var(--ink-soft);
  --arka: var(--cream);
  --kart: var(--surface);
  --kenar: var(--line);
}

/* Mağaza kurumsal kimlik paleti — sınırlı, onaylı seçenekler */
.tema-kil   { --vurgu: #a85a3c; --vurgu-koyu: #8c4730; --vurgu-acik: #f7ece6; }
.tema-gul   { --vurgu: #a4455f; --vurgu-koyu: #873648; --vurgu-acik: #fbeaee; }
.tema-erik  { --vurgu: #6b4a7a; --vurgu-koyu: #563a62; --vurgu-acik: #f1eaf4; }
.tema-indigo{ --vurgu: #3f4e8c; --vurgu-koyu: #313e73; --vurgu-acik: #eaeef8; }
.tema-mavi  { --vurgu: #2c6b7a; --vurgu-koyu: #22555f; --vurgu-acik: #e6f0f2; }
.tema-yesil { --vurgu: #3d6b4a; --vurgu-koyu: #2f5439; --vurgu-acik: #e9f2ea; }
.tema-kum   { --vurgu: #8a6a2f; --vurgu-koyu: #6d5324; --vurgu-acik: #f6efdd; }
.tema-grafit{ --vurgu: #45484d; --vurgu-koyu: #35383c; --vurgu-acik: #edeef0; }

/* ------------------------------------------------------------
   2. SIFIRLAMA & TEMEL
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1; }

img { max-width: 100%; display: block; }
a { color: var(--vurgu); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--vurgu-koyu); }

::selection { background: var(--vurgu-acik); color: var(--vurgu-koyu); }

:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   3. TIPOGRAFİ
   ------------------------------------------------------------ */
h1, .h1 {
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.022em;
}
h2, .h2 {
  font-weight: 650;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.016em;
}
h3, .h3 {
  font-weight: 650;
  font-size: 1.12rem;
  line-height: 1.35;
  letter-spacing: -.008em;
}
h4, .h4 { font-weight: 650; font-size: 1rem; line-height: 1.4; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

.capt, small { font-weight: 400; font-size: .82rem; color: var(--ink-soft); }
.baslik, .alt-baslik { font-weight: 400; color: var(--ink-soft); }
.mini-etiket {
  display: inline-block;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vurgu);
}

/* ------------------------------------------------------------
   4. YERLEŞİM
   ------------------------------------------------------------ */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container-dar { max-width: 780px; }
.container-genis { max-width: 1440px; }

/* Dikey dolgu. Not: main her zaman "container" sinifini da tasiyor ve
   .container { padding: 0 24px } sinif seciciliği (0,1,0) main'in element
   seciciliginden (0,0,1) guclu oldugu icin sadece "main { padding }" yazmak
   bu dolguyu sessizce ezerdi; bu yuzden secici bilincli olarak guclendirildi.
   Aksi halde icerik ust cubuga ve footera yapisip kaliyordu. */
main.container { padding-top: 36px; padding-bottom: 64px; }

.bolum { margin-bottom: 56px; }
.bolum:last-child { margin-bottom: 0; }
.bolum-basligi { margin-bottom: 22px; }
.bolum-basligi .h2 { margin-bottom: 6px; }

.izgara-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.iki-sutun { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; align-items: start; }
.iki-sutun-esit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.üç-sutun { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .iki-sutun, .iki-sutun-esit { grid-template-columns: 1fr; }
  .üç-sutun { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   5. BAŞLIK / ÜST ÇUBUK
   ------------------------------------------------------------ */
.topbar {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -.015em;
  text-decoration: none;
}
.logo:hover { color: #fff; }
.logo-isaret {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--marka), var(--marka-koyu));
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 700;
  flex-shrink: 0;
}
/* Logo görseli de harfli işaret gibi standart bir kareye oturur: yüklenen
   görsel ne kadar dikdörtgen olursa olsun 30x30'a kırpılır, köşeleri yuvarlatılır
   ve üst çubuk yüksekliğini bozmaz. */
.logo-img {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
  background: var(--surface-2);
}

.topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; position: relative; }
/* Yalnizca ust seviye baglantilar bu stili alir; alt menu kendi
   gorunumunu .menu-alt icinde tasir. */
.topnav > a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: background var(--gecis), color var(--gecis);
}
.topnav > a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.topnav > a.aktif { color: #fff; background: rgba(255, 255, 255, .12); }

/* --- Ust menu acilir listesi (orn. Ayarlar > Hizmetlerim/Calisanlarim/Galeri) --- */
.menu-oku { position: relative; display: flex; align-items: center; }
.menu-oku > a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  padding: 8px 6px 8px 12px;
  border-radius: var(--r-sm);
  transition: background var(--gecis), color var(--gecis);
}
.menu-oku > a:hover, .menu-oku.acik > a { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-oku > a.aktif, .menu-oku.aktif > a { color: #fff; background: rgba(255, 255, 255, .12); }
.menu-oku-dugme {
  display: grid; place-items: center;
  width: 26px; height: 30px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgba(255, 255, 255, .68);
  cursor: pointer;
}
.menu-oku-dugme:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-oku-dugme:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.menu-ok {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--gecis);
}
.menu-oku.acik .menu-ok { transform: rotate(180deg); }

/* --- Ikon menu butonu (magaza Ayarlari) ---
   Metin yerine ikon; menu menusunun sag ucunda oldugu icin acilir liste
   de saga yaslanir, yoksa ekrandan tasabilir. Ok yerine ikon oldugu icin
   .menu-ok donme kurali burada gecerli degil; durumu dugmenin kendi
   zemini ve rengi belli ediyor. */
.menu-ikon-dugme {
  width: 36px;
  height: 32px;
  margin-left: 0;
  color: rgba(255, 255, 255, .68);
}
.menu-ikon-dugme:hover,
.menu-oku.menu-ikon.acik > .menu-ikon-dugme { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-oku.menu-ikon.aktif > .menu-ikon-dugme { color: #fff; background: rgba(255, 255, 255, .12); }
.menu-ikon-svg { display: block; }
.menu-ikon > .menu-alt { left: auto; right: 0; }

.menu-alt {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--golge-3);
  display: none;
}
/* Fare ve klavye ile acma: odak ust linkteyken submenu gorunur olur,
   boylece Tab ile iceri gecilebilir. .acik dokunmatik icin JS ile gelir. */
.menu-oku:hover .menu-alt,
.menu-oku:focus-within .menu-alt,
.menu-oku.acik .menu-alt { display: block; }
.menu-alt a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
}
.menu-alt a:hover { background: var(--surface-2); color: var(--ink); }
.menu-alt a.aktif { background: var(--marka-acik); color: var(--marka-koyu); font-weight: 650; }

.header-eylem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Alt menü (panel sekmeleri) */
.panel-menu {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 66px;
  z-index: 40;
}
.panel-menu-inner { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel-menu a {
  flex-shrink: 0;
  padding: 13px 15px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.panel-menu a:hover { color: var(--vurgu); }
.panel-menu a.aktif { color: var(--vurgu); border-bottom-color: var(--vurgu); }

/* ------------------------------------------------------------
   6. BUTONLAR — 3 seviye hiyerarşi
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 1. Birincil — "Randevu Al" */
.btn-birincil, .btn-primary { background: var(--vurgu); color: #fff; }
.btn-birincil:hover, .btn-primary:hover { background: var(--vurgu-koyu); color: #fff; }

/* 2. İkincil — "Profili Gör" */
.btn-ikincil, .btn-outline {
  background: var(--vurgu-acik);
  color: var(--vurgu-koyu);
  border-color: transparent;
}
.btn-ikincil:hover, .btn-outline:hover { background: var(--vurgu); color: #fff; }

/* 3. Üçüncül — "Detayları Gör" */
.btn-ucuncul {
  background: transparent;
  color: var(--vurgu-koyu);
  padding-left: 4px;
  padding-right: 4px;
  font-weight: 600;
}
.btn-ucuncul::after { content: "→"; transition: transform var(--gecis); }
.btn-ucuncul:hover { background: transparent; color: var(--vurgu); }
.btn-ucuncul:hover::after { transform: translateX(3px); }

/* Durum butonları */
.btn-danger { background: var(--tehlike); color: #fff; }
.btn-danger:hover { background: #983626; color: #fff; }
.btn-success { background: var(--basari); color: #fff; }
.btn-success:hover { background: #26643e; color: #fff; }
.btn-warning { background: var(--uyari); color: #fff; }
.btn-warning:hover { background: #8a5c12; color: #fff; }
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #322b27; color: #fff; }
.btn-notr { background: var(--notr-zemin); color: var(--ink-soft); }
.btn-notr:hover { background: var(--line); color: var(--ink); }

.btn-blok { display: flex; width: 100%; }
.btn-kucuk { padding: 7px 13px; font-size: .81rem; border-radius: 7px; }
.btn-mini { padding: 4px 10px; font-size: .75rem; border-radius: 6px; }
.btn-ikon { padding: 8px; width: 34px; height: 34px; }

/* ------------------------------------------------------------
   7. FORM
   ------------------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: 15px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .87rem; color: var(--ink); }
.form input, .form select, .form textarea, .girdi {
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .93rem;
  font-weight: 400;
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.form input:focus, .form select:focus, .form textarea:focus, .girdi:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-acik);
}
.form textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b625c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-uc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aciklama { font-weight: 400; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }

@media (max-width: 640px) { .form-iki, .form-uc { grid-template-columns: 1fr; } }

.onay-satir {
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  font-weight: 500 !important;
  cursor: pointer;
}
.onay-satir input { width: auto; accent-color: var(--vurgu); }
.onay-kutu { align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-sm); }

.hizmetler { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.hizmetler label {
  flex-direction: row; align-items: center; gap: 8px;
  font-weight: 500; font-size: .88rem;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color var(--gecis), background var(--gecis);
}
.hizmetler label:hover { border-color: var(--vurgu); background: var(--vurgu-acik); }
.hizmetler input { width: auto; accent-color: var(--vurgu); }

.dosya-alani { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dosya-onizleme { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.dosya-onizleme-dar { width: 46px; height: 46px; }
.dosya-onizleme-genis { width: 100%; height: 150px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.tema-nokta { width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.chip-secili .tema-nokta { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

/* ------------------------------------------------------------
   8. KART
   ------------------------------------------------------------ */
.kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--golge-1);
}
.kart h3 { margin-bottom: 8px; }
.kart p { color: var(--ink-soft); font-size: .93rem; }
.kart-baslik { margin-bottom: 20px; text-align: center; font-weight: 650; }
.kart-baslik-sol { margin-bottom: 20px; font-weight: 650; }
.kart-sinirla { max-width: 520px; margin: 0 auto; }
.kart-genis { max-width: 860px; margin: 0 auto; }
.kart-basi { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }

.baslik-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.baslik-satir h2 { margin: 0; }

.bos-durum {
  text-align: center;
  padding: 44px 24px;
  color: var(--ink-soft);
  font-size: .92rem;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------
   9. TABLOLAR
   ------------------------------------------------------------ */
.tablo-kapsayici { overflow-x: auto; border-radius: var(--r-md); }
.tablo {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .9rem;
}
.tablo th, .tablo td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.tablo th {
  background: var(--surface-2);
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover td { background: var(--surface-2); }
.tablo .sag { text-align: right; }
.tablo .orta { text-align: center; }

/* ------------------------------------------------------------
   10. ROZET / ETİKET
   ------------------------------------------------------------ */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-tam);
  font-size: .77rem;
  font-weight: 650;
  white-space: nowrap;
}
.rozet-bekliyor { background: var(--uyari-zemin); color: var(--uyari); }
.rozet-onaylandi { background: var(--bilgi-zemin); color: var(--bilgi); }
.rozet-reddedildi { background: var(--tehlike-zemin); color: var(--tehlike); }
.rozet-geldi { background: var(--basari-zemin); color: var(--basari); }
.rozet-gelmedi { background: var(--notr-zemin); color: var(--notr); }
.rozet-iptal { background: var(--notr-zemin); color: var(--ink-soft); }
.rozet-iptal-edildi { background: var(--notr-zemin); color: var(--ink-soft); }
.rozet-acik { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.rozet-kapali { background: var(--notr-zemin); color: var(--ink-soluk); }

.abone-aktif { background: var(--basari-zemin); color: var(--basari); }
.abone-duraklatildi { background: var(--uyari-zemin); color: var(--uyari); }
.abone-sonlandirildi { background: var(--tehlike-zemin); color: var(--tehlike); }

.yildizlar { color: #d9a441; letter-spacing: 2px; font-size: .92rem; }
.yildizlar.bos { color: var(--line-strong); }
.puan-satir { display: inline-flex; align-items: center; gap: 8px; }
.puan-sayi { font-weight: 650; }

/* Yıldız puanlama seçimi */
.yildiz-sec { display: inline-flex; flex-direction: row; gap: 3px; }
.yildiz-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.yildiz-sec label { font-size: 2rem; color: var(--line-strong); cursor: pointer; line-height: 1; transition: color var(--gecis); }
.yildiz-sec input:checked ~ label,
.yildiz-sec label:hover, .yildiz-sec label:hover ~ label { color: #d9a441; }

/* ------------------------------------------------------------
   11. UYARILAR
   ------------------------------------------------------------ */
.alert { padding: 13px 17px; border-radius: var(--r-md); margin-bottom: 18px; font-size: .9rem; border: 1px solid transparent; }
.alert-success { background: var(--basari-zemin); color: #1f5738; border-color: #bfe0cd; }
.alert-danger { background: var(--tehlike-zemin); color: #8c2f21; border-color: #f0c6bd; }
.alert-warning { background: var(--uyari-zemin); color: #7d5410; border-color: #eddcb6; }
.alert-info { background: var(--bilgi-zemin); color: #1f5059; border-color: #c3dde2; }
.alert ul { margin: 6px 0 0 18px; }
.alert strong { font-weight: 650; }

/* ------------------------------------------------------------
   12. SEKMELER
   ------------------------------------------------------------ */
.sekmeler { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; flex-wrap: nowrap; }
.sekme {
  padding: 10px 16px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  text-decoration: none;
  font-weight: 600;
  font-size: .89rem;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.sekme:hover { color: var(--vurgu); }
.sekme-aktif { color: var(--vurgu); border-bottom-color: var(--vurgu); }

.sayfa-belirteci { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-soft); }

/* ------------------------------------------------------------
   13. İSTATİSTİK
   ------------------------------------------------------------ */
.istatistikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 28px; }
.istatistik {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.istatistik .deger { font-size: 1.65rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.istatistik .etiket { color: var(--ink-soft); font-size: .82rem; margin-top: 3px; }
.istatistik .alt { color: var(--ink-soluk); font-size: .76rem; margin-top: 5px; }
.istatistik-vurgu { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.istatistik-vurgu .etiket, .istatistik-vurgu .alt { color: rgba(255, 255, 255, .8); }

.form-satir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.demet { margin-top: 14px; font-size: .9rem; }
.demet a { font-weight: 600; }
.form-satir form { margin: 0; }

/* ------------------------------------------------------------
   14. YORUM
   ------------------------------------------------------------ */
.yorum-liste { display: flex; flex-direction: column; gap: 14px; }
.yorum-kutu {
  border: 1px solid var(--line);
  border-left: 3px solid var(--vurgu);
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.yorum-kutu .ust { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.yorum-kutu .rumuz { font-weight: 650; }
.yorum-kutu .tarih { color: var(--ink-soluk); font-size: .8rem; }
.yorum-kutu .metin { color: var(--ink); font-size: .92rem; }
.yorum-kutu .hizmet-etiket { display: inline-block; font-size: .78rem; color: var(--vurgu-koyu); background: var(--vurgu-acik); padding: 2px 9px; border-radius: var(--r-tam); margin-bottom: 6px; }

/* ------------------------------------------------------------
   15. STİLMERKEZİM ANA SAYFA
   ------------------------------------------------------------ */
.hero-stilmerkezim {
  position: relative;
  /* Kapak fotoğrafı arka plan katmanı olarak kullanılır; üstünde metnin
     okunabilirliğini koruyan koyu gradyan vardır. Fotoğraf yüklenmemişse
     gradyan tek başına zemini verir. Eskiden fotoğraf ::after sözde elemanına
     opacity .34 + luminosity karışımıyla bindiriliyordu; bu yüzden pratikte
     görünmüyor ve "ekleme yapmıyor" izlenimi veriyordu. */
  background-color: #2a2320;
  background-image:
    linear-gradient(155deg, rgba(28, 23, 20, .88) 0%, rgba(44, 36, 31, .74) 55%, rgba(92, 60, 44, .66) 100%),
    var(--hero-gorsel, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #fff;
  border-radius: var(--r-xl);
  padding: 64px 52px;
  overflow: hidden;
  margin-bottom: 52px;
}
.hero-stilmerkezim > * { position: relative; z-index: 1; }
.hero-eyebat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e8b79c;
  margin-bottom: 20px;
}
.hero-baslik { max-width: 15ch; margin-bottom: 20px; color: #fff; }
.hero-baslik em { font-style: normal; color: #e8b79c; }
.hero-alt { font-size: 1.08rem; color: rgba(255, 255, 255, .78); max-width: 52ch; font-weight: 400; line-height: 1.65; }
.hero-eylem { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-eylem .btn-birincil { background: #fff; color: #3a2f28; }
.hero-eylem .btn-birincil:hover { background: #f0e6df; color: #3a2f28; }
.hero-eylem .btn-ikincil { background: rgba(255, 255, 255, .13); color: #fff; }
.hero-eylem .btn-ikincil:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.hero-istatistik { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.hero-istatistik .deger { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.hero-istatistik .etiket { font-size: .82rem; color: rgba(255, 255, 255, .65); }

/* İki taraf ayrımı */
.iki-taraf { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 56px; }
.taraf-kart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.taraf-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-3); }
.taraf-kart::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--vurgu);
}
.taraf-kart.isletme { --vurgu: var(--ink); --vurgu-koyu: #322b27; --vurgu-acik: var(--surface-2); }
.taraf-etiket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vurgu);
  margin-bottom: 14px;
}
.taraf-kart h2 { margin-bottom: 12px; }
.taraf-kart > p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 20px; }
.taraf-liste { list-style: none; margin-bottom: 24px; flex: 1; }
.taraf-liste li {
  display: flex;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink-soft);
  padding: 7px 0;
  line-height: 1.5;
}
.taraf-liste li::before { content: "✓"; color: var(--vurgu); font-weight: 700; flex-shrink: 0; }
.taraf-eylem { display: flex; gap: 10px; flex-wrap: wrap; }

/* Özellik şeridi */
.ozellik-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }
.ozellik {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.ozellik .simge {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--vurgu-acik);
  color: var(--vurgu-koyu);
  display: grid; place-items: center;
  font-size: 1.05rem;
  margin-bottom: 13px;
}
.ozellik h3 { font-size: 1rem; margin-bottom: 6px; }
.ozellik p { color: var(--ink-soft); font-size: .87rem; margin: 0; }

/* İşletme türleri şeridi */
.tur-serit { display: flex; gap: 9px; flex-wrap: wrap; }
.tur-etiket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-tam);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .hero-stilmerkezim { padding: 44px 26px; }
  .iki-taraf { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   16. ARAMA
   ------------------------------------------------------------ */
.arama-cubugu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--golge-2);
  margin-bottom: 26px;
}
.arama-izgara { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; }
.arama-izgara-orta { display: grid; grid-template-columns: 2fr 1.4fr 1.2fr 1fr auto; gap: 12px; align-items: end; }
.arama-etiket { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.arama-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

.chip-grup { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-tam);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--gecis);
}
.chip:hover { border-color: var(--vurgu); color: var(--vurgu); }
.chip-secili { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.chip-secili:hover { color: #fff; background: var(--vurgu-koyu); }

.sonuc-sayisi { font-size: .88rem; color: var(--ink-soft); }
.sonuc-sayisi b { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------
   17. MAĞAZA KARTI
   ------------------------------------------------------------ */
.magaza-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.magaza-kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.magaza-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-3); border-color: var(--line-strong); }
.magaza-kapak {
  height: 128px;
  background: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu-koyu) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}
.magaza-kart .magaza-kapak::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 22, 20, .45), transparent 65%);
}
.magaza-kart-rozet {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: rgba(255, 255, 255, .94);
  color: var(--vurgu-koyu);
  font-size: .74rem;
  font-weight: 650;
  padding: 4px 11px;
  border-radius: var(--r-tam);
}
.magaza-kart-govde { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.magaza-kart h3 { margin-bottom: 5px; font-size: 1.06rem; }
.magaza-kart h3 a { color: var(--ink); }
.magaza-kart h3 a:hover { color: var(--vurgu); }
.magaza-konum { font-size: .84rem; color: var(--ink-soft); margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.magaza-kart .hizmet-liste { margin: 12px 0 16px; flex: 1; }
.magaza-kart-eylem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.magaza-tur {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--vurgu-koyu);
  background: var(--vurgu-acik);
  padding: 2px 10px;
  border-radius: var(--r-tam);
}

/* ------------------------------------------------------------
   18. MAĞAZA VİTRİNİ
   ------------------------------------------------------------ */
.profil-kapak {
  height: 210px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu-koyu) 100%);
  background-size: cover;
  background-position: center;
  margin-bottom: -46px;
  position: relative;
  border: 1px solid var(--line);
}
.profil-ust { display: flex; gap: 20px; align-items: flex-end; padding: 0 26px; margin-bottom: 26px; flex-wrap: wrap; }
.profil-logo {
  width: 92px; height: 92px;
  border-radius: 22px;
  background: var(--surface);
  border: 3px solid var(--surface);
  box-shadow: var(--golge-2);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: -46px;
  position: relative;
}
.profil-logo img { width: 100%; height: 100%; object-fit: cover; }
.profil-baslik { flex: 1; min-width: 220px; padding-bottom: 4px; }
.profil-baslik h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 7px; }
.profil-eylem { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.profil-ozet { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 24px; }
.profil-ozet > div { font-size: .88rem; }
.profil-ozet .baslik { display: block; font-size: .76rem; color: var(--ink-soluk); }

.bilgi-satir { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.bilgi-satir:last-child { border-bottom: none; }
.bilgi-satir .simge { width: 20px; text-align: center; flex-shrink: 0; opacity: .65; }
.bilgi-satir .baslik { display: block; font-size: .78rem; color: var(--ink-soluk); }
.bilgi-satir .deger { color: var(--ink); }

.gun-satir { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .88rem; border-bottom: 1px dashed var(--line); }
.gun-satir:last-child { border-bottom: none; }
.gun-satir.kapali { color: var(--ink-soluk); }
.gun-satir .gun { font-weight: 600; }
.gun-satir.bugun { color: var(--vurgu); font-weight: 650; }

/* Hizmet kartları
   Not: eskiden .hizmet-kart iki sutunlu bir grid idi ve govde parcalari
   (hizmet-kart-ust, hizmet-meta, hizmet-aciklama) dogrudan cocuk yazildigi icin
   sure ve aciklama 96px'lik foto kolonuna dusterek fiyatla ust uste biniyordu.
   Flex'e gecildi: govde tek bir .hizmet-kart-govde icinde toplanir, fotografi
   olmayan hizmetlerde de govde tum genisligi alir. */
.hizmet-kart {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.hizmet-kart:hover { border-color: var(--vurgu); box-shadow: var(--golge-2); }
.hizmet-foto {
  width: 96px; height: 96px;
  flex: 0 0 96px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  object-fit: cover;
  font-size: 1.5rem;
  color: var(--ink-soluk);
  overflow: hidden;
}
.hizmet-kart-govde { flex: 1; min-width: 0; }
.hizmet-kart-ust { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
/* baslik kolonu daralabilsin ki uzun hizmet adi fiyati tasirmasin */
.hizmet-kart-ust > div { min-width: 0; }
.hizmet-kart h4 { font-size: 1rem; }
.hizmet-kategori { font-size: .76rem; color: var(--vurgu-koyu); font-weight: 600; }
.hizmet-fiyat { font-weight: 700; color: var(--vurgu); font-size: 1.02rem; white-space: nowrap; }
.hizmet-meta { display: flex; gap: 12px; font-size: .82rem; color: var(--ink-soft); flex-wrap: wrap; }
.hizmet-aciklama { font-size: .87rem; color: var(--ink-soft); margin: 0; }
.hizmet-listesi { display: flex; flex-direction: column; gap: 12px; }

/* Kompakt hizmet listesi (mağaza kartı, eski sayfalarda kullanılır) */
.hizmet-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hizmet-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.hizmet-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.hizmet-liste li b { font-weight: 650; white-space: nowrap; color: var(--vurgu); }
.hizmet-liste li a { color: var(--vurgu); font-weight: 600; font-size: .82rem; white-space: nowrap; }

/* Galeri */
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.galeri-oge {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gecis); }
.galeri-oge:hover img { transform: scale(1.05); }
.galeri-oge .sil {
  position: absolute; top: 7px; right: 7px;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(26, 22, 20, .72);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  display: grid; place-items: center;
}
.galeri-oge .sil:hover { background: var(--tehlike); }
.galeri-oge .hizmet-etiket-etiket {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(26, 22, 20, .8), transparent);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  padding: 16px 10px 7px;
}

/* Çalışanlar */
.calisan-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.calisan-kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 14px;
  text-align: center;
}
.calisan-foto {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin: 0 auto 11px;
  display: grid; place-items: center;
  object-fit: cover;
  font-size: 1.3rem;
  font-weight: 650;
  color: var(--vurgu);
  overflow: hidden;
}
.calisan-kart h4 { font-size: .95rem; margin-bottom: 3px; }
.calisan-kart .uzmanlik { font-size: .82rem; color: var(--ink-soft); }

/* Soru-cevap */
.soru-kutu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.soru-kutu .soru { font-weight: 650; margin-bottom: 8px; display: flex; gap: 9px; align-items: flex-start; }
.soru-kutu .soru::before { content: "S"; color: var(--vurgu); font-weight: 700; flex-shrink: 0; }
.soru-kutu .cevap {
  font-size: .91rem;
  color: var(--ink-soft);
  padding: 10px 14px;
  background: var(--vurgu-acik);
  border-radius: var(--r-sm);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.soru-kutu .cevap::before { content: "M"; color: var(--vurgu-koyu); font-weight: 700; flex-shrink: 0; }
.soru-kutu .cevap-yok { font-size: .87rem; color: var(--ink-soluk); font-style: italic; }
.soru-kutu .ust-bilgi { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--ink-soluk); margin-bottom: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   19. TAKVİM
   ------------------------------------------------------------ */
.takvim { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.takvim-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.takvim-ust .baslik { font-weight: 650; font-size: 1rem; }

.takvim-izgara { display: grid; grid-template-columns: 62px repeat(7, 1fr); }
.takvim-baslik, .takvim-saat-basi {
  padding: 9px 6px;
  font-size: .74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
}
.takvim-baslik.bugun { background: var(--vurgu); color: #fff; }
.takvim-saat-basi {
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.takvim-sutun { border-right: 1px solid var(--line); min-height: 46px; }
.takvim-hucre { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 3px; min-height: 46px; }
.takvim-hucre.bugun { background: var(--vurgu-acik); }
.takvim-hucre.kapali { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--notr-zemin) 6px, var(--notr-zemin) 12px); }

.randevu-blok {
  background: var(--vurgu-acik);
  border-left: 3px solid var(--vurgu);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: .72rem;
  line-height: 1.3;
  margin-bottom: 3px;
  cursor: pointer;
  overflow: hidden;
}
.randevu-blok strong { display: block; font-weight: 650; color: var(--vurgu-koyu); }
.randevu-blok.bekliyor { background: var(--uyari-zemin); border-left-color: var(--uyari); }
.randevu-blok.bekliyor strong { color: var(--uyari); }
.randevu-blok.geldi { background: var(--basari-zemin); border-left-color: var(--basari); }
.randevu-blok.geldi strong { color: var(--basari); }
.randevu-blok.gelmedi, .randevu-blok.reddedildi, .randevu-blok.iptal { opacity: .58; }
.randevu-blok.iptal strong { text-decoration: line-through; }

.takvim-gun { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; }
.takvim-gun .ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.takvim-gun .ust .h3 { margin: 0; }

/* Randevu durum geçmişi */
.zaman-cizgisi { display: flex; flex-direction: column; gap: 0; }
.zaman-ogesi { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.zaman-cizgi { display: flex; flex-direction: column; align-items: center; }
.zaman-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--vurgu); margin-top: 6px; flex-shrink: 0; }
.zaman-cizgi::after { content: ""; width: 2px; flex: 1; background: var(--line); min-height: 14px; }
.zaman-ogesi:last-child .zaman-cizgi::after { display: none; }
.zaman-icerik { padding-bottom: 14px; font-size: .87rem; }
.zaman-icerik .ne { font-weight: 650; }
.zaman-icerik .ne zaman { font-size: .78rem; color: var(--ink-soluk); font-weight: 400; }

/* ------------------------------------------------------------
   20. DURUM GEÇMİŞİ & BİLGİ KUTUSU
   ------------------------------------------------------------ */
.durum-aciklama { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.durum-adim { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; }
.durum-adim .isaret { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ------------------------------------------------------------
   21. ALT BİLGİ
   ------------------------------------------------------------ */
.footer { background: var(--ink); color: rgba(255, 255, 255, .6); margin-top: auto; }
.footer-ust { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 44px 0 34px; }
.footer h4 { color: #fff; font-size: .88rem; margin-bottom: 13px; letter-spacing: .04em; text-transform: uppercase; }
.footer p { font-size: .87rem; line-height: 1.7; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255, 255, 255, .6); font-size: .87rem; }
.footer-links a:hover { color: #fff; }
.footer-alt { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; font-size: .82rem; text-align: center; }
.footer .logo { margin-bottom: 12px; }

@media (max-width: 820px) { .footer-ust { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 520px) { .footer-ust { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   22. YARDIMCI
   ------------------------------------------------------------ */
.gizli { display: none !important; }
.sadece-ekran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ortali { text-align: center; }
.sagli { text-align: right; }
.gri-yazi { color: var(--ink-soft); }
.kucuk-yazi { font-size: .82rem; }
.koyu-yazi { font-weight: 650; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.esnek { display: flex; } .esnek-sar { flex-wrap: wrap; } .esnek-ort { align-items: center; }
.grow { flex: 1; }
.temizle-bos { min-height: 3px; }
.hat { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* ------------------------------------------------------------
   23. AÇILIR PENCERE (S.S.S. modalı)
   ------------------------------------------------------------ */
.modal-katman { display: none; }
.modal-katman.acik {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 28px 18px;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
  background: rgba(26, 22, 20, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: modal-katman-gir .18s ease-out;
}
body.modal-acik { overflow: hidden; }

.modal-kutu {
  width: 100%;
  max-width: 880px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(26, 22, 20, .28);
  animation: modal-kutu-gir .2s ease-out;
}
.modal-bas {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-baslik { font-size: 1.15rem; margin: 0; }
.modal-kapat {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.modal-kapat:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.modal-govde { padding: 22px 24px 26px; }
.modal-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.modal-izgara .soru-kutu { margin-bottom: 0; height: 100%; }

@keyframes modal-katman-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-kutu-gir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .modal-katman.acik { padding: 0; }
  .modal-kutu { max-width: none; min-height: 100%; border-radius: 0; border: 0; }
  .modal-bas { border-radius: 0; padding: 18px 16px; }
  .modal-govde { padding: 18px 16px 28px; }
  .modal-izgara { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-katman.acik, .modal-kutu { animation: none; }
}

/* ------------------------------------------------------------
   24. DUYARLI
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  main.container { padding: 24px 0 48px; }
  .kart { padding: 20px; }
  .profil-ust { padding: 0 4px; gap: 14px; }
  .profil-ust .profil-baslik { width: 100%; }
  .topnav { gap: 0; }
  .topnav > a { padding: 7px 9px; font-size: .84rem; }
  .menu-oku > a { padding: 7px 4px 7px 9px; font-size: .84rem; }
  .panel-menu { top: 0; position: static; }
  .arama-izgara, .arama-izgara-orta { grid-template-columns: 1fr; }
  .hizmet-kart { flex-direction: column; }
  .hizmet-foto { width: 100%; height: 150px; flex: 0 0 auto; }
  .takvim-izgara { font-size: .8rem; }
  .hero-istatistik { gap: 22px; }
}

/* ============ ADMIN · SITE AYARLARI ============ */
.tema-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 10px; }
.tema-kart {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--surface); font-weight: 500; font-size: .9rem;
}
.tema-kart:hover { border-color: var(--t, var(--vurgu)); background: var(--t-acik, var(--vurgu-acik)); }
.tema-kart input { margin: 0; }
.tema-ad { white-space: nowrap; }

/* --- secim gostergesi: kayitli tema (Mevcut) + anlik secim ---
   Sira onemli: :has() kurallari .tema-kayitli rozet kuralindan sonra gelir,
   boylece secili kart "Mevcut" rozetini gizler, yerine tik gosterir. */
.tema-rozet {
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--r-tam); line-height: 1.5;
  background: var(--t-koyu, var(--ink-soft)); color: #fff;
}
.tema-rozet-mevcut { display: none; }
.tema-tik {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; color: var(--t-koyu, var(--vurgu-koyu));
  font-size: .68rem; font-weight: 800; line-height: 1;
}

.tema-kart.tema-kayitli .tema-rozet-mevcut { display: inline-block; }

.tema-kart.tema-secili,
.tema-kart:has(input:checked) {
  background: var(--t-acik, var(--vurgu-acik));
  border-color: var(--t, var(--vurgu));
  box-shadow: 0 0 0 2px var(--t, var(--vurgu)) inset;
}
.tema-kart.tema-secili .tema-tik,
.tema-kart:has(input:checked) .tema-tik { display: inline-flex; }
.tema-kart.tema-secili .tema-rozet-mevcut,
.tema-kart:has(input:checked) .tema-rozet-mevcut { display: none; }
.tema-kart:has(input:focus-visible) { outline: 2px solid var(--t, var(--vurgu)); outline-offset: 2px; }

/* Sunucudan gelen tema-secili, baska bir kart secildiginde bayatlar;
   o kart varsayilan gorunume doner (aksi halde iki kart da secili olur). */
.tema-kart.tema-secili:not(:has(input:checked)) {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.tema-kart.tema-secili:not(:has(input:checked)) .tema-tik { display: none; }

.tema-mevcut-metin { display: inline-block; margin-top: 2px; }
.tema-mevcut-metin strong { color: var(--ink); }

.tema-durum { display: none; }
.tema-durum.tema-durum-acik {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--vurgu-acik); border: 1px solid var(--vurgu);
  border-radius: var(--r-sm); color: var(--vurgu-koyu);
  font-size: .85rem; font-weight: 500;
}

.gorsel-satir {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.gorsel-satir:first-of-type { border-top: 0; padding-top: 0; }
.gorsel-onizleme {
  flex: 0 0 132px; height: 96px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gorsel-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gorsel-yok { font-size: .78rem; color: var(--ink-soft); padding: 0 8px; text-align: center; }
.gorsel-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gorsel-form input[type="file"] { font-size: .85rem; }
.sil-secim { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 400; color: var(--ink-soft); }
.sil-secim input { margin: 0; }

@media print {
  .topbar, .footer, .btn, .panel-menu, .arama-cubugu { display: none !important; }
  body { background: #fff; }
  .kart, .magaza-kart { box-shadow: none; border-color: #ccc; }
}