/* Seyir — klinik fotoğraf (gorunum/fotograf-kart.js, fotograf-karsilastir.js). Gündüz belirteçleri css/belirtec.css'ten; sabit renk yok.
   Fotoğraf zemini nötr gri (--yuzey3): ten rengi ve diş tonu kurum renginden etkilenmesin. Telefon (<760 px): ızgara iki sütun, önce/sonra
   alt alta (ayırıcı gizli), 375 px'te yatay taşma yok. Hareket yok denecek kadar az (yalnız odak ve üstüne gelme). */

:is(.fg-bolum, .fg-yukle-kip, .fg-riza-kip, .fg-kars-kip, .fg-goster-kip) [hidden] { display: none !important; }

/* ---------- bölüm ---------- */
.fg-bolum { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fg-ust { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.fg-aciklama { margin: 0; flex: 1 1 260px; min-width: 0; }
.fg-ust-eylem { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- görsel rıza ---------- */
.fg-riza { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-k); background: var(--yuzey2); min-width: 0; }
.fg-riza-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.fg-riza-bas .hs-alt-baslik { margin: 0; }
.fg-riza-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fg-riza-oge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--cizgi); }
.fg-riza-oge:first-child { border-top: 0; padding-top: 2px; }
.fg-riza-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.fg-riza-geri { color: var(--metin2); }
.fg-riza-sag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fg-riza-oge[data-durum="geri_alindi"] strong { color: var(--metin2); }

/* ---------- çekimler ve küçük görseller ---------- */
.fg-cekimler { display: flex; flex-direction: column; gap: 18px; }
.fg-cekim { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fg-cekim-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fg-cekim-tarih { font-family: var(--f-sayi); font-variant-numeric: tabular-nums; font-size: var(--fs-13); color: var(--metin2); }
.fg-cekim-ad { font-weight: 650; overflow-wrap: anywhere; }
.fg-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 10px; }
.fg-izgara > li { min-width: 0; }
.fg-kutu {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-k);
  transition: border-color var(--t-hizli) var(--egri), box-shadow var(--t-orta) var(--egri);
}
.fg-kutu:hover { border-color: var(--cizgi2); box-shadow: var(--golge); }
.fg-kutu:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.fg-kutu-gorsel { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--yuzey3); }
.fg-kutu-yer { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--metin3); font-size: var(--fs-12); text-align: center; padding: 8px; }
.fg-kutu-yer:not([data-eksik]) { background: linear-gradient(100deg, var(--yuzey3) 40%, var(--yuzey2) 50%, var(--yuzey3) 60%) 0 0 / 200% 100%; animation: fg-parilti 1.4s linear infinite; }
@keyframes fg-parilti { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fg-kutu-yer:not([data-eksik]) { animation: none; } }
.fg-kutu-rozet { position: absolute; top: 6px; left: 6px; right: 6px; width: max-content; max-width: calc(100% - 12px); box-shadow: var(--golge); }
.fg-kutu-alt { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 8px; min-width: 0; border-top: 1px solid var(--cizgi); }
.fg-kutu-poz { font-size: var(--fs-13); font-weight: 600; }
.fg-kutu-bolge { font-size: var(--fs-12); color: var(--metin2); overflow-wrap: anywhere; }
.fg-gecersiz summary { cursor: pointer; font-size: var(--fs-13); color: var(--metin2); }
.fg-gecersiz[open] summary { margin-bottom: 4px; }

/* ---------- fotoğrafı göster ---------- */
.fg-goster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); gap: 16px; align-items: start; }
.fg-gorunum { margin: 0; display: grid; place-items: center; min-height: 220px; padding: 8px; background: var(--yuzey3); border-radius: var(--r-k); }
.fg-gorunum img { display: block; max-width: 100%; max-height: 64vh; height: auto; object-fit: contain; }
.fg-gorunum > .iskelet { width: 100%; }
.fg-bilgi { grid-template-columns: minmax(72px, max-content) 1fr; }
.fg-not { white-space: pre-wrap; }
@media (max-width: 759.98px) { .fg-goster { grid-template-columns: 1fr; } .fg-gorunum img { max-height: 52vh; } }

