: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).
           ⚠️ Bu 60, YALNIZ hero kartının kendi yığın bağlamı içinde geçerli. Liste
              hizmet şeridinin altında kalıyorsa çözüm BURASI DEĞİL → .wl-card
              sıralaması (yukarıda "YIĞIN BAĞLAMI TUZAĞI"). */
        /* ⚠️⚠️ z-index ŞART, sadece `relative` YETMEZ. Bir üstteki `:focus-within`
           kuralı buna `transform: translateY(-1px)` uyguluyor → TRANSFORM YIĞIN
           BAĞLAMI YARATIR. Yani kutu, tam da liste AÇIKKEN (odaklıyken) bağlam
           oluyor, `.wl-sug`'un 60'ı içeride hapsoluyor ve kutu kardeşleriyle
           `auto` seviyesinde yarışıyor → DOM'da sonra gelen "Popüler Günlükler"
           kartı listenin ÜSTÜNE biniyordu.
           ⚠️ Bu ancak topluluk kartı DOLUYKEN görünür; Supabase 402'deyken kart
              boştu, o yüzden 14 Ağu'daki kanıt görselinde YOKTU (28 Ağu'da kota
              yenilenince çıktı). "Görünmüyor" = "yok" DEĞİL.
           ⚠️ Ölçüm: liste satırlarının orta noktasında elementFromPoint. 7/7
              `.wl-sug-item` dönmeli; `.wl-svc` ya da `.wl-cc-*` dönerse bozuk. */
        .welcome-search { position: relative; z-index: 5; }
        .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;
        }
        /* "Burası X'e bağlı Y köyü" — küçük yerleşimlerde kullanıcı nerede
           olduğunu anlasın (19 Eyl). Başlığın hemen altı; sloganın üstü.
           Ton BİLGİ, uyarı değil: sessiz, ince, hero'yu bastırmayan. */
        .pp-hero-idari {
            display: inline-block; margin: 8px 0 0;
            font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
            color: rgba(255,255,255,0.90);
            background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.22);
            border-radius: 999px; padding: 4px 12px; backdrop-filter: blur(4px);
        }
        .pp-hero-stats { display: flex; gap: 26px; margin-top: 22px; }

        /* ══ "OLMAZSA OLMAZ" KUTUSU (kullanıcı kararı 29 Ağu) ══════════════
           KONUM: dil/hesap sekmesinin ALTI · HERO'NUN İÇİ · hero sınırını
           TAŞMAZ. Görsel dil bar kartlarıyla AYNI (#fff · 1.5px #e6e2f2 ·
           radius 14px · gölge 0 1px 3px).

           ⚠️⚠️ BAR'IN İÇİNDE DEĞİL, BİLEREK. `--pp-navh` üç şeyi birden
              sürüyor: .pp-nav negatif üst boşluğu (/-2) · .pp-hero-body alt
              dolgusu · board haritasının sticky top + height. Kutu bar'ın
              çocuğu olsaydı bar yüksekliği değişir, harita hizası ve hero
              konumu BİRLİKTE kayardı. Kutu hero'nun çocuğu → --pp-navh
              HİÇ değişmiyor.

           ⚠️ `top`: dil çubuğu `position:fixed; top:22px` ve ~40px yüksek →
              62px + 14px nefes = 76px. Dil çubuğu SABİT konumlu olduğu için
              kutuyu ona GÖRE hizalayamayız; sayı bilerek sabit.
           ⚠️ `max-height`: hero 56vh/min 380px. Kutu asla taşmasın diye
              yükseklik hero'dan TÜRETİLİYOR, sabit değil.
           ⚠️ Yalnız ≥1100px: board kuralıyla aynı — mobile HİÇ dokunulmuyor.
              Dar ekranda kutu HİÇ ÜRETİLMEZ demiyoruz (DOM'da duruyor),
              CSS ile gizleniyor; mobil düzen tek satır bile kaymıyor. */
        .pp-must, .pp-must-kap { display: none; }

        @media (min-width: 1100px) {
            /* ⭐ SARMALAYICI KONUMLANDIRIR, KUTU DEĞİL (29 Ağu). Küratör künyesi
               kutunun ALTINA giriyor (kullanıcı görseli "küratör_yeni_konum.png");
               eskiden `.pp-hero-body`nin üç sütunlu ızgarasında dördüncü öğe
               olarak hero'nun ORTASINDA asılı kalıyordu.
               ⚠️ `max-height` KAPTA: kutu + künye BİRLİKTE hero'yu taşmasın. */
            .pp-must-kap {
                position: absolute; z-index: 22;
                top: var(--pp-must-top, 76px); right: 22px;
                width: 300px;
                max-height: calc(100% - var(--pp-must-top, 76px) - 24px);
                display: flex; flex-direction: column; align-items: stretch; gap: 10px;
                pointer-events: none;   /* kap tıklamayı yutmasın */
            }
            .pp-must-kap > * { pointer-events: auto; }
            /* Künye kabın içinde: sağa yaslı, kutunun altında. */
            .pp-must-kap .pp-credit { margin-top: 0 !important; align-self: flex-end; }
            .pp-must {
                width: 100%; min-height: 0;
                display: flex; flex-direction: column; overflow: hidden;
                background: #fff; color: #0f172a;
                border: 1.5px solid #e6e2f2; border-radius: 14px;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 10px 30px rgba(15,23,42,0.16);
                transition: border-color .15s, box-shadow .15s, transform .15s;
            }
            .pp-must:hover {
                border-color: #c4b5fd;
                box-shadow: 0 4px 16px rgba(124,29,219,0.14), 0 14px 36px rgba(15,23,42,0.18);
                transform: translateY(-2px);
            }
            .pp-must-img {
                height: 132px; flex: 0 0 auto;
                background-size: cover; background-position: center;
                background-color: #ede6fb;
            }
            /* Gerçek görsel yoksa STOK KARE KOYMUYORUZ (29 Ağu kararı):
               nötr gradyan + tür simgesi. Kart şablonuyla aynı davranış. */
            .pp-must-img--yok {
                background: linear-gradient(135deg, #ede6fb, #fde3ef);
                display: flex; align-items: center; justify-content: center;
            }
            .pp-must-img--yok::after { content: '📍'; font-size: 1.8rem; opacity: 0.32; }

            .pp-must-body { padding: 13px 15px 15px; min-height: 0; overflow: hidden; }
            .pp-must-kicker {
                display: inline-block;
                font-size: 0.66rem; font-weight: 900; letter-spacing: 0.9px;
                color: #7c1ddb; text-transform: uppercase; margin-bottom: 6px;
            }
            .pp-must-title {
                /* Bar sözleşmesi: 0.86rem / 800 / #334155 — başlık bir tık iri */
                font-size: 1.02rem; font-weight: 800; color: #0f172a;
                line-height: 1.25; margin: 0 0 6px;
            }
            .pp-must-lead {
                font-size: 0.86rem; font-weight: 500; color: #334155;
                line-height: 1.45; margin: 0;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }



        /* ══ CREATOR STUDIO ═══════════════════════════════════════════════
           ⚠️⚠️ 29 AĞU BULGUSU: Studio 10 Temmuz'da eklendi ama o commit
              main.css'e HİÇ DOKUNMAMIŞTI — `kf-st-*` sınıfları yalnız
              studio.js'te geçiyordu, hiçbir yerde tanımlı değildi. Yani
              stüdyo ilk günden beri STİLSİZ ham HTML olarak açılıyordu.
              "Uçtan uca test edildi" notu İŞLEVİ doğruluyordu, görünümü değil.
              Şehir yazarı buradan yazı girecek → kullanılabilir olması şart.

           ⚠️ z-index 10095: "olmazsa olmaz" katmanının (10085) ÜSTÜ — stüdyo
              bir yönetim yüzeyi, okuma katmanı onun altında kalmalı.
              (Kayıt defteri: project-zindex-map) */
        #kf-studio {
            position: fixed; inset: 0; z-index: 10095;
            background: #f6f4fb; overflow-y: auto; overscroll-behavior: contain;
        }
        .kf-st-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px 56px; }
        .kf-st-load, .kf-st-empty { padding: 44px 8px; text-align: center; color: #64748b; font-weight: 600; }

        .kf-st-header {
            position: sticky; top: 0; z-index: 2;
            display: flex; align-items: center; gap: 12px;
            padding: 14px 0; margin-bottom: 6px;
            background: rgba(246,244,251,0.92);
            -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-bottom: 1px solid #e6e2f2;
        }
        .kf-st-brand { font-weight: 900; font-size: 1.05rem; color: #0f172a; flex: 1; text-align: center; }
        .kf-st-close, .kf-st-pub {
            border: 1.5px solid #e6e2f2; background: #fff; color: #0f172a;
            border-radius: 12px; padding: 8px 13px; cursor: pointer;
            font-size: 0.84rem; font-weight: 800; white-space: nowrap;
            transition: border-color .15s, box-shadow .15s;
        }
        .kf-st-close:hover, .kf-st-pub:hover { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,29,219,0.14); }
        .kf-st-pub { background: linear-gradient(135deg,#7c1ddb,#e4181e); color: #fff; border-color: transparent; }

        .kf-st-credit {
            display: flex; align-items: center; gap: 12px;
            background: #fff; border: 1.5px solid #e6e2f2; border-radius: 14px;
            padding: 12px 14px; margin: 10px 0 14px;
        }
        .kf-st-credtxt { display: flex; flex-direction: column; gap: 2px; }
        .kf-st-credtxt b { font-size: 0.9rem; font-weight: 800; }
        .kf-st-credtxt i { font-size: 0.8rem; font-style: normal; color: #64748b; }
        .kf-st-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
        .kf-st-switch input { opacity: 0; width: 0; height: 0; }
        .kf-st-slider {
            position: absolute; inset: 0; cursor: pointer; border-radius: 24px;
            background: #cbd5e1; transition: background .15s;
        }
        .kf-st-slider::before {
            content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
            background: #fff; border-radius: 50%; transition: transform .15s;
        }
        .kf-st-switch input:checked + .kf-st-slider { background: #7c1ddb; }
        .kf-st-switch input:checked + .kf-st-slider::before { transform: translateX(18px); }

        .kf-st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
        .kf-st-chip {
            border: 1.5px solid #e6e2f2; background: #fff; color: #334155;
            border-radius: 999px; padding: 8px 14px; cursor: pointer;
            font-size: 0.84rem; font-weight: 800;
            transition: border-color .15s, background .15s, color .15s;
        }
        .kf-st-chip i { font-style: normal; opacity: 0.55; margin-left: 3px; }
        .kf-st-chip:hover { border-color: #c4b5fd; }
        .kf-st-chip.on { background: #7c1ddb; border-color: #7c1ddb; color: #fff; }
        .kf-st-chip.on i { opacity: 0.8; }
        .kf-st-chip.sm { padding: 6px 11px; font-size: 0.78rem; }

        .kf-st-items { display: flex; flex-direction: column; gap: 12px; }
        .kf-st-add {
            width: 100%; margin-top: 14px; padding: 13px;
            border: 1.5px dashed #c4b5fd; background: #fff; color: #7c1ddb;
            border-radius: 14px; cursor: pointer; font-size: 0.92rem; font-weight: 800;
            transition: background .15s;
        }
        .kf-st-add:hover { background: #faf7ff; }
        .kf-st-note {
            margin-top: 16px; padding: 12px 14px; border-radius: 12px;
            background: #fff; border: 1px solid #e6e2f2;
            font-size: 0.82rem; line-height: 1.5; color: #64748b;
        }
        .kf-st-av {
            width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
            background-size: cover; background-position: center; background-color: #ede6fb;
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 900; color: #7c1ddb;
        }
        .kf-st-thumb {
            width: 74px; height: 56px; border-radius: 10px; flex: 0 0 auto;
            background-size: cover; background-position: center; background-color: #ede6fb;
        }

        /* ── "Olmazsa olmaz" yazı formu ── */
        .kf-st-blog { display: flex; flex-direction: column; }
        .kf-st-blogdil { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
        .kf-st-lbl {
            display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
            font-size: 0.84rem; font-weight: 800; color: #0f172a; margin: 12px 0 5px;
        }
        .kf-st-lbl i { font-style: normal; font-weight: 600; font-size: 0.78rem; color: #94a3b8; }
        .kf-st-inp {
            width: 100%; box-sizing: border-box;
            border: 1.5px solid #e6e2f2; border-radius: 12px;
            padding: 10px 12px; font: inherit; font-size: 0.92rem; color: #0f172a;
            background: #fff; transition: border-color .15s, box-shadow .15s;
        }
        .kf-st-inp:focus { outline: none; border-color: #7c1ddb; box-shadow: 0 0 0 3px rgba(124,29,219,0.12); }
        /* ⚠️ Yazı alanı monospace DEĞİL: yazar düz metin yazıyor, kod değil.
           Satır uzunluğu okuma ölçüsüne yakın kalsın diye genişlik sınırlı. */
        .kf-st-govde { line-height: 1.6; resize: vertical; min-height: 220px; }
        .kf-st-blogalt { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
        .kf-st-blogdurum { font-size: 0.82rem; font-weight: 700; color: #64748b; }

        @media (max-width: 640px) {
            .kf-st-wrap { padding: 0 12px 40px; }
            .kf-st-brand { font-size: 0.95rem; }
        }

        /* ══ "OLMAZSA OLMAZ" OKUMA KATMANI ═════════════════════════════════
           Kutuya tıklanınca açılır. Amaç: kullanıcıyı SIKMAYAN ama çok da kısa
           olmayan bir okuma alanı — kapak · metin · (varsa) video · haritada aç.

           ⚠️ z-index 10085: harita penceresi (10076) ÜSTÜ, en üstteki katman
              (10600) ALTI. Yeni tam ekran katman eklerken project-zindex-map'e
              bak — "çalışmıyor" hatalarının gizli sebebi hep burası.
           ⚠️ MOBİLDE DE AÇILIR. Kutu yalnız masaüstünde görünüyor ama katman
              genel bir okuma yüzeyi; ileride blog bağlantısı mobilden de
              açılacak. Bu yüzden ölçüler `min()` ile, sabit değil. */
        .pp-must-ov {
            position: fixed; inset: 0; z-index: 10085;
            background: rgba(10, 6, 20, 0.72);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            display: flex; align-items: flex-start; justify-content: center;
            padding: min(6vh, 48px) 16px;
            overflow-y: auto; overscroll-behavior: contain;
            animation: pp-must-in 0.18s ease-out;
        }
        @keyframes pp-must-in { from { opacity: 0; } to { opacity: 1; } }
        .pp-must-ov-in {
            position: relative;
            width: min(760px, 100%);
            background: #fff; color: #0f172a;
            border-radius: 18px;
            /* ⚠️⚠️ `overflow: hidden` KALDIRILDI (24 Eyl). Kaydıran kap DIŞARIDAKİ
               katman (.pp-must-ov). Burada overflow:hidden olunca tarayıcı bunu
               bir kaydırma kabı sayıyor ve İÇİNDEKİ yapışkan üst bar ONUNLA
               birlikte yukarı kayıyordu — ölçüldü: bar ekranın 902px üstüne
               çıkıyordu. Köşe yuvarlatma artık ilk/son çocuğun KENDİSİNDE. */
            box-shadow: 0 30px 80px rgba(0,0,0,0.45);
            animation: pp-must-up 0.22s cubic-bezier(.2,.7,.3,1);
        }
        @keyframes pp-must-up { from { transform: translateY(14px); } to { transform: none; } }
        .pp-must-ov-yuk { padding: 60px; text-align: center; color: #64748b; font-size: 1.4rem; }

        /* ══ OKUMA EKRANI — YAPIŞKAN ÜST BAR (24 Eyl) ═════════════════════
           ⚠️ Kapat düğmesi ESKİDEN kapağın üstünde mutlak konumdaydı: uzun
              yazıda aşağı kaydırınca EKRANDAN ÇIKIYORDU ve okuyucu katmanı
              kapatmak için başa dönmek zorundaydı. Artık yapışkan bar.
           ⚠️ Bar kapağın ÜSTÜNDE değil ÖNÜNDE: kapak görseli tam yükseklikte
              kalsın diye normal akışta duruyor (sticky). */
        .pp-must-ov-bar {
            position: sticky; top: 0; z-index: 5; flex: 0 0 auto;
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.92); color: #0f172a;
            -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(15,23,42,0.08);
            border-radius: 18px 18px 0 0;   /* üst köşeler: kap artık kırpmıyor */
        }
        .pp-must-ov-bartitle {
            flex: 1; min-width: 0; font: 800 0.92rem system-ui; letter-spacing: -0.2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pp-must-ov-pay, .pp-must-ov-x {
            flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
            border: 1px solid rgba(15,23,42,0.10); cursor: pointer;
            background: rgba(15,23,42,0.05); color: #0f172a; font-size: 0.95rem;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, border-color 0.15s;
        }
        .pp-must-ov-pay:hover, .pp-must-ov-x:hover { background: rgba(124,29,219,0.12); border-color: #c4a2ff; }

        /* Meta şeridi: yazar · okuma süresi · tarih */
        .pp-must-ov-meta {
            display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
            margin: 0 0 16px; padding-bottom: 14px;
            border-bottom: 1px solid rgba(15,23,42,0.08);
            font: 600 0.78rem system-ui; color: #64748b;
        }
        .pp-must-ov-meta > span { background: #f1f5f9; border-radius: 7px; padding: 4px 9px; }
        .pp-must-ov-meta .pp-must-ov-yazar { cursor: pointer; color: #7c1ddb; background: #f5f3ff; }

        /* İçindekiler — yalnız 2+ ara başlıkta çıkar */
        .pp-must-ov-toc {
            margin: 0 0 20px; padding: 13px 15px; border-radius: 12px;
            background: #f8fafc; border: 1px solid rgba(15,23,42,0.08);
        }
        .pp-must-ov-toc > b { display: block; font: 800 0.72rem system-ui; text-transform: uppercase;
            letter-spacing: 1px; color: #94a3b8; margin-bottom: 8px; }
        .pp-must-ov-toc ol { margin: 0; padding-left: 18px; }
        .pp-must-ov-toc li { margin: 4px 0; }
        .pp-must-ov-toc li.alt { margin-left: 12px; list-style: circle; }
        .pp-must-ov-toc a { color: #334155; text-decoration: none; font: 600 0.88rem system-ui; }
        .pp-must-ov-toc a:hover { color: #7c1ddb; text-decoration: underline; }

        /* ⭐ Bağlı mekân kartı — yazıyı bitiren "peki nerede?" sorusunun cevabı */
        /* ══ VURGULU FOTO-PİN (24 Eyl) ═══════════════════════════════════
           ⚠️ Şehirde 40+ aynı görünümlü rozet var; okuyucu kendi mekânını
              bulamıyordu. Bu işaret BİLEREK farklı: kibrit kutusu boyutunda
              GERÇEK fotoğraf + ad + aşağı ok. Tek olmalı (JS eskisini siler).
           ⚠️ z-index yüksek: diğer rozetlerin ÜSTÜNDE kalsın, yoksa kalabalıkta
              yine kaybolur. */
        .pp-vurgu-mk { position: relative; z-index: 900; pointer-events: none; will-change: transform;
            animation: pp-vurgu-in 0.28s cubic-bezier(.2,.9,.3,1.2); }
        @keyframes pp-vurgu-in { from { opacity: 0; transform: translateY(-8px) scale(0.85); } to { opacity: 1; transform: none; } }
        .pp-vurgu-kart { display: flex; align-items: center; gap: 8px;
            padding: 5px 11px 5px 5px; border-radius: 12px;
            background: linear-gradient(135deg, #7c1ddb, #e4181e); color: #fff;
            box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 0 2.5px rgba(255,255,255,0.92);
            max-width: 210px; }
        .pp-vurgu-foto { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
            background: #2a1a40 center/cover no-repeat; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
        .pp-vurgu-foto--yok::after { content: '📍'; display: flex; width: 100%; height: 100%;
            align-items: center; justify-content: center; font-size: 17px; }
        .pp-vurgu-ad { font: 800 12px system-ui; line-height: 1.25; letter-spacing: -0.2px;
            overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .pp-vurgu-ok { display: block; width: 0; height: 0; margin: -1px auto 0;
            border-left: 7px solid transparent; border-right: 7px solid transparent;
            border-top: 9px solid #e4181e; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }

        /* Yol tarifi: KENDİ navigasyonumuz birincil, Google ikincil */
        /* ⚠️ opacity KULLANMA: kap saydamlaşınca içindeki Google "G"si de soluyor,
           yani logoyu DEĞİŞTİRMİŞ oluyoruz. İkincillik rengi/zeminle veriliyor. */
        .pp-must-ov-gmaps { font-weight: 700 !important;
            background: #f8fafc !important; border-color: rgba(15,23,42,0.12) !important;
            color: #64748b !important; }
        .pp-must-ov-gmaps:hover { background: #f1f5f9 !important; }
        /* ── Özel statülü gezi rotaları — YAZININ EN ALTINDA (25 Eyl) ──────
           ⚠️ Şehir sayfasındaki kart ızgarası DEĞİL: burada okuma akışının
              devamı olarak, geniş ve yatay kartlar duruyor. */
        .pp-must-rota { margin-top: 30px; padding-top: 22px; border-top: 1px solid #eef0f6; }
        .pp-must-rota h3 { margin: 0; font: 800 1.05rem system-ui; color: #0f172a; }
        .pp-must-rota-not { margin: 3px 0 14px; font: 600 0.82rem system-ui; color: #64748b; }
        .pp-must-rota-grid { display: grid; gap: 12px; }
        .pp-must-rota-k {
            display: flex; gap: 13px; align-items: stretch;
            border: 1px solid #e9e6f5; border-radius: 15px; background: #fbfaff;
            padding: 12px; overflow: hidden;
        }
        .pp-must-rota-foto {
            flex: 0 0 132px; align-self: stretch; min-height: 104px; border-radius: 11px;
            background: #ede9fe center/cover no-repeat;
        }
        .pp-must-rota-foto--yok { background: linear-gradient(135deg,#ede9fe,#e0e7ff); }
        .pp-must-rota-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
        .pp-must-rota-b b { font: 800 0.98rem system-ui; color: #0f172a; }
        .pp-must-rota-b p {
            margin: 0; font: 500 0.84rem/1.5 system-ui; color: #475569;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
        }
        @media (max-width: 560px) {
            .pp-must-rota-k { flex-direction: column; }
            .pp-must-rota-foto { flex: 0 0 auto; width: 100%; height: 150px; }
        }

        /* Kartpostal şeridi — editörün seçtiği kareler (mekân kartının altında) */
        .pp-must-kp {
            display: flex; gap: 9px; margin-top: 11px;
            overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
            scroll-snap-type: x mandatory;
        }
        .pp-must-kp::-webkit-scrollbar { display: none; }
        .pp-must-kp-kare {
            flex: 0 0 auto; width: 122px; height: 88px; padding: 0; cursor: zoom-in;
            border-radius: 11px; border: 1px solid rgba(15,23,42,0.10);
            background: #ede9fe center/cover no-repeat; scroll-snap-align: start;
            transition: transform 0.14s, border-color 0.15s;
        }
        .pp-must-kp-kare:hover { transform: translateY(-2px); border-color: #c4a2ff; }
        @media (max-width: 560px) { .pp-must-kp-kare { width: 104px; height: 76px; } }

        .pp-must-ov-poi { margin-top: 26px; }
        .pp-must-ov-poi > h3 {
            font: 800 0.72rem system-ui; text-transform: uppercase; letter-spacing: 1px;
            color: #94a3b8; margin: 0 0 10px;
        }
        .pp-must-poi-kart {
            display: flex; gap: 13px; align-items: stretch;
            border: 1px solid rgba(15,23,42,0.10); border-radius: 14px; overflow: hidden;
            background: #fff; box-shadow: 0 4px 16px rgba(15,23,42,0.06);
        }
        .pp-must-poi-foto {
            flex: 0 0 116px; min-height: 116px;
            background: #ede9fe center/cover no-repeat;
        }
        .pp-must-poi-b { flex: 1; min-width: 0; padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 5px; }
        .pp-must-poi-b > b { font: 800 1rem system-ui; color: #0f172a; letter-spacing: -0.2px; }
        .pp-must-poi-puan { align-self: flex-start; font: 800 0.78rem system-ui; color: #16a34a; }
        .pp-must-poi-adres { font: 600 0.8rem system-ui; color: #64748b; font-style: normal; line-height: 1.4; }
        .pp-must-poi-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
        .pp-must-poi-acts > * {
            display: inline-flex; align-items: center; gap: 6px;
            text-decoration: none; cursor: pointer;
            font: 800 0.78rem system-ui; padding: 8px 13px; border-radius: 10px;
            border: 1px solid rgba(124,29,219,0.25); background: #f5f3ff; color: #7c1ddb;
        }
        /* Marka işaretleri: "K" bizim, "G" Google'a çıkan bağlantı */
        .pp-mark-k { width: 15px; height: 15px; display: block; flex: 0 0 auto; border-radius: 3px; }
        .pp-mark-g { width: 14px; height: 14px; display: block; flex: 0 0 auto; }
        .pp-must-poi-acts > *:hover { background: #ede9fe; }
        @media (max-width: 560px) {
            .pp-must-poi-kart { flex-direction: column; }
            .pp-must-poi-foto { flex: 0 0 132px; width: 100%; }
            .pp-must-poi-b { padding: 0 14px 14px; }
        }

        .pp-must-ov-kapak {
            height: min(38vh, 300px);
            background-size: cover; background-position: center;
            display: flex; align-items: flex-end;
            position: relative;
        }
        /* Gerçek görsel yoksa nötr gradyan — STOK KARE KOYMUYORUZ (29 Ağu). */
        .pp-must-ov-kapak--yok { background: linear-gradient(135deg, #ede6fb, #fde3ef); }
        .pp-must-ov-kapak::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(10,6,20,0.88) 0%, rgba(10,6,20,0.25) 55%, rgba(10,6,20,0) 100%);
        }
        .pp-must-ov-bas { position: relative; z-index: 2; padding: 22px 26px; color: #fff; }
        .pp-must-ov-bas h2 {
            font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900;
            line-height: 1.15; margin: 6px 0 8px; text-shadow: 0 2px 18px rgba(0,0,0,0.5);
        }
        .pp-must-ov-bas p {
            margin: 0; font-size: 1rem; font-weight: 500;
            color: rgba(255,255,255,0.92); max-width: 52ch;
        }
        .pp-must-ov-kapak .pp-must-kicker { color: #ffe600; }

        /* ⚠️ OKUMA ÖLÇÜSÜ: satır uzunluğu 62ch'i geçmesin. Geçince göz satır
           başını kaybediyor ve "uzun" hissi veriyor — asıl şikâyet uzunluk
           değil, okunmazlık oluyor. */
        .pp-must-ov-govde { padding: 26px 26px 26px; border-radius: 0 0 18px 18px; background: #fff; }
        .pp-must-ov-govde > p {
            margin: 0 0 16px; max-width: 62ch;
            font-size: 1rem; line-height: 1.72; color: #334155;
        }
        /* Giris paragrafi LEAD: okuyucu yaziya bir tonda giriyor, duz duvar degil. */
        .pp-must-ov-govde > p:first-of-type {
            font-size: 1.07rem; line-height: 1.66; color: #1e293b; font-weight: 500;
        }
        /* ⚠️ BASLIK GOVDEDEN AYIRT EDILEBILIR OLMALI. Eskiden 1.05rem'di, govde
           1rem — aradaki fark goz tarafindan SECILMIYORDU ve yazi tek blok gibi
           okunuyordu. Boyut + ustundeki renkli cizgi ikisi birlikte ayiriyor. */
        .pp-must-ov-govde > h2 {
            margin: 34px 0 10px; font-size: 1.26rem; font-weight: 800; color: #0f172a;
            letter-spacing: -0.3px; line-height: 1.3;
        }
        /* Aksan cizgisi ::before ile ve AKIS ICINDE (block) — mutlak konum
           kullanilmadi, boylece dolgunun disina TASAMAZ. */
        .pp-must-ov-govde > h2::before {
            content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
            margin-bottom: 11px; background: linear-gradient(90deg, #7c1ddb, #c026d3);
        }
        .pp-must-ov-govde > h3 {
            margin: 26px 0 8px; font-size: 1.06rem; font-weight: 800; color: #1e293b;
            letter-spacing: -0.15px;
        }
        .pp-must-ov-govde > h2:first-child, .pp-must-ov-govde > h3:first-child { margin-top: 0; }
        .pp-must-ov-govde > p:last-of-type { margin-bottom: 0; }
        .pp-must-ov-govde b { font-weight: 800; color: #0f172a; }
        .pp-must-ov-govde a { color: #7c1ddb; text-underline-offset: 2px; }

        .pp-must-ov-vid { margin-top: 24px; }
        .pp-must-ov-vid h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; }
        /* 16:9 kap — iframe yüksekliğini içerikten türetmek titremeye yol açıyor. */
        .pp-must-ov-vidkap {
            position: relative; width: 100%; aspect-ratio: 16 / 9;
            border-radius: 12px; overflow: hidden; background: #0b1020;
        }
        .pp-must-ov-vidkap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

        .pp-must-ov-alt {
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef0f6;
        }
        .pp-must-ov-map {
            /* ⚠️ Bu kural .pp-must-poi-acts > * KURALINDAN SONRA geliyor ve aynı
               ağırlıkta → display'i orada da BU belirliyor. K işareti metinle
               aynı satırda kalsın diye inline-flex burada da yazılı. */
            display: inline-flex; align-items: center; gap: 6px;
            border: 1.5px solid #e6e2f2; background: #fff; color: #0f172a;
            border-radius: 12px; padding: 9px 14px; cursor: pointer;
            font-size: 0.88rem; font-weight: 800;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .pp-must-ov-map:hover { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,29,219,0.14); }
        /* "Tam sayfa" — yazının kendi adresine giden GERÇEK bağlantı.
           Harita düğmesiyle AYNI görsel dil ama <button> değil <a>: asıl amaç
           paylaşılabilirlik, yani sağ tık → "bağlantıyı kopyala" çalışmalı. */
        .pp-must-ov-tam {
            border: 1.5px solid #e6e2f2; background: #fff; color: #0f172a;
            border-radius: 12px; padding: 9px 14px; text-decoration: none;
            font-size: 0.88rem; font-weight: 800; white-space: nowrap;
            /* ⚠️ `line-height: normal` ŞART — <button> ile aynı yükseklikte
               dursun diye. Ölçüldü: <button> normal (≈18,3px) alıyor, <a> ise
               gövdeden 1,5 (21,12px) MİRAS ALIYOR → yan yana duran iki düğme
               41px ve 38px oluyor, 3px kayıyorlardı. Tek satırlık fark ama
               şeritte gözle görülüyor. */
            line-height: normal;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .pp-must-ov-tam:hover { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,29,219,0.14); }
        .pp-must-ov-yazar { font-size: 0.82rem; font-weight: 700; color: #64748b; margin-left: auto; }
        /* Yazar KIMLIK tasiyorsa profili acilabilir; tasimiyorsa duz metin kalir. */
        .pp-must-ov-yazar[data-uid] { cursor: pointer; color: #4f46e5; }
        .pp-must-ov-yazar[data-uid]:hover { text-decoration: underline; }

        @media (max-width: 640px) {
            .pp-must-ov { padding: 0; }
            .pp-must-ov-in { width: 100%; min-height: 100%; border-radius: 0; }
            .pp-must-ov-bar { border-radius: 0; }
            .pp-must-ov-govde { padding: 22px 18px 24px; }
            .pp-must-ov-govde > h2 { margin-top: 28px; font-size: 1.17rem; }
            .pp-must-ov-govde > h3 { margin-top: 22px; }
            .pp-must-ov-bas { padding: 18px; }
        }

        /* Dar/alçak masaüstünde hero zaten kısa → kutu sığmazsa GİZLE.
           Kırpılmış bir kutu göstermektense hiç göstermemek yeğdir. */
        @media (min-width: 1100px) and (max-height: 620px) {
            .pp-must { display: none; }
        }

        .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-cuisine { 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; }
        /* ⭐ GÖRSELİ HİÇ BULUNAMAYAN KART (28 Eyl, kullanıcı bildirimi):
           168 px'lik boş kutu kartı "bozuk" gösteriyordu. Havuz kartlarının
           çoğu yapı gereği görselsiz — kutuyu ince bir şeride indiriyoruz.
           ⚠️ TAMAMEN GİZLEMİYORUZ: ince şerit kartın üst sınırını koruyor,
              ızgarada kartlar birbirine yapışmıyor.
           ⚠️ Emoji de kalkıyor — 6 px'lik şeritte yarısı kırpılırdı. */
        .pp-card-img--bos { height: 6px; min-height: 6px; }
        .pp-card-img--bos::after { content: none; }
        .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;
        }
        /* 🍽️ Mutfak rozeti — tür rozetiyle (`.pp-vtype`) karışmasın diye
           dolgusuz/çerçeveli: "burası ne?" ile "hangi mutfak?" ayrı okunsun. */
        .pp-cuisine {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
            color: #0f766e; background: #f0fdfa; border: 1px solid #5eead4;
            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; }
        /* 🌐 Web sitesi — telefonun ikizi. Admin formundan giriliyordu ama
           okuma ekranında hiç çizilmiyordu (28 Eyl'de ölçüldü). */
        .pp-acts a.pp-site { color: #6d28d9; background: #f3eafe; }
        .pp-acts a.pp-site:hover { background: #6d28d9; color: #fff; }
        .pp-hotel-sub a.pp-tel, .pp-hotel-sub a.pp-site { text-decoration: none; }
        /* 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; }
        /* Fiyat damgası: gömülü fiyat belirli tarihlerin fiyatı — sessiz ama görünür kalmalı. */
        .pp-bnb-asof { font-size: .78rem; color: #64748b; margin: -8px 0 14px; display: flex; align-items: center; gap: 6px; }
        .pp-bnb-asof::before { content: '🕒'; font-size: .85rem; }
        .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; }
        /* ⭐ Semt + çalışma saati (28 Eyl). Admin bunları giriyordu ama otel
           kartı hiç basmıyordu; stayList() beyaz listesi de taşımıyordu. */
        .pp-bnb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
        .pp-bnb-meta span { font-size: 0.7rem; font-weight: 600; color: #64748b;
            background: #f1f5f9; padding: 2px 7px; border-radius: 6px;
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pp-bnb-stars { margin-left: 6px; font-size: 0.74rem; letter-spacing: 0; }
        /* ☎️/🌐 bağlantıları: kartın dış <a> sarmalayıcısının DIŞINDA duruyor. */
        .pp-ph-acts { padding: 0 13px 11px; margin-top: 0; }
        .pp-ph-acts a { font-size: 0.72rem; padding: 4px 9px; }
        .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; }

        /* ⭐ YAN YANA İKİ KART (27 Eyl, kullanıcı kararı). Bu sınıfı HEM otel
           HEM Airbnb board listesi kullanıyor → ikisi birden iki sütuna geçer,
           "aynı tasarım" isteği yapısal olarak korunur.
           ⚠️ SABİT `1fr 1fr` DEĞİL: liste sütunu board'un ~%39'u ve pencere
              daralınca iki kart ezilirdi. auto-fill + minmax, yer varken 2,
              yokken 1 sütun verir — karar tarayıcıda, varsayımda değil. */
        .pp-bnb-grid--board { grid-template-columns: repeat(auto-fill, minmax(178px, 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; }

        /* ── HARİTA PİNLERİ — SADE ÇİZGİ (25 Eyl, kullanıcı isteği) ────────
           Eskiden emoji + parlak küre: her işletim sisteminde başka çiziliyor,
           rengi kategoriden bağımsız, küçükken okunmuyordu. Artık ana sayfadaki
           alt barla aynı dil — beyaz daire, kategori renginde ince çerçeve ve
           aynı renkte çizgi ikon.
           ⚠️ Yan kazanç ÖLÇÜLEBİLİR: emoji yazıtipi rasterleştirmesi gitti,
              kaydırmada daha az boya işi kalıyor. */
        .poi-mk { background: none; border: none; }
        .poi-badge {
            width: 30px; height: 30px; border-radius: 50%;
            background: #fff; color: var(--c, #64748b);
            border: 2px solid var(--c, #64748b);
            box-shadow: 0 2px 8px rgba(15,23,42,0.28);
            display: flex; align-items: center; justify-content: center;
            line-height: 1; cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .poi-badge svg { width: 17px; height: 17px; display: block; }
        .poi-badge b { font: 900 0.82rem system-ui; }
        .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; }
        /* Rotaya seçilmiş durak: DOLU daire + sıra numarası. Tek dolu pin
           türü bu — "seçtiklerim" bir bakışta ayrılsın. */
        .poi-badge.poi-sel {
            width: 32px; height: 32px; color: #fff;
            background: #7c1ddb; border-color: #fff;
            box-shadow: 0 2px 10px rgba(124,29,219,0.45);
        }
        /* Küme balonu: "gerisi" ızgarada toplanır (bkz. place.js mmCluster) */
        .poi-badge.poi-cl { width: 32px; height: 32px; color: #334155; border-color: #cbd5e1; }
        .poi-badge.poi-cl-b { width: 38px; height: 38px; }
        .poi-badge.poi-cl-b b { font-size: 0.86rem; }
        .maplibregl-marker:hover .poi-badge { transform: translateY(-3px) scale(1.12); box-shadow: 0 6px 16px rgba(15,23,42,0.34); }

        /* ── 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. */
        /* ⚠️ AÇIK ZEMİN: MapLibre tuvali karo gelene kadar saydam. Sahne koyu
           kalırsa her kaydırmada ekran kararıyordu (kullanıcı bildirimi 25 Eyl).
           Stildeki `kf-bg` katmanıyla aynı renk — ikisi birden, çünkü stil
           yüklenmeden önce de bir kare boyanıyor. */
        .pp-mm-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: #eef1f6; }
        /* ⚠️⚠️ Ö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: 34px; height: 34px; color: #b45309; border-color: #d97706; }
        .poi-badge.poi-hotel svg { width: 19px; height: 19px; }

        /* 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; }
        /* ⭐ ALT NAVİGASYON BARI (25 Eyl, kullanıcı isteği) ────────────────
           Eskiden solda 84px'lik mavi bir RAY vardı: haritanın enini yiyordu
           ve telefonda başparmağın uzağındaydı. Artık ana sayfadaki mobil
           5'li barın AYNI tasarımı — koyu buzlu cam, ince çizgi ikonlar,
           altta etiket. Uçak seçeneği kaldırıldı (kullanıcı kararı). */
        /* ⚠️ position:relative — masaüstünde hap BUNA göre ortalanıyor. */
        .jp-nav { height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; }
        .jp-bn {
            flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-around;
            height: calc(62px + env(safe-area-inset-bottom, 0px));
            padding: 0 4px env(safe-area-inset-bottom, 0px);
            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);
            transition: height 0.26s ease, opacity 0.2s ease;
        }
        /* Aktif navigasyon: barı topla (tam ekran harita) — eski rayın davranışı */
        #jp-root.jp-navigating .jp-bn { height: 0; opacity: 0; pointer-events: none; overflow: hidden; border-top: none; }
        #jp-root.jp-navigating #jp-extra { display: none; }
        .jp-bn-item {
            flex: 1; background: none; border: none; cursor: pointer; text-decoration: none;
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 8px 2px 9px; color: #aeb6d0; font: 700 10px system-ui; min-width: 0;
            transition: color 0.12s, transform 0.1s;
        }
        .jp-bn-item:active { transform: scale(0.92); }
        .jp-bn-item:hover { color: #e9d5ff; }
        .jp-bn-item.on { color: #fff; }
        .jp-bn-ic { position: relative; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
        .jp-bn-ic svg { width: 24px; height: 24px; display: block; }
        /* Aktif mod: ana sayfadaki FAB'ın mor dili, ama daha sakin bir halka */
        .jp-bn-item.on .jp-bn-ic::before {
            content: ''; position: absolute; inset: -6px -9px; border-radius: 999px;
            background: linear-gradient(135deg, rgba(124,29,219,0.55), rgba(228,24,30,0.35));
        }
        .jp-bn-item.on .jp-bn-ic svg { position: relative; }
        .jp-bn-lbl { letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        /* Süre rozeti — YALNIZ hesaplanınca görünür (bkz. refreshModeEtas) */
        .jp-bn-eta {
            position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
            display: none; padding: 1px 5px; border-radius: 999px;
            background: #7c1ddb; color: #fff; font: 800 9px system-ui; white-space: nowrap;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .jp-bn-eta.on { display: block; }
        .jp-bn-x { opacity: 0.72; }
        .jp-bn-x:hover { opacity: 1; }

        /* ⭐ MASAÜSTÜNDE ORTALI ÖBEK (25 Eyl, kullanıcı: "ekrana yaymak iyi
           olmadı, ortada yan yana daha güzel görünecek").
           ⚠️ MOBİL DOKUNULMUYOR: telefonda bar tam genişlik kalmalı — ana
              sayfadaki 5'li navigasyonla aynı olması bilinçli bir karar.
           ⚠️ Haritanın ÜSTÜNE yüzdürmedim: alt kenarda zaten paylaş düğmesi
              (solda) ve "başlat" düğmesi (sağda) duruyor; ortada yüzen bir
              öbek dar masaüstünde onlarla çakışırdı. Kendi satırında,
              ortalanmış bir hap olarak duruyor. */
        @media (min-width: 641px) {
            /* ⚠️⚠️ HAP HARİTANIN ÜSTÜNDE YÜZÜYOR, kendi satırında DEĞİL.
               İlk sürümde kendi satırındaydı ve haritanın altında BEYAZ BİR
               ŞERİT bırakıyordu (kullanıcı ekran görüntüsüyle bildirdi).
               Akıştan çıkınca .jp-mapwrap (flex:1) bütün alanı kaplıyor. */
            .jp-bn {
                position: absolute; left: 50%; bottom: 18px; z-index: 490;
                transform: translateX(-50%);
                width: max-content; margin: 0; height: auto;
                padding: 5px 7px; border-radius: 20px;
                border: 1px solid rgba(255,255,255,0.10);
                box-shadow: 0 10px 30px rgba(0,0,0,0.38);
                justify-content: center; align-items: stretch;
                /* ⚠️ Alt kenarda solda paylaş, sağda "başlat" düğmesi var.
                   Hap onların arasında kalmalı → iki yana 200px pay. */
                max-width: calc(100% - 200px);
            }
            .jp-bn-item {
                flex: 0 0 auto; min-width: 92px;
                padding: 9px 10px 10px; border-radius: 14px;
            }
            .jp-bn-item:hover { background: rgba(255,255,255,0.06); }
            .jp-bn-item.on { background: rgba(255,255,255,0.08); }
            #jp-root.jp-navigating .jp-bn {
                opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(14px);
            }
        }
        /* Dar masaüstü: beş öğe + iki yandaki düğmeler sığsın diye öğeler incelir */
        @media (min-width: 641px) and (max-width: 900px) {
            .jp-bn-item { min-width: 68px; padding: 8px 6px 9px; font-size: 9.5px; }
            .jp-bn { max-width: calc(100% - 150px); }
        }
        .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; }
        /* mod seçici artık ALT BARDA (.jp-bn yukarıda) — 25 Eyl */
        .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 kaldırıldı (25 Eyl): paylaş düğmesi sağ sütuna taşındı. */
        /* Paylaş seçim menüsü (tek buton → Sadece rota / Canlı birlikte) */
        /* ⚠️ Menü düğmeyle birlikte SAĞA taşındı: solda açılsaydı, basılan
           düğmeden uzakta bir yerde beliriyordu. */
        .jp-sharemenu { position: absolute; right: 62px; bottom: 300px; z-index: 510; 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; }
        /* ── SAĞ SÜTUN: TEK TASARIM (25 Eyl, kullanıcı isteği) ─────────────
           Eskiden her düğme başka türlüydü: paylaş SOL ALTTA 40px'lik ayrı bir
           daire, ötekiler 42px, kimi %55 kimi %60 saydam. Artık hepsi AYNI:
           aynı ölçü, aynı zemin, aynı gölge, aynı aralık.
           ⚠️ DURUM SAYDAMLIKLA DEĞİL RENKLE anlatılıyor. Eskiden "kapalı"
              demek için düğme soluklaştırılıyordu; soluk düğme "devre dışı"
              gibi okunuyor ve basılmıyor. Artık kapalı = gri ikon,
              açık = mor ikon + mor halka. Ölçü ve zemin hiç değişmiyor. */
        .jp-mapbtn {
            position: absolute; right: 10px; z-index: 500; cursor: pointer;
            width: 44px; height: 44px; border-radius: 50%; border: none;
            background: #fff; color: #94a3b8;
            box-shadow: 0 3px 10px rgba(0,0,0,0.22); font-size: 1.1rem;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.15s, box-shadow 0.15s, transform 0.1s;
        }
        .jp-mapbtn:hover { color: #0f172a; box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
        /* Açık/etkin durum — sütundaki HER düğme için aynı dil */
        .jp-mapbtn.on { color: #7c1ddb; box-shadow: 0 0 0 2px rgba(124,29,219,.45), 0 3px 10px rgba(0,0,0,.22); }
        /* Sütun sırası (üstten alta): ⬇️ indir · 📤 paylaş · 🆘 SOS ·
           🚏 duraklar · 🔊 ses · 📍 konumum. Aralık 54px, hepsi eşit. */
        #jp-recenter { bottom: 90px; }
        .jp-voice { bottom: 144px; }
        .jp-stopsbtn { bottom: 198px; }
        .jp-sosbtn { bottom: 252px; }
        .jp-sharebtn { bottom: 306px; }
        .jp-offbtn { bottom: 360px; }
        /* ⛔ SOS TEK İSTİSNA — bilerek kırmızı. Acil durumda aranan düğme
           ötekilerin arasında kaybolmamalı; ölçüsü/şekli aynı, YALNIZ rengi
           farklı. (Önceki turda da bu gerekçeyle ayrılmıştı.) */
        .jp-sosbtn { background: linear-gradient(135deg,#e4181e,#b0121a); color: #fff;
            box-shadow: 0 3px 12px rgba(228,24,30,.45); }
        .jp-sosbtn:hover { color: #fff; box-shadow: 0 4px 16px rgba(228,24,30,.55); }
        /* 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-sharemenu { bottom: 320px; right: 64px; }
            /* 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);
        }
        /* ⚠️⚠️ YIĞIN BAĞLAMI TUZAĞI — arama önerileri şeridin ALTINDA KALIYORDU.
           `backdrop-filter` HER .wl-card'ı AYRI bir yığın bağlamı yapar. Üç kart da
           `position:static; z-index:auto` olduğu için kardeşler DOM SIRASIYLA
           boyanıyor → sonra gelen hizmet şeridi (ve panel) hero'nun üstüne biniyor.
           `.wl-sug`'un `z-index:60`'ı hero'nun İÇİNDE hapis: dışarıdaki kardeşle
           yarışamaz, çünkü z-index yalnız AYNI bağlam içinde karşılaştırılır.
           ⚠️ Ölçüldü (28 Ağu): öneri listesinin alt ucunda elementFromPoint
              `.wl-svc` döndürüyordu. Kanıt: görseller/arama_kart_sonuc_eziliyor.png
           ⚠️ z-index'i .wl-sug'da BÜYÜTMEK ÇÖZMEZ (denemeye kalkma) — sorun sayının
              küçüklüğü değil, YANLIŞ BAĞLAMDA olması. Sıra KARTLAR arasında kurulur.
           ⚠️ `position:relative` güvenli: hero içindeki mutlak öğelerin hepsinin
              zaten daha yakın konumlu bir atası var (welcome-search / wl-cc-pin /
              maplibregl-map) — ölçüldü, hiçbirinin kapsayıcı bloğu değişmiyor. */
        .welcome-landing .wl-hero.wl-card { position: relative; z-index: 3; }
        .welcome-landing .wl-services.wl-card,
        .welcome-landing .wl-panel.wl-card { position: relative; z-index: 1; }
        .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 18px; letter-spacing: -0.5px; text-shadow: 0 4px 24px rgba(0,0,0,0.3); }   /* alt açıklama kalktı (20 Eyl) → boşluk başlıkta */
        /* ⚠️ BAŞLIK ↔ ARAMA BARI HİZASI (23 Eyl, kullanıcı isteği): başlık kutusu
           arama barıyla UÇTAN UCA aynı genişlikte (ikisi de width:100% + aynı
           max-width) ve metin o kutunun TAM ORTASINDA. İkisi de .wl-hero-left'in
           (flex column, align-items varsayılan stretch) doğrudan çocuğu → sol ve
           sağ kenarlar birebir aynı hizada başlıyor/bitiyor.
           ⛔ Ortalamayı `align-items:center` ile YAPMA: o, kutuyu içeriğine göre
              daraltır ve başlık arama barından DAR kalır — istenen hiza bozulur. */
        .welcome-landing .wl-title { width: 100%; max-width: 1100px; text-align: center; }
        .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 { width: 26px; height: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
        /* Çizgi ikonlar (SVG, currentColor) — iOS tab bar dili: ince, tek renk, etiketle aynı tonda */
        .kf-bn-ic svg { width: 24px; height: 24px; display: block; }
        .kf-bn-fab svg { width: 28px; height: 28px; display: block; }
        .kf-bn-item:active .kf-bn-ic, .kf-bn-item:hover .kf-bn-ic { color: #e9d5ff; }
        .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;
            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; cursor: zoom-in; }
            .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; }
            /* Tam adres satırı — detay panelinde, tıklanabilir (24 Eyl) */
            .pp-bs-adres { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px;
                text-decoration: none; color: rgba(255,255,255,0.82); font: 600 12px system-ui;
                line-height: 1.45; border-radius: 8px; padding: 7px 9px;
                background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
                transition: border-color 0.15s, color 0.15s; }
            .pp-bs-adres:hover { border-color: #c4a2ff; color: #fff; }
            .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; cursor: zoom-in; }
            .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; }

            /* AÇIKLAMASIZ KART — "eksik" değil "KISA AMA TAM"
               Kullanıcı kararı (30 Ağu): editorialSummary için para verilmeyecek;
               kartların çoğu açıklamasız kalacak ama düzgün görünecek.

               ⚠️ ÖLÇÜLDÜ (isparta, 31 Ağu, canlı, SW KALDIRILARAK — bkz. ders S):
               17 kartın 5'inde açıklama var. Plan "kartlar düzensiz" diyordu ama
               ölçüm bunu DÜZELTTİ: ızgara zaten esnetiyor (align-items:normal =
               stretch), aynı SATIRDAKİ kartlar ZATEN eşitti (463/463, 443/443…).
               Asıl kusur kartın İÇİNDEydi: `.pp-card-foot`'un margin-top:auto'su
               yüzünden başlık ile puan satırı arasında 82px'lik DELİK kalıyor,
               kart "içeriği eksik" gibi okunuyordu.

               ÇÖZÜM: artan yeri GÖRSEL yutsun. Kart dolu görünür, satır kenarları
               hizalı kalır, hiçbir metin uydurulmaz ve zengin karttan içerik
               KISILMAZ (açıklamayı 2 satıra düşürmek gerçek içeriği gizlerdi).
               ⚠️ Fotoğrafsız kartta dev boş degrade oluşur mu diye ÖLÇÜLDÜ:
               yer tutucularda büyüme ≤199px, gerçek fotoğrafta 248px. Tavan yine
               de konuldu — havuz verisi değişince kontrolden çıkmasın.
               ⛔ Izgaraya height/overflow VERİLMEDİ (yukarıdaki uyarı geçerli).
               ⚠️ Yalnız masaüstü panosu: bu blok @media (min-width:1100px) içinde,
               mobil kart düzenine DOKUNULMUYOR. Konaklama ızgarası hariç tutuldu. */
            .pp-board-main .pp-grid:not(.pp-grid--stay) .pp-card-img {
                flex: 1 1 auto;
                min-height: 168px;
                max-height: 260px;
            }
            .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); }

/* ── [AZ-3] Bekleyen Onaylar: web doğrulama kanıtı ────────────────────────
   ⚠️ Renk BİR KARAR DEĞİL, bir ŞÜPHE derecesi: "yok" kırmızı ama silme emri
      değil — kanıt okunmadan karar verilmesin diye alıntı hep görünür. */
.kf-bo-kanit{display:block;margin-top:6px;padding:6px 8px;border-radius:8px;
  border:1px solid #e3e6ec;background:#f7f8fa;font-size:11.5px;line-height:1.45}
.kf-bo-kanit b{display:block;font-size:11px;letter-spacing:.2px}
.kf-bo-kanit q{display:block;margin:3px 0;color:#444;font-style:italic}
.kf-bo-kanit a{color:#1668c3;text-decoration:none}
.kf-bo-kanit a:hover{text-decoration:underline}
.kf-bo-kanit--yok{border-color:#f0c2c2;background:#fdf3f3}
.kf-bo-kanit--yok b{color:#b3261e}
.kf-bo-kanit--var{border-color:#c7e6cd;background:#f3faf4}
.kf-bo-kanit--var b{color:#1b6e2f}
.kf-bo-kanit--belirsiz b{color:#7a6a20}

/* ── ⚖️ Admin → Hukuki Sayfalar ───────────────────────────────────────────
   ⚠️ Ekran SALT OKUR: sayfalar `npm run hukuki` ile üretiliyor. Burada bir
      "düzenle" düğmesi OLMAMALI — panelden yazılan metin bir sonraki
      üretimde kaybolur ve envanterle ayrışır. */
.kf-hk-liste{display:flex;flex-direction:column;gap:8px;margin:14px 0}
/* ══ 🔗 Kart düzenleme — link odaklı form (admin) ═════════════════════ */
/* ⭐ Link kutusu ANA EYLEM: görsel olarak da öyle durmalı, formun en üstünde
   ve vurgulu. Eskiden en alttaydı ve "ek bir doğrulama" gibi duruyordu. */
.kf-cf-linkl{display:block;background:#faf5ff;border:1px solid #e9d5ff;border-radius:12px;
  padding:10px 12px;font-size:.76rem;font-weight:800;color:#6d28d9}
.kf-cf-linkl>div,.kf-cf-linkl>.kf-st-geo{margin-top:7px}
/* ⚠️ Alan/etiket stilini BURADA veriyoruz: bu ızgara ÜÇ ayrı ekranda
   kullanılıyor (admin taslak formu · admin canlı düzenleme · Creator
   Studio) ve hiçbirinde ortak bir input stili yoktu — stil ana forma
   bırakılsa Studio'da çıplak kutular görünürdü. */
.kf-cf-grid label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;
  font-weight:800;color:#64748b;min-width:0}
.kf-cf-grid input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e2e8f0;
  border-radius:9px;font-size:.86rem;font-family:inherit;font-weight:500;background:#fff;color:#0f172a}
.kf-cf-grid input:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18)}
/* Ne geldi / ne gelmedi — elle dolduracak kişinin bakacağı tek yer. */
.kf-cf-rapor{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;margin:8px 0 4px}
.kf-cf-rbas{font-size:.82rem;font-weight:700;color:#0f172a;margin-bottom:7px}
.kf-cf-kapali{margin-left:8px;color:#b91c1c;font-weight:800}
.kf-cf-rliste{display:flex;flex-wrap:wrap;gap:6px}
.kf-cf-r{font-size:.74rem;padding:2px 8px;border-radius:99px;white-space:nowrap}
.kf-cf-r.var{background:#dcfce7;color:#15803d}
.kf-cf-r.yok{background:#fef3c7;color:#92400e}
.kf-cf-rnot{font-size:.74rem;color:#64748b;margin-top:7px}
/* Alanlar iki sütun; dar ekranda tek sütuna iner. */
.kf-cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 12px;margin:4px 0}
/* ⛔ Puan SALT OKUR: elle girilebilir olsaydı "puan var, yorum yok" hayalet
   puan deseni geri gelirdi (27 Eyl'de 66 kart bu yüzden temizlendi). */
.kf-cf-puan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f1f5f9;
  border-radius:10px;padding:8px 12px;margin:6px 0 2px}
.kf-cf-pv{font-weight:900;color:#0f172a}
.kf-cf-py{font-size:.8rem;color:#475569}
.kf-cf-pn{font-size:.72rem;color:#94a3b8;margin-left:auto}

/* ══ 🔎 Havuzdan ekle (admin) ═════════════════════════════════════════ */
/* Google havuzunda olup rehberde KARTI OLMAYAN yerler. "＋" → rehbere eklenir
   ve düzenleme formu LİNKİ DOLU açılır (tek "Çek" ile adres/saat/telefon/site). */
.kf-cc-addrow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.kf-adm-ccpool{background:#f0fdfa;border-color:#5eead4;color:#0f766e;font-weight:800}
.kf-adm-ccpool:disabled{opacity:.45;cursor:not-allowed}
.kf-cc-poolnum{font-weight:900}
.kf-live-havuz{background:#f0fdfa;border:1px solid #5eead4;color:#0f766e;font-weight:800;
  border-radius:9px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.kf-live-havuz:hover{background:#0f766e;color:#fff}
.kf-hv-box{max-width:620px}
.kf-hv-ara{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e2e8f0;
  border-radius:10px;font-size:.9rem;font-family:inherit;margin:10px 0 8px}
.kf-hv-liste{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto}
.kf-hv-row{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid #eef2f7;border-radius:10px;background:#fff}
.kf-hv-row:hover{border-color:#5eead4;background:#f8fffe}
.kf-hv-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.kf-hv-b b{font-size:.88rem;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-hv-meta{font-size:.74rem;color:#64748b}
.kf-hv-add{flex:0 0 auto;font-size:1rem;font-weight:900;padding:4px 12px;
  background:#0f766e;color:#fff;border-color:#0f766e}
.kf-hv-secs{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kf-hv-sec{text-align:left;padding:11px 13px;font-size:.92rem}
.kf-hv-sec:disabled{opacity:.45;cursor:not-allowed}

/* ══ 🖼️ Şehir kapakları (admin) ═══════════════════════════════════════ */
.kf-hero-ara{width:100%;max-width:340px;padding:9px 13px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:.9rem;margin:0 0 14px;background:#fff}
/* ⚠️ auto-fill + minmax: 179 kart var, sabit sütun sayısı dar ekranda ezerdi. */
.kf-hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.kf-hero-kart{position:relative;display:block;padding:0;border:1px solid #eceef4;border-radius:12px;
  overflow:hidden;background:#f8fafc;cursor:pointer;aspect-ratio:16/10;transition:transform .14s,box-shadow .14s}
.kf-hero-kart:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.13)}
.kf-hero-kart img{width:100%;height:100%;object-fit:cover;display:block}
.kf-hero-ad{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:.78rem;font-weight:700;
  color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.kf-hero-yok{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:#94a3b8;font-size:.78rem}
/* Aday seçim ekranı */
.kf-hero-simdi{background:#fff;border:1px solid #eceef4;border-radius:14px;padding:12px;margin:0 0 18px}
.kf-hero-simdi-et{font-size:.7rem;font-weight:800;color:#64748b;letter-spacing:.06em;margin-bottom:8px}
.kf-hero-simdi img{width:100%;max-height:220px;object-fit:cover;border-radius:10px;display:block}
.kf-hero-url{font-size:.74rem;color:#94a3b8;margin-top:7px;word-break:break-all}
.kf-hero-ok{margin-top:9px;font-size:.82rem;font-weight:700;color:#15803d}
/* ── Dikey konum ayari ── */
/* ⚠️ ORANLAR GERCEK HERO'DAN: masaustunde .pp-hero 56vh yuksek ve tam genislik
   (~2,8:1), telefonda 44vh (~1,1:1). Ayni gorsel iki cihazda BAMBASKA
   kirpiliyor; onizlemeler bu yuzden ikisini de gosteriyor. */
.kf-hero-onizleme{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.kf-hero-oge{flex:1 1 200px;min-width:0}
.kf-hero-oet{display:block;font-size:.72rem;font-weight:700;color:#64748b;margin-bottom:5px}
.kf-hero-gorsel{border-radius:10px;background-color:#e2e8f0;background-repeat:no-repeat}
.kf-hero-genis{aspect-ratio:2.8/1}
.kf-hero-dar{aspect-ratio:1.1/1;max-width:180px}
.kf-hero-kaydirici{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:.76rem;color:#64748b}
.kf-hero-kaydirici input[type=range]{flex:1;accent-color:#7c1ddb;min-width:120px}
.kf-hero-kaydirici output{font-weight:800;color:#0f172a;min-width:44px;text-align:right}
.kf-hero-kbtn{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.kf-hero-sifirla{background:#f1f5f9;color:#475569}
.kf-hero-ok2{color:#15803d;font-weight:800}
.kf-hero-bilgi{font-size:.78rem;color:#64748b;line-height:1.55;margin:8px 0 0}

.kf-hero-bas{font-size:.92rem;margin:20px 0 10px;color:#0f172a}
.kf-hero-bas small{font-weight:500;color:#94a3b8}
.kf-hero-adaylar{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.kf-hero-aday{position:relative;padding:0;border:2px solid #eceef4;border-radius:12px;overflow:hidden;
  background:#f8fafc;cursor:pointer;transition:border-color .14s,transform .14s}
.kf-hero-aday:hover{transform:translateY(-2px);border-color:#c4b5fd}
/* ⭐ Seçili olan AÇIKÇA belli olmalı: kayıt 20 dk sonra canlıya düşüyor,
   kullanıcının "hangisini seçmiştim" diye tereddüt etmesi gerekmesin. */
.kf-hero-aday.on{border-color:#7c1ddb;box-shadow:0 0 0 3px rgba(124,29,219,.16)}
.kf-hero-aday.kaydediliyor{opacity:.55}
.kf-hero-aday img{width:100%;height:112px;object-fit:cover;display:block}
.kf-hero-aad{display:block;padding:7px 9px 3px;font-size:.75rem;font-weight:600;color:#0f172a;
  text-align:left;line-height:1.3;word-break:break-word}
.kf-hero-boyut{display:block;padding:0 9px 8px;font-size:.68rem;color:#94a3b8;text-align:left}
.kf-hero-elle{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kf-hero-elle input{flex:1 1 260px;padding:9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:.86rem}
@media (max-width:640px){
  .kf-hero-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .kf-hero-adaylar{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
}

/* ══ 🏡 Airbnb kapsama ekranı (admin) ═════════════════════════════════ */
.kf-ab-kut{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:14px 0}
.kf-ab-k{background:#fff;border:1px solid #eceef4;border-radius:14px;padding:14px;text-align:center}
.kf-ab-k b{display:block;font-size:1.6rem;font-weight:900;color:#0f172a;line-height:1.1}
.kf-ab-k span{font-size:.76rem;color:#64748b}
.kf-ab-bar{height:10px;border-radius:99px;background:#eef2f7;overflow:hidden;margin:6px 0 14px}
.kf-ab-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c1ddb,#a855f7)}
.kf-ab-not{font-size:.84rem;color:#475569;line-height:1.6;margin:0 0 14px}
.kf-ab-not code{background:#f1f5f9;padding:1px 6px;border-radius:6px;font-size:.8rem}
.kf-ab-uyari{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;
  padding:11px 14px;font-size:.84rem;line-height:1.55;margin:0 0 14px}
.kf-ab-uyari code{background:#ffedd5;padding:1px 6px;border-radius:6px}
.kf-ab-tab{width:100%;border-collapse:collapse;font-size:.85rem}
.kf-ab-tab th{text-align:left;padding:9px 10px;border-bottom:2px solid #eceef4;color:#64748b;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.kf-ab-tab td{padding:9px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.kf-ab-tab small{color:#94a3b8;font-size:.74rem}
.kf-ab-say{font-weight:800;color:#0f172a}
/* ⚠️ 30 km sınırına dayanan şehir: kazınan ilanın bir kısmı elendi ve
   ELENENİN DE PARASI ÖDENDİ. Vurgu bunu göz ucuyla yakalamak için. */
.kf-ab-uzak{color:#b45309;font-weight:700}
.kf-ab-r{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.73rem;font-weight:700;white-space:nowrap}
.kf-ab-r--iyi{background:#dcfce7;color:#15803d}
.kf-ab-r--orta{background:#fef3c7;color:#92400e}
.kf-ab-r--kotu{background:#fee2e2;color:#b91c1c}
.kf-ab-eksik{margin-top:16px;font-size:.85rem}
.kf-ab-eksik summary{cursor:pointer;color:#7c1ddb;font-weight:700}
.kf-ab-eksikler{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kf-ab-eksikler span{background:#f1f5f9;color:#475569;border-radius:8px;padding:3px 9px;font-size:.78rem}
/* Dar ekranda tablo kendi içinde kaysın — sayfa gövdesi yatay kaymaz. */
@media (max-width:640px){ .kf-ab-tab{display:block;overflow-x:auto;white-space:nowrap} }

.kf-hk-sayfa{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  text-decoration:none;color:inherit;transition:background .12s}
.kf-hk-sayfa:hover{background:rgba(255,255,255,.08)}
.kf-hk-ic{font-size:1.25rem;flex:0 0 auto}
.kf-hk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kf-hk-txt b{font-size:.94rem;font-weight:700}
.kf-hk-txt i{font-style:normal;font-size:.78rem;opacity:.68}
.kf-hk-txt code{font-size:.72rem;opacity:.5;font-family:ui-monospace,Menlo,Consolas,monospace}
.kf-hk-dil{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.5px;
  padding:3px 8px;border-radius:999px;background:rgba(124,29,219,.24);color:#d8c2ff}
.kf-hk-eksik{margin:12px 0;padding:13px 15px;border-radius:12px;
  background:rgba(179,38,30,.14);border:1px solid rgba(179,38,30,.4)}
.kf-hk-eksik ul{margin:8px 0 6px;padding-left:20px;font-size:.88rem}
.kf-hk-eksik small{opacity:.72;font-size:.76rem}
.kf-hk-tamam{margin:12px 0;padding:11px 15px;border-radius:12px;
  background:rgba(15,123,79,.16);border:1px solid rgba(15,123,79,.4)}
.kf-hk-sayac{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.kf-hk-sayac span{font-size:.78rem;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}

/* ══ 🧳 "TATİLE GÖNDERİLDİ" — sistemde olmayan şehir ═══════════════════════
   KULLANICI (30 Eyl): "küre index sayfası tasarımına benzer bir tasarıma
   çevirelim, şu anki tasarım çok basit ve kötü."
   ⭐ Ana sayfanın dili birebir: #150a26 zemin + marka gradyanı (mor→kırmızı→
      turuncu), #ffe600 sarı vurgu, cam kartlar, süzülen öğeler.
   ⭐ KÜRE + YÖRÜNGEDEKİ İKONLAR KALDIRILDI (30 Eyl): kullanıcı beğenmedi.
      Yerine rastgele şehirlerden 3 KARTPOSTAL çerçevesi geldi.
   ⚠️ prefers-reduced-motion'a UYULUYOR: süs, erişilebilirliğin önüne geçmez. */
/* ⚠️⚠️ KAYDIRILABİLİR OLMALI (tarayıcıda ÖLÇÜLDÜ, 30 Eyl): telefonda üç
   kartpostal alt alta gelince kutu 917px'e çıkıyor ve ~800px'lik ekranda
   ALT KART GÖRÜNMÜYORDU. Panel sabit (fixed) olduğu için sayfa kaydırması da
   işe yaramıyor — kullanıcı kartları GÖREMEDEN ekranda kalıyordu.
   ⛔ `align-items:center` + `overflow:auto` YETMEZ: içerik ekrandan uzunsa
      tarayıcı ÜST TARAFI kırpar ve oraya kaydırılamaz. Doğru desen
      `flex-start` + çocuğa `margin:auto` — sığarsa ortalar, sığmazsa kaydırır. */
.kf-tatil{position:fixed;inset:0;z-index:10200;display:flex;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* ⚠⚠ İKİ SATIR BİRLİKTE ÇALIŞIYOR, biri silinmemeli:
     İlki yedek — eski motorlar üste yaslar (kırpılmaz, yalnız ortalanmaz).
     İkincisi asıl çözüm: "safe center" sığarsa ortalar, sığmazsa
     kendiliğinden başa döner.
     ⛔ DÜZ "center" ya da çocuğa "margin:auto" KULLANILMAZ: ikisi de içerik
        ekrandan uzunsa ÜST TARAFI kırpıyor ve oraya kaydırılamıyor
        (tarayıcıda ölçüldü: kutu -60px'ten başlıyordu). */
  align-items:flex-start;
  align-items:safe center;
  padding:24px 20px;background:#150a26;opacity:0;transition:opacity .28s ease}
.kf-tatil.on{opacity:1}
/* Marka gradyanı — #welcome-screen .welcome-bg ile AYNI açılar ve renkler. */
.kf-tatil-bg{position:fixed;inset:0;z-index:0;
  background:linear-gradient(165deg,rgba(43,16,85,.92) 0%,rgba(124,29,219,.86) 48%,
    rgba(228,24,30,.86) 84%,rgba(255,109,0,.88) 100%)}
/* Yumuşak ışıma — ana sayfadaki .welcome-glow hissi */
.kf-tatil-bg::after{content:'';position:absolute;left:50%;top:38%;width:min(620px,86vw);
  height:min(620px,86vw);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,0,.18) 0%,transparent 66%);filter:blur(22px)}
.kf-tatil-box{position:relative;z-index:1;width:100%;max-width:640px;box-sizing:border-box;
  text-align:center;transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.kf-tatil.on .kf-tatil-box{transform:none}
/* ── Kashifly logosu = kapatma (30 Eyl, kullanıcı isteği) ─────────────── */
/* ⭐ "Bu sayfadaki X kapatma işaretini kaldır ve K Kashifly logoyu olması
      gereken yere bırak, tıklayınca index'e döndürsün."
   ⚠️ KONUM index.html'deki `.welcome-brandbar` ile AYNI (sol üst): kullanıcı
      logoyu zaten orada tanıyor. Yer değiştirmek "geri dönüş"ü gizlerdi.
   ⚠️ Bu bir <button>; tarayıcı varsayılanları (arka plan, kenarlık, font)
      TEK TEK sıfırlanmalı, yoksa gri bir düğme kutusu olarak çizilir. */
.kf-tatil-marka{position:fixed;z-index:3;border:none;background:none;padding:6px 10px 6px 0;
  margin:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  border-radius:12px;transition:opacity .15s,transform .15s}
.kf-tatil-marka:hover{opacity:.82;transform:translateY(-1px)}
.kf-tatil-marka:focus-visible{outline:2px solid #ffe600;outline-offset:3px}

/* ── Metin — .welcome-title / .welcome-subtitle ile aynı ölçek ───────── */
.kf-tatil-bas{margin:0 0 10px;font-size:1.52rem;font-weight:900;color:#fff;
  line-height:1.24;letter-spacing:-.4px;text-shadow:0 4px 24px rgba(0,0,0,.3)}
.kf-tatil-alt{margin:0 0 26px;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.72)}
/* Başlık şeridi — iki yanında ince çizgi */
.kf-tatil-oneribas{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffe600}
.kf-tatil-oneribas::before,.kf-tatil-oneribas::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,230,0,.4),transparent)}

/* ── 🖼️ KARTPOSTAL ÇERÇEVELERİ ──────────────────────────────────────── */
/* KULLANICI (30 Eyl): "kartpostal benzeri bir resim çerçevesi tasarla, içine
   rastgele şehirlerden seçilmiş, her sayfa yenilemede yeni resimle değişen
   3 adet kutu yerleştir. Bu kartların üstünde hangi şehre ve hangi mekâna ait
   oldukları bilgisinin yer alacağı bilgi kutucukları olsun ve resme tıklayınca
   ilgili şehre yönlendirsin."
   ⚠️ SÜTUN SAYISI SABİT 3: `auto-fit` ile son kart tek başına alt satıra düşüp
      sola yaslanıyor — bu depoda tam bu hata 5'li ızgarada görüldü. */
.kf-tatil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.kf-kp{display:block;width:100%;box-sizing:border-box;padding:10px 10px 0;margin:0;
  border:none;border-radius:5px;cursor:pointer;font:inherit;text-align:left;
  background:#fffdf6;
  box-shadow:0 10px 26px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s}
/* ⭐ Masaya atılmış kartpostal hissi: her kart biraz farklı açıda durur.
   ⚠️ Bu ANİMASYON DEĞİL, statik bir açı — "hareketi azalt" açıkken de
      kompozisyon aynen kalır (bu depoda yörünge sürümü tam burada çökmüştü). */
.kf-tatil-grid .kf-kp:nth-child(1){transform:rotate(-2.1deg)}
.kf-tatil-grid .kf-kp:nth-child(2){transform:rotate(1.2deg)}
.kf-tatil-grid .kf-kp:nth-child(3){transform:rotate(-1.1deg)}
.kf-tatil-grid .kf-kp:hover{transform:rotate(0deg) translateY(-6px) scale(1.035);
  box-shadow:0 20px 44px rgba(0,0,0,.5)}
.kf-kp:focus-visible{outline:2px solid #ffe600;outline-offset:3px}

/* Uçak postası şeridi — kartpostalın alt kenarında ince kırmızı/mavi tarama */
.kf-kp{position:relative;overflow:hidden}
.kf-kp::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(-45deg,#e4181e 0 7px,#fffdf6 7px 14px,
    #2b5fd9 14px 21px,#fffdf6 21px 28px);opacity:.85}

.kf-kp-foto{position:relative;display:block;width:100%;aspect-ratio:4/3;
  border-radius:3px;overflow:hidden;background:#e9e2d4}
.kf-kp-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Pul — sağ üst köşe, tırtıklı kenar hissi için kesikli çerçeve */
.kf-kp-pul{position:absolute;right:6px;top:6px;width:26px;height:30px;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
  background:rgba(255,253,246,.94);border:1.5px dashed rgba(0,0,0,.28);
  border-radius:2px;transform:rotate(4deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ⭐ BİLGİ KUTUCUĞU: hangi şehir + hangi mekân. Kartpostalın beyaz kenarında,
   kesikli çerçeveli — el yazısı alanı gibi duruyor.
   ⚠️ Mekân adları UZUN olabiliyor ("Basilica di Santa Maria del Fiore") →
      taşma kutuyu patlatmasın diye iki satırda kırpılıyor. */
.kf-kp-bilgi{display:block;margin:9px 0 12px;padding:7px 8px;
  border:1px dashed rgba(60,40,20,.3);border-radius:3px;background:rgba(255,255,255,.55)}
.kf-kp-sehir{display:block;font-size:.66rem;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:#7c1ddb;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-kp-mekan{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:3px;font-size:.78rem;font-weight:700;line-height:1.3;
  color:#2b1055}

/* İskelet — indeks ağdan gelene kadar. ⚠️ Yüksekliği DOLU kartla aynı olmalı,
   yoksa fotoğraflar gelince panel zıplar. */
.kf-kp-bos{aspect-ratio:auto;height:0;padding-bottom:calc(75% + 66px);
  background:rgba(255,255,255,.1);box-shadow:none;cursor:default}
.kf-kp-bos::after{display:none}

/* ── 📱 TELEFON ─────────────────────────────────────────────────────────
   ⚠️⚠️ İLK SÜRÜM TELEFONDA KÖTÜYDÜ (390×844 iframe'de ÖLÇÜLDÜ, 30 Eyl —
   kullanıcı "mobil sayfa kötü" dedi ve ölçüm aynısını gösterdi):
     · kutu 917px, ekran 844px → ANA BAŞLIK EKRANDA HİÇ YOKTU. Kullanıcı
       paneli açıyor ve "… tatile gönderildi" mesajını GÖREMİYORDU.
     · sabit logo alt yazının ÜSTÜNE biniyordu.
     · dikey kartlar 243px × 3 = 729px — tek başına ekranı dolduruyordu.
   ⭐ ÇÖZÜM: kart telefonda YATAY kartpostal (fotoğraf solda, bilgi sağda).
      ~96px'e iniyor, üçü birden 300px. Kartpostal kimliği (çerçeve, pul,
      uçak postası şeridi) AYNEN duruyor — küçültülen düzen, kimlik değil.
   ⛔ "3 kartı 2'ye düşür" ÇÖZÜM DEĞİL: kullanıcı açıkça 3 istedi. */
@media (max-width:640px){
  /* ⚠️ Logo `fixed` ve sol üstte duruyor → içerik onun ALTINDAN başlamalı,
     yoksa başlığın üstüne biner (tarayıcıda görüldü). */
  /* ⚠️ ALTTA NAV BAR İÇİN YER (1 Eki): alt navigasyon `fixed` ve 58px yüksek.
     Yer ayrılmazsa üçüncü kartpostal barın ARKASINDA kalıyor — görünüyor ama
     tıklanamıyor; "çalışmıyor" diye bildirilen kusurların tam bu sınıfı. */
  .kf-tatil{padding:calc(68px + env(safe-area-inset-top,0px)) 14px
    calc(74px + env(safe-area-inset-bottom,0px))}
  .kf-tatil-bas{font-size:1.1rem;margin-bottom:8px}
  .kf-tatil-alt{font-size:.82rem;margin-bottom:16px}
  .kf-tatil-oneribas{margin-bottom:12px;font-size:.64rem}
  /* Tek sütun; eğik duruş kalkıyor — dar ekranda kartlar birbirine değiyor. */
  .kf-tatil-grid{grid-template-columns:1fr;gap:10px;max-width:none}
  .kf-tatil-grid .kf-kp:nth-child(1),
  .kf-tatil-grid .kf-kp:nth-child(2),
  .kf-tatil-grid .kf-kp:nth-child(3){transform:none}
  /* ⭐ YATAY kartpostal: fotoğraf solda sabit genişlikte, bilgi sağda. */
  .kf-kp{display:grid;grid-template-columns:104px 1fr;align-items:center;
    gap:11px;padding:8px 11px 11px}
  .kf-kp-foto{aspect-ratio:4/3}
  .kf-kp-bilgi{margin:0;padding:6px 8px}
  .kf-kp-sehir{font-size:.62rem}
  .kf-kp-mekan{font-size:.82rem;margin-top:2px}
  /* Pul küçülüyor — 104px'lik fotoğrafta tam boy pul kareyi yutuyordu. */
  .kf-kp-pul{width:20px;height:23px;font-size:.6rem;right:4px;top:4px}
  .kf-kp::after{height:3px}
}
/* ⚠️ Hareket duyarlılığı: yalnız GEÇİŞLER durur. Kartların açıları statik
   olduğu için kompozisyon aynen kalır — bilgi kaybı YOK. */
@media (prefers-reduced-motion:reduce){
  .kf-tatil,.kf-tatil-box,.kf-kp,.kf-tatil-marka{transition:none}
}

/* ══ 🏙️ ŞEHİR YÖNETİMİ (admin) ═══════════════════════════════════════════
   KULLANICI (1 Eki): "yeni şehir ekleme özelliğini manuel durdur/başlat
   yapabileceğim bir sistem kur, AYRI BAŞLIK altında" + "admin internetten
   veri çekmeden kendisi sıfırdan şehir oluşturabilsin". */
.kf-sy-wrap{max-width:860px;margin:0 auto;padding:4px 2px 40px}
.kf-sy-aciklama{padding:14px 16px;border-radius:12px;margin-bottom:18px;
  background:rgba(124,29,219,.1);border:1px solid rgba(124,29,219,.28)}
/* ⚠️ DOĞRUDAN ÇOCUK (>): yalnız başlık <b>si blok olmalı. Seçici gevşek
   olduğunda <p> içindeki her <b> de kendi satırına düşüyordu (tarayıcıda görüldü:
   "...sistemde / olmayan / bir şehir arayınca" diye parçalanıyordu). */
.kf-sy-aciklama > b{display:block;margin-bottom:6px;font-size:.95rem}
.kf-sy-aciklama p{margin:7px 0;font-size:.86rem;line-height:1.6;opacity:.9}
.kf-sy-uyari{color:#ffb86b}

/* ── Durum kartı: açık/kapalı tek bakışta ── */
.kf-sy-kart{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:13px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04)}
.kf-sy-durum{display:flex;align-items:center;gap:13px;min-width:0}
.kf-sy-durum b{display:block;font-size:.98rem}
.kf-sy-durum i{display:block;font-style:normal;font-size:.8rem;opacity:.72;margin-top:2px}
/* ⚠️ Renk TEK BAŞINA bilgi taşımıyor: nokta ile birlikte metin de durumu
   yazıyor ("AÇIK —"/"KAPALI —"). Renk körlüğünde ekran yine okunur. */
.kf-sy-nokta{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
.kf-sy-kart.acik{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.09)}
.kf-sy-kart.acik .kf-sy-nokta{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.kf-sy-kart.kapali .kf-sy-nokta{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.15)}
.kf-sy-btn{flex:0 0 auto;padding:10px 18px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);
  color:#fff;font:700 .88rem system-ui;transition:background .14s,transform .14s}
.kf-sy-btn:hover{background:rgba(255,255,255,.18)}
.kf-sy-btn:active{transform:scale(.97)}
.kf-sy-btn[disabled]{opacity:.55;cursor:default}
.kf-sy-btn.big{padding:13px 26px;font-size:.95rem;
  background:linear-gradient(135deg,#7c1ddb,#e4181e);border-color:transparent}

.kf-sy-not{margin-top:14px;padding:12px 14px;border-radius:11px;font-size:.84rem;line-height:1.6;
  background:rgba(179,38,30,.14);border:1px solid rgba(179,38,30,.42)}
.kf-sy-not code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}
.kf-sy-dip{margin-top:10px;font-size:.75rem;opacity:.55}

/* ── 🚫 Yayın durumu listesi (2 Eki 2026) ──────────────────────────────────
   ⚠️ Yayından kalkmış satır GÖZE ÇARPMALI: ekranın tek amacı onları bulmak.
      Yalnız rozetle ayırmak 180 satırlık listede kayboluyordu. */
.kf-yay-liste{margin-top:14px;display:flex;flex-direction:column;gap:6px}
/* ── Ülke grubu (kullanıcı 7 Eki 2026: "ülke bazlı sırala, tıklayınca
   şehirleri görelim") — 180 düz satır taranamıyordu. ── */
.kf-yay-ulke{border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.kf-yay-ulke-bas{width:100%;display:flex;align-items:center;gap:10px;
  padding:11px 13px;cursor:pointer;text-align:left;font-size:.92rem;
  border:0;background:rgba(255,255,255,.05);color:inherit}
.kf-yay-ulke-bas:hover{background:rgba(255,255,255,.09)}
.kf-yay-ok{flex:0 0 auto;opacity:.6;font-size:.8rem;width:12px}
.kf-yay-ulke-bas b{flex:1;min-width:0}
.kf-yay-sayi{flex:0 0 auto;font-size:.78rem;opacity:.6;white-space:nowrap}
/* ⚠️ İçinde yayın dışı şehir olan ülke BAŞLIKTA belli olsun — açmadan görülsün. */
.kf-yay-kapali-rozet{flex:0 0 auto;font-size:.74rem;font-weight:800;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(228,24,30,.18);color:#ffb3b5}
.kf-yay-ulke.acik .kf-yay-ulke-bas{background:rgba(124,29,219,.16)}
/* ⚠️⚠️⚠️ `[hidden]` KURALI EN ÜSTTE VE `!important` — YOKSA GİZLEME ÖLÜ.
   ÖLÇÜLDÜ (7 Eki 2026, canlı): 86 grubun `hidden` özniteliği doğruydu ama
   86'sı da EKRANDA GÖRÜNÜYORDU (display:flex, yükseklik 241px). Sebep:
   `[hidden]{display:none}` tarayıcının KULLANICI AJANI kuralı; aşağıdaki
   `.kf-yay-sehirler{display:flex}` yazar stili onu EZİYOR. Ok dönüyor,
   öznitelik değişiyor, ama hiçbir şey gizlenmiyor — kullanıcı "göster/gizle
   çalışmıyor" diye iki kez bildirdi.
   ⛔ DERS: `hidden` + `display` birlikte yazılan her yerde bu tuzak var.
   ⛔ Nöbetçi `hidden` ÖZNİTELİĞİNE bakarak bunu YAKALAYAMAZ; görünürlük
      ölçülmeli (offsetHeight). */
.kf-yay-sehirler[hidden]{display:none!important}
.kf-yay-sehirler{display:flex;flex-direction:column;gap:5px;padding:8px}
/* ⚠️ Kapak ekranı KARE basıyor (liste değil) — grup gövdesi orada ızgara olur.
   Tek bileşen üç farklı satır biçimi taşıyor; biçimi SATIRIN sınıfı belirliyor,
   bileşen değil. */
.kf-yay-sehirler:has(.kf-hero-kart),
.kf-yay-sehirler:has(.kf-cc-pcard){display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* ⚠️ Airbnb ekranı <table> basıyor; dolgu iki kez binmesin. */
.kf-yay-sehirler:has(.kf-ab-tab){padding:0}
/* ⚠️ `:has()` kuralları da `[hidden]`i ezer (0-2-0 > 0-1-1) → gizliyken
   HEPSİ bastırılmalı. Tek satırla kapatmak yetmiyor. */
.kf-yay-sehirler[hidden]:has(.kf-hero-kart),
.kf-yay-sehirler[hidden]:has(.kf-cc-pcard),
.kf-yay-sehirler[hidden]:has(.kf-ab-tab){display:none!important}
.kf-yay-sehirler .kf-ab-tab{margin:0;width:100%}
/* ⚠️ Dar ekranda tablo taşarsa YATAY kaydırsın — sayfayı genişletmesin
   (bu depoda "100vw → yatay kaydırma" dersi). */
@media (max-width:760px){
  .kf-yay-sehirler:has(.kf-ab-tab){overflow-x:auto}
}
.kf-yay-ozet{margin-bottom:8px;font-size:.86rem;font-weight:700;opacity:.8}
.kf-yay-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07)}
.kf-yay-r.kapali{background:rgba(228,24,30,.10);border-color:rgba(228,24,30,.32)}
.kf-yay-r.hata{background:rgba(255,109,0,.10);border-color:rgba(255,109,0,.3)}
.kf-yay-ad{flex:1;min-width:140px}
.kf-yay-ad small{opacity:.5;margin-left:6px}
.kf-yay-rozet{font-size:.78rem;font-weight:700;white-space:nowrap;opacity:.85}
.kf-yay-btn{flex:0 0 auto;padding:7px 12px;border-radius:9px;cursor:pointer;
  font-size:.8rem;font-weight:700;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);color:inherit}
.kf-yay-btn:hover{background:rgba(255,255,255,.13)}
.kf-yay-btn:disabled{opacity:.5;cursor:default}
/* Dar ekranda düğme alta insin, satır sıkışıp okunmaz olmasın. */
@media (max-width:560px){ .kf-yay-btn{width:100%} }

/* ══ 🍎 iOS TASARIM DİLİ — DENEME (kullanıcı 7 Eki 2026) ═══════════════════
   "Şehir İçeriği bölümünün bütün alt başlıklarını aynı tasarıma çevir, iOS
   tasarım dilini kullan, beğenirsem bütün panele uygularız."

   ⚠️⚠️ KAPSAM BİLEREK DAR: yalnız `.kf-ios` sınıfı verilen yerlerde geçerli.
      Paylaşılan ülke akordeonu DÖRT ekranda kullanılıyor; iOS'u oraya
      doğrudan yazsaydım deneme Yayın Durumu/Kapaklar/Airbnb'ye de sıçrar ve
      beğenilmezse geri alması zor olurdu. Opt-in olarak duruyor.

   Referans: iOS "Inset Grouped" liste (Ayarlar uygulaması, koyu tema).
   · kart  #1c1c1e  · satır ayracı rgba(84,84,88,.6), SOLDAN İÇERİDE
   · vurgu #0a84ff  · köşe 12px · başlık küçük, BÜYÜK HARF, soluk
   ⚠️ Ayraç son satırda OLMAZ (iOS'ta da yok) — `:last-child` ile kaldırılıyor. */
.kf-ios{--ios-kart:#1c1c1e;--ios-satir:#2c2c2e;--ios-ayrac:rgba(84,84,88,.6);
  --ios-mavi:#0a84ff;--ios-metin:#fff;--ios-soluk:rgba(235,235,245,.6);
  --ios-cokSoluk:rgba(235,235,245,.3)}
/* Kart üstü küçük başlık (iOS section header) */
.kf-ios-baslik{margin:22px 0 7px 16px;font-size:.76rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ios-soluk)}
.kf-ios-baslik:first-child{margin-top:4px}
/* Kart: içine satırlar girer */
.kf-ios-kart{background:var(--ios-kart);border-radius:12px;overflow:hidden;
  margin-bottom:4px}
/* Açılır satır (details > summary) */
.kf-ios-kart > summary{display:flex;align-items:center;gap:12px;
  padding:13px 16px;cursor:pointer;list-style:none;
  font-size:.95rem;color:var(--ios-metin);background:var(--ios-satir)}
.kf-ios-kart > summary::-webkit-details-marker{display:none}
.kf-ios-kart > summary::marker{content:''}
.kf-ios-kart > summary:active{background:#3a3a3c}
.kf-ios-kart > summary b{flex:1;min-width:0;font-weight:600}
/* ⚠️ Chevron iOS'ta SAĞDA ve açılınca 90° döner — ok karakteri değişmez,
   böylece CSS tek başına yeterli (JS'e gerek yok). */
.kf-ios-ok{flex:0 0 auto;color:var(--ios-cokSoluk);font-size:1.05rem;
  transition:transform .2s;line-height:1}
.kf-ios-kart[open] > summary .kf-ios-ok{transform:rotate(90deg)}
.kf-ios-kart[open] > summary{border-bottom:.5px solid var(--ios-ayrac)}
.kf-ios-sayac{flex:0 0 auto;color:var(--ios-soluk);font-size:.86rem}
.kf-ios-ic{padding:14px 16px 16px;background:var(--ios-kart)}
/* Kart altı açıklama (iOS section footer) */
.kf-ios-not{margin:7px 16px 0;font-size:.78rem;line-height:1.5;
  color:var(--ios-soluk)}
.kf-ios-not b{color:rgba(235,235,245,.82)}
/* Giriş alanları ve düğmeler iOS tonuna çekiliyor */
.kf-ios .kf-adm-csearch{background:var(--ios-satir);border:0;color:var(--ios-metin);
  border-radius:10px;padding:10px 12px}
.kf-ios .kf-adm-csearch:focus{outline:2px solid var(--ios-mavi);outline-offset:-2px}
.kf-ios .kf-adm-cbtn{background:var(--ios-mavi);border:0;color:#fff;
  border-radius:10px;padding:9px 14px;font-weight:600}
.kf-ios .kf-adm-cbtn:hover:not(:disabled){filter:brightness(1.1)}
/* ⚠️ İkincil düğme (yıkıcı olmayan ama vurgulanmayan): iOS'ta gri. */
.kf-ios .kf-adm-cbtn.ikincil{background:var(--ios-satir);color:var(--ios-mavi)}
/* Ülke akordeonu iOS varyantı — satırlar kart içinde, ayraçlı */
.kf-ios .kf-yay-ulke{border:0;border-radius:0;background:transparent}
.kf-ios .kf-yay-ulke + .kf-yay-ulke{border-top:.5px solid var(--ios-ayrac)}
.kf-ios .kf-yay-ulke-bas{background:var(--ios-satir);padding:12px 16px}
.kf-ios .kf-yay-ulke-bas:hover{background:#3a3a3c}
.kf-ios .kf-yay-ulke.acik .kf-yay-ulke-bas{background:#3a3a3c}
.kf-ios .kf-yay-liste{gap:0;border-radius:12px;overflow:hidden;margin-top:0}
.kf-ios .kf-yay-sehirler{background:var(--ios-kart);padding:10px 12px}

/* ══ 🍎 iOS DERİSİ — TÜM ADMİN PANELİ (kullanıcı onayladı, 7 Eki 2026) ══════
   "Beğendim, bütün admin panelini aynı tasarıma çevir."

   ⚠️⚠️ YAKLAŞIM: 20+ ekranın markup'ı TEK TEK YENİDEN YAZILMADI. Ekranlar
      zaten ortak bileşenleri kullanıyor (`kf-adm-cbtn`, `kf-adm-csearch`,
      `kf-adm-sec`, kart/satır yüzeyleri); onları iOS'a çevirince stil
      kendiliğinden yayılıyor. Markup'a dokunmamak, çalışan 20 ekranı
      kırmamanın en güvenli yolu.
   ⛔ `display` / `flex` / `grid` DEĞİŞTİRİLMİYOR — yalnız renk, kenarlık,
      köşe ve boşluk. Bu depoda `display` ezmesi göster/gizle özelliğini
      öldürmüştü; yerleşime dokunmak aynı sınıf riski taşır.
   ⚠️ Kapsam `#kf-admin.kf-ios` — sınıf kökten kaldırılırsa panel eski
      görünümüne TEK HAMLEDE döner. */
#kf-admin.kf-ios{--ios-zemin:#000;--ios-kart:#1c1c1e;--ios-satir:#2c2c2e;
  --ios-ust:#3a3a3c;--ios-ayrac:rgba(84,84,88,.6);--ios-mavi:#0a84ff;
  --ios-yesil:#30d158;--ios-kirmizi:#ff453a;--ios-turuncu:#ff9f0a;
  --ios-metin:#fff;--ios-soluk:rgba(235,235,245,.6);--ios-cokSoluk:rgba(235,235,245,.3);
  background:var(--ios-zemin);color:var(--ios-metin)}

/* ── Kabuk: başlık, bölüm ve sekme şeritleri ── */
#kf-admin.kf-ios .kf-adm-wrap{background:var(--ios-zemin)}
#kf-admin.kf-ios .kf-adm-header{background:rgba(28,28,30,.82);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--ios-ayrac)}
#kf-admin.kf-ios .kf-adm-brand b{font-weight:600}
#kf-admin.kf-ios .kf-adm-who{color:var(--ios-soluk)}
#kf-admin.kf-ios .kf-adm-back{background:transparent;border:0;color:var(--ios-mavi);
  font-weight:500;border-radius:8px}
#kf-admin.kf-ios .kf-adm-back:hover{background:rgba(10,132,255,.12)}
/* ⚠️ Bölüm/sekme çipleri iOS "segmented control" tonunda: seçili olan dolu,
   ötekiler saydam. Eski mor gradyan panelin geri kalanıyla çakışıyordu. */
#kf-admin.kf-ios .kf-adm-bolumler,
#kf-admin.kf-ios .kf-adm-tabs{background:transparent;border:0}
#kf-admin.kf-ios .kf-adm-bolum,
#kf-admin.kf-ios .kf-adm-tab{background:var(--ios-satir);border:0;color:var(--ios-metin);
  border-radius:9px;font-weight:500;padding:8px 14px}
#kf-admin.kf-ios .kf-adm-bolum:hover,
#kf-admin.kf-ios .kf-adm-tab:hover{background:var(--ios-ust)}
#kf-admin.kf-ios .kf-adm-bolum.on,
#kf-admin.kf-ios .kf-adm-tab.on{background:var(--ios-mavi);color:#fff;font-weight:600}
#kf-admin.kf-ios .kf-adm-presence{background:var(--ios-kart);border:0;
  border-radius:10px;color:var(--ios-soluk)}
#kf-admin.kf-ios .kf-adm-body{background:var(--ios-zemin)}

/* ── Yüzeyler: kart / bölüm / satır ── */
#kf-admin.kf-ios .kf-adm-sec,
#kf-admin.kf-ios .kf-adm-card,
#kf-admin.kf-ios .kf-adm-rcard,
#kf-admin.kf-ios .kf-adm-metric,
#kf-admin.kf-ios .kf-adm-cm,
#kf-admin.kf-ios .kf-bo-kart,
#kf-admin.kf-ios .kf-ab-k,
#kf-admin.kf-ios .kf-ab-kut,
#kf-admin.kf-ios .kf-sy-aciklama,
#kf-admin.kf-ios .kf-cc-create{background:var(--ios-kart);border:0;border-radius:12px}
#kf-admin.kf-ios .kf-adm-crow,
#kf-admin.kf-ios .kf-yay-r,
#kf-admin.kf-ios .kf-cc-ccard{background:var(--ios-satir);border:0;border-radius:10px}
#kf-admin.kf-ios .kf-adm-clist{gap:6px}
#kf-admin.kf-ios .kf-adm-empty,
#kf-admin.kf-ios .kf-adm-load,
#kf-admin.kf-ios .kf-adm-cnote{color:var(--ios-soluk)}

/* ── Kontroller ── */
#kf-admin.kf-ios .kf-adm-csearch,
#kf-admin.kf-ios .kf-cc-create-inp,
#kf-admin.kf-ios .kf-hero-ara,
#kf-admin.kf-ios input[type=text],
#kf-admin.kf-ios input[type=search],
#kf-admin.kf-ios input[type=number],
#kf-admin.kf-ios textarea,
#kf-admin.kf-ios select{background:var(--ios-satir);border:0;color:var(--ios-metin);
  border-radius:10px}
#kf-admin.kf-ios input:focus,
#kf-admin.kf-ios textarea:focus,
#kf-admin.kf-ios select:focus{outline:2px solid var(--ios-mavi);outline-offset:-2px}
#kf-admin.kf-ios ::placeholder{color:var(--ios-cokSoluk)}
#kf-admin.kf-ios .kf-adm-cbtn,
#kf-admin.kf-ios .kf-cc-create-go,
#kf-admin.kf-ios .kf-cc-pubbtn,
#kf-admin.kf-ios .kf-sy-btn,
#kf-admin.kf-ios .kf-yay-btn{background:var(--ios-mavi);border:0;color:#fff;
  border-radius:10px;font-weight:600}
#kf-admin.kf-ios .kf-adm-cbtn:hover:not(:disabled),
#kf-admin.kf-ios .kf-cc-create-go:hover,
#kf-admin.kf-ios .kf-yay-btn:hover:not(:disabled){background:var(--ios-mavi);filter:brightness(1.12)}
/* ⚠️ YIKICI EYLEM KIRMIZI KALMALI: iOS'ta da öyle. Maviye boyamak, silme
   düğmesini sıradan bir eylem gibi gösterirdi. */
#kf-admin.kf-ios .kf-adm-del,
#kf-admin.kf-ios .kf-bo-red,
#kf-admin.kf-ios .kf-yay-btn[data-on="1"]{background:var(--ios-kirmizi);color:#fff}
#kf-admin.kf-ios .kf-adm-cchip,
#kf-admin.kf-ios .kf-cc-ex,
#kf-admin.kf-ios .kf-adm-chips > *{background:var(--ios-satir);border:0;
  color:var(--ios-mavi);border-radius:999px}
#kf-admin.kf-ios .kf-adm-badge{background:var(--ios-kirmizi);color:#fff;border-radius:999px}

/* ── Uyarı / bilgi kutuları ── */
#kf-admin.kf-ios .kf-ab-uyari,
#kf-admin.kf-ios .kf-sy-not{background:rgba(255,159,10,.14);border:0;
  border-radius:12px;color:#ffd79a}
#kf-admin.kf-ios .kf-sy-uyari{color:var(--ios-turuncu)}
#kf-admin.kf-ios .kf-ab-not,
#kf-admin.kf-ios .kf-cc-hint,
#kf-admin.kf-ios .kf-cc-treehint{color:var(--ios-soluk)}
#kf-admin.kf-ios code{background:var(--ios-satir);border-radius:5px;padding:1px 5px;
  color:#ff9f0a;font-size:.92em}

/* ── Tablolar (Airbnb kapsama) ── */
#kf-admin.kf-ios .kf-ab-tab{border-collapse:separate;border-spacing:0}
#kf-admin.kf-ios .kf-ab-tab th{background:var(--ios-kart);color:var(--ios-soluk);
  border-bottom:.5px solid var(--ios-ayrac);font-weight:600}
#kf-admin.kf-ios .kf-ab-tab td{border-bottom:.5px solid var(--ios-ayrac)}
#kf-admin.kf-ios .kf-ab-tab tr:last-child td{border-bottom:0}

/* ── Ülke akordeonu (dört ekranda ortak) ── */
#kf-admin.kf-ios .kf-yay-ulke{border:0;border-radius:0;background:transparent}
#kf-admin.kf-ios .kf-yay-ulke + .kf-yay-ulke{border-top:.5px solid var(--ios-ayrac)}
#kf-admin.kf-ios .kf-yay-ulke-bas{background:var(--ios-satir);padding:12px 16px}
#kf-admin.kf-ios .kf-yay-ulke-bas:hover,
#kf-admin.kf-ios .kf-yay-ulke.acik .kf-yay-ulke-bas{background:var(--ios-ust)}
#kf-admin.kf-ios .kf-yay-liste{gap:0;border-radius:12px;overflow:hidden}
#kf-admin.kf-ios .kf-yay-sehirler{background:var(--ios-kart)}
#kf-admin.kf-ios .kf-yay-r.kapali{background:rgba(255,69,58,.16)}
#kf-admin.kf-ios .kf-yay-kapali-rozet{background:rgba(255,69,58,.22);color:#ffb3ae}

/* ── Derinin ULAŞMADIĞI ekran-özel sınıflar ───────────────────────────────
   ⚠️ ÖLÇÜLEREK bulundu (canlı panel, her bölüm tek tek gezilip eski
      mor/çivit tonu taşıyan öğeler SAYILDI):
        Yasaklılar 43 · Hukuki 19 · Bekleyen Onaylar 10 · SEO 0
      Ortak bileşenleri çevirmek ekranların ÇOĞUNU kapsadı ama hepsini değil;
      kalanları varsaymak yerine ölçüp adıyla eklemek gerekti.
   ⛔ Bu listeyi "herhalde tamamdır" diye kapatma — yeni ekran gelince
      aynı ölçümü tekrarla (bölüm bölüm gez, eski tonu say). */
#kf-admin.kf-ios .kf-yas-row{background:var(--ios-satir);border:0;border-radius:10px}
#kf-admin.kf-ios .kf-yas-etk{background:var(--ios-ust);border:0;border-radius:999px;
  color:var(--ios-mavi)}
#kf-admin.kf-ios .kf-hk-dil{background:var(--ios-satir);border:0;border-radius:9px;
  color:var(--ios-metin)}
#kf-admin.kf-ios .kf-hk-dil.on{background:var(--ios-mavi);color:#fff}
#kf-admin.kf-ios .kf-bo-sayi{background:var(--ios-ust);border:0;border-radius:999px;
  color:var(--ios-metin)}

/* ── "Şehir Oluştur" kategorileri de aynı dile ── */
#kf-admin.kf-ios .kf-so-kat{background:var(--ios-kart);border:0;border-radius:12px}
#kf-admin.kf-ios .kf-so-kat > summary{background:var(--ios-satir)}
#kf-admin.kf-ios .kf-so-kat[open] > summary{background:var(--ios-ust);
  border-bottom:.5px solid var(--ios-ayrac)}

/* ── 🏙️ Şehir Oluştur: iki açılır kategori (AI / Manuel) ──────────────────
   KULLANICI (7 Eki 2026): "iki başlık, üstüne tıklanınca aşağı açılsın".
   ⚠️ `<details>` kullanıldı: aç/kapa, klavye ve ekran okuyucu desteği
      tarayıcıdan hazır geliyor.
   ⛔ Elle `hidden` + CSS display kombinasyonuna GİRİLMEDİ — bu depoda tam o
      ikili (yazar `display` kuralı UA `[hidden]`ini eziyordu) göster/gizle
      özelliğini öldürmüştü. */
.kf-so-kat{margin-bottom:12px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)}
.kf-so-kat > summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 15px;cursor:pointer;list-style:none;font-size:.95rem}
.kf-so-kat > summary::-webkit-details-marker{display:none}
.kf-so-kat > summary::marker{content:''}
.kf-so-kat > summary:hover{background:rgba(255,255,255,.06)}
.kf-so-kat[open] > summary{background:rgba(124,29,219,.16);
  border-bottom:1px solid rgba(255,255,255,.09)}
.kf-so-ok{flex:0 0 auto;opacity:.6;font-size:.8rem;width:12px}
.kf-so-kat > summary small{flex:1 0 100%;padding-left:22px;
  font-size:.78rem;opacity:.6;line-height:1.5}
.kf-so-ic{padding:14px 15px 16px}
/* ⚠️ İç açıklama kutusunun dış kenar boşluğu burada gereksiz. */
.kf-so-ic > .kf-sy-aciklama{margin-bottom:14px}

/* ── Elle oluşturma formu ── */
.kf-sy-form{display:flex;flex-direction:column;gap:14px}
.kf-sy-form label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:700;opacity:.9}
.kf-sy-form input,.kf-sy-form textarea{
  padding:9px 11px;border-radius:9px;font:inherit;font-weight:400;font-size:.88rem;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit}
.kf-sy-form textarea{resize:vertical;line-height:1.5}
.kf-sy-form input:focus,.kf-sy-form textarea:focus{outline:2px solid rgba(124,29,219,.6);outline-offset:1px}
.kf-sy-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.kf-sy-bolum{padding:13px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.kf-sy-bh{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.kf-sy-bh b{font-size:.92rem}
.kf-sy-min{font-size:.72rem;opacity:.6}
.kf-sy-ekle{margin-left:auto;padding:6px 12px;border-radius:8px;cursor:pointer;font:700 .76rem system-ui;
  border:1px dashed rgba(255,255,255,.3);background:none;color:inherit}
.kf-sy-ekle:hover{background:rgba(255,255,255,.08)}
.kf-sy-rows{display:flex;flex-direction:column;gap:10px}
/* ⚠️ Satır numarası ayrı sütunda: "en az 3 tane" kuralını göz sayabilsin. */
.kf-sy-row{display:grid;grid-template-columns:26px 1fr 30px;gap:9px;align-items:start}
.kf-sy-no{padding-top:9px;font-size:.78rem;font-weight:800;opacity:.45;text-align:center}
.kf-sy-alanlar{display:flex;flex-direction:column;gap:7px;min-width:0}
.kf-sy-alanlar input,.kf-sy-alanlar textarea{
  padding:8px 10px;border-radius:8px;font:inherit;font-size:.85rem;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:inherit}
.kf-sy-koord{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.kf-sy-sil{align-self:start;margin-top:5px;width:28px;height:28px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:none;color:#ff9a9a;font-size:.8rem;line-height:1}
.kf-sy-sil:hover{background:rgba(228,24,30,.18)}

.kf-sy-kaydet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.kf-sy-sonuc{font-size:.84rem;line-height:1.5}
.kf-sy-sonuc.hata{color:#ff9a9a}
.kf-sy-sonuc.iyi{color:#86efac}

@media (max-width:640px){
  .kf-sy-g2,.kf-sy-koord{grid-template-columns:1fr}
  .kf-sy-kart{flex-direction:column;align-items:stretch;gap:12px}
  .kf-sy-btn{width:100%}
  .kf-sy-row{grid-template-columns:22px 1fr 28px;gap:7px}
}

/* ══ 🍪 ÇEREZ ONAY BANDI ═══════════════════════════════════════════════════
   ⚠️ Google Analytics kararıyla birlikte ZORUNLU hâle geldi (1 Eki 2026).
   ⚠️ KATMAN: 10300 — tatil paneli (10200) ve poster (10105) dâhil her şeyin
      ÜSTÜNDE. Onay kapısı bir şeyin arkasında kalırsa kullanıcı karar veremez
      ve ölçüm de başlayamaz. (Bkz. depo içi z-index haritası.)
   ⚠️ MOBİLDE ALT NAVİGASYONUN ÜSTÜNDE durur: 58px'lik bar bandı yutuyordu. */
.kf-cerez{position:fixed;left:0;right:0;z-index:10300;
  bottom:calc(env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px calc(16px + env(safe-area-inset-right,0px)) 14px calc(16px + env(safe-area-inset-left,0px));
  background:rgba(14,18,36,.97);border-top:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 -10px 34px rgba(0,0,0,.45);
  /* ⛔⛔ VARSAYILAN GÖRÜNÜR. Eskiden `translateY(100%)` ile gizlenip JS'in
     eklediği `.on` sınıfıyla açılıyordu; rAF çalışmayınca band EKRANIN
     ALTINDA kalıyordu (ölçüldü). Hukuki bir onay kapısı, bir animasyon
     karesinin çalışmasına bağlanamaz. Giriş yalnız bir SÜS. */
  animation:kfCerezGir .3s cubic-bezier(.2,.8,.3,1)}
@keyframes kfCerezGir{from{transform:translateY(100%)}to{transform:none}}
/* Kapanış: JS sınıf ekler, 240 ms sonra siler. Animasyon çalışmasa da silinir. */
.kf-cerez.kapaniyor{transform:translateY(100%);transition:transform .22s ease}
.kf-cerez-m{flex:1 1 320px;margin:0;font:400 .84rem/1.6 system-ui,-apple-system,Segoe UI,sans-serif;color:#dbe0f0}
.kf-cerez-m a{color:#ffe600;text-decoration:underline;text-underline-offset:2px}
.kf-cerez-dugmeler{display:flex;gap:10px;flex:0 0 auto}
/* ⛔⛔ İKİ DÜĞME AYNI BOYUT VE AĞIRLIKTA (GDPR): reddetmeyi görsel olarak
   zayıflatmak — küçük yazı, soluk renk, kenarlıksız — ihlal sayılır.
   Tek fark arka plan vurgusu; ölçü, yazı tipi ve dolgu AYNI. */
.kf-cerez-btn{min-width:124px;padding:11px 20px;border-radius:10px;cursor:pointer;
  font:800 .86rem system-ui,-apple-system,Segoe UI,sans-serif;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.1);color:#fff;
  transition:background .14s,transform .14s}
.kf-cerez-btn:hover{background:rgba(255,255,255,.2)}
.kf-cerez-btn:active{transform:scale(.97)}
.kf-cerez-kabul{background:linear-gradient(135deg,#7c1ddb,#e4181e);border-color:transparent}
.kf-cerez-kabul:hover{filter:brightness(1.12);background:linear-gradient(135deg,#7c1ddb,#e4181e)}
.kf-cerez-btn:focus-visible{outline:2px solid #ffe600;outline-offset:3px}

@media (max-width:640px){
  /* ⚠️ Alt navigasyon 58px + güvenli alan: band onun ÜSTÜNDE durmalı. */
  .kf-cerez{bottom:calc(58px + env(safe-area-inset-bottom,0px));padding:13px 14px;gap:12px}
  .kf-cerez-m{flex:1 1 100%;font-size:.8rem}
  .kf-cerez-dugmeler{width:100%}
  .kf-cerez-btn{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){ .kf-cerez{animation:none;transition:none} }

/* ══ ⚖️ ALTBİLGİ — SAYFA İÇERİĞİNİN EN ALTI ══════════════════════════════
   KULLANICI (1 Eki 2026): yasal bağlantılar index'in yapısını bozuyordu →
   BÜTÜN SAYFA İÇERİKLERİNİN EN ALTINA taşındı (Tripadvisor deseni).
   KULLANICI (2 Eki): "footer bölümünü daha canlı yap."
   ⛔ LANDING'E KONMAZ: `.welcome-inner` bir hero ızgarası; altbilgi oraya
      girince düzeni bozuyordu.
   ⚠️ `#pp-scroll` içine eklenir, `.pp-wrap` içine DEĞİL — wrap masaüstünde
      CSS Grid'e dönüşüyor, altbilgi sütunların arasına sıkışırdı. */
.kf-footer{position:relative;margin-top:40px;
  background:linear-gradient(180deg,rgba(26,12,48,.0) 0%,rgba(26,12,48,.55) 22%,rgba(14,8,28,.92) 100%)}
/* ⭐ Marka şeridi: altbilgiyi sayfanın renk diline bağlayan ince gradyan.
   Ana sayfanın .welcome-bg gradyanıyla AYNI renkler. */
.kf-footer-serit{height:3px;
  background:linear-gradient(90deg,#7c1ddb,#e4181e,#ff6d00,#ffe600,#7c1ddb);
  background-size:300% 100%;animation:kfSeritKay 14s linear infinite}
@keyframes kfSeritKay{from{background-position:0% 50%}to{background-position:300% 50%}}

/* ⚠️⚠️ ÇEREZ BANDI PAYI: band `fixed` ve sayfa sonunu örtüyordu — canlıda
   görüldü, yasal bağlantılar tıklanamıyordu. Band kendi yüksekliğini
   `--kf-cerez-h` olarak bildiriyor; band yokken değişken 0. */
.kf-footer-in{max-width:1180px;margin:0 auto;
  padding:24px 20px calc(28px + var(--kf-cerez-h, 0px));
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap}
.kf-footer-marka{display:flex;align-items:center;gap:12px;min-width:0}
.kf-footer-logo{flex:0 0 auto;display:block;border-radius:9px;
  box-shadow:0 4px 14px rgba(124,29,219,.42)}
.kf-footer-ad{display:block;font-size:1.02rem;font-weight:900;letter-spacing:-.3px;color:#fff}
/* Marka adındaki "f" ana sayfadaki gibi sarı — tek tip kimlik. */
.kf-footer-ad .kf-f{color:#ffe600}
.kf-footer-slogan{display:block;margin-top:2px;font-style:normal;
  font-size:.76rem;color:rgba(255,255,255,.5)}

.kf-footer-sag{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
/* ⚠️ Bağlantılar SARILIR: altı dilde etiket uzunlukları çok değişiyor
   ("Nutzungsbedingungen" ≈ iki katı) ve tek satıra zorlamak taşırırdı. */
.kf-footer-bag{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.kf-footer-bag a,.kf-footer-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.84);font:600 .79rem system-ui,-apple-system,Segoe UI,sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s}
.kf-footer-bag a span,.kf-footer-btn span{font-size:.86rem;line-height:1}
.kf-footer-bag a:hover,.kf-footer-btn:hover{
  background:rgba(124,29,219,.26);border-color:rgba(255,230,0,.5);color:#fff;transform:translateY(-2px)}
.kf-footer-bag a:active,.kf-footer-btn:active{transform:translateY(0)}
.kf-footer-bag a:focus-visible,.kf-footer-btn:focus-visible{outline:2px solid #ffe600;outline-offset:3px}
.kf-footer-telif{margin:0;font-size:.74rem;color:rgba(255,255,255,.4)}

@media (max-width:860px){
  .kf-footer-in{flex-direction:column;align-items:stretch;gap:18px}
  .kf-footer-sag{align-items:stretch}
  .kf-footer-bag{justify-content:flex-start}
}
@media (max-width:640px){
  /* ⚠️ Alt navigasyon (58px) + çerez bandı aynı bölgeyi kullanıyor →
     altbilgi onların arkasında kalmasın diye alta pay bırakılıyor. */
  .kf-footer{margin-top:28px}
  .kf-footer-in{padding:20px 16px calc(74px + var(--kf-cerez-h, 0px) + env(safe-area-inset-bottom,0px))}
  .kf-footer-bag a,.kf-footer-btn{font-size:.75rem;padding:6px 11px}
}
/* ⚠️ Şerit SÜS: hareket duyarlılığında durur, renk kalır. */
@media (prefers-reduced-motion:reduce){ .kf-footer-serit{animation:none} }

/* ══ 🎉 TEŞEKKÜR PANELİ (ödeme sonrası) ════════════════════════════════════
   ⚠️ Eskiden 5 saniyelik bir toast'tı. Para ödeyen biri başka yöne baktıysa
      hiçbir onay görmüyordu — "ödedim mi, olmadı mı?" belirsizliği. Panel
      KAPATILANA KADAR durur.
   ⚠️ KATMAN 10250: tatil panelinin (10200) üstünde ama çerez onayının (10300)
      altında — onay kapısı her şeyin önünde kalmalı. */
.kf-tesekkur{position:fixed;inset:0;z-index:10250;display:flex;align-items:safe center;
  justify-content:center;overflow-y:auto;padding:24px 18px;background:rgba(10,8,20,.76);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:kfTskGir .22s ease}
@keyframes kfTskGir{from{opacity:0}to{opacity:1}}
.kf-tsk-kart{width:100%;max-width:420px;box-sizing:border-box;text-align:center;
  padding:30px 26px 26px;border-radius:18px;
  background:linear-gradient(165deg,#241041,#3a1152);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.kf-tsk-ikon{font-size:2.6rem;line-height:1;margin-bottom:12px}
.kf-tsk-bas{margin:0 0 10px;font-size:1.22rem;font-weight:900;color:#fff;line-height:1.3}
.kf-tsk-alt{margin:0 0 14px;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.82)}
.kf-tsk-not{margin:0 0 20px;font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.56)}
.kf-tsk-btn{width:100%;padding:13px 20px;border-radius:11px;border:none;cursor:pointer;
  font:800 .92rem system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;
  background:linear-gradient(135deg,#7c1ddb,#e4181e);transition:filter .14s,transform .14s}
.kf-tsk-btn:hover{filter:brightness(1.12)}
.kf-tsk-btn:active{transform:scale(.98)}
.kf-tsk-btn:focus-visible{outline:2px solid #ffe600;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .kf-tesekkur{animation:none} }

/* ══ ✉️ İLETİŞİM MESAJLARI (admin) ════════════════════════════════════════
   ⚠️ Posta altyapısı YOK: form mesajları veritabanına yazılıyor ve BURASI
      tek okuma yeri. Okunmamışlar görsel olarak ayrılmalı, yoksa listede
      kaybolurlar. */
.kf-il-adm{max-width:860px;margin:0 auto;padding:4px 2px 40px}
.kf-il-ust{margin:16px 0 12px;font-size:.84rem;opacity:.75}
.kf-il-liste{display:flex;flex-direction:column;gap:12px}
.kf-il-kart{padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
/* ⚠️ Okunmamış RENKLE DEĞİL yalnız, SOL ŞERİTLE de işaretli: renk tek başına
   bilgi taşımamalı (renk körlüğü). */
.kf-il-kart.yeni{border-color:rgba(255,230,0,.4);background:rgba(255,230,0,.07);
  box-shadow:inset 3px 0 0 #ffe600}
.kf-il-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.kf-il-bas b{font-size:.95rem}
.kf-il-bas i{display:block;font-style:normal;font-size:.74rem;opacity:.55;margin-top:2px}
.kf-il-okundu{flex:0 0 auto;padding:6px 12px;border-radius:8px;cursor:pointer;
  font:700 .76rem system-ui;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:inherit;transition:background .14s}
.kf-il-okundu:hover{background:rgba(255,255,255,.16)}
.kf-il-okundu[disabled]{opacity:.5;cursor:default}
.kf-il-kanal{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:9px}
.kf-il-kanal a{font-size:.8rem;color:#a78bfa;text-decoration:none}
.kf-il-kanal a:hover{text-decoration:underline}
/* ⚠️ `pre-wrap`: kullanıcının satır sonları korunsun ama uzun kelime taşırmasın. */
.kf-il-mesaj{margin:0;font-size:.88rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:640px){
  .kf-il-bas{flex-direction:column;align-items:stretch;gap:8px}
  .kf-il-okundu{width:100%}
}

/* ══ 🎞️ ŞEHİR GÖRSEL ŞERİDİ ═══════════════════════════════════════════════
   KULLANICI (2 Eki 2026): kullanıcı fotoğrafı yoksa şehrin KENDİ
   görsellerinden karma; "3 tane değil, sayfanın iki yanına yaslı, yavaşça
   kaysın, mak. 8-10 resim".
   ⚠️ TAM GENİŞLİK (full-bleed): bölüm `.pp-wrap` dolgusunun içinde duruyor;
      iki yana yaslamak için negatif margin + viewport genişliği kullanılıyor.
      ⛔ `width:100vw` TEK BAŞINA YANLIŞ: dikey kaydırma çubuğu olan sayfada
         100vw > içerik genişliği olur ve YATAY KAYDIRMA doğar. Bu yüzden
         `calc(100vw - (100vw - 100%))` değil, daha güvenli olan negatif
         margin + `width:auto` deseni kullanılıyor. */
.kf-ss{margin:0}
.kf-ss-bas{margin:0 0 14px;font-size:1.12rem;font-weight:900;letter-spacing:-.2px}
.kf-ss-ray{
  /* ⚠️ Negatif margin JS'ten geliyor (ÖLÇÜLEREK): şerit `max-width` + otomatik
     margin + dolgu ile ortalanmış bir sütunun içinde ve o üçlü ekrana göre
     değişiyor. Sabit bir değer tahmin olurdu ve ölçümde tutmadı. */
  display:flex;gap:12px;overflow:hidden;
  /* ⚠️ Kenarlarda yumuşak geçiş: şerit birden kesilmesin, "devam ediyor" hissi. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.kf-ss-sira{display:flex;gap:12px;flex:0 0 auto;
  /* ⚠️ Süre JS'ten geliyor (kare sayısına göre) — sabit süre 5 karede hızlı,
     10 karede yavaş olurdu. Yedek 60s: değişken gelmezse yine çalışır. */
  animation:kfSeritKay var(--kf-ss-sure,60s) linear infinite}
/* ⚠️ -50%: iki özdeş sıra var, biri tam kayınca öteki yerine geçer → dikişsiz. */
@keyframes kfSeritKay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ⚠️ Üstüne gelince DURUR: kullanıcı bir kareyi okumak isteyebilir. */
.kf-ss-ray:hover .kf-ss-sira{animation-play-state:paused}
/* ⚠️ ŞEHİR SAYFASI AÇIK ZEMİNLİ (ölçüldü: rgb(246,247,251)) — yer tutucu
   rengi koyu zemine göre yazılırsa görünmez. */
.kf-ss-kare{flex:0 0 auto;width:230px;margin:0;position:relative;border-radius:12px;
  overflow:hidden;background:rgba(30,41,59,.07)}
.kf-ss-kare img{display:block;width:230px;height:155px;object-fit:cover}
.kf-ss-kare figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 8px;font-size:.76rem;font-weight:700;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.76),transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .kf-ss-kare,.kf-ss-kare img{width:180px}
  .kf-ss-kare img{height:122px}
}
/* ⚠️ Hareket duyarlılığı: şerit DURUR ama görseller kalır — bilgi kaybı yok.
   ⛔ Durunca ekranda yalnız ilk kareler kalır; bu kabul: kullanıcı yatay
      kaydırarak gerisini görebilir (`overflow-x:auto`). */
@media (prefers-reduced-motion:reduce){
  .kf-ss-sira{animation:none}
  .kf-ss-ray{overflow-x:auto}
  .kf-ss-sira[aria-hidden="true"]{display:none}
}

/* ══ 💡 GEZİ İPUÇLARI + SSS ═══════════════════════════════════════════════
   KULLANICI (2 Eki 2026): Tripadvisor "X travel tips" + "FAQ about X" deseni.
   ⚠️ AI üretimi olduğu ROZETLE ve dipnotla AÇIKÇA yazıyor.
   ⚠️⚠️ ŞEHİR SAYFASI AÇIK ZEMİNLİ — ÖLÇÜLDÜ: zemin rgb(246,247,251), metin
      rgb(30,41,59). İlk sürüm koyu zemine göre yazılmıştı: rozet metni
      (#d8c2ff) açık mor üstünde GÖRÜNMÜYORDU, ayraç çizgileri
      (rgba(255,255,255,.1)) ve not kutusu da kayboluyordu. Renkler artık
      sayfanın ölçülen paletinden türetiliyor. */
/* ⚠️⚠️ SOL BOŞLUK (kullanıcı, 2 Eki): "ekranın iki yanına yaslamışsın, bu
   biraz kötü duruyor — sol köşeden boşluk bırak."
   KÖK NEDEN: bölüm `#pp-scroll`'a taşınınca `.pp-wrap`'in yatay dolgusunu
   KAYBETTİ; ölçüldü (canlı Kyoto): içerik sütunu 22→1424, ipuçları 0→1446.
   ⛔ Rastgele bir dolgu yazma — İÇERİK SÜTUNUYLA AYNI hizaya getir, yoksa
      üstteki kartlarla ipuçları birbirinden kayar. Değerler `.pp-wrap`'in
      üç kırılma noktasının AYNISI (satır ~1842 / ~1951 / ~3800); orası
      değişirse burası da değişmeli.
   ⚠️ Şerit (`.kf-ss`) BİLEREK tam genişlikte kalıyor — kullanıcı onu
      "iki yana yasla" diye istemişti. İkisi farklı karar. */
.kf-ip{max-width:1080px;margin:0 auto;padding:0 32px}
@media (max-width:640px){ .kf-ip{padding:0 16px} }
@media (min-width:1100px){ .kf-ip{max-width:min(1720px,96vw)} }
.kf-ip-bas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.kf-ip-bas h2,.kf-ip-bas2{margin:0;font-size:1.12rem;font-weight:900;letter-spacing:-.2px}
.kf-ip-bas2{margin:30px 0 10px}
/* Koyu mor metin + açık mor zemin: açık yüzeyde okunur kontrast. */
.kf-ip-rozet{font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;
  background:rgba(124,29,219,.12);color:#6b21a8;white-space:nowrap}
.kf-ip-liste{margin-top:10px;border-top:1px solid rgba(30,41,59,.14)}
.kf-ip-sat{border-bottom:1px solid rgba(30,41,59,.14)}
/* ⚠️⚠️ OK, SATIR SONUNDA DEĞİL YAZININ BİTTİĞİ YERDE (kullanıcı, 2 Eki):
   "yazının bittiği yerde içerik aç kapa oku olsun, tam sonda olmasın."
   ÖLÇÜLDÜ: `space-between` ile soru 452px'te bitiyor, ok 1426px'teydi —
   arada 974px boşluk. `flex-start` ok'u metnin hemen ardına alıyor.
   ⚠️ Satırın TAMAMI tıklanabilir kalıyor (summary blok genişliğinde):
      tıklama alanını metne daraltmak dokunmatikte hedefi küçültürdü.
   ⚠️ Soru 72ch ile sınırlı — cevapla AYNI ölçü, böylece ok her satırda
      birbirine yakın bir x'te duruyor, zıplamıyor. */
.kf-ip-sat summary{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:14px 2px;cursor:pointer;font-size:.93rem;font-weight:700;line-height:1.45;
  list-style:none;transition:color .14s}
.kf-ip-sat summary > span{flex:0 1 auto;max-width:72ch}
/* ⚠️ Tarayıcı varsayılan üçgeni gizleniyor — kendi okumuz var. */
.kf-ip-sat summary::-webkit-details-marker{display:none}
.kf-ip-sat summary::marker{content:''}
.kf-ip-sat summary:hover{color:#7c1ddb}
.kf-ip-sat summary:focus-visible{outline:2px solid #7c1ddb;outline-offset:2px;border-radius:4px}
.kf-ip-ok{flex:0 0 auto;opacity:.45;transition:transform .18s}
.kf-ip-sat[open] .kf-ip-ok{transform:rotate(180deg)}
.kf-ip-cev{padding:0 2px 16px;font-size:.89rem;line-height:1.68;
  color:rgba(30,41,59,.82);max-width:72ch}
.kf-ip-not{margin:18px 0 0;padding:11px 13px;border-radius:10px;font-size:.78rem;line-height:1.6;
  background:rgba(30,41,59,.04);border:1px solid rgba(30,41,59,.12);color:rgba(30,41,59,.68)}
@media (prefers-reduced-motion:reduce){ .kf-ip-ok{transition:none} }