/* EC Tasarım Premium Grid Gallery – fully scoped, Elementor Free compatible. */
.ectpg-grid-gallery { --ectpg-grid-gap: 22px; --ectpg-grid-radius: 16px; --ectpg-grid-accent: #ef4459; width: 100%; min-width: 0; box-sizing: border-box; }
.ectpg-grid-gallery *, .ectpg-grid-gallery *::before, .ectpg-grid-gallery *::after { box-sizing: border-box; }
.ectpg-grid-gallery .ectpg-grid-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 25px; padding: 0; background: transparent; }
.ectpg-grid-gallery .ectpg-grid-filter { box-sizing: border-box; appearance: none; -webkit-appearance: none; display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0 !important; padding: 10px 18px !important; border: 1px solid #e4e8ef !important; border-radius: 999px !important; color: #344054; background: #fff !important; font-size: 13px; font-weight: 600; line-height: 1.3; font-family: inherit; text-transform: none; text-decoration: none; cursor: pointer; opacity: 1 !important; visibility: visible !important; transform: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ectpg-grid-gallery .ectpg-grid-filter:hover { border-color: #9ba8b9 !important; }
.ectpg-grid-gallery .ectpg-grid-filter[aria-pressed="true"] { color: #fff !important; background: #121b2d !important; border-color: #121b2d !important; }
.ectpg-grid-gallery .ectpg-grid-filter:focus-visible, .ectpg-grid-gallery .ectpg-grid-card:focus-visible { outline: 3px solid #448aff !important; outline-offset: 3px !important; }
.ectpg-grid-gallery .ectpg-grid-list { display: grid !important; grid-template-columns: repeat(var(--ectpg-grid-cols, 4), minmax(0, 1fr)); gap: var(--ectpg-grid-gap); margin: 0; padding: 0; min-width: 0; }
.ectpg-grid-gallery .ectpg-grid-item { display: block; padding: 0; margin: 0; min-width: 0; list-style: none; }
.ectpg-grid-gallery .ectpg-grid-item[hidden] { display: none !important; }
.ectpg-grid-gallery .ectpg-grid-card { width: 100% !important; aspect-ratio: var(--ectpg-grid-ratio, 4/3); height: auto; min-height: 0; overflow: hidden; display: block !important; position: relative; padding: 0 !important; margin: 0 !important; border: 0 solid transparent; border-radius: var(--ectpg-grid-radius); background: #edf0f4 !important; color: #fff; text-decoration: none !important; box-shadow: none; isolation: isolate; cursor: zoom-in; line-height: 1.3; transition: border-color .25s ease, box-shadow .28s ease, transform .3s ease; }
.ectpg-grid-gallery .ectpg-grid-card:hover, .ectpg-grid-gallery .ectpg-grid-card:focus-visible { text-decoration: none !important; }
.ectpg-grid-gallery .ectpg-grid-list .ectpg-grid-card::before, .ectpg-grid-gallery .ectpg-grid-list .ectpg-grid-card::after { content: none !important; display: none !important; }
.ectpg-grid-gallery .ectpg-grid-image { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; object-fit: cover; object-position: center; border: none !important; filter: none !important; clip-path: none !important; mix-blend-mode: normal !important; transform: scale(1); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.ectpg-grid-gallery .ectpg-grid-shade { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; position: absolute; inset: 0; z-index: 1; padding: clamp(12px, 4%, 24px); background: linear-gradient(180deg, transparent 32%, rgba(7, 14, 26, .84) 100%); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.ectpg-grid-gallery .ectpg-grid-title { display: block; color: #fff; font-family: inherit; font-size: clamp(14px, 1.2vw, 20px); font-weight: 750; line-height: 1.35; text-align: start; }
.ectpg-grid-gallery .ectpg-grid-kicker { display: block; color: #ffc0c7; font-size: 11px; font-weight: 750; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; text-align: start; }
.ectpg-grid-gallery .ectpg-grid-zoom { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; z-index: 2; display: flex; justify-content: center; align-items: center; background: #fff; color: #1a2534; box-shadow: 0 6px 20px rgba(0,0,0,.16); opacity: 0; transform: translateY(-8px); transition: transform .28s ease, opacity .28s ease; pointer-events: none; }
.ectpg-grid-gallery .ectpg-grid-card:hover .ectpg-grid-shade, .ectpg-grid-gallery .ectpg-grid-card:focus-visible .ectpg-grid-shade { opacity: 1; transform: translateY(0); }
.ectpg-grid-gallery .ectpg-grid-card:hover .ectpg-grid-zoom, .ectpg-grid-gallery .ectpg-grid-card:focus-visible .ectpg-grid-zoom { opacity: 1; transform: none; }
.ectpg-grid-gallery.ectpg-grid-hover-zoom .ectpg-grid-card:hover .ectpg-grid-image { transform: scale(1.065); }
.ectpg-grid-gallery.ectpg-grid-hover-lift .ectpg-grid-card:hover { transform: translateY(-5px); }
.ectpg-grid-gallery.ectpg-grid-preset-premium .ectpg-grid-card { box-shadow: 0 8px 25px rgba(7,15,31,.07); }
.ectpg-grid-gallery.ectpg-grid-preset-premium .ectpg-grid-card:hover { box-shadow: 0 18px 38px rgba(7,15,31,.20); }
.ectpg-grid-gallery.ectpg-grid-preset-corporate { --ectpg-grid-radius: 9px; --ectpg-grid-gap: 18px; }
.ectpg-grid-gallery.ectpg-grid-preset-corporate .ectpg-grid-card { border: 1px solid #e8ebf1; }
.ectpg-grid-gallery.ectpg-grid-preset-minimal { --ectpg-grid-radius: 0px; --ectpg-grid-gap: 12px; }
.ectpg-grid-gallery.ectpg-grid-preset-minimal .ectpg-grid-zoom { border-radius: 4px; }
.ectpg-grid-gallery .ectpg-grid-status { display: block; font-size: 0; line-height: 0; }
.ectpg-grid-empty { padding: 24px; border: 1px dashed #adb5c1; border-radius: 12px; color: #54627a; text-align: center; }
/* Accessible native dialog lives in document.body to avoid transformed Elementor ancestors. */
.ectpg-grid-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; max-height: none; height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; color: #fff; background: #050914; overflow: hidden; box-sizing: border-box; }
.ectpg-grid-dialog:not([open]) { display: none; }
.ectpg-grid-dialog[open] { display: flex; flex-direction: column; align-items: stretch; }
.ectpg-grid-dialog::backdrop { background: rgba(0,0,0,.88); }
.ectpg-grid-dialog__toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex: 0 0 70px; padding: 12px clamp(16px,3vw,48px); gap: 16px; }
.ectpg-grid-dialog__counter { color: #f4f6fa; font: 600 14px/1.4 system-ui,sans-serif; }
.ectpg-grid-dialog__close, .ectpg-grid-dialog__arrow { appearance: none; display: inline-flex !important; justify-content: center; align-items: center; flex: none; width: 46px; height: 46px; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 50% !important; background: rgba(255,255,255,.11) !important; color: #fff !important; font: 400 29px/1 system-ui,sans-serif !important; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ectpg-grid-dialog__close:hover, .ectpg-grid-dialog__arrow:hover { background: rgba(255,255,255,.25) !important; }
.ectpg-grid-dialog__close:focus-visible, .ectpg-grid-dialog__arrow:focus-visible { outline: 3px solid #79aaff; outline-offset: 2px; }
.ectpg-grid-dialog__stage { display: flex; flex: 1 1 auto; position: relative; min-height: 0; width: 100%; align-items: center; justify-content: center; padding: 0 clamp(60px,8vw,132px); overflow: hidden; }
.ectpg-grid-dialog__image { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; display: block; object-fit: contain; margin: auto; border-radius: 8px; box-shadow: 0 15px 60px rgba(0,0,0,.25); }
.ectpg-grid-dialog__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.ectpg-grid-dialog__arrow--prev { left: clamp(12px, 2vw, 35px); }
.ectpg-grid-dialog__arrow--next { right: clamp(12px, 2vw, 35px); }
.ectpg-grid-dialog__arrow:disabled { opacity: .35; cursor: not-allowed; }
.ectpg-grid-dialog__caption { flex: 0 0 auto; max-height: 22vh; overflow: auto; padding: 14px 24px 22px; text-align: center; font: 400 14px/1.4 system-ui,sans-serif; }
.ectpg-grid-dialog__title { margin: 0; font-size: 17px; font-weight: 650; }
.ectpg-grid-dialog__description { margin: 4px 0 0; color: #dce4ef; }
@media (max-width:1024px) { .ectpg-grid-gallery .ectpg-grid-list { grid-template-columns: repeat(var(--ectpg-grid-cols-tablet,2), minmax(0,1fr)); } .ectpg-grid-gallery .ectpg-grid-shade { opacity: 1; transform: none; } }
@media (max-width:767px) { .ectpg-grid-gallery .ectpg-grid-list { grid-template-columns: repeat(var(--ectpg-grid-cols-mobile,2), minmax(0,1fr)); gap: 10px; } .ectpg-grid-gallery .ectpg-grid-filter { padding: 9px 13px !important; min-height: 44px; font-size: 12px; } .ectpg-grid-gallery .ectpg-grid-zoom { width: 32px; height: 32px; right: 8px; top: 8px; opacity: 1; transform: none; } .ectpg-grid-gallery .ectpg-grid-zoom svg { width: 15px; } .ectpg-grid-gallery .ectpg-grid-shade { padding: 10px; } .ectpg-grid-gallery .ectpg-grid-kicker { font-size: 9px; } .ectpg-grid-gallery .ectpg-grid-title { font-size: 12px; } .ectpg-grid-dialog__stage { padding: 0 50px; } .ectpg-grid-dialog__toolbar { flex-basis: 60px; } .ectpg-grid-dialog__close, .ectpg-grid-dialog__arrow { width: 44px; height: 44px; } .ectpg-grid-dialog__image { border-radius: 2px; } }
@media (prefers-reduced-motion:reduce) { .ectpg-grid-gallery *, .ectpg-grid-dialog * { transition: none !important; animation: none !important; } }

/* Original aspect ratio mode uses the actual attachment image proportions. */
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-card { aspect-ratio: auto; }
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-image { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; }
.ectpg-grid-dialog__arrow[hidden] { display: none !important; }

/* 1.1.1 — Reserve gallery card height on the grid item, NOT on a theme-styled link.
   Some mobile themes impose fixed anchor heights; a short link must never collapse
   the grid row or allow the following Elementor section/footer to overlap. */
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: var(--ectpg-grid-ratio, 4/3);
    align-self: stretch;
}
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto;
}
/* Original-ratio cards retain their natural image height in document flow. */
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-list > .ectpg-grid-item {
    aspect-ratio: auto !important;
}
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
}
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card > .ectpg-grid-image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
/* Filtered cards must leave layout completely (stronger than the flow guard). */
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item[hidden] {
    display: none !important;
}

/* 1.1.2: Fundamental flow-height fix. An actual <img> in normal flow owns
 * each card's height; no absolute-positioned card can escape its grid row.
 * This also works in Elementor's iframe editor and constrained mobile themes. */
.ectpg-grid-gallery {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    contain: none;
}
.ectpg-grid-gallery > .ectpg-grid-list {
    display: grid !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-items: start;
}
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item {
    display: block !important;
    position: static !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item[hidden] {
    display: none !important;
}
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ectpg-grid-gallery .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card > .ectpg-grid-image {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--ectpg-grid-ratio, 4/3) !important;
    object-fit: cover;
    margin: 0 !important;
    padding: 0 !important;
}
.ectpg-grid-gallery[style*="--ectpg-grid-ratio:auto"] .ectpg-grid-list > .ectpg-grid-item > .ectpg-grid-card > .ectpg-grid-image {
    aspect-ratio: auto !important;
}
/* Elementor's widget wrapper must not clip rows or pin the card grid to an
 * old 1-row height. The grid itself stays in normal document flow. */
.elementor-widget-ec-tasarim-grid-gallery,
.elementor-widget-ec-tasarim-grid-gallery > .elementor-widget-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}