/* ---------- fotoğraf ekle: kaynak, hizalama hayaleti ---------- */
.fg-kaynak { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-kaynak-dug { cursor: pointer; }
.fg-kaynak-dug:has(input:focus-visible) { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.fg-hizala {
  position: relative; width: min(100%, calc(46vh * var(--oran, .75))); aspect-ratio: var(--oran, .75); margin-inline: auto;
  overflow: hidden; border-radius: var(--r-k); background: var(--yuzey3); border: 1px solid var(--cizgi);
}
.fg-hizala > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fg-hizala-hayalet { opacity: var(--saydam, .4); pointer-events: none; }
.fg-hizala-hayalet[data-tek] { opacity: .85; }
.fg-hizala-bos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center;
  color: var(--metin2); font-size: var(--fs-13); }
.fg-izgara-cizgi {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), color-mix(in srgb, var(--yuzey) 55%, transparent) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px), color-mix(in srgb, var(--yuzey) 55%, transparent) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), color-mix(in srgb, var(--yuzey) 55%, transparent) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px), color-mix(in srgb, var(--yuzey) 55%, transparent) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.fg-hizala-not, .fg-hazir-durum { margin: 0; overflow-wrap: anywhere; }
.fg-hazir-durum:empty, .fg-hizala-not:empty { display: none; }
.fg-saydam { width: 100%; accent-color: var(--vurgu); }
.fg-ilerleme { padding: 2px 0; }
.fg-yukle-kip .kip-alt, .fg-goster-kip .kip-alt { flex-wrap: wrap; }

/* ---------- önce / sonra ---------- */
.fg-kars-secim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fg-kars-sahne { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fg-kars {
  position: relative; width: min(100%, calc(60vh * var(--oran, .75))); aspect-ratio: var(--oran, .75); margin-inline: auto;
  overflow: hidden; border-radius: var(--r); background: var(--yuzey3); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.fg-kars > figure { position: absolute; inset: 0; margin: 0; }
.fg-kars img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.fg-kars-sonra { clip-path: inset(0 0 0 var(--konum, 50%)); }
.fg-etiket {
  position: absolute; top: 8px; left: 8px; max-width: calc(50% - 16px); padding: 3px 8px; border-radius: var(--r-k);
  background: color-mix(in srgb, var(--yuzey) 88%, transparent); color: var(--metin); font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: var(--golge); overflow-wrap: anywhere;
}
.fg-etiket-sag { left: auto; right: 8px; }
.fg-ayirici { position: absolute; top: 0; bottom: 0; left: var(--konum, 50%); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; outline: none; }
.fg-ayirici::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi2); }
.fg-ayirici-tutamac {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--vurgu); color: var(--vurgu-ustu); box-shadow: var(--golge); border: 2px solid var(--yuzey);
}
.fg-ayirici:focus-visible .fg-ayirici-tutamac { outline: 2px solid var(--vurgu); outline-offset: 3px; }
.fg-kars-not { margin: 0; text-align: center; }
@media (max-width: 759.98px) {
  .fg-kars-secim { grid-template-columns: 1fr; gap: 8px; }
  .fg-kars { width: 100%; aspect-ratio: auto; overflow: visible; background: none; display: flex; flex-direction: column; gap: 10px; }
  .fg-kars > figure { position: relative; inset: auto; aspect-ratio: var(--oran, .75); overflow: hidden; border-radius: var(--r-k); background: var(--yuzey3); }
  .fg-kars-sonra { clip-path: none; }
  .fg-etiket-sag { left: 8px; right: auto; }
  .fg-etiket { max-width: calc(100% - 16px); }
  .fg-ayirici { display: none; }
}
@media (forced-colors: active) {
  .fg-ayirici::before { background: CanvasText; }
  .fg-ayirici-tutamac { border-color: CanvasText; }
}

/* ---------- ayar ekranı (#/fotograf, gorunum/fotograf.js): saklama süresi; 375 px'te satır alta sarar, taşma yok ---------- */
.ft-ayar-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.ft-ayar-ad { flex: 1 1 240px; min-width: 0; }
.ft-ayar-ad p { margin: 2px 0 0; overflow-wrap: anywhere; }
.ft-ayar-satir .girdi[type="number"] { width: 8ch; }

/* ---------- Mobil: etiket "…" ile kesilmez; 320 px'te de iki sütun ---------- */
@media (max-width: 759px) {
  .fg-kutu-rozet { height: auto; min-height: 20px; padding-block: 2px; line-height: 1.25; white-space: normal; }
  .fg-kutu-rozet > span:last-child { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .fg-kutu-poz, .fg-cekim-ad { line-height: 1.4; }
}
@media (max-width: 400px) {
  .fg-izgara { grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); }
}