/* Birden çok bölümde kullanılan parçalar: ikonlar ve süslemeler, lekeler, el yazısı not, el çizimi alt çizgi,
   ikon rozetleri, kart, düğmeler, kaydırıcı okları, fotoğraf ve yüz bulanıklaştırma, avatar, rozetler,
   ilerleme çubuğu ve hane kartı. */

/* İkonlar (gorseller/ikonlar.svg içindeki semboller) */
.ikon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikon--kucuk {
  width: 16px;
  height: 16px;
}

.ikon--buyuk {
  width: 24px;
  height: 24px;
}

.ikon--dolu {
  fill: currentColor;
}

/* Dolu (renkli) ikon: "-dolu" ile biten semboller için. Şekil ikon renginde dolar, ayrıntılar beyaz çizilir. */
.ikon--renkli {
  fill: currentColor;
  stroke: var(--renk-zemin);
  stroke-width: 1.5;
}

/* Süsleme: dolu çizilen dekoratif semboller (yaprak). Damar rengi --damar ile verilir. */
.susleme {
  display: block;
  flex: none;
  fill: currentColor;
  stroke: var(--damar, var(--renk-damar));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Leke: fotoğrafların ve başlıkların arkasındaki yumuşak, düz renkli biçim. Konumu bölüm stilinde verilir.
   Biçim: --b2, --b3 · Renk: --tereyag, --nane, --gul, --gok, --gri (varsayılan şeftali)
   v0.5.4: zemin düz beyaz olsun diye lekeler KAPALI. Geri açmak için aşağıdaki `display: none` satırını silin. */
.leke {
  display: none;
  position: absolute;
  z-index: -1;
  border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%;
  background: var(--renk-seftali);
  pointer-events: none;
}

.leke--b2 {
  border-radius: 46% 54% 58% 42% / 52% 40% 60% 48%;
}

.leke--b3 {
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.leke--seftali {
  background: var(--renk-seftali);
}

.leke--tereyag {
  background: var(--renk-tereyag);
}

.leke--nane {
  background: var(--renk-nane);
}

.leke--gul {
  background: var(--renk-gul);
}

.leke--gok {
  background: var(--renk-gok-leke);
}

.leke--gri {
  background: var(--renk-gri-koyu);
}

/* El yazısı not (Caveat). Konumu ve eğimi bölüm stilinde verilir. */
.el-yazisi {
  font-family: var(--yazi-el);
  font-size: var(--boyut-el);
  font-weight: 600;
  line-height: 1.05;
  color: var(--renk-murekkep);
}

.el-yazisi .ikon {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.15em;
  vertical-align: -0.05em;
  color: var(--renk-mercan);
  stroke-width: 2.2;
}

/* El çizimi alt çizgi: başlıktaki bir kelimenin altında bal rengi fırça izi */
.el-cizgisi {
  position: relative;
  isolation: isolate;
  display: inline-block;
  white-space: nowrap;
}

.el-cizgisi__cizgi {
  position: absolute;
  left: -3%;
  bottom: -0.06em;
  z-index: -1;
  width: 106%;
  height: 0.3em;
  fill: none;
  stroke: var(--renk-bal);
  stroke-width: 4;
  stroke-linecap: round;
}

/* İkon rozeti: pastel daire üzerinde renkli ikon */
.ikon-rozeti {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--renk-orman-acik);
  color: var(--renk-orman);
}

.ikon-rozeti--yaprak {
  background: var(--renk-yaprak-acik);
  color: var(--renk-yaprak);
}

.ikon-rozeti--bal {
  background: var(--renk-bal-acik);
  color: var(--renk-bal);
}

.ikon-rozeti--gok {
  background: var(--renk-gok-acik);
  color: var(--renk-gok);
}

.ikon-rozeti--mercan {
  background: var(--renk-mercan-acik);
  color: var(--renk-mercan);
}

.ikon-rozeti--beyaz {
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
}

.ikon-rozeti--buyuk {
  width: 76px;
  height: 76px;
}

.ikon-rozeti--buyuk .ikon {
  width: 32px;
  height: 32px;
  stroke-width: 1.9;
}

.ikon-rozeti--orta {
  width: 60px;
  height: 60px;
}

.ikon-rozeti--mini {
  width: 32px;
  height: 32px;
}

.ikon-rozeti--mini .ikon--renkli {
  width: 17px;
  height: 17px;
}

.ikon-rozeti .ikon--renkli {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.ikon-rozeti--orta .ikon--renkli {
  width: 30px;
  height: 30px;
}

.ikon-rozeti--buyuk .ikon--renkli {
  width: 38px;
  height: 38px;
}

.ikon-rozeti--gul {
  background: var(--renk-gul);
  color: var(--renk-mercan);
}

.ikon-rozeti--tereyag {
  background: var(--renk-tereyag);
  color: var(--renk-bal-koyu);
}

/* Kart: beyaz, yumuşak gölgeli, iri köşeli kutu */
.kart {
  border-radius: var(--yaricap-kocaman);
  background: var(--renk-zemin);
  box-shadow: var(--golge-yumusak);
}

/* Düğmeler */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dugme--birincil {
  background: var(--renk-orman);
  box-shadow: var(--golge-dugme);
  color: var(--renk-zemin);
}

.dugme--birincil:hover {
  background: var(--renk-orman-koyu);
  transform: translateY(-1px);
}

.dugme--ikincil {
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  color: var(--renk-murekkep);
}

.dugme--ikincil:hover {
  box-shadow: var(--golge-kart-ust);
  transform: translateY(-1px);
}

.dugme--ikincil .ikon {
  color: var(--renk-bal);
}

.dugme--cizgili {
  border-color: var(--renk-cizgi-koyu);
  background: var(--renk-zemin);
  color: var(--renk-murekkep);
}

.dugme--cizgili:hover {
  border-color: var(--renk-murekkep);
}

/* Kapalı düğme: soluk, tıklanmaz (ör. eksik varken "Profili yayına al"). v0.14: önceden yanlışlıkla metin düğmesi gibi görünüyordu */
.dugme:disabled {
  border-color: transparent;
  background: var(--renk-gri-koyu);
  box-shadow: none;
  color: var(--renk-soluk);
  cursor: not-allowed;
  transform: none;
}

/* Metin gibi görünen düğme: Temizle, Hepsini temizle, Teşekkür yaz, Vazgeç (bütün sayfalar) */
.metin-dugme {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--renk-orman);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.metin-dugme:hover {
  color: var(--renk-orman-koyu);
}

/* Geri alınması zor küçük eylem (ör. refakatçinin "Görevi bırak") */
.metin-dugme--mercan,
.metin-dugme--mercan:hover {
  color: var(--renk-mercan-koyu);
}

.metin-baglanti:disabled {
  box-shadow: none;
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.dugme--kucuk {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

.ikon-dugme {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yaricap);
  color: var(--renk-soluk);
  transition: color 0.15s, border-color 0.15s;
}

.ikon-dugme:hover {
  border-color: var(--renk-orman);
  color: var(--renk-orman);
}

.ikon-dugme--sade {
  border-color: transparent;
  color: var(--renk-murekkep);
}

.metin-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--renk-orman);
}

.metin-baglanti:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.metin-baglanti--koyu {
  color: var(--renk-murekkep);
}

/* Kaydırıcı okları (js/moduller/kaydirici.js) */
.kaydirici-oku {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart-ust);
  color: var(--renk-murekkep);
  transition: opacity 0.15s, color 0.15s;
}

