/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - VISUAL

   Proje: HIZIRBEY Portal
   Paket: HIZIRBEY Design System
   Bileşen: Visual
   Dosya: themes/default/assets/css/hds/components/visual/base.css
   Açıklama: HDS Visual çerçevesi (oran/şekil/boyut), katmanları ve
   Visual Renderer ile Image Positioner'ın PAYLAŞTIĞI tahribatsız sunum
   sözleşmesi. Image Positioner ve Visual Picker bu dosyaya bağımlıdır.
   Yazar: Mehmet Kalli
   Oluşturuldu: 04.10.2026
   Güncellendi: 19.10.2026 · T3.4 (public hook: --hds-visual-icon-size, --hds-visual-icon-stroke)
   Sürüm: 1.1.0

   Contract:
   Root:      .hds-visual.is-shape-{square|circle|rectangle}.is-size-{sm|md|lg|xl|fill}
   Viewport:  .hds-visual__viewport  (--hds-visual-ratio, --hds-visual-x/-y/-zoom)
   Layers:    .hds-visual__layer (.hds-visual__default | __icon | __media)
   Image:     .hds-visual__image
   Ornament:  .hds-visual.has-decoration-ornament > .hds-visual__ornament > __viewport

   Sunum matematiği (bkz. App\HDS\Visual\VisualPresentation):
     left = (W − rw) · x%,  top = (H − rh) · y%,  rw/rh = cover boyutu · zoom
   object-fit:cover + object-position:x y + scale(zoom) + transform-origin:x y
   bu formülü doğal görsel boyutunu bilmeden birebir üretir.
========================================================================== */

/* =========================================================================
 * >>> Tokens & Root
 * ========================================================================= */

.hds-visual {
  --hds-visual-size: 4rem;

  display: inline-block;
  flex: none;
  width: var(--hds-visual-size);
  max-width: 100%;
  vertical-align: middle;
}

.hds-visual.is-size-sm { --hds-visual-size: 2.5rem; }
.hds-visual.is-size-md { --hds-visual-size: 4rem; }
.hds-visual.is-size-lg { --hds-visual-size: 6rem; }
.hds-visual.is-size-xl { --hds-visual-size: 10rem; }
.hds-visual.is-size-fill { width: 100%; }

/* <<< Tokens & Root */

/* =========================================================================
 * >>> Viewport (paylaşılan sözleşme)
 * ========================================================================= */

.hds-visual__viewport {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--hds-visual-ratio, 1 / 1);
  border-radius: var(--hds-visual-radius, 0.5rem);
  background: var(--hds-visual-surface, #eef3f8);
  color: var(--hds-visual-ink, #4b647a);
  isolation: isolate;
}

.is-shape-circle .hds-visual__viewport {
  border-radius: 50%;
}

.hds-visual__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* display:grid, HTML hidden attribute'unu ezmemeli. */
.hds-visual__layer[hidden] {
  display: none;
}

.hds-visual__viewport .hds-visual__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hds-visual-x, 50%) var(--hds-visual-y, 50%);
  transform: scale(var(--hds-visual-zoom, 1));
  transform-origin: var(--hds-visual-x, 50%) var(--hds-visual-y, 50%);
  user-select: none;
  -webkit-user-drag: none;
}

/* <<< Viewport */

/* =========================================================================
 * >>> Icon & Default Layers
 * ========================================================================= */

.hds-visual__icon svg {
  display: block;
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hds-visual__default > * {
  max-width: 70%;
  max-height: 70%;
}

/* Public hook'lar (T3.4): --hds-visual-icon-size (varsayılan ikonun boyutu),
   --hds-visual-icon-stroke (çizgi kalınlığı; :where ile en düşük öncelik,
   varsayılan 1 = SVG başlangıç değeri). */
.hds-visual__default .hds-icon-control {
  width: var(--hds-visual-icon-size, 55%);
  height: var(--hds-visual-icon-size, 55%);
  max-width: none;
  max-height: none;
}

:where(.hds-visual__default .hds-icon-control) svg {
  stroke-width: var(--hds-visual-icon-stroke, 1);
}

/* <<< Icon & Default Layers */

/* =========================================================================
 * >>> Fit: contain (opt-in; .is-fit-contain)
 *
 * 1× zoom'da görselin tamamı viewport'a sığar; kalan alan şeffaftır (arka
 * plan görünür). x/y (object-position) + zoom (scale, origin x y) sözleşmesi
 * cover ile aynıdır; yalnız taban boyut contain olur. Visual kökü ve
 * ImagePositioner kökü için ortak.
 * ========================================================================= */

.hds-visual.is-fit-contain .hds-visual__viewport .hds-visual__image,
.hds-image-positioner.is-fit-contain .hds-visual__viewport .hds-visual__image {
  object-fit: contain;
}

.hds-visual.is-fit-contain.is-source-image .hds-visual__viewport,
.hds-image-positioner.is-fit-contain .hds-visual__viewport {
  background: transparent;
}

/* <<< Fit: contain */

/* =========================================================================
 * >>> Decoration: ornament (opt-in; .has-decoration-ornament)
 *
 * Görsel hücresini (viewport) dört taraftan saran kalın dekoratif şerit:
 * sol üst + sağ alt geniş kavisli, sağ üst + sol alt düz; iç kontur aynı
 * asimetrik biçimi izler (iç yarıçap = dış yarıçap − şerit). Şerit ayrı
 * katmandır (.hds-visual__ornament); kadraj viewport'ta kalır, x/y/zoom
 * matematiği değişmez. Viewport köşe biçimiyle kırpar (görsel taşmaz).
 * Çerçevenin dışı şeffaftır: sunum arka planı görünür.
 *
 * Değişkenler: --hds-visual-ornament-color (şerit), -cell (hücre zemini),
 * -band (şerit kalınlığı), -radius (geniş köşe yarıçapı).
 * ========================================================================= */

.hds-visual__ornament {
  display: block;
  box-sizing: border-box;
  padding: var(--hds-visual-ornament-band, 18px);
  border-radius: var(--hds-visual-ornament-radius, 44px) 0;
  background: var(--hds-visual-ornament-color, #c9d9d3);
}

/* Sunum (Visual), editör (ImagePositioner) ve kompakt önizleme aynı kural. */
:is(.hds-visual, .hds-image-positioner).has-decoration-ornament .hds-visual__ornament > .hds-visual__viewport {
  border-radius: max(0px, calc(var(--hds-visual-ornament-radius, 44px) - var(--hds-visual-ornament-band, 18px))) 0;
  background: var(--hds-visual-ornament-cell, #ffffff);
}

/* <<< Decoration: ornament */