/* ============================================================
   GeoProxy App - Herkese Acik Uygulama Sayfalari
   Harita kontrol stilleri geoproxy-map.css dosyasindadir.
   ============================================================ */

:root {
    --app-primary: #1a73e8;
    --app-header-bg: #1a237e;
    --app-header-text: #ffffff;
    --app-sidebar-width: 380px;
    --app-sidebar-bg: #ffffff;
    --app-body-bg: #f5f5f5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    background: var(--app-body-bg);
}

/* Mobil/Tablet/Kucuk Desktop: body scroll'u serbest birak (iPad Pro 1024 dahil) */
@media (max-width: 1400px) {
    html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--app-header-bg);
    color: var(--app-header-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1000;
    position: relative;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}

.app-title-group {
    min-width: 0;
}

.app-title {
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-sidebar-toggle {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--app-header-text);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-sidebar-toggle:hover {
    background: rgba(255,255,255,0.25);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.app-container {
    display: flex;
    height: calc(100vh - 56px);
    position: relative;
}

/* layout-custom/form-center/form-only/dashboard/freeform: height SABIT DEGIL —
   icerige gore buyusun, body scroll yapsin. height yerine min-height ile
   en az viewport kadar yer tut. padding-bottom ile son icerige scroll ile
   erisilebilir olsun. */
.app-container.layout-custom,
.app-container.layout-form-center,
.app-container.layout-form-only,
.app-container.layout-dashboard,
.app-container.layout-freeform {
    height: auto;
    min-height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
    display: block;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
    width: var(--app-sidebar-width);
    min-width: var(--app-sidebar-width);
    background: var(--app-sidebar-bg);
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    z-index: 500;
}

.app-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
}

/* Arama paneli yokken sidebar tamamen gizle */
.app-sidebar.no-search {
    display: none;
}

/* Tabs */
.app-sidebar-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.app-sidebar-tab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-tab:hover {
    color: var(--app-primary);
    background: #f0f0f0;
}

.app-sidebar-tab.active {
    color: var(--app-primary);
    border-bottom-color: var(--app-primary);
    font-weight: 600;
}

.app-sidebar-tab i {
    margin-right: 4px;
}

/* Tabs - Vertical (alt alta menu, accordion) */
.app-sidebar-tabs.app-sidebar-tabs-vertical {
    flex-direction: column;
    flex: 1;
    flex-shrink: 1;
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

/* Vertical mode: panel form, tab'in hemen altinda inline */
.app-sidebar-tabs-vertical .app-search-panel {
    border-bottom: 1px solid #ececec;
    background: #fafafa;
}

.app-sidebar-tabs-vertical .app-sidebar-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #ececec;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.app-sidebar-tabs-vertical .app-sidebar-tab:last-child {
    border-bottom: none;
}

.app-sidebar-tabs-vertical .app-sidebar-tab.active {
    border-bottom-color: #ececec;
    border-left-color: var(--app-primary);
    background: rgba(0, 0, 0, 0.03);
}

.app-sidebar-tabs-vertical .app-sidebar-tab-chevron {
    margin-right: 0;
    color: #adb5bd;
    font-size: 0.8rem;
    transition: transform 0.15s;
}

.app-sidebar-tabs-vertical .app-sidebar-tab.active .app-sidebar-tab-chevron {
    transform: rotate(90deg);
    color: var(--app-primary);
}

/* Sidebar Content */
.app-sidebar-content {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 0;
}

/* Alt oznitelik tablosu (position:fixed) sol menunun alt alanlarini ortuyordu.
   Tablo acikken (body.gp-attr-table-open + --gp-attr-table-cover; bkz. extras.js)
   sol menuyu tablonun kapladigi kadar kisaltip tablonun ustunde bitiriyoruz.
   calc hem masaustu flex hem mobil/tablet absolute icin calisir; auto-height
   form/dashboard layout'larinda (% -> auto) no-op. */
body.gp-attr-table-open .app-sidebar {
    height: calc(100% - var(--gp-attr-table-cover, 300px));
}

.app-search-panel {
    display: none;
    padding: 16px;
}

.app-search-panel.active {
    display: block;
}

/* Search Form */
.app-search-form .form-group {
    margin-bottom: 12px;
}

.app-search-form label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.app-search-form .form-control,
.app-search-form .form-select {
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 4px;
}

.app-search-form .form-control:focus,
.app-search-form .form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.15);
}

/* Filtre kolonu: içeriğe sığacak kadar dar */
#scmFieldsTable .scm-col-filterable {
    padding-left: 3px;
    padding-right: 3px;
}
#scmFieldsTable td.scm-col-filterable .form-check-input {
    font-size: 0.7rem;
}

/* Arama paneli — gömülü filtre operatörü butonu ve singleton açılır menüsü */
.app-search-form .app-search-input-group {
    position: relative;
}

.app-search-form .app-search-input-with-filter {
    padding-right: 58px; /* X + funnel butonu icin yer */
}

/* GEOPRX-221: number spinner ve date takvim ikonu, huni/reset butonlariyla cakismasin */
.app-search-form input[type="number"].app-search-input-with-filter::-webkit-inner-spin-button,
.app-search-form input[type="number"].app-search-input-with-filter::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.app-search-form input[type="date"].app-search-input-with-filter::-webkit-calendar-picker-indicator {
    margin-right: 40px;
}
/* select: Bootstrap'in acilir ok'unu huni/reset kumesinin soluna kaydir */
.app-search-form select.app-search-input-with-filter {
    padding-right: 80px;
    background-position: right 60px center;
}

.app-search-form .app-search-filter-reset {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}

.app-search-form .app-search-filter-reset:hover {
    background: #fee2e2;
    color: #dc3545;
}

