/* HC Galeri · Profil vitrin görseli kırpma */
.stage-showcase-crop-button { position: relative; overflow: visible; color: #fff; background: rgba(12,14,22,.68); border-color: rgba(255,255,255,.14); box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.stage-showcase-crop-button > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-showcase-crop-button.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.stage-showcase-crop-tooltip { position: absolute; z-index: 80; right: 0; bottom: calc(100% + 10px); display: grid; gap: 3px; width: max-content; max-width: min(320px, 80vw); padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-md, 0 12px 30px rgba(15,23,42,.18)); text-align: left; pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; backdrop-filter: blur(12px); }
.stage-showcase-crop-tooltip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.stage-showcase-crop-tooltip small { color: var(--muted); font-size: 10px; }
.stage-showcase-crop-button:hover .stage-showcase-crop-tooltip,
.stage-showcase-crop-button:focus-visible .stage-showcase-crop-tooltip { opacity: 1; transform: translateY(0); }

.hc-showcase-crop-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: #080b12; }
.hc-showcase-crop-dialog[open] { display: block; }
.hc-showcase-crop-dialog::backdrop { background: rgba(3,5,10,.94); }
.hc-showcase-crop-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; width: 100%; height: 100%; min-height: 0; }
.hc-showcase-crop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 18px 10px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(8,11,18,.96); }
.hc-showcase-crop-head h2 { margin: 3px 0; color: #fff; font-size: clamp(20px,2vw,28px); }
.hc-showcase-crop-head p { max-width: 850px; margin: 0; color: rgba(255,255,255,.68); font-size: 12px; }
.hc-showcase-crop-head .eyebrow { color: #aeb9ff; }
.hc-showcase-crop-close { flex: 0 0 auto; color: #fff; background: rgba(255,255,255,.08); }
.hc-showcase-crop-meta { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,11,18,.92); overflow-x: auto; }
.hc-showcase-crop-meta > span { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: rgba(255,255,255,.66); font-size: 11px; }
.hc-showcase-crop-meta .icon { width: 15px; height: 15px; }
.hc-showcase-crop-meta strong { color: #fff; }
.hc-showcase-crop-stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 14px; overflow: hidden; user-select: none; touch-action: none; background: #05070c; }
.hc-showcase-crop-stage > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.hc-showcase-crop-frame { position: absolute; z-index: 4; min-width: 64px; min-height: 20px; border: 2px dashed #fff; border-radius: 4px; background: rgba(255,255,255,.04); box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.55) inset; cursor: move; outline: none; touch-action: none; }
.hc-showcase-crop-frame:focus-visible { border-color: #93c5fd; }
.hc-showcase-crop-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.4) 33.3%,rgba(255,255,255,.4) 33.6%,transparent 33.7%,transparent 66.3%,rgba(255,255,255,.4) 66.4%,rgba(255,255,255,.4) 66.7%,transparent 66.8%), linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.4) 33.3%,rgba(255,255,255,.4) 33.6%,transparent 33.7%,transparent 66.3%,rgba(255,255,255,.4) 66.4%,rgba(255,255,255,.4) 66.7%,transparent 66.8%); }
.hc-showcase-crop-resize { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; padding: 0; border: 2px solid #080b12; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); cursor: nwse-resize; }
.hc-showcase-crop-resize::before { content: ""; position: absolute; right: 5px; bottom: 6px; width: 8px; height: 2px; background: #111827; transform: rotate(-45deg); }
.hc-showcase-crop-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px 12px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(8,11,18,.96); }
.hc-showcase-crop-status { min-width: 0; color: rgba(255,255,255,.68); font-size: 12px; }
.hc-showcase-crop-status.is-error { color: #fca5a5; }
.hc-showcase-crop-status.is-success { color: #86efac; }
.hc-showcase-crop-status.is-busy { color: #bfdbfe; }
.hc-showcase-crop-footer .form-actions { margin: 0; }
.hc-showcase-crop-footer .button-ghost { color: #fff; }
html.hc-showcase-crop-open { overflow: hidden; }

.hc-profile-showcase-crop-cover { padding-top: 14px; }
.hc-profile-showcase-crop-media { position: relative; aspect-ratio: 1300/406; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius,16px); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.hc-profile-showcase-crop-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-profile-showcase-crop-owner-tools { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); padding: 5px 6px 5px 10px; border: 1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius: 11px; background: color-mix(in srgb,var(--surface) 90%,transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); }
.hc-profile-showcase-crop-owner-tools > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }

.hc-showcase-settings-current { display: grid; grid-template-columns: minmax(220px,420px) minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 18px; padding: 12px; }
.hc-showcase-settings-info { display: grid; gap: 5px; margin-bottom: 18px; padding: 13px 15px; }
.hc-showcase-settings-info h3, .hc-showcase-settings-info p { margin: 0; }
.hc-showcase-settings-info h3 { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.hc-showcase-settings-info h3 .icon { width: 17px; height: 17px; }
.hc-showcase-settings-current-media { aspect-ratio: 1300/406; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.hc-showcase-settings-current-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-showcase-settings-current-copy { display: grid; gap: 7px; min-width: 0; }
.hc-showcase-settings-current-copy h2,
.hc-showcase-settings-current-copy p { margin: 0; }
.hc-showcase-settings-current-copy p,
.hc-showcase-settings-current-meta { color: var(--muted); }
.hc-showcase-settings-current-meta,
.hc-showcase-settings-current-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; }

.hc-showcase-admin-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hc-showcase-admin-filter { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; padding: 12px; margin-bottom: 16px; }
.hc-showcase-admin-filter .field { min-width: 180px; margin: 0; }
.hc-showcase-admin-preview { display: block; width: 180px; aspect-ratio: 1300/406; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.hc-showcase-admin-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-showcase-admin-status { display: inline-flex; align-items: center; gap: 6px; }
.hc-showcase-admin-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.hc-showcase-admin-status.is-active::before { background: #22c55e; }

@media (max-width:760px) {
    .hc-showcase-crop-head { padding: 10px 12px 8px; }
    .hc-showcase-crop-head p { display: none; }
    .hc-showcase-crop-meta { padding: 7px 12px; }
    .hc-showcase-crop-stage { padding: 8px; }
    .hc-showcase-crop-footer { align-items: stretch; flex-direction: column; padding: 9px 12px 10px; }
    .hc-showcase-crop-footer .form-actions { width: 100%; }
    .hc-showcase-crop-footer .button { flex: 1; }
    .hc-showcase-settings-current { grid-template-columns: 1fr; }
    .hc-showcase-admin-summary { grid-template-columns: 1fr; }
    .hc-profile-showcase-crop-owner-tools > span { display: none; }
}