.kaydirici-oku:hover {
  color: var(--renk-orman);
}

.kaydirici-oku:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Fotoğraf. Yüzler .foto__bulanik ile bulanıklaştırılır: konum ve boyut yüzde olarak verilir
   (--x, --y sol üst köşe; --g genişlik; --h yükseklik). */
.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--renk-gri-koyu);
}

.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Leke biçimli fotoğraf */
.foto--leke {
  border-radius: 58% 42% 52% 48% / 50% 56% 44% 50%;
}

.foto--leke-2 {
  border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%;
}

.foto__bulanik {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--g);
  height: var(--h);
  border-radius: 50%;
  background: var(--renk-bulanik-perde);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.foto__not {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--renk-koyu-perde);
  color: var(--renk-zemin);
  font-size: 0.6875rem;
  font-weight: 500;
}

.foto--bos {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--renk-soluk);
  font-size: 0.8125rem;
}

.foto--bos .ikon {
  width: 28px;
  height: 28px;
  color: var(--renk-cizgi-koyu);
}

/* Avatar: destekçinin baş harfleri. Renk çeşitleri sırayla dağıtılır (--1 … --5). */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--renk-yaprak-acik);
  color: var(--renk-yaprak-koyu);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar--kucuk {
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
}

.avatar--2 {
  background: var(--renk-bal-acik);
  color: var(--renk-bal-koyu);
}

.avatar--3 {
  background: var(--renk-gok-acik);
  color: var(--renk-gok);
}

.avatar--4 {
  background: var(--renk-mercan-acik);
  color: var(--renk-mercan-koyu);
}

.avatar--5 {
  background: var(--renk-orman-acik);
  color: var(--renk-orman);
}

/* Rozetler */
.rozet-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--renk-yaprak-acik);
  color: var(--renk-yaprak-koyu);
  font-size: 0.75rem;
  font-weight: 600;
}

.rozet .ikon {
  width: 14px;
  height: 14px;
}

/* Sağlık düzeyi rozeti (karar 79): onaylı sağlık özetinden kuralla; renk düzeye göre */
.rozet--hafif {
  background: var(--renk-gok-acik);
  color: var(--renk-gok);
}

.rozet--orta {
  background: var(--renk-bal-acik);
  color: var(--renk-bal-koyu);
}

.rozet--agir,
.rozet--cok-agir {
  background: var(--renk-mercan-acik);
  color: var(--renk-mercan-koyu);
}

/* İlerleme çubuğu: onaylanan (koyu) + bildirilen (açık, çizgili). İkisi de sayılır. */
.ilerleme {
  display: flex;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--renk-iz);
}

.ilerleme__onaylanan {
  width: var(--oran, 0%);
  border-radius: 4px 0 0 4px;
  background: var(--renk-orman);
}

