/**
 * Responsive Layout Styles
 * Media queries for different screen sizes
 */

/* ===== TABLET LANDSCAPE - 1024px ve altı ===== */
@media (max-width: 1024px) {
    .mobile-only {
        display: none !important;
    }

    #left-panel {
        display: flex;
        position: absolute;
        top: var(--space-xl);
        left: var(--space-xl);
        max-width: 340px;
        flex-direction: column;
        gap: var(--space-md);
    }

    #category-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .category-btn {
        padding: 10px 6px;
    }

    .category-btn img {
        width: 26px;
        height: 26px;
    }

    .category-btn span {
        font-size: 10.5px;
    }
}

/* ===== TABLET PORTRAIT / BÜYÜK TELEFONLAR - 768px ve altı ===== */
@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    #mobile-menu-toggle {
        display: flex !important;
    }

    #responsive-menu-container {
        display: flex !important;
    }

    #left-panel {
        display: none !important;
    }

    #search-container,
    #category-container {
        display: flex;
        position: relative;
        width: 100%;
    }

    #category-container {
        display: grid;
    }

    #search-container {
        padding: var(--space-sm) var(--space-md);
        max-width: 380px;
    }

    #search-container.expanded {
        max-width: calc(100vw - 80px);
    }

    .logo-text {
        font-size: var(--font-size-lg);
    }

    #category-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .category-btn {
        padding: var(--space-sm) 5px;
    }

    .category-btn img {
        width: 24px;
        height: 24px;
    }

    .category-btn span {
        font-size: 10px;
    }

    #map-controls {
        right: 10px;
        gap: 6px;
    }

    .map-control-btn {
        width: 36px;
        height: 36px;
    }

    .map-control-btn svg {
        width: 16px;
        height: 16px;
    }

    .map-control-btn span {
        font-size: 10px;
    }

    .zoom-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .zoom-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    #info-panel {
        bottom: 10px;
        left: 10px;
        font-size: var(--font-size-sm);
        padding: var(--space-sm) 10px;
        border-radius: var(--radius-md);
    }

    #info-panel > div {
        margin: 2px 0;
    }

    #basemap-switcher {
        bottom: 10px;
        right: 10px;
    }

    #basemap-toggle-btn {
        width: 36px;
        height: 36px;
    }

    #basemap-toggle-btn svg {
        width: 16px;
        height: 16px;
    }

    #basemap-panel {
        right: 42px;
        min-width: 150px;
        max-width: 180px;
        padding: var(--space-sm);
    }

    #basemap-label {
        font-size: 10px;
        padding-bottom: 6px;
    }

    #basemap-options {
        gap: 5px;
    }

    .basemap-option {
        padding: 5px;
    }

    .basemap-thumbnail {
        height: 35px;
        margin-bottom: 3px;
        font-size: 8px;
    }

    .basemap-name {
        font-size: 8px;
    }

    .mosque-icon-container {
        width: 24px;
        height: 24px;
    }

    .mosque-icon-svg {
        width: 14px;
        height: 14px;
    }

    .mosque-name {
        font-size: 9px;
    }

    .leaflet-tooltip,
    .maplibregl-popup-content {
        font-size: var(--font-size-sm);
        padding: 6px 10px;
    }

    .popup-title {
        font-size: var(--font-size-base);
    }

    .popup-info {
        font-size: var(--font-size-sm);
    }
}

