#catalogDialog.catalog-dialog {
width: min(1180px, calc(100vw - 32px));
height: min(840px, calc(100vh - 32px));
max-width: none;
max-height: none;
overflow: hidden;
}
#catalogDialog[open] {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
#catalogGalleryGrid.fg-gallery-grid {
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
grid-auto-flow: row;
grid-auto-rows: max-content;
align-items: start;
align-content: start;
gap: 14px;
padding: 14px;
background: #0b1017;
scrollbar-gutter: stable;
}
#catalogGalleryGrid .fg-gallery-card {
appearance: none;
-webkit-appearance: none;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-self: start;
width: 100%;
min-width: 0;
height: auto;
min-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #344054;
border-radius: 4px;
background: #101722;
color: #f5f7fb;
text-align: left;
cursor: pointer;
box-shadow: none;
transform: none;
}
#catalogGalleryGrid .fg-gallery-card:hover {
border-color: var(--accent);
background: #141d29;
transform: translateY(-1px);
}
#catalogGalleryGrid .fg-gallery-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#catalogGalleryGrid .fg-gallery-thumbbox {
position: relative;
display: block;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 1  -1;
padding: 56px 20px;
color: var(--muted);
text-align: center;
}
@media (min-width: 1400px) {
#catalogGalleryGrid.fg-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
}
@media (max-width: 760px) {
#catalogDialog.catalog-dialog {
width: calc(100vw - 12px);
height: calc(100vh - 12px);
}
#catalogGalleryGrid.fg-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
padding: 9px;
}
#catalogGalleryGrid .fg-gallery-label {
min-height: 48px;
padding: 7px 6px;
font-size: 10px;
}
}
#catalogGalleryGrid .fg-gallery-card.is-selected {
border-color: var(--accent);
box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px rgba(223,255,67,.18);
}
#catalogGalleryGrid .fg-gallery-card.is-selected::after {
content: 'SEÇİLİ';
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
padding: 4px 7px;
border-radius: 4px;
background: var(--accent);
color: #0c1119;
font-size: 10px;
font-weight: 900;
letter-spacing: .05em;
}