.ilerleme__bildirilen {
  width: var(--oran, 0%);
  background: repeating-linear-gradient(135deg, var(--renk-yaprak-soluk) 0 4px, var(--renk-yaprak-soluk-2) 4px 8px);
}

.ilerleme__yazi {
  margin-top: -4px;
  font-size: 0.875rem;
  color: var(--renk-soluk);
}

.ilerleme__yazi strong {
  color: var(--renk-murekkep);
}

/* Hane kartı (js/moduller/hane-kartlari.js üretir) */
.hane-karti {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-zemin);
  box-shadow: var(--golge-kart);
  transition: box-shadow 0.2s, transform 0.2s;
}

.hane-karti:hover {
  box-shadow: var(--golge-kart-ust);
  transform: translateY(-2px);
}

.hane-karti > .foto {
  aspect-ratio: 16 / 10.5;
}

/* Fotoğrafın sağ üstündeki durum etiketi: Acil · Yeni katıldı */
.foto-etiketi {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--renk-mercan-zemin);
  box-shadow: var(--golge-kart);
  color: var(--renk-mercan);
  font-size: 0.8125rem;
  font-weight: 700;
}

.foto-etiketi--yeni {
  background: var(--renk-yaprak-acik);
  color: var(--renk-yaprak-koyu);
}

.foto-etiketi .ikon {
  color: var(--renk-mercan);
}

.foto-etiketi--yeni .ikon {
  color: var(--renk-yaprak);
}

.hane-karti__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 20px;
}

.hane-karti__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.hane-karti__ad {
  font-size: 1.375rem;
  line-height: 1.2;
}

.hane-karti__ad a:hover {
  color: var(--renk-orman);
}

.hane-karti__kod {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--renk-soluk);
  font-variant-numeric: tabular-nums;
}

.hane-karti__bilgi {
  margin-top: -8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--renk-soluk);
}

.hane-karti__belge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--renk-yaprak-koyu);
}

.hane-karti__acil {
  padding: 8px 10px;
  border-radius: var(--yaricap-kucuk);
  background: var(--renk-mercan-zemin);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--renk-mercan-koyu);
}

.kalemler {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--renk-cizgi);
}

.kalem {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.kalem__ikon {
  color: var(--renk-bal);
}

.kalem__ikon .ikon {
  width: 24px;
  height: 24px;
}

.kalem__ikon--altin {
  color: var(--renk-altin);
}

.kalem__ikon--mercan {
  color: var(--renk-mercan);
}

.kalem__ikon--gok {
  color: var(--renk-gok);
}

.kalem__ikon--orman {
  color: var(--renk-orman);
}

.kalem__ikon--yaprak {
  color: var(--renk-yaprak);
}

.kalem__ad {
  font-weight: 600;
  color: var(--renk-murekkep);
}

.kalem__durum {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--renk-soluk);
}

.kalem__durum--acil {
  color: var(--renk-mercan);
}

.kalem__durum--odendi {
  color: var(--renk-yaprak);
}

.hane-karti__yuz-yuze {
  font-size: 0.8125rem;
  color: var(--renk-soluk);
}

.hane-karti__yuz-yuze strong {
  font-weight: 600;
  color: var(--renk-metin);
}

.son-destek {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--yaricap);
  background: var(--renk-gri);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.son-destek strong {
  color: var(--renk-murekkep);
}

.son-destek__durum {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--renk-yaprak-koyu);
}

.son-destek__durum--bekliyor {
  color: var(--renk-soluk);
}

.refakatci-notu {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--renk-soluk);
}

.hane-karti__alt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.hane-karti__alt .dugme {
  flex: 1;
  min-height: 48px;
}

/* Parasız emek ihtiyaçları satırı (yalnızca uygun hanelerde; site planı §10.6) */
.hane-karti__emek {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--yaricap-kucuk);
  background: var(--renk-yaprak-acik);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--renk-yaprak-koyu);
}

.hane-karti__emek .ikon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--renk-yaprak);
}

.hane-karti__emek strong {
  font-weight: 700;
}

/* Yetki listesi (refakatçi: hane paneli, refakatçi paneli, davet sayfası; v0.24 panel-sayfasi.css'ten taşındı) */
.yetkiler {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 1rem;
}

.yetkiler li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yetkiler__var .ikon {
  color: var(--renk-yaprak);
}

.yetkiler__yok {
  color: var(--renk-soluk);
}

.yetkiler__yok .ikon {
  color: var(--renk-mercan);
}

/* Görüşme sonrası soru: "Nasıl geçti?" (destekçi, hane ve refakatçi panelleri; v0.25'te destekci-sayfasi.css'ten taşındı) */
.gorusme-sorusu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--yaricap-buyuk);
  background: var(--renk-gri);
}

.gorusme-sorusu strong {
  color: var(--renk-murekkep);
}

.gorusme-sorusu__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gorusme-sorusu small {
  color: var(--renk-soluk);
}

.gorusme-sorusu .alan-etiketi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gorusme-sorusu .alan-etiketi .dugme {
  align-self: flex-start;
}