/* ===== KÜÇÜK TELEFONLAR - 480px ve altı ===== */
@media (max-width: 480px) {
    #mobile-menu-toggle {
        width: 36px;
        height: 36px;
        top: 10px;
        left: 10px;
    }

    #mobile-menu-toggle svg {
        width: 16px;
        height: 16px;
    }

    #left-panel {
        top: var(--space-sm);
        left: var(--space-sm);
        max-width: 44px;
    }

    #responsive-menu-container {
        top: 10px;
        width: calc(100vw - 52px);
        gap: 10px;
        max-height: calc(100vh - 20px);
    }

    #responsive-menu-container.menu-open {
        left: 48px;
    }

    #search-container {
        padding: 6px 10px;
        max-width: 180px;
    }

    #search-container.expanded {
        max-width: calc(100vw - 60px);
    }

    .logo-text {
        font-size: var(--font-size-base);
    }

    #search-toggle-btn,
    #search-close-btn {
        padding: 4px;
    }

    #search-toggle-btn svg,
    #search-close-btn svg {
        width: 18px;
        height: 18px;
    }

    #category-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 10px;
    }

    .category-btn {
        padding: var(--space-sm) 4px;
    }

    .category-btn img {
        width: 22px;
        height: 22px;
    }

    .category-btn span {
        font-size: var(--font-size-xs);
    }

    #map-controls {
        right: var(--space-sm);
        gap: 5px;
    }

    .map-control-btn {
        width: 32px;
        height: 32px;
    }

    .map-control-btn svg {
        width: 14px;
        height: 14px;
    }

    .map-control-btn span {
        font-size: var(--font-size-xs);
    }

    .zoom-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .zoom-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    #info-panel {
        bottom: var(--space-sm);
        left: var(--space-sm);
        font-size: 10px;
        padding: 6px var(--space-sm);
        border-radius: 6px;
        max-width: calc(100vw - 60px);
    }

    #info-panel > div {
        margin: 2px 0;
        line-height: 1.3;
    }

    #coords-display {
        font-size: var(--font-size-xs);
    }

    #data-count {
        font-size: 10px;
    }

    #wfs-status {
        font-size: var(--font-size-xs);
    }

    #basemap-switcher {
        bottom: var(--space-sm);
        right: var(--space-sm);
    }

    #basemap-toggle-btn {
        width: 32px;
        height: 32px;
    }

    #basemap-toggle-btn svg {
        width: 14px;
        height: 14px;
    }

    #basemap-panel {
        right: 38px;
        min-width: 140px;
        max-width: 160px;
        padding: 6px;
        bottom: -2px;
    }

    #basemap-header {
        padding-bottom: 6px;
    }

    #basemap-label {
        font-size: var(--font-size-xs);
    }

    #basemap-close-btn {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    #basemap-options {
        gap: 4px;
        grid-template-columns: repeat(2, 1fr);
    }

    .basemap-option {
        padding: 4px;
    }

    .basemap-thumbnail {
        height: 30px;
        margin-bottom: 3px;
        font-size: 7px;
    }

    .basemap-name {
        font-size: 7px;
    }

    .mosque-icon-container {
        width: 20px;
        height: 20px;
    }

    .mosque-icon-svg {
        width: 12px;
        height: 12px;
    }

    .mosque-name {
        font-size: 8px;
        padding: 1px 3px;
    }

    .leaflet-tooltip,
    .maplibregl-popup-content {
        font-size: 10px;
        padding: 5px var(--space-sm);
    }

    .popup-title {
        font-size: var(--font-size-sm);
        margin-bottom: 4px;
    }

    .popup-info {
        font-size: 10px;
        margin: 2px 0;
    }

    #search-results {
        max-height: 200px;
        font-size: var(--font-size-sm);
    }

    .search-result-item {
        padding: 10px var(--space-md);
    }

    .search-result-name {
        font-size: var(--font-size-sm);
    }

    .search-result-coords {
        font-size: 10px;
    }
}

/* ===== ÇOK KÜÇÜK EKRANLAR - 360px ve altı ===== */
@media (max-width: 360px) {
    #mobile-menu-toggle {
        width: 32px;
        height: 32px;
        top: var(--space-sm);
        left: var(--space-sm);
    }

    #mobile-menu-toggle svg {
        width: 14px;
        height: 14px;
    }

    #left-panel {
        top: 5px;
        left: 5px;
        max-width: 40px;
    }

    #responsive-menu-container {
        top: var(--space-sm);
        width: calc(100vw - 44px);
        gap: var(--space-sm);
        max-height: calc(100vh - 16px);
    }

    #responsive-menu-container.menu-open {
        left: 42px;
    }

    #category-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        padding: var(--space-sm);
    }

    .category-btn {
        padding: 6px 3px;
    }

    .category-btn img {
        width: 20px;
        height: 20px;
    }

    .category-btn span {
        font-size: 8px;
    }

    #info-panel {
        font-size: var(--font-size-xs);
        padding: 5px 6px;
    }

    #basemap-panel {
        min-width: 120px;
        max-width: 140px;
    }
}