.app-search-form .app-search-filter-funnel {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.app-search-form .app-search-filter-funnel:hover {
    background: #f1f3f5;
    color: #495057;
}

.app-search-form .app-search-filter-funnel.active {
    color: var(--app-primary);
}

.app-search-form .app-search-filter-funnel.active:hover {
    background: rgba(26, 115, 232, 0.1);
}

/* Singleton popup menu (body altina inject edilir) */
.app-search-filter-op-menu {
    position: fixed;
    z-index: 10000;
    min-width: 160px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-search-filter-op-menu .app-search-filter-op-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    color: #495057;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}

.app-search-filter-op-menu .app-search-filter-op-item:hover {
    background: #f1f3f5;
}

.app-search-filter-op-menu .app-search-filter-op-item.active {
    background: #e7f1ff;
    color: var(--app-primary);
    font-weight: 600;
}

/* Toolbar collapsed iken: orijinal > toggle GORUNUR, App.cshtml'in ekledigi
   ⋯ moreBtn ve dropdown GIZLI kalir. setupOverflowMenu kucuk genislikte
   toggle'i inline display:none ile gizliyor — bunu !important ile geri aliyoruz.
   moreBtn'u da gizleyince collapsed durumda sadece > toggle gorunur. */
.geoproxy-toolbar.gp-toolbar-collapsed > .gp-toolbar-toggle-btn:not(.gp-overflow-more) {
    display: flex !important;
}
.geoproxy-toolbar.gp-toolbar-collapsed > .gp-overflow-more.gp-toolbar-toggle-btn,
.geoproxy-toolbar.gp-toolbar-collapsed > .gp-overflow-menu {
    display: none !important;
}

/* Buttons */
.app-search-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* GEOPRX-199: accordion (vertical) modda sonuç konteyneri JS ile aktif panelin
   hemen altına taşınır. Grid kendi içinde kayan flex:1 bir tablo olduğundan,
   sonuçlar KALAN ALANI DOLDURUR (flex:1 1 auto) — böylece alttaki collapsed
   sekmeler ("Adres Arama" vb.) sonuçların arasına sıkışmaz, temiz biçimde en
   alta itilir (gerekirse scroll). min-height: çok sekme/uzun form olsa bile
   grid'in ezilmemesi için taban yükseklik. Sonuçlar artık panelle inline
   olduğundan eski 50/50 split / gözat flex hack'i gerekmez. */
.app-sidebar-tabs-vertical > .app-results-container {
    flex: 1 1 auto;
    min-height: 220px;
}

/* GEOPRX-199: accordion modda sonuç gösterilirken aktif panelin arama formu
   gizlenir (kullanıcı tercihi) — başlık + sonuçlar görünür, alttaki sekmeler
   araya girmez. Forma dönmek için panel başlığına tıklanır (exitResultsMode);
   form geri gelir. Yalnızca vertical/accordion modda geçerli. */
.app-sidebar-tabs-vertical .app-search-panel.results-active {
    padding: 0;
    border-bottom: none;
    background: transparent;
}
.app-sidebar-tabs-vertical .app-search-panel.results-active .app-search-form {
    display: none;
}

.btn-app-search {
    flex: 1;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-app-search.primary {
    background: var(--app-primary);
    color: #fff;
}

.btn-app-search.primary:hover {
    opacity: 0.9;
}

.btn-app-search.secondary {
    background: #e0e0e0;
    color: #333;
}

.btn-app-search.secondary:hover {
    background: #d0d0d0;
}

/* Results */
.app-results-container {
    border-top: 1px solid #e0e0e0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Resizer: sidebarContent ile resultsContainer arasi surukle-birak cubuk */
.app-sidebar-resizer {
    display: none;
    height: 8px;
    flex: 0 0 8px;
    background: #f1f3f5;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    cursor: ns-resize;
    user-select: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.app-sidebar.has-results .app-sidebar-resizer {
    display: flex;
}

.app-sidebar-resizer:hover,
.app-sidebar-resizer.dragging {
    background: var(--app-primary);
}

.app-sidebar-resizer-grip {
    width: 36px;
    height: 3px;
    background: #adb5bd;
    border-radius: 2px;
    pointer-events: none;
    transition: background 0.15s;
}

.app-sidebar-resizer:hover .app-sidebar-resizer-grip,
.app-sidebar-resizer.dragging .app-sidebar-resizer-grip {
    background: #ffffff;
}

body.app-resizing {
    cursor: ns-resize !important;
    user-select: none !important;
}

@media (max-width: 576px) {
    .app-sidebar-resizer,
    .app-sidebar.has-results .app-sidebar-resizer {
        display: none;
    }
}

.app-results-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.app-results-header h6 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-results-count {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}

/* Fix: ensure sidebar results table uses full width on small screens
   - allow horizontal scrolling if content overflows
   - prevent table from collapsing/centering with right gap
   - remove restrictive max-width on td for phones
*/
@media (max-width: 576px) {
    /* make wrapper scrollable horizontally and use touch scrolling */
    .app-results-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.5rem; /* small inset so floating buttons don't overlap content */
    }

    /* force table to occupy wrapper width and avoid unexpected shrink */
    .app-results-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    /* tablo elemanlarının UI/Display türünü zorla (responsive script'ler bozmaya çalıştıysa düzeltir) */
    .app-results-table thead { display: table-header-group !important; width: auto !important; }
    .app-results-table tbody { display: table-row-group !important; width: auto !important; }
    .app-results-table tr    { display: table-row !important; width: auto !important; }
    .app-results-table th,
    .app-results-table td {
        display: table-cell !important;
        box-sizing: border-box !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 6px 10px !important;
    }

    /* Kolon dağılımı: buton, ana metin ve sayısal kolonları orantılı yap */
    .app-results-table thead th:first-child,
    .app-results-table tbody td:first-child { width: 18% !important; }  /* buton */
    .app-results-table thead th:nth-child(2),
    .app-results-table tbody td:nth-child(2) { width: 60% !important; } /* mahalle / ana metin */
    .app-results-table thead th:nth-child(3),
    .app-results-table tbody td:nth-child(3),
    .app-results-table thead th:nth-child(4),
    .app-results-table tbody td:nth-child(4) { width: 11% !important; text-align: center; } /* ada/parsel */
}

.app-results-table-wrapper {
    overflow-y: auto;
    flex: 1;
}

.app-results-table {
    width: 100%;
    font-size: 0.82rem;
    border-collapse: collapse;
}

.app-results-table thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.app-results-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.app-results-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.app-results-table tbody tr:hover {
    background: #e8f0fe;
}

.app-results-table tbody tr.selected {
    background: #d2e3fc;
}

.btn-show-on-map {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: var(--app-primary);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-show-on-map:hover {
    opacity: 0.85;
}

/* Loading */
.app-loading {
    display: none;
    text-align: center;
    padding: 20px;
    color: #666;
}

.app-loading.active {
    display: block;
}

.app-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

/* No Results */
.app-no-results {
    text-align: center;
    padding: 30px 20px;
    color: #999;
}

.app-no-results i {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

/* ============================================================
   MAP
   ============================================================ */
.app-map-container {
    flex: 1;
    position: relative;
    min-width: 0;
}

.app-map-container #geoproxy-map {
    width: 100%;
    height: 100%;
}

/* ============================================================
   FOOTER (inside sidebar or bottom)
   ============================================================ */
.app-footer {
    padding: 8px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   RIGHT SIDEBAR LAYOUT
   ============================================================ */

.app-layout-right .app-sidebar {
    order: 2;
    border-right: none;
    border-left: 1px solid #e0e0e0;
}

.app-layout-right .app-sidebar.collapsed {
    border-left: none;
}

.app-layout-right .app-map-container {
    order: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    .app-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        z-index: 600;
        transition: transform 0.3s ease;
    }

    .app-sidebar.collapsed {
        transform: translateX(-100%);
        width: var(--app-sidebar-width);
        min-width: var(--app-sidebar-width);
    }

    /* Right sidebar - tablet */
    .app-layout-right .app-sidebar {
        left: auto;
        right: 0;
        box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    }

    .app-layout-right .app-sidebar.collapsed {
        transform: translateX(100%);
    }
}

/* Mobil */
@media (max-width: 576px) {
    .app-header {
        height: 48px;
        padding: 0 10px;
    }

    .app-logo {
        height: 28px;
    }

    .app-title {
        font-size: 1rem;
    }

    .app-subtitle {
        display: none;
    }

    .app-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100vw;
        min-width: 100vw;
    }

    .app-sidebar.collapsed {
        transform: translateX(-100%);
        width: 100vw;
        min-width: 100vw;
    }

    /* Right sidebar - mobil */
    .app-layout-right .app-sidebar {
        left: auto;
        right: 0;
    }

    .app-layout-right .app-sidebar.collapsed {
        transform: translateX(100%);
    }

    /* Multi-page: nav 40px (header 48 + nav 40 = 88) */
    .app-multipage .app-container {
        height: calc(100vh - 48px - 40px);
    }

    /* Header'da sadece logo+title yer alsin, header-right gizli */
    .app-header-right .app-subtitle,
    .app-header-right .text-truncate-mobile {
        display: none !important;
    }

    /* Sidebar arama panelleri kompakt */
    .app-search-panel { padding: 12px; }
}

/* Toggle buton gizleme - sidebar yokken */
.btn-sidebar-toggle.hidden {
    display: none;
}

/* ============================================================
   MULTI-PAGE NAVIGATION BAR
   ============================================================ */
.app-page-nav {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 9999;
}

.app-page-nav-inner {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-page-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.app-page-nav-item:hover {
    color: var(--app-primary);
    background: rgba(0,0,0,0.03);
    text-decoration: none;
}

.app-page-nav-item.active {
    color: var(--app-primary);
    border-bottom-color: var(--app-primary);
    font-weight: 600;
}

.app-page-nav-item i {
    font-size: 1rem;
}

/* Multi-page body: navigation icin yukseklik ayarla */
.app-multipage .app-container {
    height: calc(100vh - 56px - 44px); /* header + nav */
}

/* Multi-page + layout-custom/dashboard vs: fixed height YOK, body scroll */
.app-multipage .app-container.layout-custom,
.app-multipage .app-container.layout-form-center,
.app-multipage .app-container.layout-form-only,
.app-multipage .app-container.layout-dashboard,
.app-multipage .app-container.layout-freeform {
    height: auto;
    min-height: calc(100vh - 56px - 44px);
}

@media (max-width: 768px) {
    .app-page-nav {
        padding: 0 8px;
    }
    .app-page-nav-item {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
}

/* ============================================================
   FORM CENTER LAYOUT
   ============================================================ */
.layout-form-center {
    position: relative;
}

.layout-form-center .app-map-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.layout-form-center .app-map-bg #geoproxy-map {
    width: 100%;
    height: 100%;
}

.form-center-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    padding: 20px;
}

.form-center-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 32px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    pointer-events: auto;
}

.form-center-card h2,
.form-center-card h3 {
    margin-bottom: 20px;
    color: #333;
}

.form-center-card .form-control,
.form-center-card .form-select {
    border-radius: 8px;
}

.form-center-card .btn-primary {
    background: var(--app-primary);
    border-color: var(--app-primary);
    border-radius: 8px;
    padding: 10px 24px;
}

/* ============================================================
   MAP DETAIL LAYOUT
   ============================================================ */
.layout-map-detail {
    flex-direction: column;
}

.layout-map-detail .app-map-section {
    flex: 1;
    min-height: 40%;
    position: relative;
}

.layout-map-detail .app-map-section #geoproxy-map {
    width: 100%;
    height: 100%;
}

.layout-map-detail .app-detail-section {
    height: 40%;
    min-height: 200px;
    border-top: 2px solid #dee2e6;
    overflow-y: auto;
    background: #fff;
}

/* ============================================================
   FORM ONLY LAYOUT
   ============================================================ */
.layout-form-only {
    background: #f5f5f5;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}

.form-only-container {
    max-width: 800px;
    width: 100%;
    margin: 32px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 32px;
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.layout-dashboard {
    overflow-y: auto;
    background: #f0f2f5;
    padding: 16px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
}

.dashboard-grid .widget-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

@media (max-width: 768px) {
    .layout-dashboard {
        padding: 12px;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dashboard-grid .widget-card {
        padding: 14px;
    }
}

/* ============================================================
   CUSTOM LAYOUT
   ============================================================ */
.layout-custom {
    overflow-y: auto;
    overflow-x: hidden;
}

.layout-custom .custom-content {
    width: 100%;
    min-height: 100%;
}

/* ============================================================
   FREEFORM LAYOUT
   ============================================================ */
.layout-freeform {
    min-height: 100vh;
    overflow: auto;
    display: block;
    height: auto;
}

.layout-freeform #geoproxy-map {
    position: relative;
    width: 100%;
    min-height: 400px;
}

/* FreeForm body: overflow izin ver */
.app-freeform {
    overflow: auto;
    height: auto;
}

.app-freeform .app-container {
    height: auto;
}

/* ============================================================
   HEADER/NAV GIZLEME - Yukseklik Ayarlamalari
   ============================================================ */

/* Header gizli: container tam yukseklik */
body:not(.app-multipage) .app-container:first-of-type {
    /* Header yoksa 100vh */
}

/* Multi-page ama nav yok: sadece header yuksekligi cikar */
.app-multipage .app-container.app-no-nav {
    height: calc(100vh - 56px);
}

/* ============================================================
   RESPONSIVE - Multi-page & Layouts
   ============================================================ */

/* Küçük masaüstü / büyük tablet (≤ 992px) */
@media (max-width: 992px) {
    .form-center-card {
        max-width: 520px;
        padding: 28px;
    }
}

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
    .form-center-overlay {
        padding: 12px;
    }

    .form-center-card {
        max-width: 100%;
        padding: 20px;
        border-radius: 10px;
    }

    /* Sekmeler: taşarsa yatay kaydır */
    .form-center-card .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .form-center-card .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .form-center-card .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 7px 12px;
    }

    .layout-map-detail .app-map-section {
        min-height: 30%;
    }

    .layout-map-detail .app-detail-section {
        height: 50%;
    }

    .form-only-container {
        margin: 16px;
        padding: 20px;
    }

    .app-page-nav-item {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* Mobil (≤ 576px) */
@media (max-width: 576px) {
    .form-center-overlay {
        padding: 8px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .form-center-card {
        max-width: 100%;
        width: 100%;
        padding: 16px;
        border-radius: 8px;
        max-height: none;
        overflow-y: visible;
        margin: 0;
    }

    /* MapDetail mobilde: harita 30%, detay 70% */
    .layout-map-detail .app-map-section {
        min-height: 28%;
        max-height: 35%;
    }
    .layout-map-detail .app-detail-section {
        height: auto;
        flex: 1 1 auto;
        min-height: 60%;
    }

    /* FormOnly: padding daralt, full-width */
    .form-only-container {
        margin: 0;
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    /* Logo boyutu */
    .form-center-card img {
        max-height: 56px !important;
        max-width: 120px !important;
        object-fit: contain;
    }

    /* Başlıklar */
    .form-center-card h2,
    .form-center-card h3 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* Sekmeler: yatay kaydırma */
    .form-center-card .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .form-center-card .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .form-center-card .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    /* Butonlar tam genişlik */
    .form-center-card .btn {
        width: 100%;
    }

    /* İstatistik satırı: küçük ekranda sar */
    .form-center-card .d-flex.justify-content-around,
    .form-center-card .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    .form-center-card .d-flex.justify-content-around > *,
    .form-center-card .d-flex.justify-content-between > * {
        flex: 1 1 30%;
        min-width: 80px;
        text-align: center;
    }

    /* Form only */
    .form-only-container {
        margin: 8px;
        padding: 16px;
        border-radius: 8px;
    }
}

/* Çok küçük telefonlar (≤ 390px) */
@media (max-width: 390px) {
    .form-center-overlay {
        padding: 0;
    }

    .form-center-card {
        border-radius: 0;
        padding: 12px;
        min-height: 100%;
    }

    .form-center-card .nav-tabs .nav-link {
        font-size: 0.72rem;
        padding: 5px 8px;
    }
}

/* ============================================================
   RESPONSIVE - Custom Layout
   body prefix ile yüksek specificity → CustomCss ezemez
   Akışkan birimler (vw, vh, rem, clamp)
   ============================================================ */

body.app-multipage .layout-custom,
body .layout-custom {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Tablet ve Mobil (≤ 768px) */
@media (max-width: 768px) {

    /* Klasik responsive: block + margin auto */
    body .app-container.layout-custom {
        display: block !important;
        padding: 1rem !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: calc(100vh - 56px);
    }

    /* centralForm: absolute pozisyonu iptal, normal akışa al.
       max-width 600px KALDIRILDI — 768px'de #centralForm'u daraltiyordu,
       tablo sigmiyordu. Simdi tam ekran genisligi. */
    body .layout-custom #centralForm,
    body .layout-custom [id*="centralForm"] {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        box-sizing: border-box !important;
    }

    /* Kart: tam genişlik, ortalı, içerik taşmasın */
    body .layout-custom .bg-light,
    body .layout-custom .bg-white,
    body .layout-custom .card,
    body .layout-custom #centralForm > *,
    body .app-container.layout-custom > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Kart İÇİNDEKİ her şey max %100 — nükleer çözüm */
    body .layout-custom .bg-light *,
    body .layout-custom .card *,
    body .layout-custom #centralForm * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* KRITIK OVERRIDE: OL harita rendering + kontrol elementleri — max-width YASAK!
       (toolbar HARIC — o max-width: 75% kullanir)
       Wildcard (*) kuralinin canvas/scale/slot'lara uygulanmasini engeller */
    body .layout-custom #centralForm #geoproxy-map canvas,
    body .layout-custom #geoproxy-map canvas,
    #geoproxy-map canvas,
    #geoproxy-map .ol-layer,
    #geoproxy-map .ol-layer *,
    #geoproxy-map .ol-viewport > *,
    #geoproxy-map .ol-scale-line,
    #geoproxy-map .ol-scale-line *,
    #geoproxy-map .gp-map-controls,
    #geoproxy-map .gp-map-controls *,
    #geoproxy-map .gp-slot,
    #geoproxy-map .gp-slot *,
    #geoproxy-map .ol-control:not(.geoproxy-toolbar),
    #geoproxy-map .ol-control:not(.geoproxy-toolbar) * {
        max-width: none !important;
        box-sizing: content-box !important;
    }

    /* Resimler (logo vs.) responsive */
    body .layout-custom img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Başlık / metin - KESİNLİKLE wrap */
    body .layout-custom .text-center,
    body .layout-custom .text-center *,
    body .layout-custom strong,
    body .layout-custom b {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    body .layout-custom [style*="padding-top"] {
        padding-top: 0 !important;
    }

    /* Inline sabit pixel width'leri sıfırla */
    body .layout-custom [style*="width: 500px"],
    body .layout-custom [style*="width:500px"],
    body .layout-custom [style*="width: 400px"],
    body .layout-custom [style*="width:400px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* TÜM flex satırları → wrap */
    body .layout-custom [style*="display:flex"],
    body .layout-custom [style*="display: flex"],
    body .layout-custom .no-print,
    body .layout-custom .d-flex:not(.flex-column) {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 1vw !important;
    }

    body .layout-custom [style*="display:flex"] > *,
    body .layout-custom .no-print > *,
    body .layout-custom .d-flex > * {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Başlık / metin wrap */
    body .layout-custom h1, body .layout-custom h2,
    body .layout-custom h3, body .layout-custom h4,
    body .layout-custom h5, body .layout-custom h6,
    body .layout-custom p, body .layout-custom label,
    body .layout-custom .text-center,
    body .layout-custom strong, body .layout-custom span {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Nav tabs yatay scroll */
    body .layout-custom .app-page-nav-inner {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    body .layout-custom .app-page-nav-inner::-webkit-scrollbar { display: none; }
    body .layout-custom .app-page-nav-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Harita wrapper padding (asıl harita kuralları geoproxy-map.css'te) */
    body .layout-custom .map-wrapper { padding: 2vw !important; }

    /* Form alanları */
    body .layout-custom input,
    body .layout-custom select,
    body .layout-custom textarea,
    body .layout-custom .form-control {
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }

    body .layout-custom .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Info panel */
    body .layout-custom .info-panel { overflow-x: auto; }
    body .layout-custom table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobil (≤ 576px) */
@media (max-width: 576px) {

    body .app-container.layout-custom {
        padding: 0.5rem !important;
    }

    body .app-container.layout-custom > *,
    body .layout-custom #centralForm,
    body .layout-custom .bg-light,
    body .layout-custom .bg-white,
    body .layout-custom .card {
        max-width: 100% !important;
    }

    body .layout-custom .p-4 { padding: 3vw !important; }
    body .layout-custom .p-3 { padding: 2vw !important; }
    body .layout-custom .mb-4 { margin-bottom: 2vw !important; }
    body .layout-custom .mb-3 { margin-bottom: 1.5vw !important; }
    body .layout-custom .mt-4 { margin-top: 2vw !important; }

    body .layout-custom .app-page-nav-item {
        font-size: clamp(0.7rem, 3vw, 0.85rem) !important;
        padding: 0.5rem 0.7rem !important;
    }

    /* Logo akışkan */
    body .layout-custom .text-center > img,
    body .layout-custom img {
        max-height: 20vw;
        max-width: 40vw;
        width: auto;
        height: auto;
    }

    body .layout-custom form .btn,
    body .layout-custom .btn.w-100 { width: 100% !important; }

    /* Font akışkan */
    body .layout-custom h1 { font-size: clamp(1rem, 5vw, 1.5rem) !important; }
    body .layout-custom h2 { font-size: clamp(0.95rem, 4.5vw, 1.3rem) !important; }
    body .layout-custom h3 { font-size: clamp(0.9rem, 4vw, 1.2rem) !important; }
    body .layout-custom h4 { font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important; }
    body .layout-custom p, body .layout-custom label {
        font-size: clamp(0.8rem, 3.2vw, 1rem) !important;
    }
}

/* ============================================================
   GeoProxyDataGrid - Reusable sonuc tablosu (GEOPRX-119)
   Filter / Sort / Pagination / Excel Export
   ============================================================ */

/* Root wrapper - flex layout, parent height'i tam doldurur */
.gp-datagrid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Flex parent ihtiyaci - container'in direkt cocugu otomatik flex grow */
.app-results-container > #resultsGridHost,
.gp-datagrid-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar (baslik + count + Excel butonu) */
.gp-datagrid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.gp-datagrid-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.gp-datagrid-count {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}

.gp-datagrid-export-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 0.78rem;
    background: var(--app-primary, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.gp-datagrid-export-btn:hover:not(:disabled) { opacity: 0.9; }
.gp-datagrid-export-btn:active:not(:disabled) { opacity: 0.75; }
.gp-datagrid-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9aa0a6;
}
.gp-datagrid-export-btn i { font-size: 0.85rem; }

/* Table wrapper (yatay/dikey scroll) */
.gp-datagrid-table-wrapper {
    overflow: auto;
    flex: 1;
    min-height: 80px;
}

/* JS her zaman inline width + kolon width verir (table-layout:fixed).
   min-width:max-content Firefox'ta tabloyu intrinsic sisirip yatay scroll'a yol aciyordu -> kaldirildi. */
.gp-datagrid-table {
    width: max-content;
    font-size: 0.82rem;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Her kolon icin tabandaki minimum (JS dinamik hesaplama dominant olur) */
.gp-datagrid-table th,
.gp-datagrid-table td {
    min-width: 80px;
}

/* Header row - sortable kolon basliklari */
.gp-datagrid-table thead tr.gp-datagrid-header-row th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8f9fa;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.gp-datagrid-table thead tr.gp-datagrid-header-row th.sortable {
    cursor: pointer;
    user-select: none;
}

.gp-datagrid-table thead tr.gp-datagrid-header-row th.sortable:hover {
    background: #eef1f4;
}

.gp-datagrid-th-label {
    margin-right: 4px;
}

.gp-datagrid-sort-indicator {
    opacity: 0.35;
    font-size: 0.72rem;
    margin-left: 2px;
}

.gp-datagrid-table thead tr.gp-datagrid-header-row th.sort-asc .gp-datagrid-sort-indicator,
.gp-datagrid-table thead tr.gp-datagrid-header-row th.sort-desc .gp-datagrid-sort-indicator {
    opacity: 1;
    color: var(--app-primary, #1a73e8);
}

/* Filter row */
.gp-datagrid-table thead tr.gp-datagrid-filter-row th {
    position: sticky;
    top: 28px;
    z-index: 2;
    background: #fafbfc;
    padding: 6px 8px;
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #eee;
    font-weight: normal;
}

.gp-datagrid-filter-wrap {
    position: relative;
    width: 100%;
}

.gp-datagrid-filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 30px 5px 8px;
    font-size: 0.82rem;
    line-height: 1.3;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background: #fff;
    color: #222;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Aktif filtre var - X butonu icin extra padding-right (2 ikon) */
.gp-datagrid-filter-wrap.has-active-filter .gp-datagrid-filter-input {
    padding-right: 54px;
}

.gp-datagrid-filter-input:focus {
    border-color: var(--app-primary, #1a73e8);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

.gp-datagrid-filter-input:disabled {
    background: #f5f5f5;
    color: #888;
    cursor: not-allowed;
}

.gp-datagrid-filter-input::placeholder {
    color: #aaa;
    font-size: 0.72rem;
}

/* Filter funnel butonu - operator menusu acmak icin */
.gp-datagrid-filter-icon-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: #999;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gp-datagrid-filter-icon-btn:hover {
    background: rgba(26, 115, 232, 0.1);
    color: var(--app-primary, #1a73e8);
}

.gp-datagrid-filter-icon-btn.active {
    color: var(--app-primary, #1a73e8);
}

.gp-datagrid-filter-icon-btn.active::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 5px;
    height: 5px;
    background: var(--app-primary, #1a73e8);
    border-radius: 50%;
    border: 1px solid #fff;
}

/* Filtre temizleme X butonu - aktif filtre varsa funnel'in solunda */
.gp-datagrid-filter-clear-btn {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: #d33;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.gp-datagrid-filter-clear-btn:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #b00;
}

/* Body satirlari */
.gp-datagrid-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.gp-datagrid-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.gp-datagrid-table tbody tr:hover {
    background: #e8f0fe;
}

.gp-datagrid-table tbody tr.selected {
    background: #d2e3fc;
}

/* Action kolonu — genislik JS'ten gelir (GEOPRX-145: aksiyon sayisi/label'a gore
   _actionsColWidth header th'ye inline yazar; burada sadece taban min-width) */
.gp-datagrid-table th.gp-datagrid-col-actions,
.gp-datagrid-table td.gp-datagrid-col-actions {
    min-width: 50px;
    text-align: center;
    padding: 4px 6px;
}

.gp-datagrid-row-action-btn {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: var(--app-primary, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

/* GEOPRX-145: birden fazla aksiyon butonu yan yana */
.gp-datagrid-table td.gp-datagrid-col-actions .gp-datagrid-row-action-btn + .gp-datagrid-row-action-btn {
    margin-left: 4px;
}

/* GEOPRX-145: aksiyon butonu opsiyonel label (orn. "İmar Durumu") */
.gp-datagrid-row-action-label {
    margin-left: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.gp-datagrid-row-action-btn:hover {
    opacity: 0.85;
}

/* Empty state */
.gp-datagrid-empty {
    text-align: center;
    padding: 30px 20px;
    color: #999;
}

.gp-datagrid-empty i {
    font-size: 2rem;
    margin-bottom: 8px;
}

/* Pagination - 2 satir grid: info|pagesize ust, controls alt (centered) */
.gp-datagrid-pagination {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "info pagesize"
        "controls controls";
    gap: 6px 8px;
    align-items: center;
    padding: 6px 10px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.gp-datagrid-pagination-info {
    grid-area: info;
    color: #555;
    white-space: nowrap;
}

.gp-datagrid-pagination-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.gp-datagrid-pagination-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.78rem;
    background: #fff;
    color: #333;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gp-datagrid-pagination-btn:hover:not(:disabled):not(.active) {
    background: #e8f0fe;
    border-color: var(--app-primary, #1a73e8);
}

.gp-datagrid-pagination-btn.active {
    background: var(--app-primary, #1a73e8);
    color: #fff;
    border-color: var(--app-primary, #1a73e8);
    cursor: default;
}

.gp-datagrid-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gp-datagrid-pagination-ellipsis {
    color: #999;
    padding: 0 2px;
}

.gp-datagrid-pagination-current {
    padding: 0 8px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.gp-datagrid-pagesize {
    grid-area: pagesize;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    justify-self: end;
}

.gp-datagrid-pagesize label {
    margin: 0;
    color: #555;
    font-size: 0.78rem;
}

.gp-datagrid-pagesize-select {
    padding: 2px 4px;
    font-size: 0.78rem;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

/* Operator menusu - body'ye eklenir, absolute */
.gp-datagrid-operator-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 150px;
    padding: 4px 0;
    font-size: 0.78rem;
}

.gp-datagrid-operator-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    transition: background 0.1s;
}

.gp-datagrid-operator-item:hover {
    background: #e8f0fe;
}

.gp-datagrid-operator-item.active {
    color: var(--app-primary, #1a73e8);
    font-weight: 600;
    background: #f0f7ff;
}

.gp-datagrid-operator-item.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 6px;
    font-size: 0.7rem;
}

.gp-datagrid-operator-item:not(.active)::before {
    content: '';
    display: inline-block;
    width: 14px;
}

/* Mobil */
@media (max-width: 576px) {
    .gp-datagrid-toolbar {
        padding: 6px 10px;
        gap: 6px;
    }
    .gp-datagrid-export-btn {
        padding: 3px 8px;
        font-size: 0.72rem;
    }
    .gp-datagrid-table thead tr.gp-datagrid-filter-row th {
        top: 0;
        padding: 4px 6px;
    }
    .gp-datagrid-filter-input {
        font-size: 0.78rem;
        padding: 4px 6px;
    }
    .gp-datagrid-pagination {
        font-size: 0.72rem;
        padding: 4px 6px;
        gap: 4px;
    }
    .gp-datagrid-pagination-btn {
        min-width: 22px;
        height: 22px;
        font-size: 0.72rem;
    }
    .gp-datagrid-table tbody td {
        max-width: none;
        padding: 5px 8px;
    }
}

/* Type-ahead combobox (dinamik select alanlari) */
.app-combobox { position: relative; }
.app-combobox::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
.app-combobox-input { padding-right: 32px; }
.app-combobox-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-top: -1px;
}
.app-combobox-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f3f5;
}
.app-combobox-item:last-child { border-bottom: none; }
.app-combobox-item:hover,
.app-combobox-item.active { background: #e7f1ff; color: #0d6efd; }
.app-combobox-status {
    padding: 8px 12px;
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================
   Son Kayitlar Widget (RecentItemsWidget)
   Sag tarafta sticky panel — harita uzerinde glassmorphism overlay.
   ============================================================ */
.app-recent-items {
    position: absolute;
    /* top: JS tarafından dinamik ayarlanır — recent-items-widget.js içindeki
       setupLayerPositionObserver, katman paneline göre konumlandırır.
       Fallback olarak inline style yoksa katman butonunun altı için 110px verilir. */
    top: 110px;
    right: 20px;
    width: 320px;
    /* TAM 2 kart gozuksun (boy ne olursa olsun): header ~48 + body padding 20
       + 2 kart (~84 px + 6 gap + 84) ~174 = ~242 px. Geri kalanini auto-scroll
       gosteriyor — fazla yukseklik istemiyoruz. */
    max-height: 250px;
    display: flex;
    flex-direction: column;
    background: #0F757D;
    color: #fff;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 4; /* diğer haritaüstü kontroller üstte kalsın */
    font-size: 0.9rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: width 0.2s ease, max-height 0.2s ease;
}

.app-recent-items.collapsed .app-recent-items-body {
    display: none !important;
}

.app-recent-items.collapsed {
    width: 52px;
    height: 52px;
    max-height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    overflow: visible;
    display: block;
}

/* Collapsed durumda header'in icindekiler gizlenir — yerine merkezi mezar ikonu konur */
.app-recent-items.collapsed .app-recent-items-header {
    border-bottom: none;
    padding: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.app-recent-items.collapsed #recentItemsTitle,
.app-recent-items.collapsed .app-recent-items-toggle {
    display: none !important;
}

/* Mezar/defin ikonu — SVG data URL ile (Bootstrap Icons baglantisi gerekmez) */
.app-recent-items.collapsed .app-recent-items-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2c-3.31 0-6 2.69-6 6v14h12V8c0-3.31-2.69-6-6-6zm-1 5h2v3h-2V7z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.app-recent-items.collapsed:hover {
    background: linear-gradient(180deg, rgba(28, 33, 48, 0.98) 0%, rgba(18, 22, 33, 0.98) 100%);
    transform: scale(1.05);
    transition: transform 0.15s;
}

.app-recent-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.2px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    /* Çift tıklamada metin seçilmesin — başlığa tıklayarak küçült/aç davranışı için */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.app-recent-items-toggle {
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.app-recent-items-toggle i {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
}

.app-recent-items-toggle:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}

.app-recent-items-toggle:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
    outline: none;
}

.app-recent-items-body {
    /* Auto-scroll (carousel) icin: scroll bar yok, track JS ile yukari kayar */
    overflow: hidden;
    flex: 1 1 auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* JS render'da tum kartlari saran wrapper — transform: translateY ile kaydirilir */
.app-recent-items-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

/* Hover'da otomatik kayma pause — kullanici okumak isteyince durur */
.app-recent-items-body:hover .app-recent-items-track {
    transition: none !important;
}

.app-recent-items-body::-webkit-scrollbar {
    width: 8px;
}

.app-recent-items-body::-webkit-scrollbar-track {
    background: transparent;
}

.app-recent-items-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.app-recent-items-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
    background-clip: padding-box;
}

.app-recent-items-loading,
.app-recent-items-empty {
    padding: 28px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}

.app-recent-items-empty i,
.app-recent-items-loading i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}

.app-recent-item-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    border: 1px solid transparent;
}

.app-recent-item-card:last-child {
    margin-bottom: 0;
}

.app-recent-item-card:hover,
.app-recent-item-card:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    outline: none;
}

.app-recent-item-card:active {
    transform: translateX(-2px) scale(0.99);
}

.app-recent-item-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-recent-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    background: #1c2030;
}

.app-recent-item-img img.img-fallback {
    display: none;
}

.app-recent-item-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 2rem;
    z-index: 1;
}

.app-recent-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.app-recent-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-recent-item-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tablet — biraz daraltma */
@media (max-width: 992px) {
    .app-recent-items {
        width: 280px;
        top: 16px;
        right: 16px;
    }
    .app-recent-items-body {
        max-height: 360px;
    }
    .app-recent-item-img {
        width: 56px;
        height: 56px;
    }
}

/* Mobil — kompakt */
@media (max-width: 768px) {
    .app-recent-items {
        width: 220px;
        top: 8px;
        right: 8px;
        border-radius: 10px;
    }
    .app-recent-items-header {
        padding: 10px 12px;
        font-size: 0.88rem;
    }
    .app-recent-items-body {
        max-height: 240px;
        padding: 6px;
    }
    .app-recent-item-card {
        padding: 6px;
        gap: 8px;
    }
    .app-recent-item-img {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    .app-recent-item-title {
        font-size: 0.85rem;
    }
    .app-recent-item-subtitle {
        font-size: 0.72rem;
    }
}

/* ============================================================
   Detay Karti — modal centered, tab'lı, 2-kolon body, açık tema
   Edremit Belediyesi MEBIS tarzı: ortada büyük, sade beyaz
   ============================================================ */
.app-detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.app-detail-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.app-detail-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 16px));
    width: min(1200px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #212529;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.app-detail-card.open {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* ===== Header ===== */
.app-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--app-primary, #1a73e8);
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.app-detail-card-title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    flex: 1;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-detail-card-close {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.15s, transform 0.15s;
}

.app-detail-card-close svg {
    color: #fff;
    fill: #fff;
}

.app-detail-card-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.06);
}

.app-detail-card-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

/* ===== Tab Bar ===== */
.app-detail-tabs {
    display: flex;
    background: #fbf3d1; /* açık sarımsı (örnekteki gibi) */
    border-bottom: 1px solid #e9d997;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.app-detail-tabs::-webkit-scrollbar { height: 4px; }
.app-detail-tabs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); }

.app-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: #4a3c0a;
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.app-detail-tab i {
    font-size: 1rem;
}

.app-detail-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1300;
}

.app-detail-tab.active {
    color: #1a1300;
    border-bottom-color: var(--app-primary, #1a73e8);
    font-weight: 600;
}

/* ===== Body ===== */
.app-detail-card-body {
    overflow-y: auto;
    padding: 24px;
    background: #fff;
    flex: 1;
    min-height: 360px;
}

/* Tab content swap */
.app-detail-tab-content {
    display: none;
}
.app-detail-tab-content.active {
    display: block;
}

.app-detail-card-body::-webkit-scrollbar { width: 8px; }
.app-detail-card-body::-webkit-scrollbar-track { background: #f3f3f3; }
.app-detail-card-body::-webkit-scrollbar-thumb {
    background: #c8ced3;
    border-radius: 4px;
    border: 2px solid #f3f3f3;
    background-clip: padding-box;
}

.app-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Sol kolon: alan listesi */
.app-detail-fields {
    display: flex;
    flex-direction: column;
}

.app-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    gap: 16px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.95rem;
}

.app-detail-row:last-child {
    border-bottom: none;
}

.app-detail-row-label {
    color: var(--app-primary, #1a73e8);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.app-detail-row-value {
    color: #212529;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* Sağ kolon: foto + sub-actions */
.app-detail-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.app-detail-photo {
    /* Sol kolonla aynı yükseklik; foto absolute ortalanır */
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.app-detail-photo img {
    /* Alanda ortalı; yön gp-* ile belirlenir */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20);
    transition: opacity 200ms ease;
    opacity: 1;
}

/* yatay: genişliği doldurur / dikey: yüksekliği doldurur (sınıf JS'ten) */
.app-detail-photo img.gp-landscape {
    width: 100%;
    height: auto;
}
.app-detail-photo img.gp-portrait {
    height: 100%;
    width: auto;
}

/* Yol Tarifi foto taban yukseklik */
.app-detail-tab-content[data-tab-content="guzergah"] .app-detail-photo {
    min-height: 360px;
}

/* Foto yüklenirken: img gizli + spinner görünür.
   onload/onerror'ta JS .loading class'ını kaldırır → img görünür olur. */
.app-detail-photo.loading {
    position: relative;
}
.app-detail-photo.loading img {
    opacity: 0;
}
.app-detail-photo.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid #e5e7eb;
    border-top-color: #4a90e2;
    border-radius: 50%;
    animation: gp-photo-spin 0.8s linear infinite;
    z-index: 1;
}
@keyframes gp-photo-spin {
    to { transform: rotate(360deg); }
}

/* Foto altında external link grubu */
.app-detail-sublinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

/* "Fâtiha Sûresi" tarzı sade alt-link (foto altında) */
.app-detail-sublink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}

.app-detail-sublink i {
    font-size: 1.1rem;
}

.app-detail-sublink:hover {
    color: var(--app-primary, #1a73e8);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

/* Harita ve Güzergah tab — sol kolon (mini-map / yol tarifi) */
.app-detail-map-col,
.app-detail-guzergah-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Harita tab: mini OL map container */
.app-detail-mini-map {
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Harita tab'ı açıldığında routing hesaplanırken gosterilen ortali spinner.
   .app-detail-mini-map container 360px yuksekliginde — flex ile dikey ortala. */
.app-detail-map-loading {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}
.app-detail-map-loading .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
}

.app-detail-map-info {
    margin-top: 10px;
    color: #6c757d;
    font-size: 0.86rem;
    text-align: center;
}

/* Mini-map katman aç/kapat kutusu (sağ üstte) */
/* Mini-haritadaki ol-ext LayerSwitcher butonu — daha kompakt, modern */
.app-detail-mini-map .ol-layerswitcher.ol-collapsed {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    top: 8px !important;
    right: 8px !important;
}
.app-detail-mini-map .ol-layerswitcher button {
    width: 34px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    color: #1976d2 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: transform 0.15s, box-shadow 0.15s;
}
.app-detail-mini-map .ol-layerswitcher button:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}
.app-detail-mini-map .ol-layerswitcher button:before,
.app-detail-mini-map .ol-layerswitcher button:after {
    border-color: #1976d2 !important;
}

.app-detail-layer-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #212529;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    z-index: 5;
    min-width: 120px;
}

.app-detail-layer-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.app-detail-layer-toggle-title {
    font-weight: 600;
    color: #495057;
    user-select: none;
}

.app-detail-layer-toggle-collapse {
    background: transparent;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;
}
.app-detail-layer-toggle-collapse:hover {
    background: #e9ecef;
}

.app-detail-layer-toggle.collapsed {
    min-width: auto;
    padding: 4px 8px;
    cursor: pointer;
}
.app-detail-layer-toggle.collapsed .app-detail-layer-toggle-header {
    margin-bottom: 0;
}
.app-detail-layer-toggle.collapsed .app-detail-layer-toggle-title {
    font-size: 0.78rem;
}

.app-detail-layer-toggle-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
}

.app-detail-layer-toggle-item input {
    margin: 0;
}

/* Güzergah tab — adım adım yol tarifi liste (Edremit tarzı) */
.app-detail-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-detail-step {
    position: relative;
    padding: 12px 0 12px 24px;
    color: #495057;
    font-size: 0.92rem;
    line-height: 1.55;
}

.app-detail-step::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #dee2e6;
}

.app-detail-step:first-child::before {
    top: 14px;
}

.app-detail-step:last-child::before {
    bottom: calc(100% - 14px);
}

.app-detail-step-bullet {
    position: absolute;
    left: 0;
    top: 14px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ced4da;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ced4da;
}

.app-detail-step.total {
    font-weight: 600;
    color: #198754;
}

.app-detail-step.total .app-detail-step-bullet {
    background: #198754;
    box-shadow: 0 0 0 1px #198754;
}

.app-detail-step-text {
    display: block;
}

/* CTA bloğu (Güzergah tab içeriği — sol kolonda) */
.app-detail-cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f8f9fa;
    border-radius: 10px;
    min-height: 320px;
}

.app-detail-cta-icon {
    font-size: 2.6rem;
    color: var(--app-primary, #1a73e8);
    margin-bottom: 10px;
}

.app-detail-cta-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: #212529;
}

.app-detail-cta-desc {
    color: #6c757d;
    font-size: 0.92rem;
    margin: 0 0 18px;
    line-height: 1.5;
}

.app-detail-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Empty state — alanlar yoksa veya foto yoksa */
.app-detail-empty {
    padding: 24px;
    text-align: center;
    color: #6c757d;
}

/* Responsive — tablet ve mobil */
@media (max-width: 768px) {
    .app-detail-card {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 10px;
    }
    .app-detail-card-header { padding: 12px 16px; }
    .app-detail-card-title { font-size: 0.98rem; }
    .app-detail-tab { padding: 10px 14px; font-size: 0.88rem; }
    .app-detail-card-body { padding: 16px; }
    .app-detail-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* Mobilde fotoğraf yukarıda */
    .app-detail-media { order: -1; }
    .app-detail-photo { max-width: 320px; }
}

/* Print-mode layout override'lari — @media print DISINDA tutuldu cunku class
   sadece JS print akisinda eklenir (sayfa normal goruntulemede etkisiz kalir)
   VE @media print icinde olunca bazi durumlarda 1fr 1fr grid override edilemez.
   Tab icerigi tek kolona dusurulur; sag taraftaki foto print'te gizli oldugu
   icin mini-map/yol-tarifi sag kenara kadar uzanir. */
body:has(.app-detail-card.app-detail-print-mode) .app-detail-content {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}
body:has(.app-detail-card.app-detail-print-mode) .app-detail-map-col,
body:has(.app-detail-card.app-detail-print-mode) .app-detail-guzergah-col {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Yazdırma stili — sadece kart içeriği basılsın.
   ÖNEMLİ: Tüm kurallar `body:has(.app-detail-card)` ile scope'lanır.
   Sayfada Defin Bilgi Kartı popup'ı (.app-detail-card) yoksa kural devre dışı
   kalır — aksi halde diğer uygulamaların (e-Çap, KRH, …) print'i de
   `body * { visibility: hidden }` kuralıyla boşa düşerdi. */
@media print {
    /* Sayfa kenar bosluklari — Chrome'un default'i yetersiz oldugu icin yesil
       baslik bandinin ust ucu kesiliyor. 1cm yan, 1.5cm ust-alt rahat. */
    @page {
        size: A4 portrait;
        margin: 1.5cm 1cm;
    }

    /* Print-mode aktifken (yazdir akisi) body'nin DIGER tum cocuklarini DISPLAY:NONE
       ile gercekten kaldiriyoruz — visibility:hidden yer kapliyor ve kart 2.
       sayfaya itiyor (ilk sayfa bos kaliyordu). Display:none ile kart bodynin
       ilk gorulen icerigi olur, page-break dogru calisir. */
    body:has(.app-detail-card.app-detail-print-mode) > *:not(.app-detail-card) {
        display: none !important;
    }
    body:has(.app-detail-card) .app-detail-backdrop { display: none !important; }
    body:has(.app-detail-card) .app-detail-tabs { display: none !important; }
    body:has(.app-detail-card) .app-detail-card-close { display: none !important; }

    /* === KRITIK: page-break calismasi icin tum container'lardan
       position:absolute, overflow:hidden/auto, flex, max-height KALDIR.
       Bunlar Chrome'un page-break engine'ini kapatir; kart'in icerigi
       tek bir kapatilmis blok olarak ele alinir, ikinci sayfaya akmaz. */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 720px !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        font-size: 11px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-body {
        display: block !important;
        overflow: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        flex: none !important;
        /* Padding 0 — mini-map ve diger icerik kart border'ina kadar uzansin
           (sagda kalan gri kenar bu padding'ten geliyordu). */
        padding: 0 !important;
    }

    /* Tab-content'lerin iç boşluğunu manuel ver: detay ve guzergah'da hafif
       padding kalsin ki yazi border'a yapismasin; mini-map ZATEN tab-content
       icinde 230 px sabit yukseklikte, padding eklemeyiz ki tam kenara dayansin. */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="detay"],
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="guzergah"] {
        padding: 0 12px;
    }

    /* Tum tab-content'leri goster (siralama JS'te DOM appendChild ile yapildi —
       flex/order yok cunku flex page-break-before'i yutuyor). Resim gizli. */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content {
        display: block !important;
        margin-bottom: 8px;
    }
    /* Harita ve Detay icinde bolunmesin — kucukler, sigarlar */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="harita"],
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="detay"] {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Yol Tarifi her zaman yeni sayfada baslasin (uzun ise icinde bolunebilir) */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="guzergah"] {
        page-break-before: always !important;
        break-before: page !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-media { display: none !important; }

    /* Hazirlik overlay'i print'e dahil olmasin — sadece ekranda goruncek. */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-print-overlay { display: none !important; }

    /* ==================== RESMI DOKUMAN TASARIMI ==================== */

    /* Sayfa kenar bosluklari ve genel kart cercevesi */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card {
        border: 1px solid #198754 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Belge basligi (kart header) — yesil bant, ortali, profesyonel */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-header {
        background: #198754 !important;
        color: #ffffff !important;
        padding: 14px 20px !important;
        margin: 0 0 0 0 !important;
        text-align: center !important;
        display: block !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-title::before {
        content: "DEFİN BİLGİ KARTI";
        display: block;
        font-size: 15px;
        letter-spacing: 2px;
        margin-bottom: 4px;
        font-weight: 700;
    }

    /* Bolum baslıklari — her tab-content'in basina otomatik etiket ekle */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="harita"]::before {
        content: "KONUM";
        display: block;
        background: #f0f6f2;
        color: #198754;
        padding: 7px 14px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.5px;
        border-left: 4px solid #198754;
        margin: 0 0 10px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="detay"]::before {
        content: "KİŞİ BİLGİLERİ";
        display: block;
        background: #f0f6f2;
        color: #198754;
        padding: 7px 14px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.5px;
        border-left: 4px solid #198754;
        margin: 14px 0 10px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="guzergah"]::before {
        content: "YOL TARİFİ";
        display: block;
        background: #f0f6f2;
        color: #198754;
        padding: 7px 14px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 1.5px;
        border-left: 4px solid #198754;
        margin: 0 0 14px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Mini-harita cercevesi */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-mini-map {
        height: 230px !important;
        min-height: 230px !important;
        border: 1px solid #d0d7de !important;
        border-radius: 4px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-map-info {
        font-size: 9px !important;
        font-style: italic;
        color: #6c757d !important;
        text-align: center;
        margin: 6px 0 0 !important;
    }

    /* Kisi bilgileri satirlari — alternating bg, hizalama */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-fields {
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row {
        display: flex !important;
        padding: 7px 14px !important;
        font-size: 11px !important;
        border-bottom: 1px solid #e9ecef !important;
        margin: 0 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row:last-child {
        border-bottom: none !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row:nth-child(even) {
        background: #f8f9fa !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-label {
        flex: 0 0 38% !important;
        color: #198754 !important;
        font-weight: 600 !important;
        font-size: 11px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-value {
        flex: 1 !important;
        color: #212529 !important;
        font-weight: 500 !important;
        font-size: 11px !important;
        text-align: right !important;
    }

    /* Yol tarifi — orijinalden biraz daha kompakt (font ve dikey aralik
       hafifce kuculmus). Uzun yol tarifleri 2. sayfayi tasmasin. */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-guzergah-col {
        font-size: 10.5px !important;
        line-height: 1.55 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-step {
        padding: 10px 0 10px 22px !important;
        font-size: 10.5px !important;
        line-height: 1.55 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-step-bullet {
        top: 12px !important;
    }

    /* Belge alt notu — tab'lardan sonra otomatik */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-body::after {
        content: "Bu belge bilgilendirme amaçlıdır. Resmi belge niteliği taşımaz.";
        display: block;
        margin-top: 20px;
        padding: 10px 14px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        font-size: 9px;
        color: #6c757d;
        font-style: italic;
        text-align: center;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Yazdirma hazirligi overlay'i — kart icine ABSOLUTE konumlanir.
   Bekleme fazi: hafif blur (4px) + yari seffaf, kart altta Detay tab orijinal
   haliyle gozukur. doPrint fazi: JS blur'u yogunlastirir (16px) - rearrange
   detaylari kaybolur ama tam beyaz olmaz. Ortada "Hazirlaniyor" kutusu. */
.app-detail-print-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    transition: backdrop-filter 0.15s ease;
}
.app-detail-print-overlay-inner {
    text-align: center;
    padding: 22px 32px;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* GEOPRX-279 yazdirma tek-sayfa override'lari (cift selektor: prod :has + test class) */
@media print {
    @page { margin: 1cm 1cm; }

    /* Yol Tarifi ust sayfada kaldigi yerden aksin (zorla yeni sayfa yok) */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="guzergah"],
    body.app-detail-printing .app-detail-tab-content[data-tab-content="guzergah"] {
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Bolumler arasi bosluk */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content,
    body.app-detail-printing .app-detail-tab-content {
        margin-bottom: 6px !important;
    }

    /* Baslik bandi kucult */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-header,
    body.app-detail-printing .app-detail-card-header {
        padding: 6px 20px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-title,
    body.app-detail-printing .app-detail-card-title {
        font-size: 9px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-title::before,
    body.app-detail-printing .app-detail-card-title::before {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    /* Bolum basliklari (KONUM / KISI BILGILERI / YOL TARIFI) */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="harita"]::before,
    body.app-detail-printing .app-detail-tab-content[data-tab-content="harita"]::before {
        padding: 4px 14px !important;
        font-size: 10px !important;
        margin: 0 0 5px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="detay"]::before,
    body.app-detail-printing .app-detail-tab-content[data-tab-content="detay"]::before {
        padding: 4px 14px !important;
        font-size: 10px !important;
        margin: 6px 0 5px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-tab-content[data-tab-content="guzergah"]::before,
    body.app-detail-printing .app-detail-tab-content[data-tab-content="guzergah"]::before {
        padding: 4px 14px !important;
        font-size: 10px !important;
        margin: 6px 0 6px !important;
    }

    /* Kisi bilgileri satirlari — kucuk ve az bosluklu */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row,
    body.app-detail-printing .app-detail-row {
        padding: 2px 12px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-label,
    body.app-detail-printing .app-detail-row-label {
        font-size: 8.5px !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-value,
    body.app-detail-printing .app-detail-row-value {
        font-size: 8.5px !important;
    }
    /* Taziye Evi linki / haritada-ac butonu satirla ayni boyutta */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-value a,
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-value button,
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-row-value .app-detail-map-btn,
    body.app-detail-printing .app-detail-row-value a,
    body.app-detail-printing .app-detail-row-value button,
    body.app-detail-printing .app-detail-row-value .app-detail-map-btn {
        font-size: 8.5px !important;
        line-height: 1.2 !important;
        vertical-align: baseline !important;
    }

    /* Yol tarifi yazisi ve adim araligi */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-guzergah-col,
    body.app-detail-printing .app-detail-guzergah-col {
        font-size: 8.5px !important;
        line-height: 1.35 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-step,
    body.app-detail-printing .app-detail-step {
        padding: 2.5px 0 2.5px 21px !important;
        font-size: 8.5px !important;
        line-height: 1.33 !important;
    }
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-step-bullet,
    body.app-detail-printing .app-detail-step-bullet {
        top: 6px !important;
    }

    /* Alt not bosluklari */
    body:has(.app-detail-card.app-detail-print-mode) .app-detail-card-body::after,
    body.app-detail-printing .app-detail-card-body::after {
        margin-top: 4px !important;
        padding: 3px 14px !important;
    }
}