:root {
            --primary: #e64a19;
            --primary-gradient: linear-gradient(135deg, #ff5722, #d84315);
            --primary-light: #fbebe6;
            --secondary: #0f172a;
            --accent: #ffb300;
            --bg: #f8fafc;
            --card-bg: #ffffff;
            --text-main: #334155;
            --text-muted: #64748b;
            --border: #f1f5f9;
            --map-blue: #2563eb;
            --go-green: #16a34a;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg);
            color: var(--text-main);
            line-height: 1.5;
            padding-bottom: 72px;
        }

        .hero {
            background: linear-gradient(145deg, rgba(124,29,219,0.82) 0%, rgba(228,24,30,0.78) 45%, rgba(255,109,0,0.75) 100%);
            color: white;
            padding: 10px 20px 12px;
            position: relative;
            overflow: hidden;
        }
        .hero-bg-img {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            opacity: 0.35;
            z-index: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .hero-badge {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.28);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.90);
            letter-spacing: 0.8px; text-transform: uppercase;
            margin-bottom: 14px;
            position: relative;
        }

        .hero-badge-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #ffe600;
            box-shadow: 0 0 8px rgba(255,230,0,0.7);
            flex-shrink: 0;
        }
        .kashif-city-tag {
            font-size: 0.72rem;
            font-weight: 700;
            color: rgba(255,255,255,0.55);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .kashif-city-tag::before {
            content: '';
            display: inline-block;
            width: 18px; height: 1.5px;
            background: rgba(255,255,255,0.35);
        }
        .kashif-city-name {
            font-size: 0.9rem;
            font-weight: 800;
            color: rgba(255,255,255,0.75);
            letter-spacing: 0.5px;
            margin-bottom: 0px;
        }
        .kashif-city-name .city-accent {
            color: #ffe600;
        }

        .hero h1 {
            font-size: 2.4rem; font-weight: 900;
            letter-spacing: -2px; line-height: 0.95;
            margin-bottom: 4px; position: relative;
            text-shadow: 0 2px 24px rgba(0,0,0,0.15);
        }
        .hero h1 .hero-accent { color: #ffe600; text-shadow: 0 0 28px rgba(255,230,0,0.5); }

        .hero p {
            font-size: 0.88rem; font-weight: 500;
            color: rgba(255,255,255,0.72);
            position: relative; margin-bottom: 28px;
        }

        .hero-stats {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            background: rgba(0,0,0,0.25);
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.14);
            overflow: hidden;
            width: 100%;
            margin-bottom: 12px;
        }

        .hero-stat {
            flex: 1;
            text-align: center;
            padding: 10px 4px;
            border-right: 1px solid rgba(255,255,255,0.12);
            min-width: 0;
        }

        .hero-stat:last-child { border-right: none; }

        .container {
            max-width: 600px;
            margin: 0 auto 20px;
            padding: 0 16px;
        }
        .search-input {
            flex: 1;
            padding: 10px 4px;
            font-size: 0.88rem;
            border: none;
            background: transparent;
            outline: none;
            color: #fff;
            font-weight: 500;
        }
        .search-input::placeholder { color: rgba(255,255,255,0.50); }

        /* ── Travel Tools Bar ── */
        .travel-tools-bar {
            margin-bottom: 12px;
        }
        .yt-watch-btn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 7px !important;
            background: #ff0000 !important;
            color: #fff !important;
            text-decoration: none !important;
            border-radius: 10px !important;
            padding: 8px 16px !important;
            font-size: 0.78rem !important;
            font-weight: 700 !important;
            margin: 4px 0 !important;
            transition: opacity 0.18s, transform 0.15s !important;
            width: fit-content !important;
            letter-spacing: 0.2px !important;
        }
        .yt-watch-btn:hover {
            opacity: 0.88 !important;
            transform: translateY(-1px) !important;
        }
        .budget-progress-bar.danger { background: #f43f5e; }
        .budget-cat-btn.active {
            border-color: var(--primary);
            background: #fef2f2;
            color: var(--primary);
        }
        .budget-sum-val.green { color: #16a34a; }
        .budget-sum-val.red   { color: #dc2626; }
        .cal-day-name.weekend { color: #e4181e; }
        .cal-cell.today .cal-date-num {
            background: #e4181e;
            color: #fff;
            border-radius: 50%;
        }
        .cal-cell.in-trip { background: linear-gradient(135deg,#fef2f2,#fff1f2); }
        .cal-cell.trip-start { background: linear-gradient(90deg,#fff,#fef2f2); }
        .cal-cell.trip-end   { background: linear-gradient(90deg,#fef2f2,#fff); }
        .cal-event-dot.food    { background: #10b981; }
        .cal-event-dot.hotel   { background: #2563eb; }
        .cal-event-dot.flight  { background: #f59e0b; }
        .cal-event-dot.attraction { background: #7c1ddb; }
        .cal-event-dot.other   { background: #64748b; }
        .cal-event-modal.open { display: flex; }
        .cal-event-type-btn.active { border-color: #7c1ddb; background: #f5f3ff; color: #7c1ddb; }
        .rem-type-btn.active {
            border-color: #7c1ddb;
            background: #f5f3ff;
            color: #7c1ddb;
        }


        /* ── Local Tips ── */
        .local-tips-bar {
            border-top: 1px solid var(--border-color, #e2e8f0);
            padding: 10px 14px;
        }
        .local-tips-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .local-tips-label {
            font-size: 0.72rem;
            font-weight: 700;
            color: #f59e0b;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .local-tips-toggle {
            font-size: 0.7rem;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        .local-tips-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .local-tip-item {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            font-size: 0.75rem;
            color: #475569;
            line-height: 1.4;
            background: #fffbeb;
            border-radius: 8px;
            padding: 7px 10px;
            border-left: 3px solid #f59e0b;
        }
        .local-tip-icon {
            font-size: 0.85rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .tab-btn.active {
            background: var(--card-bg);
            color: var(--secondary);
            box-shadow: 0 4px 12px rgba(15,23,42,0.08);
        }
        .view-section.active {
            display: block;
            animation: fadeIn 0.25s cubic-bezier(0.4,0,0.2,1) forwards;
        }

        .floating-planner.visible {
            transform: translateY(0);
        }

        .floating-planner.expanded .floating-chevron {
            transform: rotate(180deg);
            display: inline-block;
        }

        .floating-planner.expanded .floating-planner-body {
            display: block;
            max-height: 60vh;
            overflow-y: auto;
            animation: slideUp 0.25s ease forwards;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Print'te floating bar gizle */
        @media print { }

        @media print {
            body { padding-bottom: 0; background: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

            .hero, .search-wrapper, .download-promo-bar,
            .tab-navigation, .pagination-wrap,
            .preferences-card, #attr-pagination,
            .lightbox-overlay, .top-bar,
            .map-toggle-row, .offline-map-panel,
            .bus-panel, .tour-counter-bar,
            .map-go-bar, .card-select-btn,
            .card-top, .photo-strip,
            #no-results-attr, #no-results-food,
            .no-results-msg { display: none !important; }
            .content-card:not(.pdf-include) { display: none !important; }

            .container { max-width: 100%; margin: 0; padding: 0 20px; }

            /* Kartları PDF satırına dönüştür */
            .content-card.pdf-include {
                border: none !important;
                border-bottom: 1px solid #f1f5f9 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
                break-inside: avoid;
                overflow: visible !important;
            }

            .card-bottom { display: block !important; padding: 10px 0 12px 0 !important; }
            .grid-info { display: grid !important; grid-template-columns: repeat(2,1fr); gap: 6px !important; margin-bottom: 0 !important; }
            .grid-item { padding: 6px 10px !important; border-radius: 6px !important; }
            .grid-item span { font-size: 8px !important; }
            .grid-item p { font-size: 11px !important; }
        }

        @keyframes slideUpModal {
            from { transform: translateY(100%); opacity:0; }
            to   { transform: translateY(0);    opacity:1; }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes routePulse {
            0%,100% { transform: translate(-50%,-50%) rotate(45deg) scale(1); opacity:0.25; }
            50%      { transform: translate(-50%,-50%) rotate(45deg) scale(1.35); opacity:0.1; }
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .ai-section-title {
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            margin: 20px 0 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .ai-section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

        .lightbox-overlay.open { display: flex; }
        .lightbox-nav.prev { left: 14px; }
        .lightbox-nav.next { right: 14px; }

        .lightbox-dot.active {
            background: #ffe600;
            width: 20px;
            border-radius: 4px;
        }

        .photo-strip img, .photo-side-item img { cursor: pointer; }

        .page-btn.active {
            background: linear-gradient(135deg, #7c1ddb, #e4181e);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 4px 12px rgba(124,29,219,0.25);
        }

        .page-btn.disabled { opacity: 0.35; pointer-events: none; }
        .card-page.active { display: block; }

        .photo-strip {
            display: flex;
            gap: 3px;
            height: 165px;
            overflow: hidden;
            border-radius: 20px 20px 0 0;
            position: relative;
        }

        .photo-main {
            flex: 2;
            min-width: 0;
            min-height: 165px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #7c1ddb22, #e4181e22);
        }

        .photo-main img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .photo-main img:hover { transform: scale(1.04); }

        .photo-side {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .photo-side-item {
            flex: 1;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #e4181e22, #ff6d0022);
        }

        .photo-side-item img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .photo-side-item img:hover { transform: scale(1.06); }

        .photo-more {
            position: absolute; inset: 0;
            background: rgba(15,23,42,0.58);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem; font-weight: 800; color: #fff;
            letter-spacing: 0.5px;
        }

        .card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(15,23,42,0.02);
            border: 1px solid rgba(15,23,42,0.04);
            position: relative;
            overflow: hidden;
        }

        .card.has-photo { padding: 0; }
        .card.has-photo::before { display: none; }

        .card.has-photo .card-top { padding: 14px 16px 12px 24px; position: relative; display: flex; align-items: flex-start; gap: 10px; }
        .card.has-photo .card-top::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 5px; height: 100%;
            background: var(--primary-gradient);
        }
        .card.has-photo .card-top-text { flex: 1; min-width: 0; }
        .card.has-photo .card-top .card-title { margin-bottom: 4px; }
        .card.has-photo .card-top .card-desc  { margin-bottom: 0; }

        .card.has-photo .photo-strip { border-radius: 0; }

        .card.has-photo .card-bottom { padding: 14px 20px 14px 24px; }
        .card.has-photo .card-bottom .grid-info { margin-bottom: 14px; }
        .card.has-photo .card-bottom .map-go-bar { border-top: 1px dashed #e2e8f0; padding-top: 14px; padding-bottom: 0; }

        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 5px; height: 100%;
            background: var(--primary-gradient);
        }

        .card-title { font-size: 1.25rem; font-weight: 800; color: var(--secondary); margin-bottom: 8px; letter-spacing: -0.3px; }
        .card-desc  { font-size: 0.92rem; color: var(--text-main); margin-bottom: 18px; line-height: 1.6; }

        .grid-info {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .grid-item {
            background: #f8fafc;
            padding: 14px;
            border-radius: 14px;
            border: 1px solid #f1f5f9;
        }

        .grid-item span {
            font-size: 0.68rem;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 700;
            display: block;
            margin-bottom: 4px;
            letter-spacing: 0.5px;
        }

        .grid-item p { font-size: 0.92rem; font-weight: 700; color: var(--secondary); }

        .chip {
            background: #fff;
            border: 1px solid #e2e8f0;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-main);
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .chip.selected {
            background: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }

        .map-go-bar {
            display: flex;
            gap: 10px;
            border-top: 1px dashed #e2e8f0;
            padding-top: 18px;
        }

        .action-link {
            flex: 1;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 700;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
        }

        .action-link:active { opacity: 0.8; }
        .action-link.walk  { background: #eff6ff; color: var(--map-blue); }
        .action-link.go    { background: #f0fdf4; color: var(--go-green); }
        .action-link.be    { background: #fef3c7; color: #b45309; }
        .action-link.create {
            background: var(--primary-gradient);
            color: white;
            width: 100%;
            margin-top: 10px;
            box-shadow: 0 4px 12px rgba(216,67,21,0.2);
        }

        .hotel-selector-card { background: linear-gradient(135deg, #0f172a, #1e293b); color: white; }
        .hotel-selector-card .card-title { color: white; }
        .hotel-selector-card .card-desc  { color: #94a3b8; }

        .action-link.book-btn {
            background: var(--primary-gradient);
            color: white;
            margin-top: 15px;
            width: 100%;
            box-shadow: 0 4px 12px rgba(230,74,25,0.3);
        }
        .platform-compare.visible { display: block; }
        .offline-map-panel.visible { display: block; animation: fadeIn 0.3s ease; }
        .map-chip.active { background: var(--primary); border-color: var(--primary); }
        #saigon-map { width: 100%; height: 320px; }


        .card.tour-selected {
            border: 1.5px solid #7c1ddb;
            box-shadow: 0 0 0 3px rgba(124,29,219,0.10);
        }

        .card-select-btn {
            width: 24px; height: 24px;
            border-radius: 7px;
            border: 2px solid #e2e8f0;
            background: #f8fafc;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            font-size: 13px; font-weight: 900;
            color: transparent;
            flex-shrink: 0;
            transition: all 0.18s ease;
            user-select: none;
        }

        .card.tour-selected .card-select-btn {
            background: linear-gradient(135deg, #7c1ddb, #e4181e);
            border-color: transparent;
            color: #fff;
        }
        .tour-stop-item.selected {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        .tour-stop-item.selected .tour-stop-check {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        .tour-stop-item.selected .tour-stop-name { color: var(--primary); }

        /* ── Bus Panel ── */
        .bus-panel {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border: 1.5px solid #93c5fd;
            border-radius: 16px;
            padding: 18px;
            margin-top: 14px;
            display: none;
            animation: fadeIn 0.25s ease forwards;
        }
        .bus-panel.visible { display: block; }
        .sticky-search.visible { transform: translateY(0); }

        /* ── Welcome / Landing Screen ─────────────────────────────────────── */
        #welcome-screen {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            overflow-x: hidden;   /* full-bleed 100vw "Hizmetlerimiz" dock'u yatay kaydırmaya yol açıyordu → kırp */
            overscroll-behavior: contain;
            padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
            background: #150a26;
            -webkit-tap-highlight-color: transparent;
            /* fade-in KALDIRILDI: saydam→opak geçişte arkadaki uygulama (Saigon)
               bir an "sızıyordu" (FOUC flash). Açılış ekranı artık ilk kareden
               itibaren opak → arka plan hiç görünmez. Kapanış (welcome-hide) için
               fade-out ayrı kuralda duruyor; dismiss() setTimeout(450) kullanır. */
        }
        #welcome-screen.welcome-hide {
            animation: welcomeFadeOut 0.45s ease forwards;
            pointer-events: none;
        }
        @keyframes welcomeFadeIn  { from { opacity: 0; } to { opacity: 1; } }
        @keyframes welcomeFadeOut { from { opacity: 1; transform: scale(1); }
                                    to   { opacity: 0; transform: scale(1.04); } }

        .welcome-bg {
            position: absolute; inset: 0; z-index: 0;
            /* Marka gradyanı + ALTINDA saydam şehir skyline'ı (Istanbul) → atmosfer + cam kartlar için zemin */
            background:
                linear-gradient(165deg, rgba(43,16,85,0.86) 0%, rgba(124,29,219,0.80) 48%, rgba(228,24,30,0.82) 84%, rgba(255,109,0,0.84) 100%),
                url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Historical_peninsula_and_modern_skyline_of_Istanbul.jpg/1920px-Historical_peninsula_and_modern_skyline_of_Istanbul.jpg') center/cover no-repeat;
        }
        .welcome-glow {
            position: absolute; z-index: 1;
            border-radius: 50%;
            filter: blur(70px);
            opacity: 0.55;
            pointer-events: none;
        }
        .welcome-glow-1 { top: -80px; right: -60px; width: 280px; height: 280px;
            background: radial-gradient(circle, #ff6d00, transparent 70%); }
        .welcome-glow-2 { bottom: -100px; left: -70px; width: 320px; height: 320px;
            background: radial-gradient(circle, #7c1ddb, transparent 70%); }

        .welcome-lang {
            position: absolute; z-index: 3;
            top: calc(14px + env(safe-area-inset-top)); right: 16px;
            display: flex; gap: 5px;
        }
        /* Masaüstü varsayılan: toggle gizli, 6 dil butonu satır içi (eski görünüm) */
        .welcome-lang-toggle { display: none; }
        .welcome-lang-menu { display: flex; gap: 5px; }
        .welcome-lang-btn {
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 9px;
            width: 34px; height: 30px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4px;
            color: #fff; line-height: 1;
            cursor: pointer;
            transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
        }
        .welcome-lang-btn:hover  { background: rgba(255,255,255,0.22); }
        .welcome-lang-btn.active { background: #ffe600; border-color: #ffe600; color: #1a0a00; transform: scale(1.08); }

        .welcome-inner {
            position: relative; z-index: 2;
            width: 100%; max-width: 440px;
            display: flex; flex-direction: column; align-items: center;
            margin: auto 0;
        }

        .welcome-brand { text-align: center; margin-bottom: 22px; }
        .welcome-logo {
            font-size: 2rem; color: #ffe600;
            text-shadow: 0 0 24px rgba(255,230,0,0.6);
            margin-bottom: 6px; animation: welcomeFloat 3s ease-in-out infinite;
        }
        @keyframes welcomeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
        .welcome-title {
            font-size: 3rem; font-weight: 900; color: #fff;
            letter-spacing: -1px; line-height: 1; margin: 0;
            text-shadow: 0 4px 24px rgba(0,0,0,0.25);
        }
        .welcome-title span { color: #ffe600; }
        .welcome-subtitle {
            font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.7);
            margin: 0;
        }

        .welcome-search {
            width: 100%;
            display: flex; align-items: center; gap: 10px;
            background: rgba(255,255,255,0.98);
            border-radius: 18px;
            padding: 8px 8px 8px 18px;
            box-shadow: 0 16px 44px rgba(0,0,0,0.34);
            margin-bottom: 26px;
            transition: box-shadow 0.18s ease, transform 0.18s ease;
        }
        .welcome-search:focus-within {
            box-shadow: 0 0 0 3px rgba(124,29,219,0.38), 0 18px 52px rgba(0,0,0,0.42);
            transform: translateY(-1px);
        }
        /* ── Şehir önerileri ("Bu şehri mi aradın?") ────────────────────────────
           Kutu, arama çubuğunun ALTINA konumlanır → .welcome-search relative olmalı.
           z-index: küre/hero katmanlarının üstünde ama tam-ekran overlay'lerin altında
           (katman sırası için KASHIF.md §21). */
        .welcome-search { position: relative; }
        .wl-sug {
            position: absolute; left: 0; right: 0; top: calc(100% + 8px);
            background: #fff; border-radius: 16px; overflow: hidden;
            box-shadow: 0 18px 52px rgba(0,0,0,0.34);
            z-index: 60; display: none; max-height: 320px; overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .wl-sug.on { display: block; }
        .wl-sug-item {
            display: flex; align-items: center; gap: 10px;
            padding: 11px 16px; cursor: pointer; border: none; width: 100%;
            background: transparent; text-align: left; font: inherit;
            color: #0f172a; transition: background 0.12s ease;
        }
        .wl-sug-item:hover, .wl-sug-item.sel { background: rgba(124,29,219,0.09); }
        .wl-sug-name { font-weight: 700; font-size: 0.98rem; }
        .wl-sug-ico { font-size: 0.95rem; opacity: 0.45; flex-shrink: 0; }
        @media (max-width: 640px) {
            .wl-sug { max-height: 46vh; }
            .wl-sug-item { padding: 13px 14px; }
        }
        .welcome-search-ico { font-size: 1.05rem; opacity: 0.55; flex-shrink: 0; }
        #welcome-search-input {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: 1.02rem; font-weight: 600; color: #0f172a;
            padding: 13px 0; min-width: 0;
        }
        #welcome-search-input::placeholder { color: #94a3b8; font-weight: 500; }
        #welcome-search-go {
            flex-shrink: 0;
            width: 48px; height: 48px;
            background: linear-gradient(135deg, #7c1ddb, #e4181e);
            color: #fff; border: none; border-radius: 14px;
            font-size: 1.35rem; font-weight: 900; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.12s, filter 0.15s;
        }
        #welcome-search-go:hover  { filter: brightness(1.1); }
        #welcome-search-go:active { transform: scale(0.94); }
        .welcome-grid {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 11px;
        }
        @media (min-width: 420px) { .welcome-grid { grid-template-columns: repeat(3, 1fr); } }

        /* ── Welcome v2: top-left brand + rotating globe ──────────────────── */
        #welcome-screen { padding-top: calc(70px + env(safe-area-inset-top)); }

        .welcome-brandbar {
            position: absolute; z-index: 3;
            top: calc(14px + env(safe-area-inset-top)); left: 16px;
            display: flex; align-items: center; gap: 9px;
        }
        .welcome-logo-img {
            width: 34px; height: 34px; border-radius: 9px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.35);
        }
        .welcome-wordmark {
            font-size: 1.35rem; font-weight: 900; color: #fff;
            letter-spacing: -0.5px; line-height: 1;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        /* ── Marka: "Kashi-f-ly" — ortadaki "f" TOPRAK → ÇİM → GÖKYÜZÜ ─────────
           Logodaki degradenin aynısı (icon-512.svg). Logo ve yazı aynı dili konuşsun.
           ⚠️ Ara duraklar (olive + teal) BİLEREK var: kırmızıdan yeşile doğrudan
           geçiş sRGB'de çamurlu kahve üretiyor.
           ⚠️ Değişken TEK yerde; altı kullanım noktası (welcome, auth ×3,
           community, place geri düğmesi) buradan besleniyor. */
        :root {
            --kf-brand-f: linear-gradient(to top,
                #A9542E 0%,     /* toprak — topraksı kırmızı */
                #8A6B30 26%,    /* toprak → kuru ot */
                #4E9A3C 52%,    /* çim yeşili */
                #3E9C8E 76%,    /* ufuk pusu */
                #4FA6E0 100%);  /* gökyüzü mavisi */
        }
        /* ⚠️ YEDEK ÖNCE: background-clip:text desteklenmezse harf GÖRÜNMEZ olurdu
           (color:transparent). Önce düz renk verilir, destek varsa üstüne yazılır. */
        .kf-f { color: #4E9A3C; }
        @supports (-webkit-background-clip: text) or (background-clip: text) {
            .kf-f {
                background-image: var(--kf-brand-f);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                /* ⚠️ Şeffaf harfte text-shadow harfin ARDINDAN taşar, leke gibi
                   görünür. Gölge filtreyle veriliyor — o, çizilen piksele uyar. */
                text-shadow: none;
                filter: drop-shadow(0 2px 6px rgba(0,0,0,.32));
            }
        }
        /* Eski sarı "if" kuralı KALDIRILDI — artık vurgulanan harf "f" ve
           rengi degradeden geliyor. */

        /* prompt above search (repurposed subtitle) */
        .welcome-subtitle {
            font-size: 1.18rem; font-weight: 800; color: #fff;
            text-align: center; margin: 4px 0 16px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }
        #welcome-globe {
            width: 100%;
            display: flex; justify-content: center;
            cursor: grab;
        }
        #welcome-globe:active { cursor: grabbing; }
        #welcome-globe canvas { display: block; margin: 0 auto; }

        /* ── Place Page (desktop) ─────────────────────────────────────────── */
        body.pp-lock { overflow: hidden; }

        #place-page {
            position: fixed; inset: 0; z-index: 10000;
            display: none;
            background: #0f0a1e;
            color: #1e293b;
        }
        #place-page.pp-open {
            display: block;
            animation: ppIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
        }
        @keyframes ppIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
        .pp-scroll {
            position: absolute; inset: 0;
            overflow-y: auto; overflow-x: hidden;
            background: #f6f7fb;
            scroll-behavior: smooth;
        }
        /* Reading progress bar */
        .pp-progress {
            position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 40;
            background: linear-gradient(90deg,#7c1ddb,#e4181e);
            transition: width 0.1s linear; pointer-events: none;
        }
        /* Back-to-top button */
        .pp-top {
            position: fixed; bottom: 24px; right: 24px; z-index: 40;
            width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
            background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff;
            font-size: 1.3rem; font-weight: 900;
            box-shadow: 0 8px 24px rgba(124,29,219,0.4);
            opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
            transition: opacity 0.2s, transform 0.2s, filter 0.15s;
        }
        .pp-top.show { opacity: 1; transform: none; pointer-events: auto; }
        .pp-top:hover { filter: brightness(1.1); }
        @media (max-width: 640px) { .pp-top { bottom: 18px; right: 16px; width: 42px; height: 42px; } }

        /* ── ÜST SOL ŞERİT: marka + dil + hesap tek satırda (9 Ağu) ───────────
           ⚠️ Sarmalayıcı ŞART. Marka ve dil çubuğu ikisi de `position: fixed` idi;
           dil çubuğunu markanın yanına almak için sabit bir `left` yazmak gerekirdi
           ve marka genişliği kırılıma/kaydırmaya göre değiştiği için (162px → mobilde
           ~90px → kaydırınca daire) o değer kaçınılmaz olarak KAYARDI. Flex satırında
           konum markadan türüyor. Çocukların kendi `fixed` konumları burada
           `static`e çevriliyor — aşağıdaki override'lar bu yüzden var. */
        /* ⚠️ DÜZEN: marka SOLDA, dil+hesap SAĞDA — her genişlikte (9 Ağu, kullanıcı
           çizimi "yeni_sayfa_içeriği.png"). Kısa bir süre ikisi yan yana soldaydı;
           kullanıcı canlıda görünce sağa istedi. Şerit iki kenara da bağlanıp
           `space-between` ile açılıyor. */
        .pp-topbar {
            position: fixed; top: 22px; left: 22px; right: 22px; z-index: 30;
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
        }
        /* ⚠️ Şerit tüm genişliği kaplıyor ama ARKA PLANI YOK; ortadaki boşluk
           tıklamayı yutmamalı, yoksa hero üzerindeki "Bana Sor" ve kaydırma ölür.
           Çocuklar tıklanabilir kalıyor. */
        .pp-topbar { pointer-events: none; }
        .pp-topbar > * { pointer-events: auto; }
        .pp-topbar .pp-back, .pp-topbar .pp-langbar {
            position: static; top: auto; left: auto; right: auto; z-index: auto;
        }
        .pp-back {
            position: fixed; top: 22px; left: 22px; z-index: 30;
            display: flex; align-items: center; gap: 8px;
            background: rgba(15,10,30,0.55); color: #fff;
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 30px; padding: 9px 16px 9px 12px;
            font-size: 0.86rem; font-weight: 800; cursor: pointer;
            backdrop-filter: blur(10px);
            transition: background 0.15s, transform 0.15s;
        }
        .pp-back:hover { background: rgba(124,29,219,0.85); transform: translateX(-2px); }
        @keyframes ppSpin { to { transform: rotate(360deg); } }

        /* Kashif logo (eski "Back to globe" yerine) */
        /* ⚠️ Şehir sayfasında marka BÜYÜTÜLDÜ (kullanıcı isteği, 7 Ağu) — göze
           çarpsın. Logo 26→38px, yazı 1rem→1.34rem, dolgu/boşluk buna göre.
           ⚠️ Mobilde kaydırınca yazı zaten gizleniyor (.pp-scrolled kuralı),
           bu yüzden büyütme dar ekranda şehir başlığını ezmiyor. */
        .pp-back-logo { padding: 8px 20px 8px 9px; gap: 11px; }
        .pp-back-logoimg { width: 38px; height: 38px; border-radius: 11px; display: block; flex: 0 0 auto; }
        .pp-back-word { font-size: 1.34rem; font-weight: 900; letter-spacing: -0.4px; }
        /* eski marka span rengi KALDIRILDI — vurgulanan harf artık ".kf-f" ve rengi degradeden geliyor (bkz. --kf-brand-f). Bu kural kalsaydı ÖZGÜLLÜĞÜ yüksek olduğu için degradeyi EZERDİ. */

        /* "Plan Your Journey" öne çıkan CTA kartı (About bölümünün yerine, en üstte) */
        .pp-planjourney {
            position: relative; width: 100%; margin: 4px 0 8px;
            display: flex; align-items: center; gap: 16px;
            padding: 18px 22px; border: none; border-radius: 20px;
            background: linear-gradient(135deg,#7c1ddb 0%,#9d2bd6 55%,#e4181e 135%);
            color: #fff; text-align: left; overflow: hidden;
            box-shadow: 0 14px 34px rgba(124,29,219,0.32);
        }
        .pp-pj-glow { position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0%, rgba(255,255,255,.26), transparent 55%); pointer-events: none; }
        .pp-pj-lead { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 15px; cursor: pointer; }
        .pp-pj-ic {
            flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px;
            display: grid; place-items: center; font-size: 1.7rem;
            background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
        }
        .pp-pj-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .pp-pj-tx b { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.4px; }
        .pp-pj-tx i { font-style: normal; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.86); }
        /* 4 planlama yöntemi mini-kutusu (öneri görseli) */
        .pp-pj-tiles { position: relative; flex: 0 0 auto; display: flex; gap: 8px; }
        .pp-pj-tile {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
            width: 68px; height: 62px; border: none; border-radius: 14px; cursor: pointer; color: #fff;
            background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
            transition: transform .15s, background .15s;
        }
        .pp-pj-tile:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); }
        .pp-pj-tile:active { transform: translateY(0); }
        .pp-pj-tile span { font-size: 1.4rem; line-height: 1; }
        .pp-pj-tile i { font-style: normal; font-size: .7rem; font-weight: 700; opacity: .96; white-space: nowrap; }
        .pp-pj-go { position: relative; flex: 0 0 auto; font-size: 1.5rem; font-weight: 800; opacity: .9; cursor: pointer; transition: transform .18s; }
        .pp-pj-go:hover { transform: translateX(4px); }
        @media (max-width: 820px) {
            .pp-planjourney { flex-wrap: wrap; }
            .pp-pj-lead { flex: 1 1 100%; }
            .pp-pj-tiles { flex: 1 1 100%; }
            .pp-pj-tile { flex: 1 1 0; }
            .pp-pj-go { display: none; }
        }
        @media (max-width: 640px) {
            .pp-planjourney { padding: 15px 15px; gap: 12px; border-radius: 17px; }
            .pp-pj-ic { width: 46px; height: 46px; font-size: 1.5rem; border-radius: 13px; }
            .pp-pj-tx b { font-size: 1.08rem; }
            .pp-pj-tx i { font-size: .8rem; }
            .pp-pj-tile { height: 56px; }
        }

        /* Hero */
        .pp-hero {
            position: relative; height: 56vh; min-height: 380px;
            background-size: cover; background-position: center;
            display: flex; align-items: flex-end;
        }
        .pp-hero-shade {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(10,6,20,0.92) 0%, rgba(10,6,20,0.35) 45%, rgba(10,6,20,0.15) 100%);
        }
        .pp-hero-body {
            position: relative; z-index: 2;
            width: 100%; max-width: 1080px; margin: 0 auto;
            padding: 0 32px 38px; color: #fff;
        }
        .pp-hero-country {
            font-size: 0.95rem; font-weight: 700; letter-spacing: 0.4px;
            color: rgba(255,255,255,0.85); margin-bottom: 8px;
        }
        .pp-hero-name {
            font-size: 4rem; font-weight: 900; line-height: 1; margin: 0;
            letter-spacing: -1.5px; text-shadow: 0 4px 30px rgba(0,0,0,0.4);
        }
        .pp-hero-tag {
            font-size: 1.25rem; font-weight: 500; margin: 14px 0 0;
            color: rgba(255,255,255,0.92); max-width: 640px;
        }
        .pp-hero-stats { display: flex; gap: 26px; margin-top: 22px; }
        .pp-stat { display: flex; flex-direction: column; }
        .pp-stat b { font-size: 1.6rem; font-weight: 900; color: #ffe600; line-height: 1; }
        .pp-stat span { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

        /* Hero: language switcher (top-right) */
        .pp-langbar {
            position: fixed; top: 22px; right: 22px; z-index: 30;
            display: flex; gap: 4px; padding: 5px;
            background: rgba(15,10,30,0.55);
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 30px; backdrop-filter: blur(10px);
            transition: opacity 0.2s, transform 0.2s;
        }
        .pp-langbtn {
            border: none; background: transparent; cursor: pointer;
            font-size: 1.05rem; line-height: 1;
            width: 30px; height: 30px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            opacity: 0.55; filter: grayscale(0.4);
            transition: opacity 0.15s, transform 0.15s, background 0.15s;
        }
        .pp-langbtn:hover { opacity: 1; transform: translateY(-1px); background: rgba(255,255,255,0.12); }
        .pp-langbtn.active { opacity: 1; filter: none; background: rgba(124,29,219,0.9); box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }

        /* Hero: AI search bar */
        .pp-hsearch {
            display: flex; align-items: center; gap: 8px;
            margin-top: 26px; max-width: 520px;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.30);
            border-radius: 40px; padding: 7px 7px 7px 18px;
            backdrop-filter: blur(14px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.30);
            transition: border-color 0.15s, background 0.15s;
        }
        .pp-hsearch:focus-within { background: rgba(255,255,255,0.20); border-color: rgba(255,230,0,0.7); }
        .pp-hsearch-ic { font-size: 1rem; opacity: 0.9; }
        .pp-hsearch-input {
            flex: 1; min-width: 0; border: none; background: transparent;
            color: #fff; font-size: 1rem; font-weight: 600; outline: none;
        }
        .pp-hsearch-input::placeholder { color: rgba(255,255,255,0.75); font-weight: 500; }
        .pp-hsearch-go {
            -webkit-appearance: none; appearance: none; font-family: inherit;
            border: none; cursor: pointer; white-space: nowrap;
            background: linear-gradient(135deg,#7c1ddb,#e4181e);
            color: #fff; font-weight: 800; font-size: 0.9rem;
            padding: 10px 20px; border-radius: 30px;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .pp-hsearch-go:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,29,219,0.5); }

        @media (max-width: 640px) {
            /* Mobilde yalnız kenar boşluğu daralıyor — düzen (marka solda, kart
               sağda) temel kuralda tanımlı, burada TEKRARLANMIYOR. */
            .pp-topbar { top: 16px; left: 14px; right: 14px; gap: 7px; }
            /* "Bana Sor" hero kartı: bölüm barı kalktığı için MOBİLDE daha uzun + ferah */
            .pp-hsearch {
                margin-top: 20px; width: 100%; max-width: none;
                padding: 9px 9px 9px 18px; border-radius: 30px;
                background: rgba(255,255,255,0.17); border-color: rgba(255,255,255,0.38);
            }
            .pp-hsearch-input { font-size: 1.02rem; }
            .pp-hsearch-go { padding: 11px 20px; font-size: 0.92rem; }
        }

        /* Sticky section nav */
        .pp-nav {
            position: sticky; top: 0; z-index: 20;
            background: rgba(255,255,255,0.88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid #e9ebf2;
        }
        .pp-nav-inner {
            max-width: 1080px; margin: 0 auto; padding: 0 32px;
            display: flex; align-items: center; gap: 10px;
        }
        /* ⚠️ Dar ekranda sarmalayıcı YOK SAYILIYOR: çocukları doğrudan .pp-nav-inner'ın
           flex öğeleri gibi davranır → mobil bar bire bir eskisi gibi dizilir.
           Masaüstünde (≥1100px) gerçek bir karta dönüşüyor. */
        /* ⚠️ İkisi de dar ekranda YOK SAYILIYOR (display:contents): çocukları
           doğrudan .pp-nav-inner'ın flex öğeleri gibi davranır → mobil bar bire
           bir eskisi gibi dizilir. Masaüstünde gerçek kaplara dönüşüyorlar. */
        /* ⚠️ MOBİL DOKUNULMAZ: bar sarmalayıcıları düzen açısından YOK sayılıyor,
           dar ekranda maddeler eskisi gibi doğrudan `.pp-nav-inner`ın çocuğu
           gibi diziliyor. Sarmalayıcılar 14 Ağu'da masaüstünde chat düğmesini
           tam ortalamak için eklendi; mobilde hiçbir şey değişmemeli. */
        .pp-nav-row, .pp-nav-side { display: contents; }
        .pp-nav-card { display: contents; }
        /* Hero'nun sol sütunu — dar ekranda YOK SAYILIYOR, masaüstünde iki
           sütunlu düzenin (şehir bilgisi | "Bana sor") sol yarısı oluyor. */
        .pp-hero-main { display: contents; }
        .pp-nav-links { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
        .pp-nav-links::-webkit-scrollbar { display: none; }
        .pp-nav a {
            padding: 15px 14px; font-size: 0.9rem; font-weight: 700;
            color: #64748b; text-decoration: none; white-space: nowrap;
            border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s;
        }
        .pp-nav a:hover { color: #7c1ddb; }
        .pp-nav a.active { color: #7c1ddb; border-bottom-color: #7c1ddb; }
        /* BUG FIX: Leaflet haritalarını İZOLE ET. Leaflet iç elemanları yüksek z-index
           kullanır (kontroller z-1000, pane'ler z-400-700). Harita konteyneri kendi
           stacking-context'ini kurmazsa bu z'ler sticky nav (z-20) / back+dil (z-30)
           ile DOĞRUDAN yarışıp ÜSTÜNE çıkıyordu (kaydırınca harita nav'ı örtüyordu).
           isolation:isolate → tüm iç z-index'ler konteyner içinde kalır, konteyner
           kendi seviyesinde (0) kalıp nav/back/dil'in ALTINDA durur. */
        /* ── Kartpostallar (7 Ağu) — "Seyahat İpuçları"nın yerine ────────────
           Kartpostal görünümü: foto + altında beyaz şerit (başlık + paylaşan).
           ⚠️ Ray YATAY KAYAR ve otomatik ilerler; kart genişliği `flex-basis`
           ile veriliyor ki 5-6 kart yan yana dursun, dar ekranda 2'ye düşsün. */
        .pp-sec--post { padding-bottom: 8px; }
        .kf-pc-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
        .kf-pc-head b { font-size: 1.35rem; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
        .kf-pc-head i { font-style: normal; font-size: 0.88rem; color: #64748b; }
        .kf-pc-rail {
            display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
            padding: 4px 2px 14px; scroll-snap-type: x proximity;
            scrollbar-width: thin;
        }
        .kf-pc {
            flex: 0 0 clamp(210px, 19vw, 265px); margin: 0; scroll-snap-align: start;
            background: #fff; border-radius: 10px; overflow: hidden; cursor: pointer;
            border: 1px solid #e6e3dc; box-shadow: 0 3px 12px rgba(15,23,42,.08);
            transition: transform .16s, box-shadow .16s;
        }
        .kf-pc:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.16); }
        /* PASPARTU: gerçek kartpostalın beyaz kenar boşluğu. Fotoğraf kartın
           kenarına dayanmıyor → "vitrin karesi" değil "kartpostal" okunuyor. */
        .kf-pc-mat { padding: 9px 9px 0; }
        .kf-pc-img { aspect-ratio: 4/3; background: #ede6fb center/cover no-repeat; border-radius: 5px; }
        /* Tarih damgası: sol üstte, pul gibi tırtıklı kenarlı. */
        .kf-pc-stamp {
            position: absolute; left: 7px; top: 7px; z-index: 2;
            padding: 3px 7px; border-radius: 3px;
            background: rgba(255,255,255,.9); color: #4a3d6b;
            font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
            border: 1px dashed rgba(74,61,107,.45);
        }
        /* Şehir damgası: fotoğrafın ÜSTÜNDE, sağ altta, saydam.
           ⚠️ Koyu yarı-saydam zemin + hafif bulanıklık — açık fotoğrafta beyaz
           yazı okunmuyordu, tek başına gölge yetmiyordu. */
        .kf-pc-img { position: relative; }
        .kf-pc-city {
            position: absolute; right: 7px; bottom: 7px; z-index: 2;
            display: inline-flex; align-items: center; gap: 3px;
            max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            padding: 3px 8px; border-radius: 20px;
            background: rgba(15,10,30,.52); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
            border: 1px solid rgba(255,255,255,.22);
            color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .01em;
        }
        .kf-pc-cap { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px 11px; }
        /* Not: kartpostalın arkasına elle yazılmış izlenimi için italik.
           ⚠️ El yazısı FONTU yüklenmedi — dış font isteği hem yavaş hem
           kartpostalın metnini bazı dillerde (vi, tr) okunmaz yapıyor. */
        .kf-pc-txt {
            font-size: 0.82rem; line-height: 1.4; color: #1e293b; font-style: italic;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        /* Kartpostalın mesaj/adres ayracı. */
        .kf-pc-line { height: 1px; background: repeating-linear-gradient(90deg, #dcd8ce 0 5px, transparent 5px 10px); }
        .kf-pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .kf-pc-by {
            display: flex; align-items: center; gap: 6px; min-width: 0;
            font-size: 0.74rem; font-weight: 700; color: #64748b;
        }
        .kf-pc-by b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
        .kf-pc-by i {
            width: 20px; height: 20px; border-radius: 50%; background: #ddd center/cover no-repeat;
            flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
        }
        .kf-pc-noav { background: #ded5f5; color: #4a3d6b; font-size: .64rem; font-weight: 900; font-style: normal; }
        .kf-pc-stats { display: flex; gap: 8px; flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: #7c5cff; }
        /* İlk yorum — kartpostalın arkasına düşülmüş not. Yoksa hiç basılmıyor. */
        .kf-pc-note {
            font-size: .72rem; line-height: 1.35; color: #64748b;
            border-left: 2px solid #e6e3dc; padding-left: 7px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .kf-pc-note em { font-style: normal; font-weight: 700; color: #94a3b8; }
        @media (max-width: 640px) {
            /* ⚠️ Dar ekranda 2 kart (eski %46) ARTIK SIĞMIYOR: kartta avatar + ad +
               beğeni/yorum + not var, 165px'te hepsi eziliyordu. %66 → bir kart
               tam, sonraki kenardan görünüyor (rayın kaydığı anlaşılıyor). */
            .kf-pc { flex-basis: 66%; }
            .kf-pc-head b { font-size: 1.15rem; }
        }

        .pp-map, .pp-stay-map { isolation: isolate; }
        /* Tekerlek yakınlaştırma AÇIKKEN görsel geri bildirim — kullanıcı haritanın
           "canlı" olduğunu bilsin. Yoksa tıkladığını unutup sayfayı kaydırmak
           isterken harita yakınlaşır ve sebebi anlaşılmaz. */
        .pp-map-live { outline: 2px solid rgba(124,29,219,.55); outline-offset: -2px; }

        /* Sticky nav: kompakt arama + açılır dil (yalnızca kaydırınca görünür) */
        .pp-nav-tools {
            display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 0;
            opacity: 0; pointer-events: none; transition: opacity 0.2s;
        }
        .pp-scrolled .pp-nav-tools { opacity: 1; pointer-events: auto; }
        .pp-navsearch {
            display: flex; align-items: center; gap: 4px;
            background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 24px;
            padding: 3px 3px 3px 13px; transition: border-color 0.15s, background 0.15s;
        }
        .pp-navsearch:focus-within { background: #fff; border-color: #7c1ddb; box-shadow: 0 0 0 3px rgba(124,29,219,0.12); }
        .pp-navsearch-input {
            border: none; background: transparent; outline: none;
            width: 140px; max-width: 34vw; font-size: 0.85rem; font-weight: 600; color: #334155;
        }
        .pp-navsearch-go {
            -webkit-appearance: none; appearance: none;
            flex-shrink: 0; border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; font-size: 0.82rem;
            display: flex; align-items: center; justify-content: center; transition: transform 0.12s;
        }
        .pp-navsearch-go:active { transform: scale(0.92); }
        /* yenilik-2: profil butonu place page nav'ında (global fixed buton buraya taşınır) */
        .pp-nav-acct { display: flex; align-items: center; flex-shrink: 0; }
        body.pp-acct-nav #pp-nav-acct #kashif-account-btn,
        body.pp-acct-nav #pp-langbar-acct #kashif-account-btn {
            position: static; top: auto; right: auto; margin: 0;
            width: 36px; height: 36px; padding: 0; gap: 0; border-radius: 50%; justify-content: center;
        }
        body.pp-acct-nav #pp-nav-acct #kashif-account-btn .kf-acct-name,
        body.pp-acct-nav #pp-langbar-acct #kashif-account-btn .kf-acct-name,
        body.pp-acct-nav #pp-langbar-acct #kashif-account-btn .kf-plan { display: none; }
        /* Hesap butonu dil çubuğunun yanında (masaüstü hero) — ince ayraçla ayrılır */
        .pp-langbar-acct { display: inline-flex; align-items: center; }
        .pp-langbar-acct:not(:empty) { margin-left: 3px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.22); }
        .pp-navlang { position: relative; flex-shrink: 0; }
        .pp-navlang-btn {
            display: flex; align-items: center; gap: 3px; cursor: pointer;
            background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 20px;
            padding: 6px 10px; font-size: 1rem; line-height: 1; transition: border-color 0.15s;
        }
        .pp-navlang-btn:hover { border-color: #c4b5fd; }
        .pp-navlang-car { font-size: 0.65rem; color: #94a3b8; transition: transform 0.18s; }
        .pp-navlang.open .pp-navlang-car { transform: rotate(180deg); }
        .pp-navlang-menu {
            position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
            background: #fff; border: 1px solid #e9ebf2; border-radius: 14px; padding: 6px;
            box-shadow: 0 14px 34px rgba(15,23,42,0.18);
            opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;
            transition: opacity 0.15s, transform 0.15s;
        }
        .pp-navlang.open .pp-navlang-menu { opacity: 1; transform: none; pointer-events: auto; }
        .pp-navlang-opt {
            width: 36px; height: 36px; border: none; border-radius: 9px; cursor: pointer;
            background: transparent; font-size: 1.15rem; line-height: 1; opacity: 0.6;
            transition: opacity 0.15s, background 0.15s;
        }
        .pp-navlang-opt:hover { opacity: 1; background: #f3eafe; }
        .pp-navlang-opt.active { opacity: 1; background: #7c1ddb; box-shadow: 0 0 0 1px #7c1ddb; }

        /* Kaydırınca hero'daki dil çubuğunu gizle (nav'daki devreye girer) */
        .pp-scrolled .pp-langbar { opacity: 0; transform: translateY(-10px); pointer-events: none; }

        @media (max-width: 640px) {
            /* ── Üst bar (kullanıcı isteği, 2026-07-25) ────────────────────────────
               • Bölüm linkleri (Gezilecek Yerler/Yeme&İçme/…) MOBİLDE YOK → yerini
                 tam genişlikte, ferah "Bana Sor" çubuğuna bırakır.
               • Dil kartı + profil TEK KART (masaüstündeki gibi).
               • Kashif logosu index'teki gibi: ikon + "Kashif" yazısı (eski 40px daire
                 içine sığmayınca logo bozuk görünüyordu).                            */
            .pp-nav-links { display: none; }
            .pp-nav-tools { gap: 8px; flex: 1; min-width: 0; }
            .pp-navsearch { flex: 1; min-width: 0; padding: 6px 6px 6px 14px; border-radius: 22px; }
            .pp-navsearch-input { width: auto; max-width: none; flex: 1; min-width: 0; font-size: 0.92rem; }
            .pp-navsearch-go { width: 34px; height: 34px; }
            .pp-nav-inner { padding: 0 12px 0 56px; gap: 8px; }   /* sabit logoyu temizle */
            /* Kaydırılmadan önce bar GÖRÜNMEZ (boş beyaz şerit olmasın); kaydırınca
               "Bana Sor" çubuğu belirir. Yükseklik sabit kaldığı için sıçrama olmaz. */
            .pp-nav { background: transparent; border-bottom-color: transparent; }
            .pp-scrolled .pp-nav { background: rgba(255,255,255,0.92); border-bottom-color: #e9ebf2; }
            /* Kaydırınca logo ikon-only olur → sticky bardaki arama çubuğuyla çakışmaz */
            .pp-scrolled .pp-back { padding: 5px; border-radius: 50%; }
            .pp-scrolled .pp-back-word { display: none; }
            .pp-nav a { padding: 13px 10px; font-size: 0.85rem; }
            /* Faz 5 mobil pas 1: içerik ferahlığı + çentik güvenli alan + okunur başlık */
            .pp-wrap { padding: 12px 16px 96px; }
            /* Okunur çapa hedefi: görünmez, yer kaplamaz. Yalnız adres çubuğundaki
           #eglence gibi bağlantıların doğru yere kaydırması için var.
           ⚠️ scroll-margin-top ŞART — yapışkan nav başlığı örterdi. */
        .pp-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: 78px; }
        .pp-sec { padding: 22px 0; scroll-margin-top: 64px; }
            .pp-h2 { font-size: 1.28rem; margin-bottom: 15px; }
            .pp-sec-head { margin-bottom: 14px; }
            /* Üst-bar temizliği (pas6): pp-back İKON-ONLY yuvarlak (uzun "Back to globe"
               metni gizli → yer açılır); hero dil çubuğu kompakt DROPDOWN; sticky nav
               içeriği sabit back butonunu temizler. */
            /* Logo = index'teki logo (ikon + Kashif yazısı) — daireye sıkıştırılmaz */
            /* ── MOBİLDE TEKRAR EDEN ETİKETLER KALDIRILDI (9 Ağu, kullanıcı çizimi
                  "mobil-2.jpeg": üstü çizilenler gitsin, ✓ işaretliler kalsın) ──────
               Dar ekranda aynı şeyi iki kez söylemek yer yiyordu:
                 · Başlıktaki "🔍 Haritada Gör" pili ile ALTINDAKİ büyük kart AYNI işi
                   yapıyor (ikisi de #pp-map-prev/#pp-map-open → openMapModal).
                 · "Haritadan yer seçerek rota oluştur" ipucu, kartın alt satırındaki
                   "Yerleri seçip rotanı kur" ile aynı cümle.
               ⚠️ "⬇️ Offline Map" pili de gizleniyor AMA ÖZELLİK KAYBOLMUYOR:
                  aynı düğme tam ekran haritanın içinde de var (#pp-mm-off) ve zaten
                  indirme için harita sınırları gerektiğinden asıl yeri orası.
               ⚠️ Yalnız MOBİLDE gizleniyor; masaüstünde yer bol, düzen değişmedi. */
            #pp-sec-map .pp-map-modes { display: none; }
            .pp-route-empty { display: none; }
            .pp-sec--post .kf-pc-head { display: none; }
            .pp-sec--post .kf-pc-rail { padding-top: 0; }

            /* ⚠️ Çentik güvenli alanı — konum/açılım YUKARIDAKİ tek .pp-topbar
               kuralında. Burada İKİNCİ bir tam kural yazma: `right` ya da
               `justify-content` unutulursa kart sağa yaslanmayı sessizce bırakır. */
            .pp-topbar {
                top: calc(12px + env(safe-area-inset-top));
                left: calc(10px + env(safe-area-inset-left));
                right: calc(10px + env(safe-area-inset-right));
            }
            .pp-back { padding: 5px 13px 5px 6px; border-radius: 26px; gap: 7px; }
            /* Dil listesi açıkken marka ikon-only → 6 dil + profil dar telefonda da sığar.
               Sınıfı place.js veriyor (bkz. oradaki not: :has() ile geriye seçim yapılmıyor). */
            .pp-topbar-narrow .pp-back-word { display: none; }
            .pp-topbar-narrow .pp-back { padding: 5px; border-radius: 50%; }             /* eski uzun "Back to globe" metni */
            .pp-back-logoimg { width: 24px; height: 24px; }
            .pp-back-word { font-size: 0.94rem; }
            /* Dil kartı + profil TEK KART; 6 dil AÇILIR (kapalı = aktif dil + ▾ · profil hep görünür) */
            /* ⚠️ Eskiden SAĞ kenara yanaşıyordu; 9 Ağu'da markanın yanına, SOLA alındı. */
            .pp-langbar { padding: 4px; gap: 1px; }
            .pp-langbtn { width: 27px; height: 27px; font-size: 0.76rem; font-weight: 800; }
            body.pp-acct-nav #pp-langbar-acct #kashif-account-btn { width: 30px; height: 30px; }
            .pp-langbar-acct:not(:empty) { margin-left: 2px; padding-left: 4px; }
            .pp-langbar .pp-langbtn:not(.active) { display: none; }
            /* Sıra: [aktif dil][▾][profil] — açılınca [6 dil][profil] */
            .pp-langbar::before {
                content: '▾'; order: 1; color: rgba(255,255,255,0.85); font-size: 0.66rem;
                align-self: center; padding: 0 3px 0 1px;
            }
            .pp-langbar-acct { order: 2; }
            .pp-langbar.open .pp-langbtn { display: flex; }
            .pp-langbar.open::before { display: none; }
            .pp-top { bottom: calc(16px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); }
            /* Hero mobilde daha kısa (kullanıcı: çok yüksek) */
            .pp-hero { height: 44vh; min-height: 300px; }
            .pp-hero-body { padding-bottom: 22px; }
            .pp-hero-name { font-size: 2rem; line-height: 1.08; }
            .pp-hero-tag { font-size: 1.05rem; margin-top: 10px; }
            .pp-hero-stats { gap: 18px; margin-top: 14px; }

            /* ─── Faz5 pas 4: içerik kartları 2'li KOMPAKT galeri (kullanıcı isteği) ───
               Top Attractions / Food → yan yana 2 kart: foto + başlık(2 satır) + ★puan +
               konum + ikon-butonlar. Açıklama dar kartta gizli. Otel board (pp-grid--stay/
               pp-bnb-grid) + harita + hero TAM GENİŞLİK kalır (hotel kartı .pp-card-hotel). */
            /* YATAY KAYDIRMALI satır (kullanıcı isteği): ekranda 2 kart + 3.'ün peek'i,
               yana swipe ile devamı gelir (scroll-snap). pp-wrap 16px padding'i aşıp
               kartlar ekran kenarına dek uzanır → kenarda temiz kesim + peek. */
            .pp-grid:not(.pp-grid--stay):not(.pp-bnb-grid) {
                display: flex; grid-template-columns: none; gap: 12px;
                overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
                -webkit-overflow-scrolling: touch; scrollbar-width: none;
                margin: 0 -16px; padding: 2px 16px 8px;
            }
            .pp-grid:not(.pp-grid--stay):not(.pp-bnb-grid)::-webkit-scrollbar { display: none; }
            .pp-card:not(.pp-card-hotel) { flex: 0 0 44%; scroll-snap-align: start; }
            .pp-card:not(.pp-card-hotel) .pp-card-img { height: 116px; }
            .pp-card:not(.pp-card-hotel) .pp-card-pad { padding: 10px 11px 12px; }
            .pp-card:not(.pp-card-hotel) .pp-card-top { gap: 4px; }
            .pp-card:not(.pp-card-hotel) .pp-card-top h3 {
                font-size: 0.9rem; line-height: 1.22;
                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
            }
            .pp-card:not(.pp-card-hotel) .pp-desc,
            .pp-card:not(.pp-card-hotel) .pp-more,
            .pp-card:not(.pp-card-hotel) .pp-tag,
            .pp-card:not(.pp-card-hotel) .pp-local { display: none; }
            /* Mekan türü mobilde de GÖRÜNÜR kalsın (asıl amaç: burası ne?) — sadece küçült */
            .pp-card:not(.pp-card-hotel) .pp-vtype { font-size: 0.62rem; padding: 2px 7px; }
            .pp-card:not(.pp-card-hotel) .pp-dish { font-size: 0.62rem; padding: 1px 6px; }
            .pp-card:not(.pp-card-hotel) .pp-tags { gap: 4px; }
            .pp-card:not(.pp-card-hotel) .pp-card-foot { padding-top: 9px; }
            .pp-card:not(.pp-card-hotel) .pp-rate { font-size: 0.74rem; }
            .pp-card:not(.pp-card-hotel) .pp-meta { gap: 4px; margin: 7px 0 0; }
            .pp-card:not(.pp-card-hotel) .pp-meta span { font-size: 0.65rem; padding: 3px 7px; }
            .pp-card:not(.pp-card-hotel) .pp-meta span:nth-child(n+2) { display: none; }  /* yalnız konum */
            .pp-card:not(.pp-card-hotel) .pp-acts { gap: 6px; margin-top: 9px; }
            .pp-card:not(.pp-card-hotel) .pp-act-lbl { display: none; }                    /* ikon-only */
            .pp-card:not(.pp-card-hotel) .pp-acts a { padding: 8px 4px; font-size: 1rem; }
            .pp-card:not(.pp-card-hotel) .pp-add { width: 26px; height: 26px; top: 8px; right: 8px; }
        }

        /* Content */
        .pp-wrap { max-width: 1080px; margin: 0 auto; padding: 14px 32px 80px; }
        .pp-sec { padding: 30px 0; scroll-margin-top: 70px; }
        .pp-h2 { font-size: 1.5rem; font-weight: 900; color: #0f172a; margin: 0 0 20px; letter-spacing: -0.5px; }
        .pp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
        .pp-sec-head .pp-h2 { margin: 0; }
        .pp-sort {
            appearance: none; -webkit-appearance: none; cursor: pointer;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c1ddb' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
            border: 1.5px solid #e2e8f0; border-radius: 11px;
            padding: 9px 32px 9px 14px; font-size: 0.84rem; font-weight: 700; color: #334155;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        /* "Detay" filtresi aktifken bölüm başlığındaki rozet + boş sonuç notu */
        .pp-filter-badge {
            display: inline-block; margin-left: 10px; vertical-align: middle;
            background: linear-gradient(135deg,#7c1ddb,#9d3ff0); color: #fff;
            font-size: 0.72rem; font-weight: 800; padding: 4px 11px; border-radius: 999px;
        }
        .pp-filter-empty { padding: 26px 4px; color: #64748b; font-size: 0.92rem; font-weight: 600; }
        .pp-sort:hover { border-color: #c4b5fd; }
        .pp-sort:focus { outline: none; border-color: #7c1ddb; box-shadow: 0 0 0 3px rgba(124,29,219,0.15); }

        .pp-grid {
            display: grid; gap: 18px;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
        }
        .pp-card {
            position: relative;
            background: #fff; border: 1px solid #eceef4; border-radius: 16px;
            padding: 0; overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 2px 10px rgba(15,23,42,0.04);
            transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
        }
        .pp-add {
            position: absolute; top: 10px; right: 10px; z-index: 3;
            width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
            border: 2.5px solid #fff; background: rgba(15,10,30,0.28);
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.12s, border-color 0.15s;
        }
        .pp-add::after { content: '+'; color: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1; }
        .pp-add:hover { background: rgba(124,29,219,0.85); transform: scale(1.12); }
        .pp-add.on { background: #16a34a; border-color: #fff; }
        .pp-add.on::after { content: '✓'; }
        .pp-card.selected { border-color: #7c1ddb; box-shadow: 0 0 0 2.5px #7c1ddb, 0 10px 24px rgba(124,29,219,0.18); }
        .pp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,0.1); border-color: #e0d4f7; }
        .pp-card-pad { padding: 15px 17px 16px; display: flex; flex-direction: column; flex: 1; }
        .pp-card-img {
            height: 168px; flex-shrink: 0;
            background: linear-gradient(135deg, #ede6fb, #fde3ef);
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            position: relative;
            transition: opacity 0.3s;
        }
        .pp-card-img::after { content: '🏛️'; font-size: 2rem; opacity: 0.32; }
        .pp-card-img--food::after { content: '🍜'; }
        .pp-card-img--hotel::after { content: '🏨'; }
        .pp-card-img.loaded::after { content: ''; }
        .pp-card:hover .pp-card-img { filter: brightness(1.03); }
        /* ── Kart görsel carousel'i (≥2 resim) ── */
        .pp-carou { overflow: hidden; }
        .pp-carou::after { content: ''; }
        .pp-carou-track {
            display: flex; height: 100%; width: 100%;
            overflow-x: auto; scroll-snap-type: x mandatory;
            scrollbar-width: none; -ms-overflow-style: none;
            scroll-behavior: smooth;
        }
        .pp-carou-track::-webkit-scrollbar { display: none; }
        .pp-carou-slide {
            flex: 0 0 100%; height: 100%; scroll-snap-align: center;
            background-size: cover; background-position: center;
            background-color: #ede6fb;
        }
        .pp-carou-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 30px; height: 30px; border-radius: 50%; border: none;
            background: rgba(15,23,42,0.42); color: #fff; font-size: 20px; line-height: 1;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s; z-index: 2;
        }
        .pp-card:hover .pp-carou-nav { opacity: 1; }
        .pp-carou-nav:hover { background: rgba(15,23,42,0.7); }
        .pp-carou-prev { left: 8px; }
        .pp-carou-next { right: 8px; }
        .pp-carou-dots {
            position: absolute; bottom: 9px; left: 0; right: 0; z-index: 2;
            display: flex; justify-content: center; gap: 5px; pointer-events: none;
        }
        .pp-carou-dots i {
            width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55);
            box-shadow: 0 0 3px rgba(0,0,0,0.4); cursor: pointer; pointer-events: auto;
            transition: width 0.2s, background 0.2s;
        }
        .pp-carou-dots i.on { width: 16px; border-radius: 4px; background: #fff; }
        @media (hover: none) { .pp-carou-nav { display: none; } }
        /* ── Görsel büyütücü (lightbox): karta tıkla → tam-ekran büyük görünüm ── */
        .pp-card-img.loaded { cursor: zoom-in; }
        .pp-card-img.loaded::before {
            content: '⤢'; position: absolute; top: 8px; right: 8px; z-index: 3;
            width: 26px; height: 26px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(15,23,42,0.5); color: #fff; font-size: 15px; line-height: 1;
            opacity: 0; transform: scale(0.85); transition: opacity 0.18s, transform 0.18s;
            pointer-events: none;
        }
        .pp-card:hover .pp-card-img.loaded::before { opacity: 1; transform: scale(1); }
        @media (hover: none) { .pp-card-img.loaded::before { opacity: 0.85; transform: scale(1); } }
        .pp-lb {
            position: fixed; inset: 0; z-index: 12000;
            display: none; align-items: center; justify-content: center;
            background: rgba(8,11,20,0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            padding: 44px 16px; animation: ppLbIn 0.18s ease;
        }
        .pp-lb.open { display: flex; }
        @keyframes ppLbIn { from { opacity: 0; } to { opacity: 1; } }
        .pp-lb-fig { margin: 0; position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .pp-lb-img {
            max-width: min(1100px, 92vw); max-height: 82vh; width: auto; height: auto;
            border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.55);
            object-fit: contain; background: #0b0e17;
            opacity: 0; transition: opacity 0.2s, transform 0.2s ease;
            cursor: zoom-in; will-change: transform;
        }
        .pp-lb-img.ready { opacity: 1; }
        .pp-lb-img.pp-lb-zoomed { cursor: grab; touch-action: none; border-radius: 0; }
        .pp-lb-spin {
            position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
            border: 3px solid rgba(255,255,255,0.22); border-top-color: #fff; border-radius: 50%;
            animation: ppLbSpin 0.8s linear infinite; z-index: 1; pointer-events: none;
        }
        @keyframes ppLbSpin { to { transform: rotate(360deg); } }
        .pp-lb-cap {
            color: rgba(255,255,255,0.92); font-size: 0.95rem; font-weight: 600;
            text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.6); max-width: 90vw;
        }
        .pp-lb-x {
            position: absolute; top: 16px; right: 18px; z-index: 2;
            width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
            background: rgba(255,255,255,0.14); color: #fff; font-size: 20px; line-height: 1;
            display: flex; align-items: center; justify-content: center; transition: background 0.2s;
        }
        .pp-lb-x:hover { background: rgba(255,255,255,0.28); }
        .pp-lb-nav {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
            width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
            background: rgba(255,255,255,0.12); color: #fff; font-size: 30px; line-height: 1;
            display: flex; align-items: center; justify-content: center; transition: background 0.2s;
        }
        .pp-lb-nav:hover { background: rgba(255,255,255,0.26); }
        .pp-lb-prev { left: 16px; }
        .pp-lb-next { right: 16px; }
        .pp-lb-count {
            position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
            color: rgba(255,255,255,0.8); font-size: 0.85rem; letter-spacing: 0.04em; z-index: 2;
        }
        @media (max-width: 640px) {
            .pp-lb-nav { width: 40px; height: 40px; font-size: 24px; }
            .pp-lb-prev { left: 6px; } .pp-lb-next { right: 6px; }
            .pp-lb-img { max-height: 76vh; }
            .pp-lb-x { top: 10px; right: 12px; }
        }
        .pp-card-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
        .pp-card-top h3 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0; }
        .pp-local { font-size: 0.82rem; color: #94a3b8; font-weight: 600; }
        .pp-localonly { font-size: 0.66rem; color: #94a3b8; font-style: italic; font-weight: 500; margin-left: 5px; white-space: nowrap; vertical-align: middle; }
        .pp-tag { font-size: 0.7rem; font-weight: 800; color: #7c1ddb; background: #f3eafe; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.4px; }
        .pp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
        /* Mekan türü rozeti (Restoran/Kafe/Bar…) — dolgulu, belirgin: "burası ne?" */
        .pp-vtype {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 20px;
            color: #fff; background: linear-gradient(135deg, #7c1ddb, #db1d8b);
            white-space: nowrap; letter-spacing: 0.2px;
        }
        /* Ünlü lezzet rozeti — tür rozetinin YANINDA durur, onunla karışmasın diye
           dolgusuz/çerçeveli: "burası ne?" ile "burada ne yenir?" ayrı okunsun. */
        .pp-dish {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
            color: #b45309; background: #fffbeb; border: 1px solid #fcd34d;
            white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
        }
        .pp-stars { color: #f59e0b; font-size: 0.92rem; letter-spacing: 1px; }
        .pp-desc { font-size: 0.92rem; line-height: 1.55; color: #475569; margin: 10px 0 0; }
        .pp-desc-clip {
            display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
            overflow: hidden;
        }
        .pp-desc-clip.pp-desc-open { -webkit-line-clamp: unset; }
        .pp-more {
            align-self: flex-start; margin-top: 6px; padding: 2px 0;
            background: none; border: none; cursor: pointer;
            font-size: 0.82rem; font-weight: 800; color: #7c1ddb;
        }
        .pp-more:hover { text-decoration: underline; }
        /* Daha belirgin dokunma geri bildirimi */
        .pp-card:active { transform: translateY(-1px) scale(0.997); }
        .pp-acts a:active, .pp-acts button:active { transform: scale(0.96); }
        @media (hover: none) { .pp-card:hover { transform: none; } }
        .pp-card-foot { margin-top: auto; padding-top: 14px; }
        .pp-rate { display: inline-block; font-size: 0.82rem; font-weight: 800; color: #16a34a; }
        .pp-rate i { color: #94a3b8; font-weight: 600; font-style: normal; }
        /* AI v2: rozet satırı (puan + "şu an açık/kapalı") + telefon aksiyonu */
        .pp-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
        /* NOT: rozet sınıfı `.pp-openpill` — vaktiyle `.pp-open` idi ve #place-page'in
           açık-durum sınıfıyla çakışıp `white-space: nowrap`ı tüm sayfaya miras
           bırakıyordu. Adı DEĞİŞTİRME; place.js openPill() ile eşleşmeli. */
        .pp-openpill { display: inline-flex; align-items: center; gap: 4px; cursor: default;
            font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
        .pp-openpill.is-open { color: #15803d; background: rgba(22,163,74,0.12); }
        .pp-openpill.is-closed { color: #b91c1c; background: rgba(220,38,38,0.10); }
        .pp-acts a.pp-tel { color: #0369a1; background: #e0f2fe; }
        .pp-acts a.pp-tel:hover { background: #0369a1; color: #fff; }
        /* Otel board kartında açık/kapalı: başlık altında ince satır */
        .pp-ph-card .pp-openpill { margin: 6px 10px 10px; padding: 2px 8px; font-size: 0.68rem; }
        .pp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
        .pp-meta span { font-size: 0.74rem; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 4px 9px; border-radius: 7px; }
        .pp-acts { display: flex; gap: 8px; margin-top: 10px; }
        .pp-acts a {
            flex: 1; text-align: center; text-decoration: none;
            font-size: 0.8rem; font-weight: 800; padding: 9px 10px; border-radius: 10px;
            color: #475569; background: #f1f5f9; transition: background 0.15s, color 0.15s;
        }
        .pp-acts a:hover { background: #7c1ddb; color: #fff; }
        .pp-share {
            flex: 0 0 auto; width: 40px; border: none; cursor: pointer;
            font-size: 0.95rem; font-weight: 800; border-radius: 10px;
            color: #475569; background: #f1f5f9; transition: background 0.15s, color 0.15s, transform 0.12s;
        }
        .pp-share:hover { background: #7c1ddb; color: #fff; }
        .pp-share:active { transform: scale(0.94); }
        /* Toast */
        .pp-toast {
            position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px);
            z-index: 50; background: rgba(15,10,30,0.94); color: #fff;
            padding: 11px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 700;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35); opacity: 0; pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
        }
        .pp-toast.show { opacity: 1; transform: translate(-50%, 0); }

        /* Konaklama türü sekmeleri (Otel / Airbnb / Kamp) */
        .pp-stay-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
        .pp-stay-tab {
            cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
            border-radius: 24px; padding: 9px 18px; font-size: 0.88rem; font-weight: 800;
            display: flex; align-items: center; gap: 6px;
            transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
        }
        .pp-stay-tab:hover { border-color: #c4b5fd; }
        .pp-stay-tab:active { transform: scale(0.97); }
        .pp-stay-tab.active {
            background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; border-color: transparent;
            box-shadow: 0 6px 16px rgba(124,29,219,0.3);
        }
        /* Konaklama: büyük kart içinde iki kart — solda kaydırılabilir otel
           listesi, sağda (daha geniş) harita; ikisi aynı yükseklikte. */
        .pp-stay-board {
            display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.3fr);
            gap: 16px; height: 660px;
            background: #f7f5fb; border: 1px solid #ece8f6; border-radius: 22px; padding: 16px;
        }
        .pp-stay-col {
            background: #fff; border: 1px solid #eceef4; border-radius: 16px;
            box-shadow: 0 2px 10px rgba(15,23,42,0.04);
            overflow: hidden; display: flex; flex-direction: column; min-height: 0;
        }
        .pp-stay-col-head {
            flex-shrink: 0; padding: 13px 16px; font-weight: 800; font-size: 0.95rem;
            color: #0f172a; border-bottom: 1px solid #f1f5f9;
            display: flex; align-items: center; gap: 8px;
        }
        .pp-stay-count { background: #f3eafe; color: #7c1ddb; font-size: 0.72rem; font-weight: 800; border-radius: 20px; padding: 2px 9px; }
        .pp-stay-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
        .pp-stay-scroll::-webkit-scrollbar { width: 8px; }
        .pp-stay-scroll::-webkit-scrollbar-thumb { background: #d8cdf0; border-radius: 8px; }
        .pp-stay-scroll::-webkit-scrollbar-track { background: transparent; }
        .pp-grid--stay { grid-template-columns: 1fr; gap: 12px; }
        .pp-stay-col--map .pp-stay-map { flex: 1; min-height: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
        /* Otel kartını küçült: daha kısa görsel + sıkı padding + ufak başlık */
        .pp-card-hotel .pp-card-img { height: 118px; }
        .pp-card-hotel .pp-card-pad { padding: 11px 14px 13px; }
        .pp-card-hotel .pp-card-top h3 { font-size: 0.98rem; }
        .pp-card-hotel .pp-desc { font-size: 0.82rem; }
        .pp-card-hotel .pp-card-foot { padding-top: 10px; }
        /* Otel kartı numara rozeti (pin ile eşleşir) + seçili vurgu */
        .pp-stay-num {
            position: absolute; top: 10px; left: 10px; z-index: 3;
            width: 24px; height: 24px; border-radius: 50%;
            background: #7c1ddb; color: #fff; font-size: 0.78rem; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgba(124,29,219,0.45); border: 2px solid #fff;
        }
        .pp-card-hotel.pp-hl { border-color: #7c1ddb; box-shadow: 0 0 0 2.5px #7c1ddb, 0 10px 24px rgba(124,29,219,0.2); }
        .pp-card-hotel { scroll-margin: 12px; }
        /* Harita pinleri (numaralı damla) */
        .stay-pin {
            width: 30px; height: 30px;
            background: #7c1ddb; border: 2px solid #fff; border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,0.35);
            display: flex; align-items: center; justify-content: center;
        }
        .stay-pin span { transform: rotate(45deg); color: #fff; font-size: 0.8rem; font-weight: 800; }
        .stay-pin-active { background: #e4181e; transform: rotate(-45deg) scale(1.2); z-index: 1000; }
        .stay-mk { transition: transform 0.12s; }
        .stay-mk:hover { z-index: 900; }
        .stay-mk:hover .stay-pin { transform: rotate(-45deg) scale(1.12); }
        /* Görüş alanındaki canlı OSM otelleri (ikincil pin) */
        .stay-osm-pin {
            width: 26px; height: 26px; border-radius: 50%; background: #fff;
            border: 2px solid #1a73e8; box-shadow: 0 2px 6px rgba(15,23,42,0.3);
            display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
            transition: transform 0.12s;
        }
        .stay-osm-mk:hover .stay-osm-pin { transform: scale(1.18); border-color: #e4181e; }
        /* ── Airbnb gerçek ilanları ─────────────────────────────────────────── */
        .pp-bnb-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; color: #0f172a; margin-bottom: 14px; }
        .pp-bnb-all { margin-left: auto; font-size: 0.8rem; font-weight: 800; color: #ff385c; text-decoration: none; }
        .pp-bnb-all:hover { text-decoration: underline; }
        .pp-bnb-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
        .pp-bnb-card { display: block; text-decoration: none; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #eceef4; box-shadow: 0 2px 10px rgba(15,23,42,0.05); transition: transform 0.16s, box-shadow 0.16s; }
        .pp-bnb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,0.12); }
        .pp-bnb-img { position: relative; height: 150px; background: #ede6fb center/cover no-repeat; }
        .pp-bnb-img::after { content: '🏡'; font-size: 1.8rem; opacity: 0; }
        /* Otel puanı → foto sağ-alt köşesinde renkli rozet */
        .pp-ph-badge {
            position: absolute; right: 8px; bottom: 8px; z-index: 2;
            display: inline-flex; align-items: center; gap: 3px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
            font-size: 0.82rem; font-weight: 800; padding: 3px 9px; border-radius: 9px;
            box-shadow: 0 2px 8px rgba(15,23,42,0.4);
        }
        .pp-bnb-pad { padding: 11px 13px 13px; }
        .pp-bnb-title { font-size: 0.9rem; font-weight: 700; color: #0f172a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
        /* Küratörlü otel kartının açıklaması. Google board kartlarında desc yok →
           kural onlarda hiç uygulanmaz. 3 satırda kırpılır ki kart boyu bozulmasın. */
        .pp-ph-desc { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.45; color: #475569;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .pp-bnb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
        .pp-bnb-rate { font-size: 0.8rem; color: #0f172a; font-weight: 700; }
        .pp-bnb-rate i { color: #64748b; font-style: normal; font-weight: 500; }
        .pp-bnb-price { font-size: 0.92rem; font-weight: 900; color: #0f172a; white-space: nowrap; }
        .pp-bnb-price small { font-size: 0.7rem; font-weight: 600; color: #64748b; }
        /* ── Yeni konaklama kartı (2026-08-06) ────────────────────────────────
           ⚠️ Kök artık <article>, dış bağlantı .pp-ph-main'de. Sebep: karta
           buton (kaydet + "Fiyata Bakın") koyuluyor ve <a> içinde <button>
           GEÇERSİZ HTML'dir — tıklama davranışı bozulur. */
        .pp-ph-card { position: relative; }
        .pp-ph-main { display: block; text-decoration: none; color: inherit; }
        /* Kaydet (kalp) — fotoğrafın sağ ÜST köşesi (puan rozeti sağ ALT'ta, çakışmaz) */
        .pp-ph-fav {
            position: absolute; right: 8px; top: 8px; z-index: 3;
            width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.05rem; line-height: 1; padding: 0;
            background: rgba(255,255,255,0.92); color: #64748b;
            border: 1px solid rgba(15,23,42,0.10);
            box-shadow: 0 2px 8px rgba(15,23,42,0.18);
            transition: transform 0.14s, color 0.14s, background 0.14s;
        }
        .pp-ph-fav:hover { transform: scale(1.08); background: #fff; }
        .pp-ph-fav.on { color: #e11d48; }
        /* Fiyat satırı — teklif yoksa BOŞ kalır ve hiç yer kaplamaz.
           ⚠️ Uydurma rakam yok: sağlayıcı fiyat vermediyse yalnız CTA görünür. */
        .pp-ph-offer:empty { display: none; }
        .pp-ph-offer {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 10px 13px 12px; border-top: 1px solid #f1f3f8; background: #fcfcfe;
        }
        .pp-ph-rate { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
        .pp-ph-prov { font-size: 0.72rem; font-weight: 700; color: #64748b; letter-spacing: 0.01em; }
        .pp-ph-nums { display: flex; align-items: baseline; gap: 7px; }
        .pp-ph-old { font-size: 0.78rem; color: #94a3b8; }
        .pp-ph-new { font-size: 1.02rem; font-weight: 900; color: #be123c; white-space: nowrap; }
        /* ⚠️ MARKA RENGİ (7 Ağu, kullanıcı isteği): yeşil yerine sitenin kendi
           mor → kırmızı degradesi. Yeşil hiçbir yerde kullanılmıyordu ve kart
           sayfanın geri kalanından kopuk duruyordu. Metin de kısaltıldı:
           "Fiyatları karşılaştır →" → "Fiyatlar" (sade ve net). */
        .pp-ph-cta {
            flex: 0 0 auto; text-decoration: none; white-space: nowrap;
            background: linear-gradient(135deg, #7c1ddb, #e4181e);
            color: #fff; font-size: 0.84rem; font-weight: 800;
            padding: 9px 18px; border-radius: 10px; letter-spacing: 0.01em;
            box-shadow: 0 3px 12px rgba(124,29,219,0.30);
            transition: filter 0.14s, transform 0.14s, box-shadow 0.14s;
        }
        .pp-ph-cta:hover {
            filter: brightness(1.08); transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(124,29,219,0.38);
        }
        /* Canlı fiyat YOKKEN buton tek başına ve tam genişlikte — "boş fiyat"
           izlenimi vermesin. Aynı marka rengi; yalnız yerleşimi değişiyor.
           ⚠️ Sağlayıcı anahtarı girilene kadar kartta GÖRÜNEN TEK hâl bu. */
        .pp-ph-cta--plain { flex: 1 1 100%; text-align: center; }
        /* ── Zengin harita popup kartı ──────────────────────────────────────── */
        .pp-pop-rich { width: 246px; }
        .pp-pop-rich .pp-bnb-pop-img { position: relative; height: 128px; border-radius: 10px 10px 0 0;
            background-size: cover; background-position: center; }
        /* Popup içinde kalp fotoğrafın üstünde — kart ile aynı bileşen, aynı sınıf. */
        .pp-pop-rich .pp-ph-fav { right: 8px; top: 8px; width: 30px; height: 30px; }
        .pp-pop-body { padding: 9px 11px 11px; }
        .pp-pop-rich .pp-pin-name { display: block; font-size: 0.92rem; line-height: 1.28; color: #0f172a; }
        .pp-pop-rate { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
        .pp-pop-num { font-size: 0.82rem; font-weight: 800; color: #0f172a; }
        .pp-dots { display: inline-flex; gap: 2px; }
        .pp-dots .pp-dot { width: 9px; height: 9px; border-radius: 50%; background: #dbe1ea; display: inline-block; }
        .pp-dots .pp-dot.on { background: #16a34a; }
        .pp-pop-rev { font-size: 0.76rem; color: #64748b; }
        .pp-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 9px; }
        /* Fiyat yoksa bu blok hiç basılmaz → CTA tek başına ve tam genişlikte kalır. */
        .pp-pop-price { display: flex; flex-direction: column; line-height: 1.1; }
        .pp-pop-price { font-size: 1rem; font-weight: 900; color: #0f172a; white-space: nowrap; }
        .pp-pop-price small { font-size: 0.66rem; font-weight: 600; color: #64748b; }
        .pp-pop-cta { padding: 7px 13px; font-size: 0.78rem; }
        .pp-pop-foot:has(.pp-pop-cta:only-child) .pp-pop-cta { flex: 1 1 auto; text-align: center; }

        .pp-bnb-grid--board { grid-template-columns: 1fr; gap: 12px; }
        /* Airbnb harita fiyat pini */
        .bnb-pin {
            background: #fff; color: #222; font-size: 0.74rem; font-weight: 800;
            padding: 3px 9px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.12);
            box-shadow: 0 2px 6px rgba(0,0,0,0.28); white-space: nowrap; transition: transform 0.12s;
        }
        .bnb-mk:hover .bnb-pin { transform: scale(1.08); }
        .bnb-pin-active { background: #ff385c; color: #fff; border-color: #ff385c; transform: scale(1.12); }
        .pp-bnb-pop-img { height: 110px; border-radius: 10px; background: #ede6fb center/cover no-repeat; margin-bottom: 8px; }
        .pp-bnb-pop { min-width: 190px; }
        .pp-bnb-link { background: #ff385c !important; }
        /* Google Places otel pini: puan etiketi (aktif = mavi) */
        .ph-pin.bnb-pin-active { background: #2563eb; color: #fff; border-color: #2563eb; }
        .pp-ph-card .pp-bnb-rate { color: #1d4ed8; }
        /* Pin popup (profesyonel) */
        .pp-pin-popup .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 26px rgba(15,23,42,0.22); padding: 2px; }
        .pp-pin-popup .leaflet-popup-content { margin: 12px 14px; }
        .pp-pin-popup .leaflet-popup-tip { box-shadow: 0 8px 26px rgba(15,23,42,0.22); }
        .pp-pin-pop { position: relative; min-width: 180px; }
        .pp-pin-imgs { display: flex; gap: 4px; margin: 0 0 8px; }
        .pp-pin-imgs span { flex: 1; min-width: 0; height: 66px; border-radius: 9px; background: #ede6fb center/cover no-repeat; }
        .pp-pin-no { position: absolute; left: 6px; top: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #7c1ddb; color: #fff; font-size: 0.74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); border: 1.5px solid #fff; }
        .pp-pin-name { display: block; font-size: 0.95rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
        .pp-pin-stars { color: #f59e0b; font-size: 0.82rem; letter-spacing: 1px; margin-top: 2px; }
        .pp-pin-meta { font-size: 0.8rem; color: #7c1ddb; font-weight: 700; margin-top: 3px; }
        .pp-pin-loc { font-size: 0.76rem; color: #64748b; margin-top: 3px; }
        .pp-pin-link { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg,#7c1ddb,#e4181e); padding: 6px 12px; border-radius: 8px; }
        .pp-pin-link:hover { filter: brightness(1.08); }
        /* Dar masaüstü / tablet: tek kolona in, her kart kendi yüksekliğinde */
        @media (max-width: 900px) {
            .pp-stay-board { grid-template-columns: 1fr; height: auto; }
            .pp-stay-col--list { height: 420px; }
            .pp-stay-col--map { height: 360px; }
        }
        /* ─── Faz5: konaklama MOBİL (kullanıcı isteği) — 900px bloğundan SONRA (kazanır) ───
           Board kart-kabuğu kalkar → önerilen oteller YATAY 2'li kaydırmalı şerit,
           harita hemen ALTINDA kartTAN ÇIKMIŞ tam genişlik. Kaydırınca haritada canlı
           konum (wireStayScrollSync). */
        @media (max-width: 640px) {
            .pp-stay-board { display: block; height: auto; background: transparent; border: none; border-radius: 0; padding: 0; }
            .pp-stay-col { background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; display: block; height: auto; }
            .pp-stay-col--list { height: auto; }
            .pp-stay-col-head { padding: 0 2px 10px; border-bottom: none; font-size: 0.9rem; }
            .pp-stay-col--map .pp-stay-col-head { display: none; }   /* "Map" başlığı gereksiz */
            /* Liste: dikey scroll → YATAY 2'li scroll (full-bleed + snap) */
            .pp-stay-scroll {
                overflow-x: auto; overflow-y: visible; padding: 2px 16px 8px; margin: 0 -16px;
                scroll-snap-type: x mandatory; scroll-padding-left: 16px;
                -webkit-overflow-scrolling: touch; scrollbar-width: none;
            }
            .pp-stay-scroll::-webkit-scrollbar { display: none; }
            .pp-bnb-grid--board, .pp-grid--stay { display: flex; grid-template-columns: none; gap: 12px; }
            .pp-bnb-card { flex: 0 0 46%; scroll-snap-align: start; }
            .pp-bnb-img { height: 108px; }
            .pp-bnb-title { font-size: 0.86rem; -webkit-line-clamp: 2; min-height: 0; }
            /* Harita: kartTAN çıkmış, önerilerin ALTINDA — ekran kenarından kenara
               (full-bleed) + daha uzun → tam profesyonel görünüm (kullanıcı isteği) */
            .pp-stay-col--map { height: auto; margin-top: 14px; }
            .pp-stay-col--map .pp-stay-map { height: 380px; border-radius: 0; overflow: hidden; margin: 0 -16px; }
        }
        /* ── Rota & 3B Harita (birleşik tek bölüm) ─────────────────────────── */
        .pp-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
        .pp-map-head .pp-h2 { margin: 0; }
        .pp-map-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .pp-map-mode {
            cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
            border-radius: 22px; padding: 7px 16px; font-size: 0.84rem; font-weight: 800;
            transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
        }
        .pp-map-mode:hover { border-color: #c4b5fd; }
        .pp-map-mode:active { transform: scale(0.97); }
        .pp-map-mode.active { background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(124,29,219,0.3); }
        .pp-map-offline { color: #0a7d55; border-color: #12d18e; background: #e9fbf3; }
        .pp-map-offline:hover { border-color: #0a7d55; background: #d6f7e8; }
        .pp-map-offline.kf-has-offline { background: linear-gradient(135deg,#12d18e,#0a7d55); color:#fff; border-color: transparent; }
        /* ⚠️ .pp-map-stage / .pp-map (gömülü rota haritası) 2026-07-30'da KALDIRILDI —
           harita artık .pp-mm penceresinde. .pp-3d-map hâlâ kullanımda (yer sayfasının
           ayrı "3B görünüm" bloğu), o yüzden kuralları duruyor. */
        .pp-map-nogl { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 24px; color: #94a3b8; font: 600 0.9rem system-ui; background: #0b1020; }
        .pp-3d-map .maplibregl-map { position: absolute; inset: 0; height: 100%; width: 100%; }
        /* (.pp-3d-overlay kaldırıldı — yükleme örtüsü artık .pp-mm-spin.
           .pp-3d-spin ÇARKI hâlâ kullanılıyor, o yüzden duruyor.) */
        .pp-3d-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.3); border-top-color: #fff; animation: pp3dspin 0.8s linear infinite; }
        @keyframes pp3dspin { to { transform: rotate(360deg); } }
        /* MapLibre POI hover popup (2D Leaflet tooltip karşılığı) + köşe yuvarlatma */
        .pp-3d-map .maplibregl-canvas, .pp-3d-map .maplibregl-map { border-radius: 18px; }
        .pp-poi-glpop .maplibregl-popup-content { padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
        .pp-poi-glpop .maplibregl-popup-tip { display: none; }
        .maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { opacity: 0.5; }
        @media (max-width: 700px) {
        }
        /* Airbnb / Kamp yönlendirme paneli */
        .pp-stay-cta {
            text-align: center; background: #fff; border: 1px solid #eceef4; border-radius: 18px;
            padding: 44px 24px; box-shadow: 0 2px 10px rgba(15,23,42,0.04);
        }
        .pp-stay-cta-ic { font-size: 3rem; margin-bottom: 12px; }
        .pp-stay-cta-lead { font-size: 1.05rem; font-weight: 600; color: #334155; margin: 0 0 22px; }
        .pp-stay-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .pp-stay-cta-btn {
            text-decoration: none; font-weight: 800; font-size: 0.9rem; padding: 12px 22px; border-radius: 12px;
            background: #f1f5f9; color: #334155; border: 1.5px solid #e7e9f2;
            transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, filter 0.15s;
        }
        .pp-stay-cta-btn:hover { background: #7c1ddb; color: #fff; border-color: #7c1ddb; transform: translateY(-1px); }
        .pp-stay-cta-btn.primary {
            background: linear-gradient(135deg,#e4181e,#ff5722); color: #fff; border-color: transparent;
            box-shadow: 0 6px 16px rgba(228,24,30,0.3);
        }
        .pp-stay-cta-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

        /* Konaklama: aksiyon barı (ana CTA + ikincil satır) */
        .pp-hotel-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
        .pp-cmp-btn {
            width: 100%; text-align: center; cursor: pointer; border: none;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            font-size: 0.92rem; font-weight: 800; padding: 13px 14px; border-radius: 13px;
            color: #fff; background: linear-gradient(135deg,#16a34a,#15803d);
            box-shadow: 0 6px 16px rgba(22,163,74,0.30);
            transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
        }
        .pp-cmp-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(22,163,74,0.38); }
        .pp-cmp-btn:active { transform: scale(0.98); }
        .pp-cmp-btn.open {
            background: linear-gradient(135deg,#7c1ddb,#5b16a8);
            box-shadow: 0 6px 16px rgba(124,29,219,0.30);
        }
        .pp-hotel-sub { display: flex; gap: 9px; }
        .pp-hotel-sub > * {
            flex: 1; text-align: center; cursor: pointer; text-decoration: none;
            display: flex; align-items: center; justify-content: center; gap: 5px;
            font-size: 0.82rem; font-weight: 800; padding: 11px 10px; border-radius: 11px;
            border: 1.5px solid #e7e9f2; background: #f7f8fc; color: #475569;
            transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
        }
        .pp-hotel-sub > *:hover { background: #7c1ddb; color: #fff; border-color: #7c1ddb; }
        .pp-hotel-sub > *:active { transform: scale(0.97); }
        .pp-cmp { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 12px; }
        .pp-cmp-hint { font-size: 0.76rem; color: #64748b; font-weight: 600; margin-bottom: 9px; }
        .pp-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
        .pp-cmp-link {
            text-decoration: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            font-size: 0.8rem; font-weight: 700; color: #334155;
            background: #f1f5f9; border: 1px solid #e9edf3; border-radius: 9px; padding: 9px 8px;
            transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
        }
        .pp-cmp-link:hover { background: #7c1ddb; color: #fff; border-color: #7c1ddb; }
        .pp-cmp-link:active { transform: scale(0.97); }

        .pp-tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; }
        .pp-tips li {
            position: relative; counter-increment: tip;
            background: #fff; border: 1px solid #eceef4; border-radius: 14px;
            padding: 16px 18px 16px 56px; margin-bottom: 12px;
            font-size: 0.98rem; line-height: 1.55; color: #334155; font-weight: 500;
        }
        .pp-tips li::before {
            content: counter(tip); position: absolute; left: 14px; top: 14px;
            width: 28px; height: 28px; border-radius: 50%;
            background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff;
            font-size: 0.85rem; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
        }

        /* ── Dinamik Seyahat İpuçları (citytips.js) ───────────────────────────
           Kategorili AI kartları + profil çipleri. Baked düz liste (.pp-tips)
           yalnız AI gelene kadar / AI ulaşılamazsa yedek olarak görünür.

           (Eskiden burada savunma amaçlı `white-space: normal` bloğu vardı: rozet
           sınıfı `.pp-open` #place-page'in açık-durum sınıfıyla çakışıp nowrap'i
           tüm sayfaya miras bırakıyordu. Rozet `.pp-openpill` olunca kök neden
           kalktı, blok da kaldırıldı.) */
        .pp-tips-sub {
            display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
            font-size: 0.92rem; color: #64748b; font-weight: 600; margin: -6px 0 14px;
        }
        .pp-tips-live {
            display: inline-flex; align-items: center; gap: 4px;
            background: #eef7f0; color: #15803d; border: 1px solid #d5ecdb;
            border-radius: 20px; padding: 3px 10px; font-size: 0.74rem; font-weight: 800;
        }
        .pp-tips-live[hidden] { display: none; }
        .pp-tips-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
        .pp-tips-chip {
            border: 1.5px solid #e6dbf8; background: #fff; color: #7c1ddb;
            border-radius: 22px; padding: 8px 15px;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 2px 6px rgba(15,23,42,0.05);
            transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
        }
        .pp-tips-chip:hover { background: #f5edff; border-color: #7c1ddb; }
        .pp-tips-chip:active { transform: scale(0.97); }
        .pp-tips-chip.on {
            background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff;
            border-color: transparent; box-shadow: 0 6px 16px rgba(124,29,219,0.28);
        }
        .pp-tips-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
        }
        .pp-tipcard {
            position: relative; overflow: hidden;
            background: #fff; border: 1px solid #eceef4; border-radius: 16px;
            padding: 16px 18px 17px 20px;
            transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
        }
        /* Sol kenarda kategori rengi — kartlar tek bakışta ayrışsın */
        .pp-tipcard::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
            background: var(--tipc, #7c1ddb);
        }
        .pp-tipcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,0.08); border-color: #e3d6f7; }
        .pp-tipcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
        .pp-tipcard-ic { font-size: 1.15rem; line-height: 1; }
        .pp-tipcard-cat {
            font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
            color: var(--tipc, #7c1ddb);
        }
        .pp-tipcard-ttl { margin: 0 0 5px; font-size: 1rem; font-weight: 800; color: #0f172a; }
        .pp-tipcard-tx { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #475569; font-weight: 500; }
        /* İskelet (AI beklenirken) */
        .pp-tipcard-sk { pointer-events: none; }
        .pp-tipcard-sk::before { background: #e9edf3; }
        .pp-tipcard-sk span {
            display: block; height: 11px; border-radius: 6px; margin-bottom: 9px;
            background: linear-gradient(90deg,#eef1f6 25%,#f7f9fc 37%,#eef1f6 63%);
            background-size: 400% 100%; animation: pp-tips-sk 1.3s ease infinite;
        }
        .pp-tipcard-sk span:nth-child(1) { width: 38%; }
        .pp-tipcard-sk span:nth-child(2) { width: 88%; }
        .pp-tipcard-sk span:nth-child(3) { width: 66%; margin-bottom: 0; }
        @keyframes pp-tips-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
        /* Baked liste dururken AI bekleniyor → içerik silinmez, soluklaşır */
        .pp-tips-body.is-loading .pp-tips-static { opacity: 0.5; transition: opacity 0.2s; }
        .pp-tips-wait {
            font-size: 0.86rem; font-weight: 700; color: #7c1ddb; margin-bottom: 10px;
            animation: pp-tips-pulse 1.4s ease-in-out infinite;
        }
        @keyframes pp-tips-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
        .pp-tips-err {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            font-size: 0.92rem; color: #64748b; font-weight: 600;
            background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 16px 18px;
        }
        @media (max-width: 640px) {
            .pp-tips-grid { grid-template-columns: 1fr; gap: 11px; }
            .pp-tips-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 14px; padding: 0 18px 2px; }
            .pp-tips-chips::-webkit-scrollbar { display: none; }
            .pp-tips-chip { flex: 0 0 auto; padding: 7px 13px; font-size: 0.8rem; }
            .pp-tipcard { padding: 14px 15px 15px 17px; }
        }

        /* (.pp-map kaldırıldı — gömülü rota haritası yok, bkz. .pp-mm penceresi) */

        /* Route planner */
        .pp-route-hint { font-size: 0.92rem; color: #64748b; font-weight: 600; margin: 0 0 14px; }
        .pp-route-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
        .pp-chip {
            display: inline-flex; align-items: center;
            background: #fff; border: 1.5px solid #e2e8f0; border-radius: 22px;
            padding: 8px 15px; font-size: 0.85rem; font-weight: 700; color: #334155;
            cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
        }
        .pp-chip:hover { border-color: #c4b5fd; }
        .pp-chip.sel { background: #7c1ddb; border-color: #7c1ddb; color: #fff; }
        .pp-chip.pp-chip-off { opacity: 0.45; }
        .pp-chip-osm:not(.sel) { border-style: dashed; border-color: #cbd5e1; }
        .pp-chip-n {
            display: inline-flex; align-items: center; justify-content: center;
            width: 19px; height: 19px; border-radius: 50%;
            background: rgba(255,255,255,0.28); margin-right: 7px; font-size: 0.72rem; font-weight: 900;
        }

        /* ⚠️ `.pp-cat` (kaba kategori çipi) KURALLARI KALDIRILDI 14 Ağu: kullanıcı
           harita penceresindeki iki şeridi "aynı" bulup üsttekini sildirdi.
           Sınıfı artık HİÇBİR yer üretmiyor (profile.js'teki `.kf-pp-cat` başka
           bir şey). Tek filtre şeridi `.pp-fchip`. */

        /* Selected route chips */
        .pp-chip-x { margin-left: 7px; opacity: 0.75; font-size: 0.72rem; }
        .pp-route-empty { font-size: 0.86rem; color: #94a3b8; font-weight: 600; }

        /* 2.5D figurine-style POI markers */
        .poi-mk { background: none; border: none; }
        .poi-badge {
            width: 32px; height: 32px; border-radius: 50%;
            background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.85), var(--c, #64748b) 72%);
            border: 2px solid #fff;
            box-shadow: 0 5px 9px rgba(0,0,0,0.32), inset 0 -3px 6px rgba(0,0,0,0.22);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem; line-height: 1; cursor: pointer;
            transition: transform 0.15s;
        }
        .leaflet-marker-icon:hover .poi-badge { transform: translateY(-4px) scale(1.14); }
        /* POI pin hover kartı (görsel + ad + puan) */
        .leaflet-tooltip.pp-poi-tt { padding: 6px; border-radius: 12px; border: 1px solid rgba(124,29,219,0.22); box-shadow: 0 6px 20px rgba(0,0,0,0.25); color: #1a1030; }
        .pp-poi-tip { width: 150px; }
        .pp-poi-tip-img { display: block; height: 84px; background: #2a1a40 center/cover no-repeat; border-radius: 8px; margin-bottom: 5px; }
        .pp-poi-tip b { font-size: 0.84rem; line-height: 1.2; }
        .pp-poi-tip-r { margin-left: 5px; font-style: normal; color: #b8860b; font-size: 0.78rem; }
        .poi-badge.poi-sel {
            width: 36px; height: 36px; color: #fff; font-weight: 900;
            background: radial-gradient(circle at 32% 26%, #c4a4f5, #7c1ddb 72%);
            box-shadow: 0 6px 13px rgba(124,29,219,0.5), inset 0 -3px 6px rgba(0,0,0,0.25);
        }
        /* Küme balonu: "gerisi" ızgarada toplanır (bkz. place.js mmCluster) */
        .poi-badge.poi-cl {
            width: 34px; height: 34px; color: #fff; font-weight: 900; font-size: 0.82rem;
            background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9), #475569 74%);
            box-shadow: 0 5px 12px rgba(15,23,42,0.45), inset 0 -3px 6px rgba(0,0,0,0.25);
        }
        .poi-badge.poi-cl-b { width: 42px; height: 42px; font-size: 0.9rem; }
        .maplibregl-marker:hover .poi-badge { transform: translateY(-4px) scale(1.14); }

        /* ── ADMİN DÜZENLEME MODU: gerçek gezi ekranı + kart üstü düğmeler ───────
           Tasarım: görseller/şehir_düzenle_yeni_tasarım.png (31 Tem).
           Admin ne görüyorsa onu düzenliyor — kart görünümüne DOKUNULMUYOR, yalnız
           fotoğrafın sağ üstüne iki düğme bindiriliyor. */
        .pp-editmode .pp-card { position: relative; }
        .pp-ed-wrap {
            position: absolute; top: 10px; right: 10px; z-index: 6;
            display: flex; flex-direction: column; gap: 8px; align-items: stretch;
        }
        .pp-ed-btn {
            cursor: pointer; border: 2px solid rgba(255,255,255,0.85); border-radius: 10px;
            padding: 7px 16px; font: 800 0.95rem system-ui; color: #10240f; min-width: 104px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35); transition: transform 0.12s, filter 0.15s;
        }
        .pp-ed-btn:hover { filter: brightness(1.06); }
        .pp-ed-btn:active { transform: scale(0.96); }
        .pp-ed-edit { background: #a6e8a1; }
        .pp-ed-rm { background: #ef2b2b; color: #fff; }
        .pp-ed-hide { background: #fde68a; }
        /* Bölüm başlığı yanındaki "＋ Kart ekle" */
        .pp-ed-add {
            margin-left: auto; cursor: pointer; border: none; border-radius: 12px;
            padding: 9px 18px; font: 800 0.88rem system-ui; color: #fff;
            background: linear-gradient(135deg,#7c1ddb,#c2185b);
            box-shadow: 0 5px 14px rgba(124,29,219,0.32);
        }
        .pp-ed-add:hover { filter: brightness(1.08); }
        .pp-ed-add:active { transform: scale(0.97); }
        /* Sıralama seçicisi varsa ikisi yan yana dursun */
        .pp-editmode .pp-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        /* Rotaya ekle (＋) düğmesi ile çakışmasın: düzenleme modunda o sola kayar. */
        .pp-editmode .pp-card .pp-add { right: auto; left: 10px; }
        @media (max-width: 700px) {
            .pp-ed-btn { padding: 6px 12px; font-size: 0.85rem; min-width: 86px; }
            .pp-ed-wrap { top: 8px; right: 8px; gap: 6px; }
        }

        /* ── Bölümdeki harita ÖNİZLEMESİ (gömülü harita kaldırıldı) ──────────── */
        .pp-map-open { color: #fff; border-color: transparent; background: linear-gradient(135deg,#7c1ddb,#e4181e); box-shadow: 0 6px 16px rgba(124,29,219,0.3); }
        .pp-map-open:hover { filter: brightness(1.06); }
        .pp-map-prev {
            position: relative; display: block; width: 100%; cursor: pointer;
            height: 190px; border-radius: 18px; overflow: hidden; padding: 0;
            border: 1px solid #e2e8f0; background: linear-gradient(135deg,#f6f2ff,#eef4ff 55%,#f0fbff);
            transition: box-shadow 0.18s, transform 0.12s;
        }
        .pp-map-prev:hover { box-shadow: 0 10px 28px rgba(124,29,219,0.18); }
        .pp-map-prev:active { transform: scale(0.995); }
        /* Sahte "harita" dokusu — ağ/anahtar gerektirmez, offline da aynı görünür. */
        .pp-map-prev-grid {
            position: absolute; inset: 0; opacity: 0.5;
            background-image:
              linear-gradient(rgba(124,29,219,0.13) 1px, transparent 1px),
              linear-gradient(90deg, rgba(124,29,219,0.13) 1px, transparent 1px);
            background-size: 44px 44px, 44px 44px;
        }
        .pp-map-prev-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; }
        .pp-map-prev-pin { font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(124,29,219,0.35)); }
        .pp-map-prev-cta { font: 900 1.02rem system-ui; color: #4c1d95; }
        .pp-map-prev-sub { font: 600 0.82rem system-ui; font-style: normal; color: #6d28d9; opacity: 0.85; text-align: center; padding: 0 18px; }

        /* ── TAM EKRAN HARİTA PENCERESİ ──────────────────────────────────────── */
        /* KATMAN SIRASI: yer sayfası 10000 · seçici 10074 ·
           BURASI 10076 · gezi planlayıcı jp-root 10080 · poster 10105.
           Harita, gezi planlayıcının ALTINDA kalmalı (plan haritanın üstünden açılır). */
        /* ⚠️ IZGARA (grid), ESNEK KUTU DEĞİL — bilerek. `display:flex` + orta satırda
           `flex:1 1 auto` kullanıldığında kap CANLIDA 0 YÜKSEKLİK aldı (2026-07-30,
           #mapdbg paneli ölçtü: "kap 1692x0"). Harita/stil/karo/pin hepsi sağlamdı,
           sadece 0 yükseklikli kutuya çiziliyorlardı → ekran bomboş, hata da yok.
           Sebebi: stage'in TÜM çocukları position:absolute → içerik yüksekliği 0 →
           `flex-basis:auto` ile taban 0 kalıyor ve büyüme her tarayıcıda güvenilir
           dağılmıyor. Izgarada `1fr` kalan yüksekliği KESİN veriyor. */
        .pp-mm { position: fixed; inset: 0; z-index: 10076; display: none; background: #0b1020; }
        /* ⚠️⚠️ IZGARA DEĞİL FLEX — "filtreler var, harita yok" hatasının sebebi.
           Eskiden `grid-template-rows: auto auto 1fr auto` yazıyordu: satır sayısı
           ÇOCUK SAYISINA GÖMÜLÜ bir varsayımdı. 12 Ağu'da filtre çip şeridi
           (.pp-mm-subs) pencereye taşınınca çocuk sayısı 4→5 oldu ve `1fr`
           HARİTAYA değil ÇİP ŞERİDİNE denk geldi: çipler 583px'e şişti, harita
           kabı 0px kaldı (14 Ağu, canlıda ölçüldü — kap 1700x0, canvas yok).
           Flex sütununda yükseklik SIRAYA değil ROLE bağlı: şeritler kendi
           boyunda, kalan HER ŞEY haritanın. Yeni şerit eklemek artık haritayı
           öldürmez.
           ⚠️ `min-height: 0` şart — flex öğesi varsayılanda içeriğinin altına
              inemez, harita kabı taşardı. */
        .pp-mm.open { display: flex; flex-direction: column; }
        .pp-mm.open > * { flex: 0 0 auto; }
        .pp-mm.open > .pp-mm-stage { flex: 1 1 auto; min-height: 0; }
        body.pp-mm-lock { overflow: hidden; }
        .pp-mm-bar {
            min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            background: rgba(11,16,32,0.96); border-bottom: 1px solid rgba(255,255,255,0.08);
            padding-top: calc(10px + env(safe-area-inset-top));
        }
        .pp-mm-title { flex: 1; min-width: 0; color: #fff; font: 800 1.02rem system-ui; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pp-mm-x, .pp-mm-off, .pp-mm-sos {
            flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
            border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff;
            font-size: 1rem; display: flex; align-items: center; justify-content: center;
        }
        .pp-mm-x:hover, .pp-mm-off:hover { background: rgba(255,255,255,0.16); }
        /* ⚠️ SOS bilerek TAM OPAK ve kırmızı: acil durumda aranan düğme soluk olmamalı. */
        .pp-mm-sos { background: linear-gradient(135deg,#e4181e,#b0121a); border-color: transparent;
            box-shadow: 0 2px 10px rgba(228,24,30,.45); }
        .pp-mm-off.kf-has-offline { background: linear-gradient(135deg,#12d18e,#0a7d55); border-color: transparent; }
        /* ⚠️ `.pp-mm-cats` (üstteki kaba kategori şeridi) KALDIRILDI 14 Ağu —
           kullanıcı iki şeridi "aynı" bulup üsttekini sildirdi. Tek şerit
           `.pp-mm-subs`; kaba kategoriler oraya kategori çipi olarak girdi. */
        /* Harita ALANI: kalan tüm yükseklik. ⚠️ height:100% KULLANMA (görüntüleyicideki
           2026-07-26 hatasının aynısı) — flex:1 + min-height:0 doğru olan. */
        .pp-mm-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
        /* ⚠️⚠️ ÖZGÜLLÜK BİLEREK YÜKSEK — "boş harita" hatasının GERÇEK sebebi buydu.
           MapLibre kaba bağlanınca ona `maplibregl-map` SINIFINI EKLİYOR ve kendi
           CSS'i `.maplibregl-map { position: relative }` diyor. İki kural da (0,1,0)
           özgüllükte; MapLibre'nin stil dosyası unpkg'den ÇALIŞMA ANINDA <head>'e
           eklendiği için SONRA geliyor ve KAZANIYOR. `relative` olunca `inset:0`
           boyut vermez, yükseklik içeriğe düşer — tüm çocuklar absolute olduğu için
           içerik yüksekliği 0. Sonuç: harita/stil/karo/pin sağlam ama kap 0 → BOŞ EKRAN.
           (2026-07-30, #mapdbg: "kap 1692x0" + "loaded=true" + "karo istek=86 boş=0".)
           `.pp-mm-stage > .pp-mm-map` (0,2,0) MapLibre'yi geçer. BASİTLEŞTİRME. */
        .pp-mm-stage > .pp-mm-map { position: absolute; inset: 0; }
        .pp-mm-spin { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(11,16,32,0.55); pointer-events: none; }
        /* POI detay sayfası — pine dokununca açılır (artık anında ekleme YOK) */
        /* ⚠️ `transform: translateY(102%)` TEK BAŞINA YETMEZ: sayfa boşken bile dolgudan
           ~30px yükseklik alıyor, %102'si de 30px → beyaz şerit ekranda kalıp ALT BİLGİYİ
           ÖRTÜYORDU (2026-07-30'da ölçümle yakalandı). Yüzde, kendi yüksekliğine göre.
           Çözüm: kapalıyken visibility:hidden — geçiş gecikmesiyle kayma animasyonu korunur. */
        /* KOMPAKT POI ŞERİDİ — kullanıcı isteği: "açılan kartlar çok büyük, minimize edelim".
           Eskiden foto 64px + iki satır metin + ALT ALTA tam genişlik butonlar vardı
           (~150px). Şimdi tek satır: küçük foto · ad/bilgi · iki ikon-buton (~62px).
           Haritayı örtmemesi kritik: kullanıcı kartı okurken pinleri de görebilmeli. */
        .pp-mm-sheet {
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
            transform: translateY(102%); visibility: hidden; pointer-events: none;
            transition: transform 0.24s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.24s;
            background: #fff; border-radius: 14px 14px 0 0; padding: 8px 10px;
            box-shadow: 0 -8px 24px rgba(0,0,0,0.32);
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }
        .pp-mm-sheet.open {
            transform: translateY(0); visibility: visible; pointer-events: auto;
            transition: transform 0.24s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
        }
        /* Tek satır: foto · bilgi · aksiyonlar · kapat */
        .pp-mm-row { display: flex; align-items: center; gap: 10px; }
        .pp-mm-ph { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #ede9fe center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
        .pp-mm-info { flex: 1 1 auto; min-width: 0; }
        .pp-mm-info b { display: block; font: 800 0.9rem system-ui; color: #1a1030; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pp-mm-info i { display: block; margin-top: 1px; font-style: normal; font: 600 0.74rem system-ui; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pp-mm-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
        .pp-mm-add, .pp-mm-dir, .pp-mm-sx {
            display: flex; align-items: center; justify-content: center; gap: 5px;
            height: 36px; border-radius: 10px; cursor: pointer; text-decoration: none;
            font: 800 0.8rem system-ui; border: 1.5px solid #e2e8f0; white-space: nowrap;
        }
        .pp-mm-add { padding: 0 12px; border-color: transparent; color: #fff; background: linear-gradient(135deg,#7c1ddb,#e4181e); }
        .pp-mm-add.on { background: #ecfdf5; color: #0a7d55; border-color: #0a7d55; }
        .pp-mm-dir { width: 36px; background: #fff; color: #475569; font-size: 0.95rem; }
        .pp-mm-dir:hover { border-color: #c4b5fd; }
        .pp-mm-sx { width: 32px; background: #f1f5f9; color: #64748b; border-color: transparent; font-size: 0.8rem; }
        @media (max-width: 460px) {
            /* Dar ekranda "Rotaya ekle" yazısı yerine yalnız işaret — şerit tek satır kalsın */
            .pp-mm-add { padding: 0 10px; }
            .pp-mm-add .pp-mm-lbl { display: none; }
        }
        /* Alt bilgi: kaç yer seçildi + Bitti */
        .pp-mm-foot {
            min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 11px 14px; background: rgba(11,16,32,0.96); border-top: 1px solid rgba(255,255,255,0.08);
            padding-bottom: calc(11px + env(safe-area-inset-bottom));
        }
        .pp-mm-hint { color: #94a3b8; font: 600 0.84rem system-ui; }
        .pp-mm-n { color: #fff; font: 700 0.88rem system-ui; }
        .pp-mm-n b { font-weight: 900; font-size: 1.05rem; }
        .pp-mm-done { border: none; cursor: pointer; border-radius: 22px; padding: 10px 20px; font: 800 0.88rem system-ui; color: #fff; background: linear-gradient(135deg,#7c1ddb,#e4181e); box-shadow: 0 6px 16px rgba(124,29,219,0.35); }
        @media (max-width: 700px) {
            .pp-map-prev { height: 160px; }
            .pp-mm-ph { width: 56px; height: 56px; }
        }
        .pp-trans { display: flex; gap: 8px; flex-wrap: wrap; }
        .pp-tchip {
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            min-width: 58px; padding: 7px 10px; border-radius: 12px;
            border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer;
            transition: border-color 0.15s, background 0.15s, transform 0.12s;
        }
        .pp-tchip:hover { border-color: #c4b5fd; transform: translateY(-1px); }
        .pp-tchip-i { font-size: 1.15rem; line-height: 1; }
        .pp-tchip-l { font-size: 0.7rem; font-weight: 700; color: #64748b; }
        .pp-tchip.on { background: #7c1ddb; border-color: #7c1ddb; }
        .pp-tchip.on .pp-tchip-l { color: #fff; }

        /* Transit: nearby lines + walking route */
        .pp-transit { margin-top: 14px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 14px; padding: 14px 16px; }
        .pp-transit-msg { font-size: 0.88rem; color: #64748b; font-weight: 600; }
        .pp-transit-note { font-size: 0.78rem; color: #b45309; background: #fffbeb; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
        .pp-transit-head { font-size: 0.92rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
        .pp-transit-head span { font-size: 0.76rem; font-weight: 600; color: #94a3b8; }
        .pp-transit-head b { color: #16a34a; }
        .pp-stops { display: flex; flex-direction: column; gap: 8px; }
        .pp-stop {
            display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
            background: #fff; border: 1.5px solid #e2e8f0; border-radius: 11px;
            padding: 10px 13px; cursor: pointer; transition: border-color 0.15s, transform 0.12s;
        }
        .pp-stop:hover { border-color: #16a34a; transform: translateX(2px); }
        .pp-stop-name { flex: 1; font-size: 0.86rem; font-weight: 700; color: #0f172a; }
        .pp-stop-lines { display: flex; gap: 4px; flex-wrap: wrap; }
        .pp-stop-lines b { font-size: 0.68rem; font-weight: 800; color: #1d4ed8; background: #eff6ff; border-radius: 6px; padding: 2px 7px; }
        .pp-stop-dist { font-size: 0.74rem; font-weight: 700; color: #94a3b8; white-space: nowrap; }

        .pp-jdate { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
        .pp-journey-base { font-size: 0.86rem; color: #b45309; background: #fffbeb; border-radius: 9px; padding: 7px 12px; margin-bottom: 12px; font-weight: 600; }
        .pp-journey-base b { color: #92400e; }

        /* Hotel base: pick button + custom input */
        /* "Set as base" varsayılan stilini .pp-hotel-sub > * sağlar; burada yalnızca seçili durum */
        .pp-hotel-pick.on { background: #7c1ddb !important; color: #fff !important; border-color: #7c1ddb !important; }
        .pp-hotel {
            display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
            background: #fff; border: 1px solid #e8e2f7; border-radius: 14px;
            padding: 10px 14px; margin: 16px 0 0;
        }
        .pp-hotel input {
            flex: 1; min-width: 160px; border: 1.5px solid #e2e8f0; border-radius: 9px;
            padding: 9px 12px; font-size: 0.86rem; font-family: inherit; color: #0f172a;
        }
        .pp-hotel #pp-hotel-set {
            border: none; background: #7c1ddb; color: #fff; border-radius: 9px;
            padding: 9px 16px; font-size: 0.84rem; font-weight: 800; cursor: pointer;
        }
        .pp-hotel-current { font-size: 0.84rem; color: #334155; font-weight: 600; }
        .pp-hotel-current b { color: #7c1ddb; }
        .pp-hotel-x { color: #ef4444; cursor: pointer; font-weight: 800; margin-left: 4px; }
        .pp-hotel-current:not(:empty) { flex-basis: 100%; margin-top: 6px; }
        .pp-hotel-msg { font-size: 0.84rem; color: #64748b; font-weight: 600; }
        .pp-hotel-err { color: #ef4444; }
        .pp-hotel-addr2 { color: #94a3b8; font-weight: 500; font-size: 0.78rem; }
        .pp-hotel-confirm { width: 100%; }
        .pp-hotel-addr { font-size: 0.85rem; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
        .pp-hotel-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; color: #475569; font-weight: 600; }
        .pp-hc-btns { display: inline-flex; gap: 6px; }
        .pp-hc-yes { border: none; background: #16a34a; color: #fff; border-radius: 9px; padding: 7px 14px; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
        .pp-hc-no { border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 9px; padding: 7px 11px; font-size: 0.82rem; font-weight: 800; cursor: pointer; }

        .poi-badge.poi-hotel {
            width: 38px; height: 38px;
            background: radial-gradient(circle at 32% 26%, #fde68a, #d97706 72%);
            box-shadow: 0 6px 13px rgba(217,119,6,0.5), inset 0 -3px 6px rgba(0,0,0,0.25);
        }

        /* Interests multibox dropdown */
        .pp-prefs { position: relative; }
        .pp-prefs-btn {
            border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
            border-radius: 11px; padding: 10px 14px; font-size: 0.85rem; font-weight: 800;
            cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s;
        }
        .pp-prefs-btn:hover, .pp-prefs-btn.open { border-color: #c4b5fd; color: #7c1ddb; }
        .pp-prefs-panel {
            position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
            width: 264px; max-height: 340px; overflow-y: auto;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
            box-shadow: 0 12px 30px rgba(15,23,42,0.16); padding: 12px;
        }
        .pp-prefs-hint { font-size: 0.76rem; color: #94a3b8; font-weight: 600; margin-bottom: 8px; }
        .pp-pref-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; cursor: pointer; font-size: 0.86rem; font-weight: 700; color: #334155; }
        .pp-pref-row:hover { background: #f8fafc; }
        .pp-pref-row span { flex: 1; }
        .pp-pref-row b { color: #94a3b8; font-size: 0.74rem; }
        .pp-pref-row input, .pp-pref-rel input { width: 16px; height: 16px; accent-color: #7c1ddb; cursor: pointer; }
        .pp-pref-sub { padding: 2px 6px 8px 26px; display: flex; flex-direction: column; gap: 2px; }
        .pp-pref-rel { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: #475569; cursor: pointer; padding: 4px; border-radius: 6px; }
        .pp-pref-rel:hover { background: #f8fafc; }
        /* Gezi Planla seçici (3 yol alt alta) */
        .pp-chooser-ov { position: fixed; inset: 0; z-index: 10074; display: flex; align-items: center; justify-content: center; background: rgba(6,8,20,.7); backdrop-filter: blur(6px); padding: 18px; }
        .pp-chooser { width: min(440px, 100%); background: #fff; color: #0f172a; border-radius: 20px; padding: 22px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
        .pp-chooser-close { position: absolute; top: 12px; right: 14px; background: #f1f5f9; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; color: #334155; }
        .pp-chooser-title { margin: 0 0 16px; font-size: 1.05rem; font-weight: 800; }
        .pp-chooser-start { margin: 0 0 14px; }
        .pp-chooser-slabel { display: block; font-size: 0.74rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
        .pp-chooser-srow { display: flex; align-items: center; gap: 8px; }
        .pp-chooser-sinput { flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 11px; font-size: 0.88rem; outline: none; background: #fff; color: #0f172a; }
        .pp-chooser-sinput:focus { border-color: #7c1ddb; }
        .pp-chooser-sstate { flex: 0 0 auto; width: 18px; text-align: center; font-size: 0.95rem; font-weight: 800; color: #16a34a; }
        .pp-choice { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: #f8fafc; border: 1.5px solid #e9eef5; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .1s, background .15s; }
        .pp-choice:hover { border-color: #7c1ddb; background: #faf8ff; }
        .pp-choice:active { transform: scale(0.99); }
        .pp-choice-t { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
        .pp-choice-d { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
        .pp-choice-ai { border-color: #cfe6fb; background: linear-gradient(135deg, #f0f9ff, #faf5ff); }
        .pp-choice-ai:hover { border-color: #0ea5e9; }
        .pp-choice-offline { border-color: #b8f0da; background: linear-gradient(135deg, #ecfdf5, #f0fdf9); }
        .pp-choice-offline:hover { border-color: #12d18e; }
        .pp-chooser-note { color: #dc2626; font-size: 0.82rem; font-weight: 600; margin-top: 4px; }
        /* Yol Tarifi öğretici (GERÇEK kart kopyası + belirgin ✓) */
        .pp-dirhelp-box { max-height: 90vh; overflow-y: auto; }
        .pp-dh-intro { font-size: 0.9rem; line-height: 1.55; color: #475569; margin: 0 0 14px; }
        .pp-dh-cardwrap { position: relative; cursor: pointer; margin: 0 0 4px; }
        .pp-dh-clone { pointer-events: none; margin: 0 auto; max-width: 300px; box-shadow: 0 10px 26px rgba(0,0,0,.12); transition: outline-color .15s; outline: 3px solid transparent; outline-offset: 2px; }
        .pp-dh-clone * { pointer-events: none !important; }
        .pp-dh-cardwrap.picked .pp-dh-clone { outline-color: #16a34a; }
        .pp-dh-clone-ph { display: flex; align-items: center; justify-content: center; height: 130px; background: #faf8ff; border: 1.5px dashed #d9c8f2; border-radius: 16px; font: 800 1rem system-ui; color: #7c1ddb; box-shadow: none; }
        .pp-dh-tick { position: absolute; top: 12px; right: 12px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.92); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: background .15s, transform .12s; }
        .pp-dh-tick::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #b6a0d8; font-size: 1.5rem; font-weight: 900; line-height: 1; }
        .pp-dh-tick:hover { transform: scale(1.07); }
        .pp-dh-tick.on { background: #16a34a; border-color: #fff; }
        .pp-dh-tick.on::after { color: #fff; }
        .pp-dh-hint { position: absolute; top: 66px; right: 12px; z-index: 3; background: #7c1ddb; color: #fff; font: 800 0.72rem system-ui; padding: 4px 9px; border-radius: 8px; box-shadow: 0 3px 10px rgba(124,29,219,.4); white-space: nowrap; }
        .pp-dh-hint::before { content: ''; position: absolute; top: -5px; right: 15px; border: 5px solid transparent; border-top: 0; border-bottom-color: #7c1ddb; }
        .pp-dh-done { margin: 14px 0 4px; font: 700 0.88rem system-ui; color: #16a34a; background: #eafaf0; border: 1.5px solid #bbf0cf; border-radius: 12px; padding: 10px 12px; }
        .pp-dh-go { width: 100%; margin-top: 14px; padding: 12px; border: none; border-radius: 12px; background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; font: 800 0.95rem system-ui; cursor: pointer; }
        .pp-dh-go:hover { filter: brightness(1.06); }
        /* Konum bulucu (canlı GPS + adres) */
        .pp-loc-live { width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left; background: linear-gradient(135deg,#f0f9ff,#faf5ff); border: 1.5px solid #cfe6fb; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, transform .1s; }
        .pp-loc-live:hover { border-color: #0ea5e9; }
        .pp-loc-live:active { transform: scale(0.99); }
        .pp-loc-live b { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
        .pp-loc-live i { font-style: normal; font-size: 0.8rem; color: #64748b; }
        .pp-loc-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #94a3b8; font-size: 0.78rem; font-weight: 700; }
        .pp-loc-or::before, .pp-loc-or::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
        .pp-loc-row { display: flex; gap: 8px; }
        .pp-loc-input { flex: 1; min-width: 0; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid #e2e8f0; border-radius: 11px; font-size: 0.9rem; outline: none; }
        .pp-loc-input:focus { border-color: #7c1ddb; }
        .pp-loc-find { flex: 0 0 auto; padding: 0 18px; border: none; border-radius: 11px; background: #7c1ddb; color: #fff; font: 800 0.9rem system-ui; cursor: pointer; }
        .pp-loc-find:hover { background: #6a15c0; }
        .pp-loc-msg { margin-top: 12px; font-size: 0.84rem; font-weight: 600; color: #16a34a; text-align: center; }
        .pp-loc-msg.bad { color: #dc2626; }
        .pp-journey { margin-top: 16px; }
        .pp-journey-title { font-size: 1.05rem; font-weight: 900; color: #7c1ddb; margin: 0 0 12px; }
        .pp-journey-title span { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
        /* Journey üst barı: 3 yan yana kart [Oluşturuldu ✓] [Kaydet] [Paylaş] */
        .pp-journey-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
        .pp-jcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 13px; padding: 11px 6px; font-family: inherit; font-size: 0.74rem; font-weight: 800; text-align: center; line-height: 1.2; border: none; }
        .pp-jcard .pp-jc-ic { font-size: 1.15rem; line-height: 1; }
        .pp-jcard .pp-jc-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .pp-jcard-ok { background: #eafaf0; color: #16a34a; border: 1.5px solid #bbf0cf; }
        .pp-jcard-act { background: linear-gradient(135deg, #7c1ddb, #c2185b); color: #fff; cursor: pointer; transition: filter .15s, opacity .15s, transform .1s; }
        .pp-jcard-act:hover { filter: brightness(1.08); }
        .pp-jcard-act:active { transform: scale(0.97); }
        .pp-jcard-act:disabled { opacity: .6; cursor: default; }
        .pp-jcard-act.done { background: #16a34a; }
        .pp-jday { background: #faf8ff; border: 1px solid #ece4fb; border-radius: 14px; padding: 13px 16px; margin-bottom: 10px; }
        .pp-jday-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .pp-jday-head strong { font-size: 0.95rem; color: #0f172a; }
        .pp-jday-head em { font-size: 0.72rem; color: #64748b; font-style: normal; font-weight: 700; }
        .pp-jday-body { font-size: 0.9rem; line-height: 1.7; color: #334155; }
        .pp-am { color: #d97706; font-weight: 800; }
        .pp-pm { color: #7c3aed; font-weight: 800; }
        .pp-free { color: #94a3b8; }

        /* Loading / skeleton */
        .pp-loading { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.92); }
        .pp-spin { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #ffe600; border-radius: 50%; animation: spin 0.7s linear infinite; }
        .pp-skel-hero { filter: saturate(0.8) brightness(0.85); }
        .pp-skel-row { height: 16px; border-radius: 8px; background: linear-gradient(90deg,#e9ecf3,#f3f5f9,#e9ecf3); background-size: 200% 100%; animation: ppShimmer 1.3s infinite; margin: 14px 0; }
        .pp-skel-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); margin-top: 24px; }
        .pp-skel-card { height: 190px; border-radius: 16px; background: linear-gradient(90deg,#e9ecf3,#f3f5f9,#e9ecf3); background-size: 200% 100%; animation: ppShimmer 1.3s infinite; }
        @keyframes ppShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .pp-error { max-width: 480px; margin: 18vh auto; text-align: center; color: #334155; }
        .pp-error h2 { font-size: 1.4rem; margin: 14px 0 6px; color: #0f172a; }
        .pp-retry { margin-top: 18px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #7c1ddb; color: #fff; font-size: 1.3rem; cursor: pointer; }

        /* Existing modals must sit above the place page (z 10000) */
        #route-map-modal, #gp-modal, #gp-map-modal { z-index: 10060 !important; }

        /* ── Journey (yolculuk) kartı ───────────────────────────────────────── */
        #jp-root { position: fixed; inset: 0; z-index: 10080; display: none; }
        #jp-root.jp-open { display: flex; align-items: center; justify-content: center; background: rgba(10,6,20,0.55); backdrop-filter: blur(4px); animation: jpFade 0.2s both; }
        @keyframes jpFade { from { opacity: 0; } to { opacity: 1; } }
        .jp-card {
            width: 100vw; height: 100dvh; max-height: 100dvh; overflow: hidden;
            background: #fff; display: flex; flex-direction: column;
            animation: jpUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
        }
        @keyframes jpUp { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
        .jp-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #eef1f6; }
        .jp-title { font-size: 1.3rem; font-weight: 900; color: #0f172a; }
        .jp-sub { font-size: 0.85rem; color: #64748b; font-weight: 600; margin-top: 2px; }
        .jp-close { border: none; background: #f1f5f9; color: #475569; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 0.95rem; font-weight: 900; flex-shrink: 0; }
        .jp-close:hover { background: #e2e8f0; }
        .jp-body { flex: 1; min-height: 0; padding: 0; }
        .jp-nav { height: 100%; display: flex; }
        .jp-rail { flex: 0 0 84px; background: linear-gradient(180deg,#2f6bff,#2358d8); display: flex; flex-direction: column; align-items: center; padding: 14px 6px; overflow-y: auto; transition: flex-basis 0.28s ease, opacity 0.22s ease, padding 0.28s ease; }
        /* Aktif navigasyon: sol mavi rayı topla + Gezi Planı/Turn-by-turn kartlarını gizle (tam ekran harita) */
        #jp-root.jp-navigating .jp-rail { flex-basis: 0 !important; opacity: 0; padding-left: 0; padding-right: 0; pointer-events: none; overflow: hidden; }
        #jp-root.jp-navigating #jp-extra { display: none; }
        .jp-rail-modes { display: flex; flex-direction: column; gap: 14px; align-items: center; flex: 1; }
        .jp-mode { width: 62px; border: none; background: transparent; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
        .jp-mode-ic { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: background 0.15s, transform 0.12s; }
        .jp-mode:hover .jp-mode-ic { background: rgba(255,255,255,0.28); }
        .jp-mode.active .jp-mode-ic { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.28); transform: scale(1.04); }
        .jp-mode-eta { font-size: 0.72rem; font-weight: 800; opacity: 0.92; }
        /* Şehirlerarası (uçak/tren/otobüs) — routing modlarının altında ayrı grup */
        .jp-rail-sep { width: 44px; height: 1px; background: rgba(255,255,255,0.22); margin: 4px 0 0; flex: 0 0 auto; }
        .jp-xmode { width: 62px; text-decoration: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .jp-xmode .jp-mode-ic { background: rgba(255,255,255,0.10); font-size: 1.2rem; }
        .jp-xmode:hover .jp-mode-ic { background: rgba(255,255,255,0.24); }
        .jp-xmode-lbl { font-size: 0.66rem; font-weight: 700; opacity: 0.85; }
        /* Offline — raya uyumlu buzlu-cam kart (eski pembe yerine) */
        .jp-rail-offline { margin-top: 14px; border: 1px solid rgba(255,255,255,0.24); cursor: pointer; background: rgba(255,255,255,0.12); color: #fff; border-radius: 15px; width: 62px; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; line-height: 1.1; text-align: center; transition: background 0.15s, border-color 0.15s; flex: 0 0 auto; }
        .jp-rail-offline:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.42); }
        .jp-off-ic { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
        .jp-off-t { max-width: 60px; }
        .jp-loading, .jp-err { text-align: center; padding: 40px 10px; color: #64748b; font-weight: 600; }
        .jp-manual { padding: 24px 6px 10px; }
        .jp-manual .jp-err { padding: 0 0 16px; }
        .jp-manual-row { display: flex; gap: 8px; }
        .jp-origin-input { flex: 1; min-width: 0; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 11px 14px; font-size: 0.92rem; font-weight: 600; color: #334155; outline: none; }
        .jp-origin-input:focus { border-color: #7c1ddb; box-shadow: 0 0 0 3px rgba(124,29,219,0.13); }
        .jp-origin-go { flex-shrink: 0; border: none; cursor: pointer; background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; font-weight: 800; font-size: 0.9rem; padding: 0 20px; border-radius: 11px; }
        .jp-origin-go:hover { filter: brightness(1.08); }
        .jp-retry { width: 100%; margin-top: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #475569; cursor: pointer; font-weight: 700; font-size: 0.85rem; padding: 10px; border-radius: 11px; }
        .jp-retry:hover { border-color: #c4b5fd; }
        .jp-sugs { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
        .jp-sug { text-align: left; border: 1.5px solid #e2e8f0; background: #f8fafc; border-radius: 11px; padding: 10px 13px; font-size: 0.84rem; font-weight: 600; color: #334155; cursor: pointer; line-height: 1.35; transition: border-color 0.12s, background 0.12s; }
        .jp-sug:hover { border-color: #7c1ddb; background: #fff; }
        .jp-sug-hint { font-size: 0.78rem; color: #94a3b8; font-weight: 700; padding: 8px 2px; }
        .jp-spin { display: inline-block; width: 16px; height: 16px; border: 2.5px solid #ddd6fe; border-top-color: #7c1ddb; border-radius: 50%; animation: jpSpin 0.8s linear infinite; vertical-align: -3px; }
        @keyframes jpSpin { to { transform: rotate(360deg); } }
        .jp-route { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.9rem; color: #334155; margin: 4px 0 12px; }
        .jp-route b { font-weight: 800; }
        /* eski yatay modlar kaldırıldı → sol ray (.jp-rail-modes yukarıda) */
        .jp-mapwrap { position: relative; flex: 1; min-width: 0; }
        .jp-map { position: absolute; inset: 0; height: 100%; border: none; border-radius: 0; overflow: hidden; }
        .jp-info { position: absolute; top: 12px; right: 14px; left: auto; max-width: min(56%, 430px); z-index: 480; background: rgba(255,255,255,0.93); backdrop-filter: blur(6px); border-radius: 16px; padding: 11px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); pointer-events: none; }
        .jp-map .leaflet-top.leaflet-left { margin: 6px 0 0 6px; }
        .jp-info-ic { font-size: 1.5rem; line-height: 1; }
        .jp-info-distl { font-size: 0.72rem; font-weight: 800; color: #64748b; margin-top: 2px; }
        .jp-info-km { font-size: 2rem; font-weight: 900; color: #2f6bff; line-height: 1.05; letter-spacing: -0.5px; }
        .jp-info-timel { font-size: 0.85rem; font-weight: 700; color: #334155; }
        .jp-info-timel b { color: #0f172a; font-weight: 900; }
        .jp-info-dest { font-size: 1.05rem; font-weight: 900; color: #0f172a; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .jp-info-sub { font-size: 0.75rem; font-weight: 700; color: #94a3b8; min-height: 14px; }
        /* ── Canlı üye paneli (üst-sol): bağlı herkes çip olarak, ekran dışında olsa da ── */
        .jp-members {
            position: absolute; top: 76px; left: 14px; z-index: 490;
            display: flex; align-items: center; gap: 6px; max-width: min(60%, 520px);
            overflow-x: auto; padding: 3px; scrollbar-width: none;
        }
        .jp-members::-webkit-scrollbar { display: none; }
        .jp-members-live {
            display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
            background: rgba(15,23,42,0.86); color: #fff; font: 800 11.5px system-ui;
            padding: 6px 10px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .jp-live-pulse { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.7); animation: jpLivePulse 1.6s infinite; }
        @keyframes jpLivePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
        .jp-mchip {
            display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; cursor: pointer;
            background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.06);
            border-left: 3px solid var(--mc, #7c1ddb); color: #0f172a;
            font: 800 11.5px system-ui; padding: 5px 10px; border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.14); transition: transform 0.12s;
        }
        .jp-mchip:hover { transform: translateY(-1px); }
        .jp-mchip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mc, #7c1ddb); }
        .jp-mchip-nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .jp-mchip-d { color: #64748b; font-weight: 700; font-size: 10.5px; }
        .jp-mchip--wait { opacity: 0.6; }
        .jp-mchip--wait .jp-mchip-dot { animation: jpLivePulse 1.6s infinite; }
        .jp-mchip-all { border-left-color: transparent; color: #7c1ddb; }
        @media (max-width: 640px) { .jp-members { max-width: min(58%, 280px); top: 70px; left: 10px; gap: 5px; } .jp-mchip-nm { max-width: 52px; } .jp-members-live { padding: 5px 8px; font-size: 10.5px; } .jp-mchip { padding: 4px 8px; font-size: 10.5px; } }
        .jp-fab { position: absolute; right: 16px; bottom: 18px; z-index: 500; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg,#2f6bff,#2358d8); color: #fff; font-size: 1.5rem; box-shadow: 0 8px 22px rgba(47,107,255,0.5); display: flex; align-items: center; justify-content: center; }
        .jp-fab:hover { filter: brightness(1.08); }
        .jp-fab:active { transform: scale(0.94); }
        .jp-fab.jp-started { background: linear-gradient(135deg,#16a34a,#15803d); box-shadow: 0 8px 22px rgba(22,163,74,0.45); }
        .jp-fab.jp-started::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(22,163,74,0.55); animation: jpRing 1.6s ease-out infinite; pointer-events: none; }
        @keyframes jpRing { 0% { transform: scale(0.88); opacity: 0.85; } 100% { transform: scale(1.55); opacity: 0; } }
        .jp-fab.jp-paused { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow: 0 8px 22px rgba(217,119,6,0.45); }
        /* "Sen" işareti: nokta (bekleme) / yön oku (aktif navigasyon) */
        .jp-you-wrap { background: none !important; border: none !important; }
        .jp-you-dot { width: 18px; height: 18px; border-radius: 50%; background: #16a34a; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(22,163,74,0.35), 0 2px 6px rgba(0,0,0,0.4); }
        .jp-you-arrow { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease-out; }
        .jp-you-arrow svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
        .jp-you-arrow svg path { fill: #2f6bff; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
        /* Canlı paylaşım: diğer üyeler — renkli nokta + isim etiketi */
        .jp-mm { position: relative; display: flex; flex-direction: column; align-items: center; }
        .jp-mm-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--mc,#7c1ddb); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
        .jp-mm-nm { margin-top: 2px; max-width: 90px; padding: 1px 6px; border-radius: 8px; background: var(--mc,#7c1ddb); color: #fff; font: 800 10.5px system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
        /* Turn-by-turn: solid, belirgin kart (harita sızmaz) */
        #jp-extra .jp-steps { background: #fff; border: 1px solid #dbe1ea; box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
        #jp-extra .jp-steps summary { background: linear-gradient(135deg,#7c1ddb,#2f6bff); color: #fff; font-size: 0.9rem; font-weight: 900; }
        #jp-extra .jp-steps[open] summary { border-bottom: 1px solid #eceef4; }
        #jp-extra .jp-steps ol { background: #fff; }
        /* "Gezi Planı" kartı — turn-by-turn ile aynı görünüm, farklı başlık rengi */
        #jp-extra .jp-planc summary { background: linear-gradient(135deg,#0ea5e9,#2f6bff); }
        .jp-pl-body { background: #fff; padding: 4px 0 8px; max-height: 240px; overflow-y: auto; }
        .jp-pl-day { padding: 4px 14px 6px; border-bottom: 1px solid #f1f5f9; }
        .jp-pl-day:last-child { border-bottom: none; }
        .jp-pl-dh { font: 800 0.82rem system-ui; color: #0f172a; margin: 7px 0 5px; }
        .jp-pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
        .jp-pl-list li { display: flex; align-items: center; gap: 9px; font: 600 0.83rem system-ui; color: #334155; }
        .jp-pl-n { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: linear-gradient(135deg,#7c1ddb,#5b16a8); color: #fff; font: 800 0.72rem system-ui; display: flex; align-items: center; justify-content: center; }
        .jp-pl-nm { flex: 1; min-width: 0; }
        .jp-pl-t { flex: 0 0 auto; color: #2f6bff; font-weight: 800; font-size: 0.76rem; }
        #jp-extra .jp-note { background: #fffbeb; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
        .jp-foot { position: absolute; left: 14px; bottom: 18px; z-index: 480; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 96px); }
        .jp-foot .jp-other { display: inline-flex; align-items: center; margin: 0; padding: 8px 12px; font-size: 0.72rem; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
        .jp-foot .jp-share { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
        /* Paylaş seçim menüsü (tek buton → Sadece rota / Canlı birlikte) */
        .jp-sharemenu { position: absolute; left: 14px; bottom: 68px; z-index: 490; display: flex; flex-direction: column; gap: 8px; width: min(300px, calc(100% - 90px)); animation: jpUp 0.18s ease; }
        .jp-sm-opt { display: flex; align-items: center; gap: 11px; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 11px 13px; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.22); transition: border-color 0.12s, transform 0.1s; }
        .jp-sm-opt:hover { border-color: #7c1ddb; transform: translateY(-1px); }
        .jp-sm-live:hover { border-color: #2563eb; }
        .jp-sm-ic { font-size: 1.4rem; flex: 0 0 auto; }
        .jp-sm-tx { display: flex; flex-direction: column; min-width: 0; }
        .jp-sm-tx b { font: 800 0.92rem system-ui; color: #0f172a; }
        .jp-sm-tx i { font: 600 0.76rem system-ui; font-style: normal; color: #64748b; }
        #jp-extra { position: absolute; left: 14px; bottom: 70px; z-index: 470; width: min(360px, calc(100% - 100px)); max-height: 42%; overflow-y: auto; }
        #jp-extra:empty { display: none; }
        .jp-mapbtn {
            position: absolute; right: 10px; z-index: 500; cursor: pointer;
            width: 42px; height: 42px; border-radius: 50%; border: none;
            background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-size: 1.1rem;
            display: flex; align-items: center; justify-content: center;
        }
        #jp-recenter { bottom: 90px; opacity: 0.6; }
        /* ⚠️ Odaklanma düğmesi TAKİP DURUMUNU gösterir: harita elle sürüklenince
           takip düşer ve düğme söner. Yoksa kullanıcı "neden beni izlemiyor"
           diye sorar ve düğmeye basmayı denemez. */
        #jp-recenter.on { opacity: 1; color: #7c1ddb; box-shadow: 0 0 0 2px rgba(124,29,219,.5), 0 3px 10px rgba(0,0,0,.25); }
        .jp-voice { bottom: 144px; opacity: 0.55; }
        .jp-voice.on { opacity: 1; }
        .jp-stopsbtn { bottom: 198px; opacity: 0.55; }
        .jp-stopsbtn.on { opacity: 1; background: #7c1ddb; }
        /* SOS: her zaman görünür ve ayırt edilebilir. Acil durumda aranan düğme
           "biraz soluk" olmamalı — bilerek kırmızı ve tam opak. */
        .jp-sosbtn { bottom: 252px; background: linear-gradient(135deg,#e4181e,#b0121a); color: #fff;
            box-shadow: 0 3px 12px rgba(228,24,30,.45); }
        /* Durak pin kartı (foto + kategori ikonu) */
        .jp-pop-wrap .leaflet-popup-content-wrapper { padding: 5px; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
        .jp-pop-wrap .leaflet-popup-content { margin: 0; width: 180px !important; }
        .jp-pop { width: 180px; }
        .jp-pop-img { width: 100%; height: 94px; border-radius: 10px; background: #e9edf3 center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; }
        .jp-pop-img.has { font-size: 0; }
        .jp-pop-b { position: relative; padding: 8px 4px 3px; }
        .jp-pop-b b { display: block; font: 800 0.9rem system-ui; color: #0f172a; line-height: 1.25; }
        .jp-pop-cat { font: 700 0.74rem system-ui; color: #64748b; margin-top: 3px; }
        .jp-pop-n { position: absolute; top: -17px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#7c1ddb,#5b16a8); color: #fff; font: 800 0.72rem system-ui; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
        .jp-wp { background: none !important; border: none !important; }
        .jp-wp-dot { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg,#7c1ddb,#5b16a8); color: #fff; font-size: 0.78rem; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
        .jp-stopmk { font-size: 1rem; text-align: center; line-height: 22px; }
        .jp-mapbtn:active { transform: scale(0.92); }
        @media (max-width: 640px) {
            .jp-mapbtn { width: 46px; height: 46px; font-size: 1.15rem; }
            .jp-rail { flex-basis: 74px; }
            /* Mesafe kartı: tüm satırı kaplamasın → kompakt, sağ-üstte */
            .jp-info { left: auto; right: 10px; top: 10px; max-width: 56%; padding: 8px 11px; border-radius: 13px; }
            .jp-info-ic { font-size: 1.25rem; }
            .jp-info-distl { font-size: 0.6rem; margin-top: 1px; }
            .jp-info-km { font-size: 1.5rem; }
            .jp-info-timel { font-size: 0.74rem; }
            .jp-info-dest { font-size: 0.88rem; margin-top: 3px; }
            .jp-info-sub { font-size: 0.66rem; }
            .jp-map .leaflet-top.leaflet-left { margin-top: 6px; }
            #jp-extra { width: calc(100% - 28px); }
            .jp-leg-dir, .jp-origin-go { padding: 12px 16px; }
        }
        .jp-leg.done { opacity: 0.5; }
        .jp-leg.done .jp-leg-label { text-decoration: line-through; }
        .jp-leg.done .jp-leg-chk { background: #16a34a; border-color: #16a34a; }
        .jp-leg.done .jp-leg-chk::after { content: '✓'; color: #fff; font-size: 0.8rem; font-weight: 900; }
        .jp-start { width: 100%; border: none; cursor: pointer; margin: 0 0 12px; background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; font-weight: 900; font-size: 1.05rem; padding: 16px; border-radius: 14px; box-shadow: 0 8px 22px rgba(22,163,74,0.38); transition: filter 0.15s, transform 0.12s; }
        .jp-start:hover { filter: brightness(1.07); transform: translateY(-1px); }
        .jp-start:active { transform: scale(0.99); }
        .jp-start.jp-started { background: #334155; box-shadow: none; cursor: default; }
        .jp-note { margin: 12px 0 0; font-size: 0.82rem; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 11px; padding: 10px 12px; }
        .jp-steps { margin: 12px 0; border: 1px solid #eceef4; border-radius: 12px; overflow: hidden; }
        .jp-steps summary { cursor: pointer; padding: 12px 14px; font-size: 0.88rem; font-weight: 800; color: #334155; background: #f8fafc; list-style: none; }
        .jp-steps summary::-webkit-details-marker { display: none; }
        .jp-steps[open] summary { border-bottom: 1px solid #eceef4; }
        .jp-steps ol { margin: 0; padding: 6px 0; max-height: 240px; overflow-y: auto; }
        .jp-steps li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; font-size: 0.84rem; color: #475569; border-bottom: 1px solid #f1f5f9; }
        .jp-steps li:last-child { border-bottom: none; }
        .jp-steps li b { color: #7c1ddb; font-weight: 800; white-space: nowrap; }
        .jp-share { flex: 1; border: none; cursor: pointer; background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; font-weight: 800; font-size: 0.9rem; padding: 13px; border-radius: 13px; box-shadow: 0 6px 16px rgba(22,163,74,0.3); }
        .jp-share.jp-live { background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 6px 16px rgba(37,99,235,0.3); }
        .jp-share:hover { filter: brightness(1.07); }
        /* İzleyici modu (canlı link) — sade tam-yükseklik düzen: harita baskın */
        .jp-card.jp-viewer { display: flex; flex-direction: column; height: min(640px, 90vh); }
        .jp-card.jp-viewer .jp-body { flex: 1; display: flex; flex-direction: column; padding: 0; min-height: 0; }
        .jp-card.jp-viewer .jp-map { flex: 1; height: auto; margin: 0; border: none; border-top: 1px solid #eceef4; border-radius: 0; }
        .jp-vstatus { font-size: 0.95rem; font-weight: 800; color: #1e3a8a; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; text-align: center; }
        .jp-vbtn.primary { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(37,99,235,0.32); }
        .jp-vbtn.on .jp-vbtn-tx i, .jp-vbtn.primary .jp-vbtn-tx i { opacity: 0.88; }
        .jp-vbtn.primary.on { background: linear-gradient(135deg,#1d4ed8,#1e3a8a); }
        /* Canlı rozeti = durum pili + AÇIK "⏹ Durdur" çipi (mobilde de net görünür) */
        .jp-livebadge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; cursor: pointer; background: transparent; padding: 0; }
        .jp-lb-live { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800; color: #fff; background: #2563eb; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
        .jp-lb-dot { width: 6px; height: 6px; border-radius: 50%; background: #7ee787; box-shadow: 0 0 0 0 rgba(126,231,135,0.7); animation: jpLivePulse 1.6s infinite; }
        .jp-lb-stop { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 900; color: #fff; background: #dc2626; padding: 3px 10px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 7px rgba(220,38,38,0.4); transition: filter 0.12s, transform 0.12s; }
        .jp-livebadge:hover .jp-lb-stop { filter: brightness(1.1); }
        .jp-livebadge:active .jp-lb-stop { transform: scale(0.95); }
        @keyframes jpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
        .jp-share:hover { filter: brightness(1.07); }
        .jp-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%,16px); z-index: 10090; background: rgba(15,10,30,0.94); color: #fff; padding: 11px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
        .jp-toast.show { opacity: 1; transform: translate(-50%,0); }

        /* ════════ Welcome → pazarlama landing (globe kaldırıldı) ════════ */
        .welcome-inner.welcome-landing {
            max-width: 1220px; width: 100%; margin: 0 auto;
            display: flex; flex-direction: column;
            gap: clamp(6px, 1.3vh, 16px);
            padding: clamp(20px, 3.4vh, 44px) 16px clamp(10px, 1.8vh, 22px);
            align-items: stretch;
        }
        .welcome-landing .wl-block { margin: 0; }
        .welcome-landing .wl-services { margin: 0; }
        .welcome-landing .wl-hero { margin: 0; gap: clamp(16px, 3vw, 32px); }
        /* Cam kart kabukları (hero + panel) */
        .welcome-landing .wl-card {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 22px;
            box-shadow: 0 12px 44px rgba(0,0,0,0.30);
            -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        }
        .welcome-landing .wl-hero.wl-card { padding: clamp(12px, 1.8vh, 22px) clamp(16px, 1.8vw, 28px); }
        .welcome-landing .wl-panel { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); padding: clamp(11px, 1.6vh, 18px) clamp(13px, 1.5vw, 22px); }
        .welcome-landing .wl-pop-head { display: none; }   /* "Popular cities" başlığı gizli → şehir kartlarına yer */
        .welcome-landing .wl-pop-head { margin-bottom: clamp(6px, 1.2vh, 12px); }
        .wl-hero { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
        .wl-hero-left { display: flex; flex-direction: column; justify-content: center; }
        .wl-title { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1.12; margin: 0 0 8px; letter-spacing: -0.5px; text-shadow: 0 4px 24px rgba(0,0,0,0.3); }
        .welcome-landing .welcome-subtitle { font-size: 0.95rem; margin-bottom: 16px; max-width: none; white-space: nowrap; }
        @media (max-width: 620px) { .welcome-landing .welcome-subtitle { white-space: normal; } }
        .welcome-landing .welcome-search { width: 100%; max-width: 1100px; margin: 0; padding: 10px 10px 10px 24px; border-radius: 20px; }
        .welcome-landing #welcome-search-input { font-size: 1.18rem; padding: 18px 0; }
        .welcome-landing #welcome-search-go { width: 60px; height: 60px; font-size: 1.55rem; border-radius: 16px; }
        .wl-hero-right { display: none; border-radius: 18px; background: center/cover no-repeat #2a1a40; min-height: 230px; box-shadow: 0 14px 44px rgba(0,0,0,0.45); }
        /* Hizmet kartları artık hero'nun ALTINDA ince tam-genişlik şerit (küçük chip'ler) */
        .welcome-landing .wl-services.wl-card { padding: clamp(6px, 1vh, 11px) clamp(10px, 1.3vw, 16px); }
        .wl-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 26px; }
        .wl-svc-title { display: none; }   /* yalnız mobil dock-kartta görünür (aşağıda @640) */
        .wl-svc { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: clamp(4px, 0.7vh, 7px) 9px; display: flex; flex-direction: row; align-items: center; gap: 7px; }
        .wl-svc-t { display: flex; flex-direction: column; min-width: 0; gap: 0; }
        .wl-svc span { font-size: clamp(1rem, 2.1vh, 1.25rem); flex-shrink: 0; }
        .wl-svc b { color: #fff; font-size: 0.78rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-svc i { color: rgba(255,255,255,0.6); font-size: 0.66rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* Sağ-hero küre modu: kutu/gölge yerine şeffaf, sınırlı boyut */
        .wl-hero-right.globe-on { background: transparent; box-shadow: none; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: center; height: clamp(300px, 46vh, 500px); min-height: 0; overflow: hidden; }
        /* Harita iç-div'i hero kolonunu doldurur + canvas zorla iç-div'i doldurur (!important) → ASLA taşmaz */
        .wl-hero-right.globe-on #welcome-globe-inner { width: 100%; height: 100%; max-width: none; flex: 1; overflow: hidden; }
        .wl-hero-right.globe-on #welcome-globe-inner canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
        /* MapLibre globe: ŞEFFAF kart → küre öne çıkar, arkadaki hero görseli görünür */
        .wl-hero-right.globe-on #welcome-globe-inner { position: relative; border-radius: 22px; background: transparent; }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-canvas { border-radius: 22px; background: transparent; }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-bottom-left { display: none; }
        /* Zoom kontrolü (bottom-right) GÖRÜNÜR + karanlık temaya uyumlu → kullanıcı il bazına yakınlaşsın */
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-bottom-right { display: block; margin: 0 10px 10px 0; }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-group {
            background: rgba(15,20,38,0.72); border: 1px solid rgba(255,255,255,0.14);
            border-radius: 11px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-group button {
            width: 32px; height: 32px; background: transparent;
        }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,0.12); }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-group button:hover { background: rgba(124,29,219,0.35); }
        .wl-hero-right.globe-on #welcome-globe-inner .maplibregl-ctrl-group button span { filter: invert(1) brightness(1.6); }
        /* Öne çıkan şehir etiket marker'ı (bayrak + isim) */
        .wl-mk { display: flex; align-items: center; gap: 6px; cursor: pointer; transform: translateX(6px); }
        .wl-mk-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffe600; box-shadow: 0 0 0 3px rgba(255,230,0,0.25), 0 0 10px rgba(255,230,0,0.7); flex-shrink: 0; }
        .wl-mk-lbl { background: rgba(15,10,30,0.92); color: #fff; font-weight: 700; font-size: 0.78rem; padding: 3px 8px; border-radius: 8px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
        /* Explore overlay: küreye tıkla → sayfa-içi flaş harita+arama */
        #explore-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,6,24,0.55); backdrop-filter: blur(7px); opacity: 0; transition: opacity 0.28s ease; }
        #explore-overlay.ex-show { opacity: 1; }
        .ex-panel { width: min(960px, 96vw); height: min(82vh, 700px); background: #0f0a1e; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 26px 90px rgba(0,0,0,0.6); transform: scale(0.9); opacity: 0.4; transition: transform 0.34s cubic-bezier(0.22,1,0.36,1), opacity 0.34s; }
        #explore-overlay.ex-show .ex-panel { transform: scale(1); opacity: 1; }
        .ex-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, #1e1235, #2a1a40); flex-shrink: 0; }
        .ex-ico { opacity: 0.55; }
        #ex-search { flex: 1; min-width: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 10px 14px; color: #fff; font-size: 0.92rem; outline: none; }
        #ex-go { background: #ffe600; color: #1a0a00; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
        #ex-close { background: rgba(255,255,255,0.12); color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex-shrink: 0; }
        #ex-map { flex: 1; min-height: 0; }
        .ex-hint { padding: 8px 14px; font-size: 0.78rem; color: rgba(255,255,255,0.6); text-align: center; flex-shrink: 0; }
        /* Şehir İdari Keşfi (flaş modal): şehir → ilçe → mahalle */
        #cdrill-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,6,24,0.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; transition: opacity 0.28s ease; }
        #cdrill-overlay.cd-show { opacity: 1; }
        .cd-panel { width: min(1000px, 96vw); height: min(86vh, 760px); background: #0f0a1e; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 26px 90px rgba(0,0,0,0.6); transform: scale(0.92); opacity: 0.4; transition: transform 0.34s cubic-bezier(0.22,1,0.36,1), opacity 0.34s; }
        #cdrill-overlay.cd-show .cd-panel { transform: scale(1); opacity: 1; }
        .cd-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: linear-gradient(135deg, #1e1235, #2a1a40); flex-shrink: 0; }
        .cd-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #fff; font-weight: 800; font-size: 0.92rem; overflow: hidden; }
        .cd-crumb-i { cursor: pointer; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,0.08); white-space: nowrap; transition: background 0.12s; }
        .cd-crumb-i:hover { background: rgba(255,255,255,0.2); }
        .cd-crumb-i:last-child { background: rgba(167,139,250,0.35); }
        .cd-crumb-sep { color: rgba(255,255,255,0.4); }
        .cd-enter { background: #ffe600; color: #1a0a00; border: none; padding: 9px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
        .cd-enter:hover { filter: brightness(1.06); }
        .cd-enter:active { transform: scale(0.96); }
        .cd-poi { background: #7c1ddb; color: #fff; border: none; padding: 9px 14px; border-radius: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
        .cd-poi:hover { filter: brightness(1.12); }
        .cd-poi:active { transform: scale(0.96); }
        .cd-plan { background: linear-gradient(135deg, #ffe600, #ff9d00); color: #1a0a00; border: none; padding: 9px 14px; border-radius: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
        .cd-plan:hover { filter: brightness(1.06); }
        .cd-plan:active { transform: scale(0.96); }
        /* Numaralı rota durağı */
        .cd-num div { width: 28px; height: 28px; border-radius: 50%; background: #ffe600; color: #1a0a00; border: 2px solid #7c1ddb; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
        /* Vibe legend (cd-hint içinde) */
        .cd-vibe-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: #fff; font-weight: 700; padding: 3px 8px; background: rgba(255,255,255,0.06); border-radius: 16px; }
        .cd-vibe-chip i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
        .cd-close { background: rgba(255,255,255,0.12); color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex-shrink: 0; }
        #cd-map { flex: 1; min-height: 0; background: #0a0618; }
        .cd-hint { padding: 8px 14px; font-size: 0.8rem; color: rgba(255,255,255,0.72); text-align: center; flex-shrink: 0; background: #140d28; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 20px; }
        /* POI kategori toggle çipleri (cd-hint içinde) */
        .cd-chip { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; padding: 5px 12px; font-size: 0.76rem; font-weight: 700; cursor: pointer; opacity: 0.45; transition: opacity 0.12s, background 0.12s; }
        .cd-chip b { color: #ffe600; }
        .cd-chip.on { opacity: 1; background: rgba(167,139,250,0.28); border-color: #a78bfa; }
        /* POI pinleri — kategori renginde DAMLA (notable = büyük + altın halka) */
        .cd-pin-b { width: 100%; height: 100%; background: var(--c, #7c1ddb); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 5px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; }
        .cd-pin-b span { transform: rotate(45deg); font-size: 13px; line-height: 1; }
        .cd-pin-big .cd-pin-b { border-color: #ffe600; box-shadow: 0 0 0 2px rgba(255,230,0,0.5), 0 3px 8px rgba(0,0,0,0.5); }
        .cd-pin-big .cd-pin-b span { font-size: 17px; }
        /* Notable kalıcı ad etiketi */
        .cd-label { background: rgba(15,10,30,0.92); color: #fff; border: 1px solid rgba(255,230,0,0.55); border-radius: 6px; padding: 1px 7px; font-weight: 800; font-size: 0.7rem; box-shadow: 0 2px 6px rgba(0,0,0,0.4); white-space: nowrap; }
        .cd-label.leaflet-tooltip-top::before { display: none; }
        /* Zengin POI popup */
        .cd-pop-photo { height: 92px; background: #2a1a40 center/cover no-repeat; border-radius: 8px; margin-bottom: 8px; }
        /* Drill açılınca şehrin foto-kartı (pin popup) */
        .cd-citycard { width: 186px; }
        .cd-citycard-img { height: 104px; background: #2a1a40 center/cover no-repeat; border-radius: 10px; margin-bottom: 6px; }
        .cd-citycard b { font-size: 0.98rem; color: #1a1030; }
        .cd-citycard-pop .leaflet-popup-content { margin: 10px 12px; }
        .cd-citycard-pop .leaflet-popup-content-wrapper { border-radius: 14px; }
        /* İlçe hover kartı: altındaki ilçe tıklanabilsin diye fareyi yutmasın */
        .cd-hovercard-pop { pointer-events: none; }
        .cd-pop-name { display: block; font-size: 0.95rem; font-weight: 800; color: #1a0a2e; }
        .cd-pop-cat { font-size: 0.76rem; color: #7c1ddb; font-weight: 700; margin: 2px 0 5px; }
        .cd-pop-rating { font-size: 0.82rem; color: #b45309; font-weight: 700; margin-bottom: 5px; }
        .cd-pop-rating span { color: #92711a; font-weight: 600; }
        .cd-pop-row { font-size: 0.76rem; color: #444; margin: 3px 0; }
        .cd-pop-row a { color: #7c1ddb; }
        .cd-pop-act { display: flex; gap: 6px; margin-top: 7px; }
        .cd-pop-nav { flex: 1; background: #22c55e; color: #06310f; border: none; text-align: center; padding: 7px; border-radius: 8px; font-weight: 800; font-size: 0.8rem; cursor: pointer; }
        .cd-pop-nav:hover { filter: brightness(1.06); }
        .cd-pop-maps { flex: 1; display: block; background: #7c1ddb; color: #fff; text-align: center; padding: 7px; border-radius: 8px; font-weight: 800; font-size: 0.8rem; text-decoration: none; }
        .cd-pop-maps:hover { filter: brightness(1.1); }
        /* In-app navigasyon banner'ı (cd-map üstünde) */
        #cd-nav { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; display: none; align-items: center; gap: 10px; background: rgba(15,10,30,0.94); color: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,0.5); max-width: 92%; }
        .cd-nav-info { display: flex; flex-direction: column; min-width: 0; }
        .cd-nav-info b { font-size: 0.86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cd-nav-info span { font-size: 0.76rem; color: #4ade80; font-weight: 700; }
        .cd-nav-stop { background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 8px; padding: 6px 10px; font-weight: 800; font-size: 0.76rem; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
        .cd-nav-stop:hover { background: rgba(255,255,255,0.24); }
        .cd-nav-dest { font-size: 20px; text-align: center; }
        .wl-pop-head { color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: 12px; text-align: left; }
        .welcome-landing .welcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: none; overflow: visible; }
        .wl-city { position: relative; height: clamp(72px, 11.5vh, 118px); border: none; border-radius: 12px; overflow: hidden; cursor: pointer; background: #2a1a40; box-shadow: 0 4px 14px rgba(0,0,0,0.32); transition: transform 0.15s; padding: 0; }
        .wl-city:hover { transform: scale(1.04); }
        .wl-city-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
        .wl-city::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0)); }
        .wl-city-label { position: absolute; left: 8px; bottom: 7px; z-index: 2; color: #fff; font-weight: 800; font-size: 0.78rem; letter-spacing: -0.2px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
        /* Mobil: 5 hizmet kartı 2 sütunda → son (5.) kart yalnız kalmasın, satırı doldursun + ortalansın */
        @media (max-width: 1023px) {
            .wl-svc:last-child { grid-column: 1 / -1; justify-content: center; }
        }

        /* ════════ Mobil index üst-bar: tek temiz satır ════════
           Sorun: logo (sol) + 6 dil butonu (sağ) + hesap pill'i (fixed) dar ekranda
           üst üste biniyordu. Çözüm: dilleri "🌐 EN ▾" dropdown'a topla, hesabı
           salt-avatar yap, ikisini logoyla aynı satıra hizala + hero'yu bu satırın
           ALTINA it (padding-top) → çakışma biter. */
        @media (max-width: 640px) {
            /* Dil seçici → dropdown. Hesap butonu index'te gizli (alt nav'da var) → köşeye yakın. */
            .welcome-lang { right: 12px; gap: 0; }
            /* Index (welcome landing görünürken) hesap/profil pill'i gizle → alt nav'daki Hesap yeterli */
            #welcome-screen:not(.welcome-hide) ~ #kashif-account-btn { display: none !important; }
            .welcome-lang-toggle {
                display: inline-flex; align-items: center; gap: 5px;
                background: rgba(20,24,48,0.82);
                border: 1px solid rgba(255,255,255,0.18);
                color: #fff; border-radius: 999px; padding: 8px 12px;
                font: 800 13px/1 system-ui, sans-serif; cursor: pointer;
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
                box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            }
            .welcome-lang-toggle b { color: #ffe600; letter-spacing: 0.4px; }
            .wl-lang-glob { font-size: 14px; }
            .wl-lang-chev { font-size: 10px; opacity: 0.85; transition: transform 0.18s; }
            .welcome-lang.open .wl-lang-chev { transform: rotate(180deg); }
            /* Menü: toggle'ın altına açılan dikey liste */
            .welcome-lang-menu {
                display: none;
                position: absolute; top: calc(100% + 8px); right: 0;
                flex-direction: column; gap: 4px; padding: 6px;
                background: rgba(16,10,30,0.97);
                border: 1px solid rgba(255,255,255,0.12);
                border-radius: 14px;
                box-shadow: 0 14px 38px rgba(0,0,0,0.55);
                -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
                z-index: 10005;
            }
            .welcome-lang.open .welcome-lang-menu { display: flex; }
            .welcome-lang-menu .welcome-lang-btn { width: 100%; min-width: 54px; height: 38px; }
            /* KRİTİK: landing içeriği ekrandan uzun. #welcome-screen justify-content:center
               (satır 2664) uzun içeriği DİKEY ortalayıp ÜST kısmı (title/subtitle/arama)
               brandbar'ın arkasına taşırıp kırpıyordu. Mobilde ÜSTTEN başlat → doğal akış +
               scroll; mevcut padding-top:70px (satır 2836) brandbar'ı temizler. */
            /* Tek-sayfa (kaydırmasız) mobil index: ekran boyuna göre otomatik dolar */
            #welcome-screen:has(.welcome-landing) {
                justify-content: flex-start; overflow: hidden;
                padding-top: calc(84px + env(safe-area-inset-top));         /* logo ile arama arası ferah */
                padding-bottom: calc(64px + env(safe-area-inset-bottom));   /* alt nav payı */
            }

            /* ─── Arama kutusunu KARTTAN ÇIKAR (kullanıcı isteği) ───
               Hero cam-kabuğunu mobilde kaldır → başlık/arama/stats doğrudan sayfa
               zemininde, TAM GENİŞLİK. Arama barı daha iri + ferah → sayfanın üstünde
               baskın dursun. (Popüler Kullanıcı kartı kendi zeminiyle kart kalır.) */
            .welcome-landing .wl-hero.wl-card {
                background: transparent; border: none; box-shadow: none;
                -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0;
            }
            /* Arama çubuğu: daha ince (dikey) + daha dar (çok geniş değil), ortalı */
            .welcome-landing .welcome-search {
                padding: 5px 5px 5px 16px; border-radius: 14px;
                max-width: 400px; margin: 0 auto; gap: 8px;
                box-shadow: 0 12px 34px rgba(0,0,0,0.34);
            }
            .welcome-landing .welcome-search-ico { font-size: 0.95rem; }
            .welcome-landing #welcome-search-input { font-size: 0.98rem; padding: 10px 0; }
            .welcome-landing #welcome-search-go { width: 40px; height: 40px; font-size: 1.25rem; border-radius: 11px; }

            /* ─── 5'li grup → EN ALTTA "Hizmetlerimiz" DOCK kartı (kullanıcı isteği) ───
               Şehirlerden sonra (order:10), ekranı yatayda TAM kaplayan (full-bleed),
               telefon altına BİTİŞİK (üst köşe yuvarlak, alt düz + alt boşluğu yut). */
            /* Landing tüm yüksekliği doldursun; iç bölümler ekrana göre esnesin (tek sayfa) */
            .welcome-inner.welcome-landing {
                flex: 1 1 auto; min-height: 0; height: auto;
                padding-top: clamp(4px, 1vh, 12px); padding-bottom: 0;
                gap: clamp(6px, 1.3vh, 13px); overflow: hidden;
            }
            /* ⚠️ "Hizmetlerimiz" MOBİLDE HİÇ GÖSTERİLMİYOR (9 Ağu, kullanıcı kararı).
               Eskiden burada alt-bardaki 🧭 maddesinden açılan sheet'e taşınan bir
               "dock" paneli vardı; madde de sheet de kaldırıldı. Panel masaüstünde
               yerinde duruyor — bu yüzden DOM'dan silinmiyor, yalnız burada kapanıyor.
               ⚠️ İLK DENEMEDE JS SINIFIYLA (.wl-svc-hide) GİZLEMİŞTİM, TUTMADI:
               buradaki kural (0,3,0) benim (0,2,0) kuralımı yeniyordu ve panel
               telefonda görünmeye devam etti. Medya sorgusunda kapatmak hem daha
               özgül hem de JS zamanlamasına bağlı değil (yeniden boyutlandırma canlı). */
            .welcome-landing .wl-services.wl-card { display: none; }
            /* Önerilen şehirler: mobilde 2 sütun × 3 sıra = 6 daha BÜYÜK kart (ilk 6). */
            .welcome-landing .welcome-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
            .welcome-landing .wl-city { height: clamp(92px, 15vh, 120px); border-radius: 13px; }
            .welcome-landing .wl-city:nth-child(n+7) { display: none; }
            .welcome-landing .wl-city-label { font-size: 0.86rem; left: 9px; bottom: 8px; }
            /* Ana büyük kartları (hero=Popüler Kullanıcı + panel=şehirler) mobilde yatayda
               biraz genişlet: yan boşlukları azalt (36px → ~20px/kenar). */
            #welcome-screen { padding-left: 12px; padding-right: 12px; }
            .welcome-inner.welcome-landing { padding-left: 8px; padding-right: 8px; }

            /* ── Tek-sayfa fit: bölümler ekran boyuna göre esner ── */
            .welcome-landing .welcome-subtitle { display: none; }              /* alt açıklama yok */
            .welcome-landing .wl-title { display: none; }                      /* "Keşfet" başlığı yok (placeholder'a taşındı) */
            .welcome-landing .wl-hero { flex: 0 0 auto; margin-bottom: 0; gap: clamp(8px, 1.5vh, 13px); }
            .welcome-landing .welcome-search { flex: 0 0 auto; }
            .welcome-landing #welcome-search-input { font-size: 0.98rem; padding: clamp(8px, 1.2vh, 11px) 0; }
            .welcome-landing #welcome-search-go { width: clamp(38px, 5vh, 44px); height: clamp(38px, 5vh, 44px); font-size: 1.25rem; border-radius: 11px; }
            /* Şehirler kalan boşluğu doldursun (2 sütun × 3 sıra, eşit yükseklik) */
            /* Arama ile grid arası ferah boşluk → grid kalan alanı doldurduğundan kartlar da otomatik biraz küçülür */
            .welcome-landing .wl-panel { flex: 1 1 auto; min-height: 0; margin-top: clamp(14px, 3.4vh, 32px); display: flex; flex-direction: column; padding: clamp(9px, 1.5vh, 15px) clamp(10px, 3vw, 15px); }
            .welcome-landing .wl-pop { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
            .welcome-landing .welcome-grid { flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: clamp(7px, 1.2vh, 11px); }
            .welcome-landing .wl-city { height: auto; min-height: 0; }
            /* Popüler günlükler kartı kompakt (önizleme gizli → yer kazan) */
            #welcome-community-card { flex: 0 0 auto; }
            #welcome-community-card .wl-cc-preview { display: none; }
        }
        /* ══════ Native-app hissi: mobil alt navigation bar (5'li, ortada büyük Chat) ══════ */
        @keyframes kfFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes kfSheetUp { to { transform: translateY(0); } }
        .kf-botnav { display: none; }
        .kf-botnav.on {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
            display: flex; align-items: flex-end; justify-content: space-around;
            height: calc(58px + env(safe-area-inset-bottom));
            padding: 0 4px env(safe-area-inset-bottom);
            background: rgba(14,18,36,0.93);
            border-top: 1px solid rgba(255,255,255,0.10);
            -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
            box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
        }
        @media (min-width: 641px) { .kf-botnav.on { display: none; } }   /* yalnız mobil */
        .kf-bn-item {
            flex: 1; background: none; border: none; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 7px 2px 9px; color: #aeb6d0; font: 700 10px system-ui; min-width: 0;
            transition: color 0.12s, transform 0.1s;
        }
        .kf-bn-item:active { transform: scale(0.92); }
        .kf-bn-ic { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
        .kf-bn-avatar { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.3); }
        .kf-bn-lbl { letter-spacing: -0.2px; white-space: nowrap; }
        .kf-bn-center { position: relative; }
        .kf-bn-fab {
            width: 56px; height: 56px; margin-top: -26px; margin-bottom: 3px;
            border-radius: 50%; background: linear-gradient(135deg,#7c1ddb,#e4181e);
            display: flex; align-items: center; justify-content: center;
            font-size: 26px; color: #fff;
            box-shadow: 0 8px 22px rgba(124,29,219,0.6), 0 0 0 5px rgba(14,18,36,0.93);
        }
        .kf-bn-center .kf-bn-lbl { color: #e9d5ff; font-weight: 800; }
        .kf-bn-center:active .kf-bn-fab { transform: scale(0.94); }

        /* Pull-to-refresh göstergesi (yukarıdan aşağı çek → yenile) */
        #kf-ptr {
            position: fixed; top: 0; left: 50%;
            transform: translateX(-50%) translateY(0);
            z-index: 10600; width: 42px; height: 42px; border-radius: 50%;
            background: rgba(15,20,38,0.94); border: 1px solid rgba(255,255,255,0.16);
            display: flex; align-items: center; justify-content: center;
            color: #cbd5f5; opacity: 0; pointer-events: none;
            box-shadow: 0 8px 24px rgba(0,0,0,0.45);
            transition: opacity 0.18s ease;
        }
        #kf-ptr .kf-ptr-ic { font-size: 22px; line-height: 1; font-weight: 900; }
        #kf-ptr.ready { border-color: #7c1ddb; color: #c084fc; }
        #kf-ptr.loading .kf-ptr-ic { animation: kfPtrSpin 0.7s linear infinite; }
        @keyframes kfPtrSpin { to { transform: rotate(360deg); } }

        /* Mobil app'in alt çubukları masaüstü web'e sızmasın (place page kendi planlayıcısını kullanır) */
        @media (min-width: 1024px) {
        }
        @media (min-width: 1024px) {
            /* Masaüstü: fit-screen — tüm landing 100vh, aşağı kaydırma yok */
            #welcome-screen:has(.welcome-landing) { overflow: hidden; padding: 0; }
            .welcome-inner.welcome-landing { height: 100vh; height: 100dvh; justify-content: center; }
            .wl-hero { flex-direction: row; align-items: center; gap: 24px; margin-bottom: 0; }   /* search SOL, küre SAĞ */
            .wl-hero-left { flex: 1.2; justify-content: center; }   /* daha geniş → arama barı uzun */
            .wl-hero-right { display: block; flex: 1.1; }
            .wl-title { font-size: clamp(1.7rem, 4vh, 2.7rem); }
            .welcome-landing .welcome-subtitle { font-size: 1.06rem; }
            .wl-services { grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1.2vh, 12px); }
            .welcome-landing .welcome-grid { grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.3vh, 14px); }
            .wl-city { height: clamp(92px, 14.5vh, 160px); }
            .wl-city-label { font-size: 1.02rem; }
        }

        /* ══════════════════════════════════════════════════════════════════
           ŞEHİR SAYFASI — MASAÜSTÜ BOARD (2026-08-12, kullanıcı tasarımı)
           Sol sütun kartlar (akışkan), sağ sütun YAPIŞKAN harita + detay.

           ⚠️ KULLANICI KARARI: mobil tasarıma HİÇ DOKUNULMAYACAK. Bu yüzden
              tüm kurallar `min-width: 1100px` içinde. Aşağıda `.pp-board` ve
              `.pp-board-main` STİLSİZ birer <div>; blok olarak akıyorlar,
              yani dar ekranda sayfa eskisiyle BİRE BİR aynı diziliyor.
           ⚠️ Sağ sütun dar ekranda `display:none` DEĞİL, hiç kurulmuyor:
              JS boardOn() kapısından geçmediği için Leaflet de görsel de yok.
              Yine de görünmesin diye burada da kapatılıyor (JS'siz durum).
           ══════════════════════════════════════════════════════════════════ */
        .pp-board-side { display: none; }

        @media (min-width: 1100px) {
            /* Board açıkken sayfa 1080px kalıbından çıkıp ekranı kullanıyor.
               ⚠️ ÜÇÜ DE AYNI GENİŞLİKTE OLMALI: nav 1080px'de kalınca bölüm
               bağlantıları çip şeridinin ORTASINDA asılı kaldı (kullanıcı bunu
               ince_ayar.png'de iki sıra arasına ok çizerek işaretledi). */
            .pp-wrap, .pp-nav-inner { max-width: min(1720px, 96vw); }
            /* ⭐ BAR İLE İLK BÖLÜM ARASINDAKİ BOŞLUK (kullanıcı kararı 12 Ağu).
               Üst üste binen üç boşluk vardı: .pp-wrap'in 14px üst dolgusu +
               ilk bölümün 30px dolgusu + bölüm başlığının kendi payı ≈ 77px.
               İçerik bara yaklaştırıldı; bölümler ARASI boşluk (30px) aynen
               duruyor — yalnız İLK bölüm kırpılıyor. */
            .pp-wrap { padding-top: 0; }

            /* ⭐ SEKME DÜZENİ (kullanıcı kararı 12 Ağu): bölümler birbirine
               AKMIYOR. Yalnız seçili olan görünür; içeriği bitince alttaki
               bölüme geçilmez — kullanıcı bardan kendisi seçer.
               Sayfa sabit durur, YALNIZ kart ızgarası kayar, harita oynamaz —
               yani Konaklama board'undaki desenin aynısı. */
            .pp-board-main {
                height: calc(100vh - var(--pp-navh, 108px) - 34px);
                display: flex; flex-direction: column; min-height: 0;
            }
            .pp-board-main > section.pp-sec { display: none; }
            /* ⚠️ ÜST DOLGU YOK: kart çerçevesi sağdaki haritayla AYNI hizada
               başlamalı (kullanıcı 14 Ağu: "harita üst bara daha yakın").
               Ölçüldü: 10px dolgu kartları haritadan 11px aşağı düşürüyordu.
               Bölüm başlığı zaten gizli, dolguyu tutan bir şey kalmadı. */
            .pp-board-main > section.pp-sec.pp-sec-on {
                display: flex; flex-direction: column;
                flex: 1 1 auto; min-height: 0; padding: 0;
            }
            /* Başlık + "Detay" sabit kalır; kayan yalnız kartlar. */
            .pp-board-main .pp-sec-on .pp-sec-head { flex: 0 0 auto; }
            /* ⭐⭐ KAYDIRAN KAP, IZGARANIN KENDİSİ DEĞİL, DIŞINDAKİ SARMALAYICI.
               (kullanıcı önerisi 13 Ağu: "Konaklama'nın kodunu birebir uygula")

               ⚠️⚠️ KARTLAR İKİ TUR BOYUNCA İNCE ŞERİTLERE EZİLDİ (12-13 Ağu).
                  GERÇEK SEBEP: kaydırma için IZGARAYA kesin yükseklik veriliyordu.
                  `.pp-card`'ta `overflow: hidden` var → CSS Grid'de bu, öğenin
                  "otomatik en küçük boyu"nu SIFIR yapar. Kap içerikten kısa kalınca
                  (boş alan NEGATİF) satırlar doğal boya (max-content) BÜYÜTÜLMEZ,
                  taban boyunda kalır ve kartları ezer.
               ⚠️ `align-content: start` BUNU ÇÖZMEZ: dağıtılacak boş alan yoktur.
                  12 Ağu'da denendi, canlıda HİÇBİR ŞEY değişmedi — o teşhis yanlıştı.
               ✅ ÇÖZÜM YAPISAL: yüksekliği SARMALAYICI alır, ızgaranın yüksekliği
                  `auto` kalır → satırlar doğal boyunda, taşan kısım sarmalayıcıda
                  kayar. Konaklama baştan beri bu yüzden DOĞRU çalışıyordu
                  (`.pp-stay-col` + `.pp-stay-scroll` deseni).
               ⛔ IZGARAYA (`.pp-grid`) BİR DAHA `height`/`overflow` VERME — hata
                  aynen geri gelir. Nöbetçi: smoke-board.mjs. */
            .pp-board-main .pp-sec-on > .pp-sec-scroll,
            .pp-board-main .pp-sec-on .pp-stay-scroll {
                flex: 1 1 auto; min-height: 0; overflow-y: auto;
                /* ⚠️ Liste sonuna gelince kaydırma SAYFAYA GEÇMESİN — kullanıcı
                   "sayfa sabit dursun" dedi; bu olmadan son kartta sayfa
                   kayıp hero'yu geri getiriyor. */
                overscroll-behavior: contain;
            }
            /* ⭐ "TEK BÜYÜK KART" (kullanıcı isteği 13 Ağu): öneri kartları tek bir
               çerçevenin içinde yaşıyor — sağdaki harita paneliyle simetrik. Çerçeve
               değerleri Konaklama'nın `.pp-stay-col`undan birebir alındı. */
            .pp-board-main .pp-sec-on > .pp-sec-scroll {
                background: #fff; border: 1px solid #eceef4; border-radius: 16px;
                box-shadow: 0 2px 10px rgba(15,23,42,0.04);
                padding: 14px;
            }
            .pp-board-main .pp-sec-scroll::-webkit-scrollbar { width: 8px; }
            .pp-board-main .pp-sec-scroll::-webkit-scrollbar-thumb { background: #d8cdf0; border-radius: 8px; }
            .pp-board-main .pp-sec-scroll::-webkit-scrollbar-track { background: transparent; }
            /* Konaklama panelinin kendi iç yüksekliği de kolona uysun. */
            .pp-board-main .pp-sec-on .pp-stay-panel:not([hidden]),
            .pp-board-main .pp-sec-on .pp-stay-board,
            .pp-board-main .pp-sec-on .pp-stay-col--list {
                display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
            }
            .pp-board {
                display: grid;
                grid-template-columns: minmax(0, 1fr) clamp(440px, 46vw, 900px);
                gap: 26px; align-items: start;
            }
            .pp-board-main { min-width: 0; }   /* grid çocuğu taşmasın (kartlar kısalabilsin) */
            .pp-board-side { display: block; min-width: 0; }
            /* Harita SAYFAYLA BİRLİKTE kaymıyor: sol sütun kayarken sabit duruyor.
               top = sticky nav yüksekliği (~54px) + nefes payı. */
            /* ⚠️ `height`, `max-height` DEĞİL (kullanıcı: "Büyüt", ince_ayar.png).
               max-height yükseklik VERMEZ: kap içeriği kadar oluyordu, harita da
               kendi `min-height: 320px`inde kalıp sağda kocaman boşluk bırakıyordu.
               Açık yükseklik verilince harita ekranın tamamını kullanıyor. */
            /* ⚠️ `top` BAR YÜKSEKLİĞİNE bağlı: "Gezini Planla" kartı barın içine
               alınınca bar yükseldi ve sabit 68px'te harita barın ALTINA giriyordu.
               Değeri olcNavYuksekligi() ölçüp --pp-navh'a yazıyor; değişken
               gelmezse 108px makul bir yedek. */
            .pp-bs-stick {
                position: sticky; top: calc(var(--pp-navh, 108px) + 14px);
                display: flex; flex-direction: column; gap: 14px;
                height: calc(100vh - var(--pp-navh, 108px) - 34px);
            }
            /* Harita + kendi araçları tek sütun: ≥1600px'de detay panelinin
               YANINA geçtiğinde de birlikte hareket etsinler. */
            .pp-bs-mapcol { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
            /* Haritanın ne gösterdiğini söyleyen etiket — bölüm değişince
               haritanın da değiştiği anlaşılsın. */
            .pp-bs-seclabel {
                flex: 0 0 auto; font-size: 0.82rem; font-weight: 800; color: #7c1ddb;
                background: #f4efff; border: 1px solid #e6e2f2; border-radius: 999px;
                padding: 6px 14px; align-self: flex-start;
            }
            /* ⭐ TEK HARİTA (kullanıcı kararı 12 Ağu): Konaklama bölümünün KENDİ
               iç haritası masaüstünde gizlendi; onun işini de sağdaki tek harita
               yapıyor. Liste sütunu böylece tam genişliğe yayılıyor.
               ⚠️ Harita KABI DOM'da kalıyor: initStayMap ona bakıyor ve otel
                  fiyatları · favoriler · canlı OSM otel yüklemesi o yolun
                  içinden bağlanıyor. Kabı silmek bunları sessizce koparırdı. */
            .pp-board-main .pp-stay-col--map { display: none; }
            .pp-board-main .pp-stay-board { grid-template-columns: 1fr; display: block; }
            .pp-bs-route { flex: 0 0 auto; max-height: 88px; overflow: auto; }
            .pp-bs-route:empty { display: none; }
            /* ⭐ "Harita" bar maddesi KALDIRILDI (kullanıcı: "içine al").
               Harita zaten sağda sürekli duruyor; bölümün düğmeleri ve rota
               çipleri adoptMapTools() ile harita panelinin içine taşındı.
               ⚠️ Bağlantı JS ile SİLİNMİYOR, CSS ile gizleniyor: pencere
                  daraltılınca mobil düzen bağlantıyı geri kazanmalı. */
            /* (gizleme kuralı aşağıda, .pp-nav-links kapsamında — özgüllük notu orada) */
            .pp-board-main #pp-sec-map { display: none; }
            /* ⭐ "Kartpostallar" bardan kalktı (kullanıcı kararı 12 Ağu: başka
               yerde gösterilecek). Bar'a sığmadığı için zaten KIRPILIYORDU ve
               diğer maddelerin tamamı görünmüyordu.
               ⚠️ BÖLÜM DURUYOR — yalnız bar bağlantısı gizli. Bölümü de silmek
                  içeriğe erişimi tamamen keserdi; "başka yer" henüz yok. */
            /* (gizleme kuralı aşağıda, .pp-nav-links kapsamında) */

            /* ⭐ TEK SATIR BAR (kullanıcı kararı 12 Ağu): bölüm bağlantıları SOLDA,
               "Gezini Planla" kartı SAĞDA — ikisi yan yana. Kart barın içine
               taşındığı için sayfadaki iki satır tek satıra indi. */
            .pp-nav-inner { flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; }

            /* ⭐ BARIN YARISI HERO'NUN ÜSTÜNDE (kullanıcı kararı 12 Ağu):
               kartlar hero görselinin alt kenarına biniyor. Negatif üst boşluk
               SABİT — kaydırınca değiştirmiyoruz, yoksa sayfa zıplar (bar zaten
               sticky, kaydırınca top:0'a yapışıyor).
               ⚠️ Şerit zemini kaydırmadan ÖNCE saydam: hero'nun üstünde beyaz
                  bir bant olarak durmasın, yalnız kartlar yüzsün. Kaydırınca
                  altından içerik geçeceği için zemin geri geliyor. */
            .pp-nav {
                margin-top: calc(var(--pp-navh, 108px) / -2);
                background: transparent; border-bottom-color: transparent;
                backdrop-filter: none; z-index: 25;
            }
            .pp-scrolled .pp-nav {
                background: rgba(255,255,255,0.92); border-bottom-color: #e9ebf2;
                backdrop-filter: blur(14px);
            }
            /* ⭐ HERO İÇERİĞİ SOLA + YUKARI (kullanıcı kararı 12 Ağu,
               "şehir adı ve içerik bilgisi.png").
               • SOLA: hero 1080px kalıbındaydı, şehir adı ekranın ortasından
                 başlıyordu. Artık bar/board ile AYNI genişlikte → marka kartıyla
                 hizalı, sol kenara yakın.
               • YUKARI: hero içeriği alta yaslı; binen barın payına ek olarak
                 nefes payı verildi. */
            .pp-hero-body {
                max-width: min(1720px, 96vw);
                padding-bottom: calc(38px + var(--pp-navh, 108px) / 2 + 96px);
                /* ⭐ ÜÇ SÜTUN: [şehir bilgisi | 1fr] [Bana sor | auto] [boş | 1fr]
                   Üçüncü sütun BOŞ ama 1fr — birinciyle eşit olduğu için ortadaki
                   arama TAM SAYFA ORTASINDA kalıyor (kullanıcı kararı 12 Ağu).
                   ⚠️ Flex + `margin:auto` bunu YAPAMAZDI: orada arama, şehir
                      bloğundan ARTAN alanın ortasına gider — şehir adı uzadıkça
                      (Saraybosna/İstanbul) arama da kayardı. Izgarada şehir adının
                      uzunluğu ortalamayı hiç etkilemiyor. */
                display: grid; grid-template-columns: 1fr auto 1fr;
                align-items: center; gap: 34px;
            }
            .pp-hero-main { display: block; min-width: 0; }

            /* ⭐ ÜÇLÜ EŞİT ARALIKTA + ORTALI. Dil/hesap düğmeleri bu kabın
               DIŞINDA olduğu için aradaki görünmez kutu artık kartları itmiyor. */
            /* ⭐ DÖRT KARTIN TEK ÖLÇÜ SÖZLEŞMESİ (kullanıcı kararı 12 Ağu):
               hepsinin YÜKSEKLİĞİ aynı; logo dışında yazı boyutu/kalınlığı/rengi
               de aynı. Değerler burada TEK yerde — dördü ayrı ayrı ayarlanırsa
               biri diğerinden kaçınılmaz olarak ayrışıyor (şimdiye kadar öyleydi:
               0.9 / 0.86 / 0.78rem ve üç ayrı gri).
               ⚠️ `box-sizing: border-box` global (main.css başı) → verilen
                  yükseklik dolgu+çerçeve DAHİL, dördü gerçekten eşitleniyor. */
            .pp-nav-row {
                --kf-barh: 46px;          /* kart yüksekliği */
                --kf-barfs: 0.86rem;      /* yazı boyutu */
                --kf-barfw: 800;          /* yazı kalınlığı */
                --kf-barfc: #334155;      /* yazı rengi */
                /* ⭐ ÜÇ SÜTUN (kullanıcı 14 Ağu: "chat tam ortada olmalı").
                   [sol | 1fr] [💬 | auto] [sağ | 1fr] → düğme, yanların
                   genişliğinden BAĞIMSIZ olarak barın tam ortasında.
                   ⚠️ Flex + `margin: auto` bunu YAPAMAZ: düğme ARTAN alanın
                      ortasına gider, sol grup sağdan genişse sola kayar
                      (ölçüldü: 80px kayma). Hero'daki "Bana sor" da tam bu
                      yüzden ızgaraya alınmıştı — aynı desen.
                   ⚠️ `minmax(0,1fr)`: sütunlar içeriğin altına inebilsin,
                      yoksa dolu barda ızgara taşardı. Daralma yükünü sağdaki
                      "Gezini Planla" taşıyor (bkz. `flex: 0 1 auto`). */
                display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0;
            }
            .pp-nav-side { display: flex; align-items: center; gap: 16px; min-width: 0; }
            /* ⭐ BOŞLUK AYARI (kullanıcı 14 Ağu, "boşluk_ayarı.png"): düğme tam
               ortada ama kartlar sütunlarının UÇLARINDA durunca ortada kocaman
               bir boşluk kalıyordu (ölçüldü: sol kart 687px, sütun 767px → 80px
               boşta + 16px gap). Artık iki taraf da düğmeye YASLANIYOR: bar tek
               bir küme gibi okunuyor, düğme hâlâ tam ortada.
               ⚠️ Dil/hesap kutuları bu kümenin İÇİNE girmemeli — sağ uçta
                  kalıyorlar (`margin-left: auto`), yoksa 12 Ağu'daki "görünmez
                  kutu kartların arasında" görüntüsü geri gelir. */
            .pp-nav-side--l { justify-content: flex-end; }
            .pp-nav-side--r { justify-content: flex-start; }
            .pp-nav-side--r .pp-nav-tools { margin-left: auto; }
            /* Yükseklik sözleşmesi artık SÜTUNLARIN İÇİNE de uygulanmalı:
               ızgaranın doğrudan çocukları sarmalayıcılar. */
            .pp-nav-row > *, .pp-nav-side > * { height: var(--kf-barh); }
            /* Boş hesap kutusu kaydırmadan önce de `gap` kadar yer kaplıyordu. */
            .pp-nav-acct:empty { display: none; }

            /* ⭐ MARKA HERO'NUN SOL ÜSTÜNDE (kullanıcı kararı 13 Ağu,
               "ufak_güncellemeler.png"). 12 Ağu'da bara alınmıştı, geri istendi.
               Marka artık hiç oynatılmıyor: `.pp-topbar` şeridinde, mobildeki
               yeriyle aynı → bar kapsamındaki eski `.pp-nav-row .pp-back`
               kuralları KALDIRILDI, `.pp-topbar`ın `space-between`i geri geldi
               (marka solda · dil+hesap sağda).
               ⚠️ Kaydırınca marka SOLUYOR: `.pp-back` fixed olduğu için sticky
                  barın üstüne binerdi. Dil şeridi zaten aynı anda soluyor
                  (`.pp-scrolled .pp-langbar`), hesap düğmesi de o an barın
                  içindeki yuvasına geçiyor → tutarlı davranış, çakışma yok.
               ⚠️ Yalnız bu genişlikte: mobilde marka kaydırınca yuvarlak ikona
                  küçülüp GÖRÜNÜR kalıyor, ona dokunulmadı. */
            /* ⭐ KARTPOSTALLAR ŞERİDİ — sayfanın EN ALTI, BOYDAN BOYA
               (kullanıcı kararı 14 Ağu: "şehir içeriğinin tam altına yatay
               boydan boya, kartpostal biraz daha büyük, arka plan rengi olsun,
               kullanıcı özel bir bölüm olduğunu hissetsin").
               ⚠️ Şerit `#pp-scroll`un doğrudan çocuğu (JS: adoptPostcards) →
                  `width` hilesine gerek yok, kabın tamamını kaplıyor. 100vw
                  KULLANMA: dikey kaydırma çubuğunu da sayar, yatay taşma yapar.
               ⚠️ İçerik ortada ve sayfayla AYNI kalıpta (min(1720px,96vw)):
                  zemin boydan boya, kartlar hizada. */
            #place-page .pp-sec--post {
                display: block; padding: 34px 0 40px; margin: 0;
                background: linear-gradient(180deg, #f4efff 0%, #efe7fb 100%);
                border-top: 1px solid #e6ddf7;
                box-shadow: inset 0 12px 24px -18px rgba(15,23,42,0.18);
            }
            #place-page .pp-sec--post > #pp-post-host {
                max-width: min(1720px, 96vw); margin: 0 auto; padding: 0 32px;
            }
            /* Kartlar biraz daha büyük (kullanıcı isteği): 210-265 → 260-340. */
            #place-page .pp-sec--post .kf-pc { flex: 0 0 clamp(260px, 22vw, 340px); }
            #place-page .pp-sec--post .kf-pc-head b { font-size: 1.5rem; }

            /* ⭐ CHAT DÜĞMESİ — mobil alt bardaki ORTA düğmenin masaüstü
               karşılığı (kullanıcı kararı 14 Ağu). Grup sohbetini açıyor.
               Görsel dil MOBİLDEKİYLE AYNI: yuvarlak, magenta→kırmızı degrade,
               beyaz 💬. Bar'daki tek yuvarlak öğe olması onu "ana eylem" yapıyor.
               ⚠️ Boyut ortak sözleşmeden: `.pp-nav-row > *` yüksekliği
                  --kf-barh veriyor, genişlik de ona eşitlenip daire oluyor.
               ⚠️ Kısa süre burada "Bana sor" hap kutusu denendi (kullanıcı
                  istediğinin bu olmadığını söyledi) → kaldırıldı, kompakt arama
                  eski yerinde (araç kabı) kaldı ve masaüstünde gizli. */
            .pp-nav-row .pp-chat-btn {
                flex: 0 0 auto; width: var(--kf-barh); padding: 0;
                border: none; border-radius: 50%; cursor: pointer;
                background: linear-gradient(135deg,#7c1ddb,#e4181e);
                color: #fff; font-size: 1.32rem; line-height: 1;
                display: flex; align-items: center; justify-content: center;
                box-shadow: 0 4px 16px rgba(124,29,219,0.42);
                transition: transform .12s, box-shadow .15s, filter .15s;
            }
            .pp-nav-row .pp-chat-btn:hover,
            .pp-nav-row .pp-chat-btn:focus-visible {
                outline: none; filter: brightness(1.06);
                box-shadow: 0 6px 22px rgba(124,29,219,0.55);
            }
            .pp-nav-row .pp-chat-btn:active { transform: scale(0.94); }

            /* ⭐ MARKA KAYDIRINCA BARIN İÇİNE GEÇİYOR (kullanıcı 14 Ağu:
               "dil/hesap kartı gibi yerini alsın"). Taşımayı JS yapıyor
               (mountBrand) — hesap düğmesiyle AYNI desen. Buradaki iki blok o
               iki durumun görünümü:
               • şeritteyken: zeminsiz, yalnız logo + yazı (13 Ağu kararı)
               • bardayken : diğer kartlarla aynı beyaz kart dili */
            .pp-nav-row .pp-back {
                position: static; z-index: auto;
                background: #fff; color: #0f172a;
                border: 1.5px solid #e6e2f2; border-radius: 14px;
                padding: 6px 14px 6px 7px; gap: 8px;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                backdrop-filter: none; flex: 0 0 auto;
                text-shadow: none;
            }
            .pp-nav-row .pp-back:hover {
                background: #fff; transform: none;
                border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,29,219,0.14);
            }
            .pp-nav-row .pp-back-logoimg { width: 28px; height: 28px; border-radius: 9px; }
            .pp-nav-row .pp-back-word { font-size: 1.05rem; }
            /* Bardaki beyaz kartta degrade "f" zaten okunuyor → şerit için
               güçlendirilen gölge burada gereksiz (gri bir hale bırakıyordu). */
            .pp-nav-row .pp-back .kf-f { filter: none; }
            /* ⚠️ Marka bardayken şeritte TEK çocuk kalıyor; `space-between` onu
               SOLA yaslardı → dil/hesap kartı sağda kalsın diye kendi payını
               kendi alıyor. (justify-content DEĞİŞTİRİLMİYOR: marka geri
               geldiğinde iki uç düzeni aynen çalışmalı.) */
            .pp-topbar .pp-langbar { margin-left: auto; }
            /* JS çalışmazsa (ya da taşımadan önce) kaydırıldığında marka barın
               üstüne binmesin — taşınınca bu seçici zaten tutmaz. */
            .pp-scrolled .pp-topbar .pp-back {
                opacity: 0; transform: translateY(-10px); pointer-events: none;
                transition: opacity 0.2s, transform 0.2s;
            }

            /* ⭐ BÖLÜM BAŞLIĞI GİZLİ (kullanıcı çizimi 13 Ağu: iki "Gezilecek
               Yerler" etiketinin ikisi de üstü çizili). Hangi bölümde olduğunu
               bardaki SEÇİLİ sekme zaten söylüyor; başlık ile harita çipi aynı
               şeyi üçüncü kez tekrar ediyordu.
               ⚠️ "Detay" seçicisi KALIYOR → tek çocuk kalınca `space-between`
                  onu sola yaslardı, sağa sabitlendi.
               ⚠️ Yalnız masaüstü board'da gizli; dar ekranda başlıklar duruyor.
               ⚠️ SEO: bunlar <h2>. Şehir adı <h1> hero'da DURUYOR, ama statik
                  HTML işinde ([S1]) botun gördüğü metne bu başlıkları da yaz. */
            .pp-board-main .pp-sec-on .pp-sec-head .pp-h2 { display: none; }
            #pp-bs-seclabel { display: none; }
            /* ⚠️ Başlık gizli + "Detay" bara taşındı → şerit BOŞ kaldı, ama
               SİLMİYORUZ: admin düzenleme modunda "＋ Kart ekle" düğmesi bu
               şeride ekleniyor (bkz. place.js admin bölümü). display:none
               yapsaydım admin masaüstünde kart ekleyemezdi. Boşken yer
               kaplamasın diye yalnız alt boşluğu sıfırlanıyor; admin düğmesi
               girince şerit kendiliğinden yeniden yükselir. */
            .pp-board-main .pp-sec-on .pp-sec-head { justify-content: flex-end; margin-bottom: 0; }

            /* ⭐ "DETAY" BAR KARTININ İÇİNDE (kullanıcı 13 Ağu): Filtreler'in
               yanında, aynı kartın içinde ikinci bir öğe. İç içe çerçeve
               olmasın diye seçici ÇERÇEVESİZ — kart zaten çerçeve. */
            .pp-nav-card .pp-navsort:empty { display: none; }
            .pp-nav-card .pp-navsort { display: flex; align-items: center; }
            .pp-nav-card .pp-sort {
                border: none; background-color: transparent; box-shadow: none;
                padding: 6px 26px 6px 8px; background-position: right 6px center;
                font-size: var(--kf-barfs); font-weight: var(--kf-barfw); color: var(--kf-barfc);
            }
            .pp-nav-card .pp-sort:hover { color: #7c1ddb; }
            .pp-nav-card .pp-sort:focus { outline: none; box-shadow: none; }

            /* ⭐ MARKA ZEMİNSİZ (kullanıcı 13 Ağu: "saydamlığı sıfır yap, sadece
               logo görünsün"). Hap zemini/çerçevesi/bulanıklığı kalktı.
               ⚠️ Yazı gölgesi ŞART: zemin gidince açık tonlu hero fotoğrafında
                  (Paris/Santorini) beyaz yazı okunmaz oluyordu. */
            .pp-topbar .pp-back {
                background: transparent; border-color: transparent;
                backdrop-filter: none; box-shadow: none;
                padding-left: 0; padding-right: 0;
                text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45);
            }
            /* Taban kuraldaki mor hover zemini geri gelmesin. */
            .pp-topbar .pp-back:hover { background: transparent; transform: translateX(-2px); }
            /* ⚠️ "f" HARFİ KAYBOLUYORDU → marka "Kashi ly" okunuyordu (14 Ağu,
               ekran görüntüsüyle yakalandı). Harf degrade + `background-clip:text`
               ile çiziliyor; koyu hapın üstünde okunuyordu ama açık hero
               fotoğrafında toprak/yeşil tonları eriyor. Beyaz harflerin
               `text-shadow`u ona İŞLEMEZ: şeffaf glifte gölge harfin ardından
               taşar, o yüzden `.kf-f` gölgeyi `filter` ile alıyor — burada
               sadece o filtre GÜÇLENDİRİLİYOR (degrade, yani marka kimliği
               korunuyor; düz renge çevirmek daha kolaydı ama logoyla dili bozardı). */
            .pp-topbar .pp-back .kf-f {
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) drop-shadow(0 2px 9px rgba(0,0,0,0.6));
            }

            /* 🆘 SOS — barın son kartı. Diğer üç kartla aynı ölçü sözleşmesi
               (--kf-bar*), ama rengi acil: dikkat çekmeli, aranmamalı. */
            .pp-nav-row .pp-sos-btn {
                flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
                padding: 0 16px; border-radius: 14px; cursor: pointer;
                background: #fff; border: 1.5px solid #fecdd3; color: #e11d48;
                font-family: inherit; font-size: var(--kf-barfs); font-weight: var(--kf-barfw);
                white-space: nowrap; box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
            }
            .pp-nav-row .pp-sos-btn:hover,
            .pp-nav-row .pp-sos-btn:focus-visible {
                background: linear-gradient(135deg,#e11d48,#f43f5e);
                border-color: transparent; color: #fff; outline: none;
                box-shadow: 0 4px 16px rgba(225,29,72,0.30);
            }

            /* "Bana sor" artık hero'nun SAĞ sütunu: istatistik satırından çıkıp
               şehir bloğunun hizasına yükseldi (kullanıcı kararı 12 Ağu).
               ⚠️ Önceki tur `inline-flex` ile onu istatistiklerin YANINA
                  koymuştu; iki sütunlu düzende o gerekmiyor, kaldırıldı. */
            .pp-hsearch { margin-top: 0; margin-left: 0; width: min(520px, 40vw); }

            /* ⭐ BAR BAĞLANTILARI DA KART (kullanıcı kararı 12 Ağu): "Gezini Planla"
               ile AYNI tasarım dili — beyaz zemin, nötr çerçeve, tema rengi yalnız
               fare üstündeyken ve SEÇİLİ bölümde. Böylece barda iki eşit kart var. */
            /* ⚠️ `flex: 0 0 auto` + taşma görünür: bölüm bağlantılarının TAMAMI
               her zaman görünmeli (kullanıcı kararı 12 Ağu). Daralabilseydi
               `.pp-nav-links`in yatay kaydırması devreye girip son maddeleri
               sessizce kırpıyordu — "Kartpostallar"ı kaybeden şey buydu. */
            /* `align-items: stretch`: içerideki piller kartın TAM yüksekliğini
               kaplasın — `center` olsaydı hover dolgusu yazı kadar ince kalırdı. */
            .pp-nav-card {
                display: flex; align-items: stretch; gap: 5px;
                flex: 0 0 auto; min-width: 0;
                padding: 5px 6px; border-radius: 14px;
                background: #fff; border: 1.5px solid #e6e2f2;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                transition: border-color .15s, box-shadow .15s;
            }
            .pp-nav-card:hover { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,29,219,0.14); }
            /* Yatay kaydırma KAPALI: kaydırma çubuğu görünmediği için maddeler
               "yok olmuş" gibi duruyordu — kırpılmaktansa kart genişlesin. */
            .pp-nav-links { flex: 0 0 auto; gap: 3px; overflow: visible; align-items: stretch; }
            /* Bağlantılar plan kartındaki kutularla aynı davranış: nötr pil →
               hover/odak/seçimde tema gradyanı. Alt çizgi göstergesi kalkıyor. */
            .pp-nav-inner .pp-nav-links a {
                display: flex; align-items: center;
                padding: 0 12px; border-radius: 10px; border-bottom: none;
                font-size: var(--kf-barfs); font-weight: var(--kf-barfw); color: var(--kf-barfc);
                transition: background .15s, color .15s, box-shadow .15s;
            }
            /* ⚠️⚠️ GİZLEME BURADA, ÇÜNKÜ ÖZGÜLLÜK/SIRA MESELESİ.
               "Harita" ve "Kartpostallar" maddeleri 12 Ağu'da gizlenmişti ama
               kural `.pp-nav a[data-sec="map"]` (0,2,1) idi ve YUKARIDAKİ
               `.pp-nav-inner .pp-nav-links a { display: flex }` AYNI özgüllükte
               olup dosyada SONRA geldiği için kazanıyordu → madde 14 Ağu'ya
               kadar barda GÖRÜNMEYE devam etti (canlıda ölçülünce çıktı).
               Şimdi hem daha özgül (0,3,1) hem de sonra geliyor.
               ⚠️ Bağlantılar JS ile SİLİNMİYOR: pencere daraltılınca mobil
                  düzen onları geri kazanmalı. */
            .pp-nav-inner .pp-nav-links a[data-sec="map"],
            .pp-nav-inner .pp-nav-links a[data-sec="post"] { display: none; }
            .pp-nav-inner .pp-nav-links a:hover,
            .pp-nav-inner .pp-nav-links a:focus-visible,
            .pp-nav-inner .pp-nav-links a.active {
                background: linear-gradient(135deg,#7c1ddb,#9d3ff0);
                color: #fff; border-bottom-color: transparent; outline: none;
                box-shadow: 0 4px 14px rgba(124,29,219,0.30);
            }
            /* "Filtreler" artık kartın İÇİNDE → kendi çerçevesi iç içe duruyordu;
               diğer pillerle aynı sade görünüme iniyor. */
            .pp-nav-inner .pp-navfilter {
                border: none; background: transparent; box-shadow: none;
                padding: 0 12px; border-radius: 10px;
                font-size: var(--kf-barfs); font-weight: var(--kf-barfw); color: var(--kf-barfc);
            }
            .pp-nav-inner .pp-navfilter:hover,
            .pp-nav-inner .pp-navfilter:focus-visible {
                background: linear-gradient(135deg,#7c1ddb,#9d3ff0);
                color: #fff; outline: none;
                box-shadow: 0 4px 14px rgba(124,29,219,0.30);
            }
            /* Kart bar içinde: dış boşlukları sıfırla, yüksekliği bara uydur.
               ⭐ AÇIK TON (kullanıcı kararı 12 Ağu): dolu magenta gradyan barın
               içindeki TEK koyu öğeydi ve gözü yoruyordu. Artık beyaz/nötr
               duruyor; TEMA RENGİ yalnız FARE ÜSTÜNDEYKEN ve SEÇİMDE beliriyor.
               ⚠️ Yalnız `.pp-nav-inner` içinde geçerli — sayfadaki/mobildeki
                  büyük CTA kartı olduğu gibi kalıyor (mobile dokunma kararı). */
            /* ⚠️ `margin-left:auto` KALDIRILDI: kartı sağa itip solunda kocaman
               boşluk bırakıyordu (kullanıcının ok çizdiği yer). Aralık artık
               yalnız .pp-nav-row'un `gap`inden geliyor → üçü de eşit. */
            .pp-nav-inner .pp-planjourney {
                flex: 0 1 auto; min-width: 0; max-width: none;
                margin: 0; padding: 6px 8px 6px 12px;
                border-radius: 14px; gap: 8px;
                background: #fff; color: #0f172a;
                border: 1.5px solid #e6e2f2;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                transition: border-color .15s, box-shadow .15s;
            }
            .pp-nav-inner .pp-planjourney:hover {
                border-color: #c4b5fd;
                box-shadow: 0 4px 16px rgba(124,29,219,0.14);
            }
            /* Koyu zemin için yapılmış beyaz parlama açık kartta kirli duruyor. */
            .pp-nav-inner .pp-pj-glow { display: none; }
            /* ⭐ İKONLAR KALDIRILDI (kullanıcı kararı 12 Ağu): bardaki kartta
               🗺️ kutusu ve kutulardaki ✨/🧭/📍 emojileri yok — sade metin.
               ⚠️ CSS ile gizleniyor, MARKUP'TAN SİLİNMİYOR: aynı düğüm dar
                  ekranda sayfadaki BÜYÜK CTA kartı olarak kullanılıyor ve orada
                  ikonlar duruyor (mobile dokunmama kararı). */
            .pp-nav-inner .pp-pj-ic { display: none; }
            .pp-nav-inner .pp-pj-tx i { color: #64748b; }
            .pp-nav-inner .pp-pj-go { color: #7c1ddb; opacity: 1; }
            /* Kutular: nötr çerçeveli beyaz; tema rengi hover/odak/basılıyken. */
            .pp-nav-inner .pp-pj-tile {
                background: #fff; color: #334155;
                box-shadow: inset 0 0 0 1.5px #e6e2f2;
            }
            .pp-nav-inner .pp-pj-tile:hover,
            .pp-nav-inner .pp-pj-tile:focus-visible,
            .pp-nav-inner .pp-pj-tile:active {
                background: linear-gradient(135deg,#7c1ddb,#9d3ff0);
                box-shadow: 0 4px 14px rgba(124,29,219,0.30);
                color: #fff; outline: none;
            }
            .pp-nav-inner .pp-pj-tile i { opacity: 1; }
            /* Yer daralınca kart BAŞLIĞINDAN fedakârlık etsin (taşmak yerine
               kırpılsın) — bölüm bağlantıları artık daralmıyor. */
            .pp-nav-inner .pp-pj-tx b {
                font-size: var(--kf-barfs); font-weight: var(--kf-barfw); color: var(--kf-barfc);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .pp-nav-inner .pp-pj-lead { gap: 0; }   /* ikon kalktı, boşluğu da kalksın */
            /* Alt satır ("Yapay zeka planı · yol tarifi · konum") barda GÖRÜNMEZ
               (kullanıcı kararı 12 Ağu) — hiçbir genişlikte geri gelmiyor.
               ⚠️ Sayfadaki/mobildeki büyük CTA kartında DURUYOR. */
            .pp-nav-inner .pp-pj-tx i { display: none; }
            .pp-nav-inner .pp-pj-tiles { gap: 5px; }
            /* Emoji kalkınca 68×62'lik dikey kutu bomboş kalıyordu → kutular
               metin piline dönüştü; bardaki bölüm bağlantılarıyla aynı ölçü. */
            .pp-nav-inner .pp-pj-tile span { display: none; }
            .pp-nav-inner .pp-pj-tile {
                width: auto; flex-direction: row; gap: 0;
                height: calc(var(--kf-barh) - 12px);
                padding: 0 10px; border-radius: 10px;
            }
            /* ⚠️ Kutunun İÇİNDEKİ etikete RENK VERİLMİYOR: hover'da kutu tema
               gradyanına dönüp `color: #fff` alıyor, etiket onu MİRAS almalı.
               Açık renk yazsaydım hover'da yazı koyu kalırdı. */
            .pp-nav-inner .pp-pj-tile i { font-size: var(--kf-barfs); font-weight: var(--kf-barfw); }
            /* "→" KALDIRILDI (kullanıcı: kartı kısalt): tek başına bir işlevi
               yoktu — kartın başlığı zaten aynı planlama seçicisini açıyor,
               yani yalnız yer kaplayan İKİNCİ bir kopyaydı. */
            .pp-nav-inner .pp-pj-go { display: none; }
            /* ⚠️ 12 Ağu'da kompakt arama masaüstünde KOMPLE gizlenmişti ("bar
               zaten dolu"). 14 Ağu'da kullanıcı chat kutusunu BARIN İÇİNDE
               istedi ve o kutu tam da bu form. Kural artık yalnız ESKİ YERİNİ
               (araç kabı) hedefliyor — bar satırındaki kopya görünür.
               ⚠️ Bu iki seçici AYNI ÖZGÜLLÜKTE; blanket kural dosyada SONRA
                  geldiği için chat kutusunu 0 genişlikte bırakıyordu (canlıda
                  ölçüldü). Kapsamı daraltmak, sıraya güvenmekten sağlam. */
            .pp-nav-inner .pp-nav-tools .pp-navsearch { display: none; }

            /* ⭐ ÜÇÜNCÜ KART: 🔍 "Haritada Gör" (kullanıcı kararı 12 Ağu).
               Diğer iki kartla aynı dil — beyaz zemin, nötr çerçeve, tema rengi
               yalnız fare üstündeyken/odakta. */
            .pp-nav-inner .pp-map-mode {
                flex: 0 0 auto; margin: 0;
                display: flex; align-items: center; justify-content: center;
                padding: 0 16px; border-radius: 14px;
                background: #fff; border: 1.5px solid #e6e2f2; color: var(--kf-barfc);
                font-size: var(--kf-barfs); font-weight: var(--kf-barfw); white-space: nowrap; cursor: pointer;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
            }
            .pp-nav-inner .pp-map-mode:hover,
            .pp-nav-inner .pp-map-mode:focus-visible {
                background: linear-gradient(135deg,#7c1ddb,#9d3ff0);
                border-color: transparent; color: #fff; outline: none;
                box-shadow: 0 4px 16px rgba(124,29,219,0.30);
            }
            /* ⬇️ "Offline Map" sayfada GÖRÜNMEZ — yalnız harita penceresinde.
               ⚠️ Düğüm DOM'da KALIYOR: penceredeki #pp-mm-off onu arayıp
                  "indirildi" işaretini ona basıyor, silinirse o kırılır. */
            .pp-board-main #pp-offline-btn { display: none; }

            /* ⚠️ isolation: Leaflet'in iç z-index'leri (kontroller 1000, pane 400-700)
               sticky nav'ın (z-20) ÜSTÜNE çıkıyordu — konaklama haritasında yaşanan
               hatanın aynısı. Kendi stacking-context'i bunu içeride tutuyor. */
            .pp-bs-map {
                flex: 1 1 auto; min-height: 0; isolation: isolate;
                border-radius: 18px; overflow: hidden;
                border: 1px solid #e6e2f2; background: #eef0f6;
                box-shadow: 0 4px 22px rgba(15,23,42,0.07);
            }
            /* Detay paneli haritayı EZMİYOR, üstünde yer paylaşıyor: harita
               küçülür ama görünür kalır (kullanıcı kararı: "harita sabit"). */
            .pp-bs-detail {
                position: relative; flex: 0 1 auto; overflow: auto;
                max-height: 56%;
                background: #fff; border: 1px solid #e6e2f2; border-radius: 18px;
                box-shadow: 0 4px 22px rgba(15,23,42,0.07);
            }
            .pp-bs-x {
                position: absolute; top: 10px; right: 10px; z-index: 3;
                width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
                border: none; background: rgba(15,10,30,0.55); color: #fff;
                font-size: 0.9rem; line-height: 1;
            }
            .pp-bs-x:hover { background: rgba(15,10,30,0.78); }
            .pp-bs-cover { height: 150px; background-size: cover; background-position: center; }
            .pp-bs-body { padding: 14px 16px 16px; }
            .pp-bs-name { margin: 0; font-size: 1.15rem; font-weight: 900; color: #0f172a; letter-spacing: -0.3px; }
            .pp-bs-local { margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: #7c1ddb; }
            .pp-bs-rate, .pp-bs-meta { margin-top: 8px; }
            .pp-bs-desc { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.55; color: #475569; }
            .pp-bs-more {
                margin-top: 12px; cursor: pointer; font-family: inherit;
                border: 1.5px solid #e2e8f0; background: #fff; border-radius: 11px;
                padding: 8px 13px; font-size: 0.82rem; font-weight: 800; color: #334155;
            }
            .pp-bs-more:hover { border-color: #c4b5fd; color: #7c1ddb; }
            .pp-bs-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
            .pp-bs-shot { height: 74px; border-radius: 9px; background-size: cover; background-position: center; }
            .pp-bs-acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
            .pp-bs-acts a {
                text-decoration: none; font-size: 0.82rem; font-weight: 800; color: #334155;
                border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 8px 13px;
            }
            .pp-bs-acts a:hover { border-color: #c4b5fd; color: #7c1ddb; }

            /* Kartlar: sütun daraldıkça kendiliğinden 3→2→1 kolona düşüyor
               (kullanıcı isteği: "her PC ekran boyutuna göre otomatik"). */
            .pp-board-main .pp-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 15px; }
            .pp-card-sel { border-color: #7c1ddb; box-shadow: 0 0 0 2px rgba(124,29,219,0.28), 0 6px 18px rgba(124,29,219,0.15); }
            .pp-fhide { display: none !important; }

            /* Sağdaki harita zaten duruyor → bölümdeki BÜYÜK önizleme gereksiz.
               Bölümün kendisi KALIYOR: "Harita" bağlantısı, Offline indirme ve
               rota çipleri oraya bağlı. */
            .pp-board-main .pp-map-prev { display: none; }
        }

        /* (Geniş ekranda alt satırı geri getiren kural KALDIRILDI 12 Ağu:
            kullanıcı "Yapay zeka planı · yol tarifi · konum" satırını istemiyor.
            Artık her masaüstü genişliğinde gizli — bkz. .pp-nav-inner .pp-pj-tx i) */

        /* Çok geniş ekran: detay artık haritayı daraltmasın, YAN YANA dursunlar
           (kullanıcı çizimindeki üç sütunlu görünüm bu genişlikte oluşuyor). */
        /* ⚠️⚠️ KISA PENCEREDE MARKA ÇAKIŞMASI (14 Ağu, canlıda ölçüldü).
           Marka zeminsiz olunca hero içeriğiyle aynı alanı paylaşıyor ve kısa
           pencerede ÜST ÜSTE BİNİYOR: ölçüm, marka alt 78px · "TR Türkiye" üst
           38px (40px çakışma).
           ⚠️ SEBEP `padding-top` EKSİKLİĞİ DEĞİL — denendi, HİÇBİR ŞEY değişmedi:
              `.pp-hero` alta yaslı flex (`align-items: flex-end`) ve `.pp-hero-body`
              hero'dan UZUN (467 > 413) → kutu yukarı taşıyor. Üstten dolgu vermek
              kutuyu daha da uzatıyor, içeriği aşağı İTMİYOR. Doğru kol ALT DOLGU.
           Ölçülen denge (pencere 737px): +96px → üstte -40 (çakışma) · +64 → -8 ·
           +32 → üstte 24px, barın üstünde 70px · +0 → 56/38. +32 seçildi.
           ⚠️ Yalnız KISA pencerede: kullanıcının 12 Ağu'da ayarladığı "hero
              içeriği yukarı (+96px)" konumu normal ekranda AYNEN duruyor
              (o ekranlarda hero ~530px ve çakışma zaten yok). */
        @media (min-width: 1100px) and (max-height: 820px) {
            .pp-hero-body { padding-bottom: calc(38px + var(--pp-navh, 108px) / 2 + 32px); }
        }

        @media (min-width: 1600px) {
            .pp-board { grid-template-columns: minmax(0, 1fr) clamp(680px, 52vw, 1040px); }
            .pp-bs-stick { flex-direction: row; align-items: stretch; }
            .pp-bs-detail { max-height: none; flex: 0 0 320px; }
        }

        /* Sticky bar: "Filtreler" düğmesi + çip şeridi */
        .pp-navfilter {
            display: none; align-items: center; gap: 6px; cursor: pointer;
            font-family: inherit; white-space: nowrap;
            border: 1.5px solid #e2e8f0; background: #fff; border-radius: 999px;
            padding: 8px 15px; font-size: 0.84rem; font-weight: 800; color: #334155;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
        }
        .pp-navfilter:hover { border-color: #c4b5fd; color: #7c1ddb; }
        /* (.pp-navfilter.on KALDIRILDI: düğme artık açılır şerit değil, harita
           penceresini açıyor — o sınıf hiçbir zaman verilmiyordu.) */
        /* Alt tür çipleri artık HARİTA PENCERESİNİN içinde (kullanıcı kararı 12 Ağu).
           ⚠️ Pencere KOYU temalı — kartlardaki açık tema burada okunmuyordu. */
        .pp-mm-subs {
            display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto;
            padding: 0 12px 8px; scrollbar-width: none;
        }
        .pp-mm-subs::-webkit-scrollbar { display: none; }
        .pp-mm-subs:empty { display: none; }
        .pp-mm-subs .pp-fchip {
            background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.20);
            color: rgba(255,255,255,0.86); white-space: nowrap;
        }
        .pp-mm-subs .pp-fchip:hover { border-color: rgba(255,255,255,0.45); color: #fff; }
        .pp-mm-subs .pp-fchip.on { background: linear-gradient(135deg,#7c1ddb,#9d3ff0); border-color: transparent; color: #fff; }
        .pp-fchip {
            cursor: pointer; font-family: inherit;
            border: 1.5px solid #e2e8f0; background: #fff; border-radius: 999px;
            padding: 7px 13px; font-size: 0.8rem; font-weight: 700; color: #475569;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
        }
        .pp-fchip i { font-style: normal; opacity: 0.55; margin-left: 3px; }
        .pp-fchip:hover { border-color: #c4b5fd; color: #7c1ddb; }
        .pp-fchip.on { background: #7c1ddb; border-color: #7c1ddb; color: #fff; }
        .pp-fchip.on i { opacity: 0.8; }
        /* ⚠️ Filtre YALNIZ masaüstü board'da — mobil şerit zaten dar ve
           bölüm başlıklarındaki "Detay" seçici orada görevini yapıyor. */
        @media (min-width: 1100px) { .pp-navfilter { display: inline-flex; } }

        /* Harita pini: ikon yerine PUAN BALONU (kullanıcı tasarımı) */
        .pp-bpin {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 3px 8px; border-radius: 999px;
            background: #fff; border: 1.5px solid #7c1ddb;
            font-size: 0.74rem; font-weight: 900; color: #0f172a; white-space: nowrap;
            box-shadow: 0 2px 7px rgba(15,23,42,0.22);
        }
        .pp-bpin.on { background: linear-gradient(135deg,#7c1ddb,#9d3ff0); color: #fff; transform: scale(1.14); }
        /* Küme balonu: "bu noktada N mekân var" — tıklayınca içindekilere yakınlaşır */
        .pp-bpin-cl {
            width: 34px; height: 34px; padding: 0; border-radius: 50%;
            background: linear-gradient(135deg,#7c1ddb,#9d3ff0);
            border-color: #fff; border-width: 2px; color: #fff; font-size: 0.82rem;
            cursor: pointer;
        }
        .pp-bpin-cl:hover { transform: scale(1.1); }