@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=Permanent+Marker&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

        :root {
            /* Splend nötr marka paleti: kırık siyah / kırık beyaz / açık nötr tonlar */
            --ink: #1C1B19;
            --ink-soft: #33312C;
            --muted: #7A766E;
            --line: #E7E4DD;
            /* Bilet kartları (.ev-card/.cal-card) için --line'dan daha koyu,
               aynı nötr paletten bir kontur/perforasyon tonu — kesilmiş bilet
               hissini güçlendirmek amacıyla yalnızca bilet dış çerçevesi,
               çentikleri ve kesik çizgili ayraçlarında kullanılır (bkz. .ev-card,
               .ev-notch, .ev-actions, .cal-card, .cal-notch, .cal-stub,
               .cal-buddy-line). --line diğer tüm yerlerde değişmeden kalır. */
            --ticket-line: #C7C1B3;
            --surface: #F4F3EF;
            --cream: #F3F1EC;
            --paper: #FAFAFA;
            --accent-1: #1C1B19;
            --accent-2: #33312C;

            /* Metin/kart rolleri: --ink ve --ink-soft hem metin hem de (buton/rozet
               gibi) yüzey rengi olarak kullanıldığından, metin rolü için ayrı
               değişkenler kullanılır. */
            --text-primary: #1C1B19;
            --text-secondary: #33312C;
            --card-bg: #ffffff;

            /* ============================================================
               GLOBAL TYPOGRAPHY SYSTEM — kayıt/onboarding ekranlarından
               (.app-card) referans alınmıştır. Değerler .app-card h2,
               p.subtitle, label, .input-hint, .progress-label, .btn-main
               kurallarındaki mevcut değerlerle birebir aynıdır; kayıt
               ekranının kendi kuralları BİLEREK değiştirilmedi (görünümü
               aynen korunsun diye) — bu token'lar o değerleri site geneline
               taşımak için var. Yeni bir ekran/bileşen eklerken doğrudan
               font-size/weight yazmak yerine bu değişkenleri kullan.
               ============================================================ */
            --font-family-base: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-family-display: 'Fraunces', 'Georgia', serif; /* .app-card h2 referansı */
            --font-family-brand: 'Fredoka', 'Inter', sans-serif; /* yalnızca "Splend" logo/wordmark */

            --font-size-h1: 26px;   /* .app-card h2 ile aynı: büyük akış/adım başlığı */
            --font-size-h2: 21px;   /* modal/bölüm başlığı (site geneli h2) */
            --font-size-h3: 17px;   /* alt başlık / çoğu modal üst başlığı */
            --font-size-body: 13.5px; /* p.subtitle referansı */
            --font-size-small: 11px;  /* label / .input-hint / .progress-label referansı */
            --font-size-button: 16px; /* .btn-main referansı */

            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            --line-height-title: 1.2;  /* .app-card h2 referansı */
            --line-height-body: 1.5;   /* p.subtitle referansı */
            --letter-spacing-title: -0.2px; /* .app-card h2 referansı */

            /* ============================================================
               MERKEZİ Z-INDEX / STACKING SİSTEMİ
               KURAL: Yeni açılan bir pencere (modal/popup/bottom sheet/onay
               penceresi/action sheet/drawer), onu açan ekranın HER ZAMAN
               üzerinde ve tamamen erişilebilir görünmelidir. Yeni bir katman
               eklerken rastgele bir sayı seçme — aşağıdaki 7 kademeden en
               uygununu (veya body'de tanımlı --z-sheet ile aynı kademeyi)
               kullan. Kademe içinde birden fazla katman varsa ve biri
               diğerinin İÇİNDEN açılabiliyorsa (ör. bir compose-modal'dan
               bir bottom-sheet açmak), ikisi AYNI kademede olamaz — DOM
               sırasına güvenmek kırılgandır (aynı z-index'te sonraki DOM
               öğesi kazanır). Bkz. #distance-sales-agreement-screen /
               #ticket-refund-policy-screen ve .admin-app'teki notlar.

               1) --z-screen        (500) temel tam ekran görünümler: sohbet,
                                     ayarlar, premium/paywall.
               2) --z-panel         (520) yandan/üstten açılan paneller: filtre.
               3) --z-fullscreen    (550) tam ekran özel görünümler: harita.
               4) --z-admin         (590) admin paneli — BİLEREK dialog
                                     kademesinin (6) altında: admin
                                     aksiyonlarından açılan onay/sheet'ler
                                     (showGenericConfirm, admin-*-sheet) her
                                     zaman üstte görünsün.
               5) --z-nav-screen    (600) "içine girilen" tam ekran ekranlar:
                                     profil düzenle/görüntüle, yardım merkezi,
                                     profil detay. Bunlardan biri açıkken bir
                                     onay/dialog (kademe 6) tetiklenirse, o
                                     dialog HER ZAMAN bu ekranın üzerinde
                                     görünmelidir — bu yüzden 6, 5'ten yüksek.
               6) --z-dialog        (650) ekranın ortasında beliren onay/form
                                     pencereleri (.compose-modal — Engelle
                                     onayı, bilet satın alma, vs). Kademe
                                     5'in HER ZAMAN üzerinde olmalı.
               6b) --z-dialog-elevated (680) bir dialog'un (6) ÜZERİNE açılan
                                     ikincil dialog (ör. bilet satın alma
                                     modalını kapatmadan üstüne açılan
                                     sözleşme ekranları).
               7) --z-sheet         (700) alttan açılan seçim sheet'leri /
                                     action sheet'ler (.bottom-sheet). Bir
                                     dialogun (6) İÇİNDEN açılabildiğinden
                                     (ör. bilet reddetme sebebi sheet'i)
                                     HER ZAMAN kademe 6'nın üzerinde kalmalı.
               8) --z-confirm       (720) TEK, paylaşılan #generic-confirm-modal
                                     (showGenericConfirm, bkz. ui.js). Bu
                                     modal proje genelinde HER katmandan
                                     (ekran/dialog/sheet/admin, hatta bir
                                     BAŞKA dialog kapanmadan üzerine) tetiklenir
                                     — çağıran katman DOM'da her zaman önce
                                     olacağından (kademe 1-7 sıralaması) tek
                                     bir sabit üst kademe yeterli ve DOM
                                     sırasına bağımlı değil. Önceden .compose-
                                     modal'ın taban kademesini (6) paylaşıyordu;
                                     bu, bir .bottom-sheet (7) İÇİNDEN
                                     tetiklendiğinde (ör. Etkinlik Grupları
                                     sheet'inden "Fotoğraf Gerekli") sheet'in
                                     ALTINDA kalmasına yol açıyordu. Çağıranın
                                     sheet'i önce kapatması bir SÖZLEŞME değil,
                                     kırılgan bir alışkanlıktı (bkz. trust.js >
                                     offerBlockAfterReport yorumu) — burada
                                     unutulunca hata geri geldi.
               Bunların üzerinde yalnızca özel, birbirini DIŞLAYAN tam ekran
               geçişler var: --z-viewer (800, fotoğraf görüntüleyici),
               --z-onboarding (900, kayıt sonrası geçiş), --z-farewell (950,
               hesap silme veda ekranı) — bunlar açıkken başka bir katman
               zaten açık olmaz, aralarındaki sıralama önemsizdir.
               ============================================================ */
            --z-screen: 500;
            --z-panel: 520;
            --z-fullscreen: 550;
            --z-admin: 590;
            --z-nav-screen: 600;
            --z-dialog: 650;
            --z-dialog-elevated: 680;
            --z-sheet: 700;
            --z-confirm: 720;
            --z-viewer: 800;
            --z-onboarding: 900;
            --z-farewell: 950;

            /* ============================================================
               BUTON TASARIM SİSTEMİ — ortak buton token'ları. Renk/tipografi
               token'larını (yukarıdaki --accent-* / --font-* vb.) YENİDEN
               TANIMLAMAZ, yalnızca buton-özel ölçüleri (radius/gölge/boşluk/
               ikon boyutu) merkezileştirir. Bkz. .btn-main/.btn-secondary/
               .btn-danger/.icon-btn-circle aileleri.
               ============================================================ */
            --radius-sm: 8px;      /* squircle ikon butonlar, kompakt buton varyantı */
            --radius-md: 12px;     /* .btn-main/.btn-secondary varsayılanı */
            --radius-pill: 999px;  /* .app-card butonları, sso-btn (mevcut değer, artık adlı) */
            --radius-circle: 50%;  /* dairesel ikon-only butonlar */

            --shadow-btn-main: 0 4px 14px color-mix(in srgb, var(--accent-1) 35%, transparent);
            --shadow-btn-main-hover: 0 6px 18px color-mix(in srgb, var(--accent-1) 45%, transparent);

            --gap-icon-text: 8px;      /* ikon-etiket arası boşluk */
            --size-icon-btn-sm: 28px;  /* 22/28/30px örneklerini birleştirir */
            --size-icon-btn-md: 34px;  /* 32/34px örneklerini birleştirir */

            --btn-height-compact: 34px; /* tablo satırı/dev panel gibi kompakt buton varyantı */

            --color-danger: #ef4444;   /* mevcut hardcoded kullanımları adlandırır, yeni renk değil */
            --color-warning: #b45309;  /* mevcut hardcoded kullanımları adlandırır, yeni renk değil */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: var(--font-family-base);
        }

        /* iOS Safari, kendi rengini set etmeyen <button>/<input> öğelerine sistem
           vurgu rengini (mavi tint) uygular; currentColor kullanan Tabler SVG
           ikonlarımız (bkz. assets/js/icons.js > SplendIcon, stroke="currentColor")
           bu yüzden mobilde mavi görünüyordu — en görünür örnek .bell (bildirim)
           ikonuydu. Masaüstünde UA buton rengi zaten metin rengi olduğundan görünüm
           değişmez. Kendi color'unu tanımlayan butonlar (.btn-main/.ev-action vb.)
           etkilenmez; yalnızca tanımsız olanlar iOS mavisini miras almayı bırakır. */
        button, input, select, textarea {
            color: inherit;
        }

        /* Tabler ikon SVG'leri (bkz. assets/js/icons.js) — emoji glyph'lerin
           yerini alan inline SVG'ler metin akışıyla aynı hizada dursun diye
           tek noktadan hizalama; renk/boyut kuralı yok, sadece baseline
           düzeltmesi (SVG'lerin varsayılan inline boşluğu). */
        .splend-icon {
            display: inline-block;
            vertical-align: -0.125em;
            flex-shrink: 0;
        }

        /* Sosyal medya marka ikonları (bkz. assets/js/icons.js SplendSocialIcon) —
           .splend-icon'dan ayrı: renkli/dolu SVG, sabit kare kutu, biri
           diğerinden büyük/küçük algılanmasın diye tüm platformlarda aynı
           boyut. */
        .splend-social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .splend-social-icon svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        body {
            background:
                radial-gradient(circle at 12% 12%, rgba(28, 27, 25, 0.05), transparent 42%),
                radial-gradient(circle at 90% 85%, rgba(28, 27, 25, 0.04), transparent 45%),
                linear-gradient(160deg, #FAFAFA 0%, #F3F1EC 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--text-primary);
            padding: 20px;
        }

        .demo-badge {
            position: fixed;
            top: 14px;
            left: 14px;
            background: rgba(20, 19, 17,0.55);
            color: var(--line);
            font-size: 11px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.15);
            backdrop-filter: blur(4px);
            letter-spacing: 0.3px;
        }

        .app-card {
            background: var(--card-bg);
            padding: 35px;
            border-radius: 24px;
            width: 420px;
            max-width: 100%;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            text-align: center;
            position: relative;
        }

        .nav-row {
            display: none;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .nav-row.show { display: flex; }

        /* ============================================================
           DAİRESEL İKON BUTON AİLESİ — kapat/geri/nav gibi geçici ikonlar
           (.back-btn/.ed-close/.ppv-close/.ppv-nav/.hc-titlebar-close/
           .premium-close/.chat-back-btn/.chat-menu-btn/.friend-action-btn/
           .mode-toggle-btn/.bell/.cal-msg-btn/.ev-notify-btn/.map-zoom-controls
           button) ortak boyut/şekil/hizalamayı buradan alır; her sınıf yalnızca
           kendine özgü rengi/konumunu/hover-active durumunu tanımlar.
           .icon-btn (araç çubuğu, rozet+spin davranışlı) ve .notif-delete-btn
           (kare-yuvarlak, iğnelenmiş ikon boyutlu) BİLEREK bu ailenin DIŞINDA —
           onlar kalıcı araç çubuğu kontrolleri, geçici kapat/nav ikonu değiller. */
        .icon-btn-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-circle);
            border: none;
            cursor: pointer;
            flex-shrink: 0;
        }
        .icon-btn-circle--sm { width: var(--size-icon-btn-sm); height: var(--size-icon-btn-sm); }
        .icon-btn-circle--md { width: var(--size-icon-btn-md); height: var(--size-icon-btn-md); }
        .icon-btn-circle--overlay { background: rgba(255,255,255,0.15); color: #fff; }

        .back-btn {
            background: var(--surface);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 700;
            transition: background 0.2s ease;
        }

        .back-btn:hover { background: var(--line); }

        .progress-track {
            flex: 1;
            height: 5px;
            background: var(--line);
            border-radius: 999px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            border-radius: 999px;
            transition: width 0.35s ease;
            width: 0%;
        }

        .progress-label {
            font-size: 11px;
            color: var(--muted);
            font-weight: 700;
            margin-bottom: 18px;
            display: none;
            text-align: left;
        }

        .progress-label.show { display: block; }

        .step {
            display: none;
        }

        .step.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }

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

        /* ============================================================
           ONBOARDING (Karşılama + Kayıt Akışı) — "Tasarım Sistemi Rehberi"
           uygulaması. Yalnızca .app-card içindeki elemanları hedefler (bu
           konteyner sadece onboarding ekranlarını sarmalıyor — uygulamanın
           geri kalanı .app-shell altında ayrı bir DOM ağacında), böylece
           .input-group/.btn-main/.btn-secondary gibi uygulama genelinde
           paylaşılan sınıflar başka hiçbir ekranda etkilenmez.
           ============================================================ */
        .app-card h2 {
            font-family: 'Fraunces', 'Georgia', serif;
            font-size: 26px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: -0.2px;
            margin-bottom: 10px;
        }

        .app-card p.subtitle {
            font-size: 13.5px;
            line-height: 1.5;
        }

        .app-card input, .app-card select, .app-card textarea {
            border: 2px solid transparent;
            border-radius: 16px;
            padding: 15px 16px;
        }

        .app-card input:focus, .app-card select:focus, .app-card textarea:focus {
            border-color: var(--ink);
        }

        .app-card .btn-main {
            border-radius: var(--radius-pill);
            padding: 16px;
            box-shadow: 0 8px 20px rgba(28, 27, 25, 0.22);
        }

        .app-card .btn-main:hover {
            box-shadow: 0 10px 24px rgba(28, 27, 25, 0.28);
        }

        .app-card .btn-secondary {
            border-radius: var(--radius-pill);
            padding: 14px;
            border: 2px solid var(--line);
        }

        /* Adım 1: Karşılama — logo ortada, aksiyonlar en altta sabit */
        .welcome-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 380px;
        }

        .welcome-logo-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
        }

        .welcome-actions { width: 100%; margin-top: auto; }

        /* Paylaşılan bir etkinlik davet linkiyle (#invite/<token>) gelen, henüz
           hesabı olmayan ziyaretçi için kişiselleştirilmiş karşılama kartı (görev:
           "Viral Etkinlik Davet ve Paylaşım Sistemi" md. 4/5 — landing deneyimi).
           Bkz. app.js > showWelcomeInviteBannerIfPending. */
        .welcome-invite-banner {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-md, 14px);
            padding: 12px 14px;
            margin-top: 14px;
            color: var(--text-primary);
        }

        .welcome-invite-banner-title { font-size: 13.5px; font-weight: 700; }
        .welcome-invite-banner-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

        /* Adım 7: Doğum tarihi — Gün / Ay / Yıl yan yana */
        .birthdate-row { display: flex; gap: 10px; }
        .birthdate-row .input-group { flex: 1; margin-bottom: 0; }
        .birthdate-row input { text-align: center; font-size: 16px; font-weight: 600; }

        /* Doğum tarihi onay kartı (compose-card içinde kullanılır) */
        .age-confirm-box {
            background: var(--surface);
            border-radius: 16px;
            padding: 16px;
            margin: 12px 0 16px;
            text-align: left;
        }

        .age-confirm-value {
            font-family: 'Fraunces', 'Georgia', serif;
            font-size: 22px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .age-confirm-detail { font-size: 12.5px; color: var(--muted); font-weight: 600; }

        /* Adım 6: Hızlı giriş bağlantısı modalı — Google/Apple butonları */
        .sso-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--gap-icon-text);
            width: 100%;
            padding: 14px;
            margin-top: 10px;
            border-radius: var(--radius-pill);
            border: 2px solid var(--line);
            background: var(--surface);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }

        /* Adım 8: Ara bilgilendirme / geçiş ekranı — sabit görsel (Efrosynos
           mozaiği, assets/media/onboarding-transition.jpg), gerçek en-boy
           oranıyla (1349:1065) doldurulur; eski siyah kart bloğunun kapladığı
           alanla YAKLAŞIK aynı yükseklik oranını korur. object-fit:cover
           görseli KIRPAR ama hiçbir zaman GERMEZ/BOZMAZ. Alttaki ::after
           gradyanı görüntüyü yumuşakça siyaha geçirir; alt %25'lik dilim
           (stop'lar 75%→100%) tamamen düz siyahtır — ana alıntı metni bu
           dilimin içine, görselin ÜZERİNE rastgele bindirilmiş değil, o siyah
           zeminle bütünleşmiş şekilde yerleştirilir. */
        .onb-transition {
            position: relative;
            aspect-ratio: 1349 / 1065;
            border-radius: 20px;
            overflow: hidden;
            background: var(--ink);
            margin-bottom: 18px;
        }

        .onb-transition-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .onb-transition::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.04) 40%,
                rgba(0,0,0,0.38) 58%,
                rgba(0,0,0,0.72) 68%,
                rgba(0,0,0,0.94) 75%,
                #000 82%,
                #000 100%);
        }

        .onb-transition .onb-quote {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            padding: 0 22px 22px;
            font-family: 'Fraunces', 'Georgia', serif;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;
            color: #fff;
            text-align: center;
        }

        /* Alt açıklama metni bu adımda ana alıntıyla AYNI oranda küçültülür
           ki tipografik hiyerarşi (ana metin her zaman belirgin şekilde
           büyük) korunsun — yalnızca bu adıma özel, diğer onboarding
           adımlarındaki genel .subtitle boyutuna dokunulmaz. */
        #step-reg-transition .subtitle {
            font-size: 13px;
        }

        .logo-mark {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        /* Splend marka işareti: resmi "S" logosu (SVG, bkz. icons.js >
           splendLogoSvg). Boyut hâlâ font-size üzerinden gelir (sm/md/lg +
           .hc-brand-mark/.admin-topbar-brand gibi context override'ları
           değişmeden çalışmaya devam eder) — SVG width/height=1em ile bu
           font-size'ı miras alır. */
        .splend-mark {
            line-height: 1;
            display: inline-block;
        }

        .splend-mark.sm { font-size: 26px; }
        .splend-mark.md { font-size: 44px; }
        .splend-mark.lg { font-size: 64px; }

        .splend-logo-svg {
            width: 1em;
            height: 1em;
            display: block;
            overflow: visible;
            object-fit: contain;
        }

        /* Keşif/loading ekranındaki animasyonlu logo (bkz. icons.js >
           splendLogoSvg/startSplendLogoAnimation). Raster PNG bir <image>
           üzerinde, S'nin merkez hattını kabaca izleyen bir SVG <mask> ile:
           AŞAMA 1 (is-drawing) — maske stroke'u pathLength=1 ile 0'dan 1'e
           "çizilir", PNG kademeli açığa çıkar. AŞAMA 2 (is-drawn) — çizim
           bitince maske tamamen kaldırılır, PNG'nin tamamı (piksel piksel
           orijinaliyle aynı) görünür olur. AŞAMA 3 (is-spinning) — sonsuz
           360° dön / ~200ms durakla döngüsü, tamamı görünür PNG üzerinde. */
        .splend-logo-anim-svg {
            width: 1em;
            height: 1em;
            display: block;
            overflow: visible;
            transform-origin: 50% 50%;
            will-change: transform;
        }

        .splend-logo-draw-path {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
        }

        .splend-logo-anim-svg.is-drawing .splend-logo-draw-path {
            animation: splendLogoDrawPath 0.9s cubic-bezier(.65, 0, .35, 1) forwards;
        }

        .splend-logo-anim-svg.is-drawn .splend-logo-draw-img {
            mask: none;
            -webkit-mask: none;
        }

        /* Dönüş: 0deg -> 360deg akıcı ease-in-out (900ms), ardından ~200ms
           duraklama (360deg'de sabit kalır), sonra döngü baştan başlar —
           360deg görsel olarak 0deg ile aynı olduğundan döngü sıçraması
           gözle görülmez. */
        .splend-logo-anim-svg.is-spinning {
            animation: splendLogoSpinLoop 1100ms infinite;
        }

        @keyframes splendLogoDrawPath {
            to { stroke-dashoffset: 0; }
        }

        @keyframes splendLogoSpinLoop {
            0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
            82% { transform: rotate(360deg); }
            100% { transform: rotate(360deg); }
        }

        h1 {
            /* Yalnızca "Splend" logo/wordmark için — marka kimliği, bu yüzden
               genel başlık hiyerarşisine (h2/h3 = --font-family-display) dahil
               edilmedi; sitede h1 başka hiçbir yerde kullanılmıyor. */
            font-family: var(--font-family-brand);
            font-size: 34px;
            font-weight: 600;
            letter-spacing: -0.5px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        h2 {
            /* Site geneli modal/bölüm başlığı — kayıt ekranındaki .app-card h2
               (Fraunces) ile aynı tipografik aile; kendi hiyerarşi kademesi
               (21px) korunur, .app-card h2 (26px) ondan büyük kalır. */
            font-family: var(--font-family-display);
            font-size: var(--font-size-h2);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-title);
            letter-spacing: var(--letter-spacing-title);
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        h3 {
            /* Daha önce hiç stillenmemişti (tarayıcı varsayılanına düşüyordu) —
               uygulamadaki modal başlıklarının büyük çoğunluğu (gc-title,
               ed-title, pe-field-sheet-title, vb.) çıplak <h3> kullanıyor;
               bu kural onları tek noktadan kayıt ekranı diliyle hizalar. */
            font-family: var(--font-family-display);
            font-size: var(--font-size-h3);
            font-weight: var(--font-weight-medium);
            line-height: 1.3;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        p.subtitle {
            font-size: 13px;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: 25px;
        }

        .input-group {
            margin-bottom: 15px;
            text-align: left;
        }

        label {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 4px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        /* Zorunlu alan işareti — form label'larının yanında yalnızca "*" ile
           gösterilir. Uygulama genelinde TEK standart budur: zorunlu alan → "*",
           opsiyonel alan → hiçbir ek ifade yok ("Zorunlu"/"Opsiyonel" etiketi
           hiçbir formda kullanılmaz). Görsel işaret aria-hidden'dır; erişilebilirlik
           için ilgili input'lar ayrıca aria-required="true" taşır. */
        .req-mark {
            color: var(--color-danger);
            margin-left: 2px;
            font-weight: 800;
        }

        .form-required-note {
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            margin: -6px 0 14px;
            text-align: left;
        }

        .form-required-note .req-mark {
            margin-left: 0;
            margin-right: 2px;
        }

        .input-hint {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px;
            display: block;
        }

        .input-hint.demo {
            color: var(--text-secondary);
        }

        .input-hint.info {
            color: #b45309;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px 14px;
            background: var(--surface);
            border: 2px solid var(--line);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 14px;
            outline: none;
            transition: all 0.3s ease;
            /* font-family: * seçicisinden (var(--font-family-base)) miras alınır — burada tekrar tanımlamaya gerek yok. */
            resize: vertical;
        }

        input:focus, select:focus, textarea:focus {
            border-color: var(--accent-1);
            background: var(--surface);
        }

        input::placeholder, textarea::placeholder {
            color: var(--muted);
            opacity: 1;
        }

        input.error, select.error, textarea.error {
            border-color: var(--color-danger) !important;
            background: #fef2f2;
        }

        /* ============================================================
           ZORUNLU ALAN HATA STATE'İ — GRUP kapsayıcıları (chip listesi/checkbox
           satırı/dosya yükleyici). Yukarıdaki input/select/textarea.error tekil
           alanlar için border-color değiştirir; chip/checkbox gibi bileşenlerde
           tek tek her chip'i kırmızı yapmak yerine (görev: "hangi alanın eksik
           olduğunu belli edecek şekilde ilgili chip container'ını işaretle")
           GRUBUN kendisi bu class'ı alır. border yerine outline kullanılır ki
           mevcut kenarlık/padding/boyut hiç değişmesin, layout kaymasın —
           outline kutunun dışında durur, yer kaplamaz. Aynı --color-danger
           token'ı kullanılır, yeni renk yok. */
        .ec-pill-list.error,
        .ec-checkbox-grid.error,
        .interests-grid.error,
        .chip-filter-row.error {
            outline: 2px solid var(--color-danger);
            outline-offset: 4px;
            border-radius: 14px;
        }

        .ec-check.error,
        .ec-radio-pill.error,
        .consent-row.error {
            outline: 2px solid var(--color-danger);
            outline-offset: 2px;
            border-radius: 10px;
        }

        .mini-uploader.error,
        .ec-location-picker.error {
            border-color: var(--color-danger) !important;
        }

        /* @ önekli inputlar (kullanıcı adı, sosyal medya hesapları): önek eskiden
           inputun İÇİNE absolute konumlanıyordu (top:50%+translateY) — bu, "@" ve
           kullanıcı adının satır yüksekliği/font metrikleri (line-height:normal)
           tarayıcı/font'a göre farklı hesaplandığından baseline'ı görsel olarak
           kaydırıyordu. Bunun yerine wrap'in kendisi input'un görsel kutusu olur
           (border/background/radius artık burada), "@" ve input aynı flex satırında
           align-items:center ile ortalanan gerçek kardeş elemanlardır — ikisi de
           aynı line-height'ı paylaştığından font/tarayıcı farkı olsa da hizası kaymaz.
           Odak/hata durumları da input yerine wrap'te gösterilir (:focus-within,
           :has(.error) — bu proje zaten başka yerde :has() kullanıyor). */
        .at-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--surface);
            border: 2px solid var(--line);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .at-input-wrap:focus-within {
            border-color: var(--accent-1);
        }

        .at-input-wrap:has(input.error) {
            border-color: #ef4444;
        }

        .at-input-wrap .at-symbol {
            flex-shrink: 0;
            padding-left: 14px;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1;
            pointer-events: none;
        }

        .at-input-wrap input {
            flex: 1 1 auto;
            min-width: 0;
            border: none;
            background: transparent;
            padding-left: 4px;
            line-height: 1;
        }

        .at-input-wrap input:focus {
            border: none;
            background: transparent;
        }

        .location-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .location-container.cols-3 { grid-template-columns: repeat(3, 1fr); }

        .interests-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 8px;
            max-height: 150px;
            overflow-y: auto;
            padding: 5px;
        }

        /* ADIM 9 (kayıt akışının son adımı — bkz. index.html > #step-reg-interests):
           .interests-grid'in genel 150px'lik iç scroll kutusu burada devre dışı
           bırakılır. Aksi hâlde bu mini kutu az sayıda ilgi alanıyla ekrana zaten
           sığdığından, altındaki +18/KVKK onay alanları hiç scroll gerekmeden
           görünür kalıyor ve viewport'a sabitlenmiş gibi bir izlenim veriyordu —
           gerçek bir position:fixed/sticky yoktu, sorun buradaki iç konteynerdi.
           Diğer ekranlardaki (profil düzenleme, filtre modalleri) .interests-grid
           kullanımları bu kapsamın dışında, değişmeden kalır. */
        #step-reg-interests .interests-grid {
            max-height: none;
            overflow: visible;
        }

        .interests-hint {
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            text-align: left;
            margin-bottom: 18px;
        }

        .interest-item {
            padding: 10px;
            background: var(--surface);
            border: 2px solid var(--line);
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            text-align: left;
        }

        .interest-item[data-icon]::before { content: attr(data-icon) " "; }

        .interest-item.selected {
            background: var(--surface);
            border-color: var(--accent-1);
            color: var(--text-primary);
        }

        .photos-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 12px;
        }

        .photo-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .mini-uploader {
            border: 2px dashed var(--line);
            width: 100%;
            height: 95px;
            border-radius: 12px;
            background: var(--surface);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            transition: 0.2s;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .mini-uploader.uploaded {
            border-color: #10b981;
            border-style: solid;
        }

        /* Etkinlik oluşturma formundaki harita konum seçici kutusu — .mini-uploader
           (afiş yükleyici) ile AYNI dashed-box dili, satır biçiminde (bkz. index.html >
           #ec-location-picker-box, app.js > openEventLocationPicker). */
        .ec-location-picker {
            border: 2px dashed var(--line);
            border-radius: 12px;
            background: var(--surface);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            transition: 0.2s;
        }

        .ec-location-picker.picked {
            border-color: #10b981;
            border-style: solid;
            color: var(--text-primary);
        }

        .mini-uploader.show-vitrin {
            border: 3px solid var(--accent-2) !important;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
        }

        .remove-photo {
            position: absolute;
            top: 3px;
            right: 3px;
            background: rgba(15,23,42,0.65);
            color: #fff;
            border: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            display: none;
        }

        .mini-uploader.uploaded .remove-photo {
            display: block;
        }

        .btn-vitrin {
            font-size: 10px;
            padding: 4px 6px;
            background: var(--line);
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            width: 100%;
        }

        .btn-vitrin.active {
            background: var(--accent-2);
            color: white;
        }

        .timer-box {
            font-size: 24px;
            font-weight: 800;
            color: #ef4444;
            margin: 10px 0;
        }

        .spam-warning {
            font-size: 12px;
            color: var(--muted);
            margin-top: 8px;
            font-weight: 500;
        }

        .help-link {
            font-size: 12px;
            color: var(--muted);
            margin-top: 10px;
        }

        .help-link a {
            color: var(--text-primary);
            text-decoration: underline;
            font-weight: 600;
        }

        .btn-resend {
            background: none;
            border: none;
            color: #ef4444;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            margin-top: 5px;
            display: none;
        }

        .consent-group {
            text-align: left;
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .consent-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .consent-row input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            flex-shrink: 0;
            accent-color: var(--accent-1);
        }

        .consent-row label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.4;
        }

        .consent-row a {
            color: var(--accent-1);
            font-weight: 700;
            text-decoration: none;
        }

        /* ============================================================
           ORTAK BUTON AİLESİ — .btn-main (birincil) / .btn-secondary
           (ikincil). İkon+etiket dikey hizası flex ile sağlanır (bkz.
           --gap-icon-text); SplendIcon() çıktısı ile etiket metni arasındaki
           TEK boşluk karakteri BİLEREK korunur — svg bir metin düğümüyle
           aynı satır-içi akışta olduğundan flex `gap` ikisi arasına
           uygulanmaz (yalnızca svg'yi dikeyde ortalar ve tüm satırı
           yatayda ortalar); bu yüzden metni ayrı bir <span>'a sarmadan
           çift boşluk riski yoktur. */
        .btn-main, .btn-secondary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--gap-icon-text);
            white-space: normal;
            text-align: center;
            border-radius: var(--radius-md);
            cursor: pointer;
        }

        .btn-main {
            width: 100%;
            min-height: 48px;
            padding: 14px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            border: none;
            color: white;
            font-size: var(--font-size-button);
            font-weight: 700;
            box-shadow: var(--shadow-btn-main);
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .btn-main:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-btn-main-hover);
            filter: brightness(1.05);
        }

        .btn-main:active {
            transform: translateY(0);
            filter: brightness(0.97);
        }

        .btn-main:disabled {
            background: var(--line);
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
            color: var(--muted);
        }

        .btn-main:focus-visible, .btn-secondary:focus-visible {
            outline: 2px solid var(--accent-1);
            outline-offset: 2px;
        }

        .ev-action:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-secondary {
            width: 100%;
            min-height: 44px;
            padding: 12px;
            background: var(--surface);
            border: none;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 700;
            margin-top: 10px;
            transition: background 0.2s ease;
        }

        .btn-secondary:hover { background: var(--line); }
        .btn-secondary:active { filter: brightness(0.96); }
        .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Yıkıcı/uyarı aksiyon rengi — .btn-secondary üzerine eklenen bir
           renk değiştirici (ör. class="btn-secondary btn-danger"). Önceden
           bunun için 13 farklı yerde inline style="color:#ef4444/#b45309"
           kullanılıyordu; artık tek, adlı bir class. */
        .btn-danger { color: var(--color-danger); }
        .btn-warning { color: var(--color-warning); }

        /* Kompakt/otomatik-genişlik buton varyantı — tablo satırı / dev panel /
           admin çubuğu gibi satır-içi konumlarda .btn-main/.btn-secondary'yi
           küçültür. Önceden 6 ayrı, birbirinden bağımsız elle ayarlanmış kural
           vardı (dev panel, davetli listesi, organizatör aksiyon ızgarası,
           etkinlik detay organizatör satırı, admin üst çubuğu, admin tablosu);
           artık TEK kaynaktan yönetiliyor. Konteyner scope'ları DEĞİŞMEDİ,
           yalnızca değerler merkezileşti. Dar tablo hücrelerinde satır
           kaymasını önlemek için metin sarılmaz, taşarsa "..." ile kesilir. */
        .dev-panel-body .btn-secondary,
        .invite-roster-row .btn-secondary,
        .oed-actions-grid .btn-secondary,
        .oed-actions-grid .btn-main,
        .ed-organizer-row .btn-secondary,
        .admin-topbar-right .btn-secondary,
        .admin-table-actions .btn-main,
        .admin-table-actions .btn-secondary,
        #event-groups-sheet-body .match-list-item .btn-secondary {
            width: auto;
            margin: 0;
            min-height: var(--btn-height-compact);
            padding: 8px 12px;
            font-size: 12px;
            border-radius: var(--radius-sm);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Etkinlik Grupları satırı: buton "yardımcı aksiyon" olmalı, kartın
           tam genişliğini kaplamamalı ve isim/alt-bilgiyi sıkıştırmamalı. */
        #event-groups-sheet-body .match-list-item .btn-secondary {
            flex-shrink: 0;
        }

        /* Etkinlik detayı > "Etkinlik Grupları" listesindeki grup adı: genel
           .m-name kuralı (satır 3113, DM/grup sohbet listesi için) tek satırda
           "..." ile keser — burada BİLEREK ezilir, çünkü bu liste bir sohbet
           önizlemesi değil, grup KEŞİF listesi ve uzun grup adının TAMAMI
           görünmeli (grup adı ör. "Ali'nin etkinlik grubu — <uzun etkinlik
           adı>" olabilir). Diğer .m-name kullanımları (Mesajlar sekmesi,
           DM listesi) bilinçli olarak DEĞİŞTİRİLMEDİ. */
        #event-groups-sheet-body .match-list-item .m-name {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        #event-groups-sheet-body .match-list-item {
            align-items: flex-start;
        }

        /* "Bu etkinlik için bir grup aç" / "Etkinlik Grubu Oluştur" — hiç grup
           yokken gösterilen giriş kartı. Eski hâl: avatar + iki metin + uzun
           nowrap buton AYNI SATIRDA → dar ekranda metin kırpılıyor, buton
           taşıyor, hizasız görünüyordu (V1 paket 3 md. 1). Yeni: dikey yığın —
           ikon+başlık, alt açıklama, sonra TAM GENİŞLİK buton. Her ekran
           genişliğinde metin tam görünür, buton taşmaz. */
        .eg-create-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 8px;
            box-shadow: 0 2px 8px rgba(15,23,42,0.05);
        }

        .eg-create-card .eg-create-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .eg-create-card .eg-create-title [data-splend-icon] { color: var(--muted); flex-shrink: 0; }

        .eg-create-card .eg-create-sub {
            font-size: 12px;
            font-weight: 500;
            color: var(--muted);
            line-height: 1.4;
        }

        .eg-create-card .btn-secondary {
            width: 100%;
            margin: 4px 0 0;
            white-space: normal;
            min-height: var(--btn-height-compact);
        }

        .eg-create-card.is-pending .eg-create-sub { color: var(--accent-1); }

        .footer-text {
            margin-top: 20px;
            font-size: 13px;
            color: var(--muted);
        }

        .footer-text a {
            color: var(--accent-1);
            text-decoration: none;
            font-weight: 600;
        }

        /* Developer paneli — yalnızca geliştirme/test için, sade ve göze batmaz */
        .dev-panel {
            margin-top: 28px;
            padding-top: 10px;
            border-top: 1px solid var(--line);
        }

        .dev-panel summary {
            cursor: pointer;
            list-style: none;
            font-size: 11px;
            color: var(--muted);
            text-align: center;
        }

        .dev-panel summary::-webkit-details-marker { display: none; }

        .dev-panel-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
        }

        .link-btn {
            color: var(--accent-1);
            font-weight: 700;
            cursor: pointer;
            text-decoration: underline;
        }

        .field-error {
            display: none;
            color: #ef4444;
            font-size: 11px;
            font-weight: 700;
            margin-top: 4px;
        }

        .field-error.show { display: block; }

        /* Şifre alanları: göster/gizle, Caps Lock uyarısı, şifre gücü göstergesi */
        .input-group.pw-field { position: relative; }
        .input-group.pw-field input { padding-right: 42px; }

        .pw-toggle-btn {
            position: absolute;
            right: 8px;
            top: 30px;
            width: auto;
            background: none;
            border: none;
            padding: 4px 6px;
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            color: var(--muted);
        }

        .capslock-warning {
            display: none;
            color: #b45309;
            font-size: 11px;
            font-weight: 700;
            margin-top: 4px;
        }

        .capslock-warning.show { display: block; }

        .pw-strength-wrap { margin-top: 8px; }

        .pw-strength-bar {
            height: 5px;
            border-radius: 999px;
            background: var(--line);
            overflow: hidden;
        }

        .pw-strength-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 999px;
            transition: width .25s ease, background-color .25s ease;
        }

        .pw-strength-bar-fill.weak { background: #ef4444; }
        .pw-strength-bar-fill.medium { background: #f59e0b; }
        .pw-strength-bar-fill.strong { background: #16a34a; }

        .pw-strength-label {
            font-size: 11px;
            font-weight: 800;
            margin-top: 4px;
            min-height: 14px;
        }

        .pw-strength-label.weak { color: #ef4444; }
        .pw-strength-label.medium { color: #f59e0b; }
        .pw-strength-label.strong { color: #16a34a; }

        .pw-checklist {
            list-style: none;
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .pw-checklist li {
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
        }

        .pw-checklist li.met { color: #16a34a; }

        /* Hesap Güvenliği: e-posta doğrulama rozeti */
        .verify-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 999px;
        }

        .verify-badge.ok { background: #ecfdf5; color: #0f766e; }
        .verify-badge.warn { background: #fffbeb; color: #b45309; }
        .verify-badge.danger { background: #fef2f2; color: #b91c1c; }

        /* Admin doğrulama kuyruğu — kullanıcının completeVerification() ile
           gönderdiği gerçek doğrulama karesi (bkz. admin.js > renderVerificationKycDetails) */
        .admin-verify-photo {
            display: block;
            width: 120px;
            aspect-ratio: 1 / 1.15;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid var(--line);
            margin: 8px 0;
        }
        .admin-verify-photo-missing {
            font-size: 12px;
            color: var(--muted);
            margin: 8px 0;
        }

        /* "Zarar + Mahsup + Borç" modeli — organizatör panelindeki açık borç
           bandı. .verify-badge.danger ile AYNI renk çifti, yeni bir renk sistemi
           icat edilmedi (bkz. renderOrganizerDebtSummary, app.js). */
        .debt-banner {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .debt-banner-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
        .debt-banner-label { font-size: 12px; font-weight: 700; color: #b91c1c; }
        .debt-banner-amount { font-weight: 800; color: #b91c1c; font-size: 15px; white-space: nowrap; }
        .debt-banner-desc { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; line-height: 1.4; }

        /* Özel (davetli) etkinlik rozeti — etkinlik kartı, detay ekranı ve
           organizatör panelinde aynı görünümle kullanılır. */
        .private-event-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: var(--ink);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 999px;
            vertical-align: middle;
            white-space: nowrap;
        }

        /* Organizatör paneli: davetli listesi ve bekleyen katılımcı satırları */
        .invite-roster-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 0;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            border-bottom: 1px solid var(--line);
        }

        .invite-roster-row:last-child { border-bottom: none; }
        .invite-status-tag { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
        .success-icon {
            font-size: 54px;
            margin-bottom: 8px;
        }

        .summary-card {
            background: var(--surface);
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            text-align: left;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 18px;
            line-height: 1.7;
        }

        .summary-card b { color: var(--text-primary); }

        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--ink);
            color: #fff;
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 999;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        /* ================= ANA UYGULAMA (APP SHELL) ================= */
        .app-shell {
            display: none;
            width: 430px;
            max-width: 100%;
            height: 780px;
            max-height: 92vh;
            background: var(--surface);
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            flex-direction: column;
            position: relative;
        }

        .app-shell.show { display: flex; }

        .app-header {
            background: var(--card-bg);
            padding: 16px 20px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
            will-change: transform;
            transition: transform 0.25s ease, margin-bottom 0.25s ease;
        }

        .app-header .logo-mini {
            flex-shrink: 0;
        }

        .app-header .greeting-title {
            font-family: var(--font-family-display);
            font-size: 15px;
            font-weight: 600;
            line-height: var(--line-height-title);
            color: var(--text-primary);
        }

        .app-header .greeting-sub {
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
        }

        .bell {
            margin-left: auto;
            font-size: 18px;
            background: var(--surface);
        }

        /* Sosyal Mod / Görünmez Mod (yalnızca Etkinlikler sekmesi) — .show sınıfı
           JS'ten gelir (bkz. app.js > switchAppTab). Varsayılan display:none
           olduğundan diğer sekmelerde (Takvimim/Arkadaşlar/Profil) app-header
           TAMAMEN eskisiyle aynı kalır — .bell'in kendi margin-left:auto'su o
           ekranlarda hiç dokunulmadan çalışmaya devam eder. .show iken bu auto
           margin buraya taşınır ki switch+zil grubu birlikte sağa yaslansın
           (aksi halde iki auto margin araya girip switch'i zilden ayırırdı).
           .mode-toggle-wrap.show + .bell kuralı SADECE bu durumda zilin kendi
           auto margin'ini sıfırlayarak ikisini bitişik tutar. */
        .mode-toggle-wrap {
            display: none;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .mode-toggle-wrap.show {
            display: flex;
            margin-left: auto;
        }

        .mode-toggle-wrap.show + .bell {
            margin-left: 0;
        }

        /* Göz ikonu butonu — .bell ile aynı dairesel tıklama alanı/ölçek
           (34x34, font-size:18px) böylece Tabler ikon aynı stroke/boyut
           mantığında ve mobilde de kolay dokunulabilir kalır (bkz. görev
           md. 5/6). Eski .switch.mode-switch (checkbox+slider) kaldırıldı.
           Kutu boyutu/şekli artık .icon-btn-circle.icon-btn-circle--md
           (bkz. index.html > #events-mode-toggle-btn) tarafından sağlanır —
           burada yalnızca bu butona özel delta (renk/dolgu) kalır. */
        .mode-toggle-btn {
            font-size: 18px;
            background: var(--surface);
            color: var(--text-primary);
            padding: 0;
            line-height: 1;
            cursor: pointer;
        }

        .mode-toggle-btn:active { opacity: 0.7; }

        /* Keşif araç çubuğu: kategoriler yerine filtre ikonu (harita artık yüzen buton) */
        .discover-toolbar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px 16px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }

        .icon-btn {
            position: relative;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            border: none;
            background: var(--surface);
            color: var(--text-primary);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
        }

        .icon-btn.spinning {
            pointer-events: none;
            animation: iconSpin 0.6s linear infinite;
        }

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

        .icon-btn .filter-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--ink);
            border: 2px solid #fff;
            display: none;
        }

        .icon-btn.has-filters .filter-dot { display: block; }

        /* Etkinlikler ekranı: filtre ikonu artık araç çubuğunun en sağında —
           çipler alanı esneyerek (flex:1) ikonu sağ kenara iter. Yalnızca bu
           ekrana özel olsun diye .events-toolbar ile scope'lanır; Takvimim'in
           kendi araç çubuğu (aynı .discover-toolbar/.active-filter-chips
           sınıflarını paylaşır) etkilenmez. */
        .events-toolbar { justify-content: flex-end; }
        .events-toolbar .active-filter-chips { flex: 1; }

        /* Aşağı çekince yenile (pull-to-refresh) — hem Etkinlikler hem Takvimim
           ekranında (bkz. events.js > PTR_TARGETS). Kalıcı bir buton yerine
           yalnızca çekme hareketi sırasında görünen, listenin üstünde
           konumlanan minimal bir gösterge. */
        #events-scroll-area, #cal-scroll-area { position: relative; }

        .ptr-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 8px;
            transform: translateY(-56px);
            color: var(--muted);
            font-size: 18px;
            z-index: 5;
            pointer-events: none;
        }

        .ptr-indicator.ptr-ready { color: var(--text-primary); }

        .ptr-indicator .ptr-spinner { display: inline-block; }

        .ptr-indicator.ptr-loading .ptr-spinner { animation: iconSpin 0.6s linear infinite; }

        #events-pull-content, #cal-pull-content { transform: translateY(0); }

        /* Mesajlar ekranı: Instagram benzeri arama çubuğu + yeni mesaj ikonu, aynı
           araç çubuğu satırında (discover-toolbar reuse edilir). */
        .messages-search-input {
            flex: 1;
            margin: 0;
            height: 38px;
            padding: 0 16px;
            border: none;
            border-radius: 999px;
            background: var(--surface);
            font-size: 13px;
        }

        .messages-section-title {
            font-size: 11px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 14px 16px 6px;
            flex-shrink: 0;
        }

        /* Mesajlar ekranının büyük başlığı — Splend'in mevcut display fontu
           (Fredoka, bkz. .discover-text) ile, üst header (logo/selam/zil)
           bu ekranda hiç görünmediği için onun yerini alır. */
        .messages-page-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 28px;
            font-weight: 600;
            color: var(--text-primary);
            padding: max(18px, env(safe-area-inset-top)) 16px 4px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            will-change: transform;
            transition: transform 0.25s ease, margin-bottom 0.25s ease;
        }

        /* Profil başlığı, paylaş butonunu sağa yaslamak için metni bir <span>'e
           sarar (bkz. index.html > #view-profile); global `* { font-family }`
           reset'i (yukarıda) bu span'e miras yerine DOĞRUDAN uygulanıp Fredoka'yı
           ezer — Mesajlar/Arkadaşlar/Takvim'de metin çıplak text node olduğundan
           bu sorunu hiç yaşamaz. */
        .messages-page-title > span {
            font-family: inherit;
            font-weight: inherit;
        }

        /* Takvimim başlığı: metnin yanına arama/filtre/bildirim ikonları eklenir
           (bkz. index.html > #view-calendar .page-title-actions). Diğer büyük
           başlıklarda (Mesajlar/Arkadaşlar/Profil) bu grup hiç yok, o yüzden
           .messages-page-title'ın flex düzeni onları etkilemez. */
        .page-title-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        /* "Senin sıran / Onların sırası" — .profile-accordion ile aynı görsel
           dili kullanır, ama liste uzayabildiğinden max-height sınırı çok daha
           yüksektir (bkz. #acc-interests.open ile aynı gerekçe). */
        .turn-group {
            border: 1px solid var(--line);
            border-radius: 12px;
            margin: 0 0 10px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .turn-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 12px 14px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .turn-chevron {
            flex-shrink: 0;
            font-size: 11px;
            color: var(--muted);
            transition: transform 0.3s ease;
        }

        .turn-group.open .turn-chevron { transform: rotate(180deg); }

        .turn-body {
            max-height: 0;
            overflow: hidden;
            padding: 0 10px;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .turn-group.open .turn-body {
            max-height: 3000px;
            padding: 0 10px 10px;
        }

        /* Arkadaşlar ekranı: Instagram'daki "Sırala" satırı — başlığa dokunan bir
           buton ve altında açılan küçük seçenek menüsü. */
        .friends-sort-bar {
            position: relative;
            padding: 0 16px 10px;
            flex-shrink: 0;
        }

        .friends-sort-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            border: none;
            background: none;
            padding: 0;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            cursor: pointer;
        }

        .friends-sort-toggle .friends-sort-caret { font-size: 12px; }

        .friends-sort-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 16px;
            z-index: 20;
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(15,23,42,0.14);
            overflow: hidden;
            min-width: 170px;
        }

        .friends-sort-menu.show { display: block; }

        .friends-sort-menu button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px 14px;
            border: none;
            background: none;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
        }

        .friends-sort-menu button:not(:last-child) { border-bottom: 1px solid var(--line); }

        .app-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            /* .bottom-nav artık overlay (bkz. yukarısı) — içerik onun altına
               kadar uzanmalı ki slider kaybolunca gerçek içerik görünsün.
               --bottom-nav-h, ui.js > initBottomNavScrollHide tarafından
               gerçek ölçülen yükseklikle set edilir; ilk boyamada/JS'ten
               önce 64px fallback kullanılır. */
            padding-bottom: calc(16px + var(--bottom-nav-h, 64px));
            background: var(--surface);
        }

        /* Etkinlikler ekranı: büyük etkinlik şeridi + liste tek akış olarak birlikte kayar */
        .events-scroll-area {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .events-scroll-area #events-list,
        .events-scroll-area #calendar-list {
            flex: none;
            overflow: visible;
        }

        .app-view { display: none; }
        .app-view.active { display: block; }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--muted);
        }

        .empty-state .emoji { font-size: 40px; margin-bottom: 10px; }
        .empty-state p { font-size: 13px; font-weight: 600; }

        /* Genel amaçlı basit kart — organizatör paneli ve profil bilgi satırlarında kullanılır */
        .event-card {
            background: var(--card-bg);
            border-radius: 18px;
            overflow: hidden;
            margin-bottom: 14px;
            box-shadow: 0 2px 10px rgba(20, 19, 17, 0.06);
        }

        .event-body { padding: 14px 16px 16px; }

        .event-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .event-meta {
            font-size: 12px;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: 3px;
        }

        /* Etkinlik kartı — kesilmiş bilet hissi: yan çentikler + kesik çizgili
           bölüm ayırıcı. Sade, tek renkli, afişsiz, ikon ağırlıklı. */
        .ev-card {
            position: relative;
            background: var(--card-bg);
            border: 1.5px solid var(--ticket-line);
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 14px;
            box-shadow: 0 2px 6px rgba(20, 19, 17, 0.07);
            cursor: pointer;
            overflow: hidden;
            transition: background-color 0.25s ease;
        }

        /* Takvime Ekle: kart arka planını değiştirir — uygulamanın Takvimim
           ekranında zaten kullandığı following rengiyle aynı
           (bkz. .cal-badge.following), yalnızca tüm bilete uygulanır. */
        .ev-card.state-following { background: #fffbeb; }

        .ev-notch {
            position: absolute;
            top: 50%;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--surface);
            border: 1.5px solid var(--ticket-line);
            box-shadow: inset 0 1px 2px rgba(20, 19, 17, 0.08);
            transform: translateY(-50%);
        }

        .ev-notch-l { left: -10px; }
        .ev-notch-r { right: -10px; }

        /* ============================================================
           ETKİNLİKLER EKRANI LİSTE KARTI — Takvim kartından (.cal-card)
           referans alınan 3 sınırlı görsel iyileştirme: (1) granürlü doku,
           (2) hover animasyonu, (3) içbükey çentiği takip eden çerçeve.
           SADECE bu üçü. Kartın rengi/boyutu/yerleşimi/içeriği değişmez.
           .ev-card organizatör listeleri ve dijital bilet kartında da
           paylaşıldığı için kurallar #events-list'e kapsanır — Takvim
           ekranı ve diğer .ev-card bağlamları etkilenmez.
           ============================================================ */
        #events-list .ev-card {
            /* (3) çentiklerin çerçeve çizgisinin üzerine taşıyıp onu içbükey
               kesebilmesi için; (2) hover için transform/box-shadow geçişi. */
            overflow: visible;
            transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* (1) Granürlü/noise doku — .cal-card::before ile birebir aynı teknik.
           Kart arka plan RENGİ değişmez; bu yalnızca üstüne binen ince bir
           doku katmanı (pointer-events: none). */
        #events-list .ev-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background-image: repeating-linear-gradient(115deg, rgba(28, 27, 25, 0.03) 0px, rgba(28, 27, 25, 0.03) 1px, transparent 1px, transparent 3px);
            mix-blend-mode: multiply;
        }

        /* (3) Her çentiğin yalnızca karta bakan yarısı bırakılır; --surface
           dolgusu (Etkinlikler listesi arka planıyla aynı renk) düz çerçeve
           çizgisinin üstünü kapatır, geriye içbükey yay kalır. .cal-notch-l/r
           ile aynı çözüm, .ev-notch'un 18px / -10px geometrisine göre. */
        #events-list .ev-notch-l { clip-path: inset(0 0 0 7.5px); }
        #events-list .ev-notch-r { clip-path: inset(0 7.5px 0 0); }

        /* (2) Takvim kartıyla (.cal-card:hover) AYNI hover animasyonu. */
        @media (hover: hover) {
            #events-list .ev-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 18px rgba(20, 19, 17, 0.13);
            }
        }

        .ev-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .ev-cat-icon {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            overflow: hidden;
        }

        /* Kart kutucuğundaki etkinlik afişi (bkz. events.js > eventCardThumbHtml) —
           kutucuğun boyutu/border-radius'u DEĞİŞMEZ, görsel yalnızca içini doldurur. */
        .ev-cat-icon img.ev-card-thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: inherit;
        }

        .ev-title-wrap { flex: 1; min-width: 0; }

        .ev-title {
            font-size: 14.5px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.3;
        }

        .ev-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 2px 10px;
            font-size: 11.5px;
            color: var(--muted);
            font-weight: 600;
            margin-top: 4px;
        }

        /* Bildirim + davet/paylaş ikonlarını .ev-top'un sağında bir arada tutar
           (görev: "Viral Etkinlik Davet ve Paylaşım Sistemi" — kart tasarımını
           bozmadan, ana CTA'larla (Takvime Ekle/Katıl) çakışmadan). */
        .ev-top-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .ev-notify-btn {
            background: none;
            color: var(--muted);
            font-size: 14px;
        }

        .ev-notify-btn.active { color: var(--text-primary); }

        .ev-share-btn {
            background: none;
            color: var(--muted);
            font-size: 14px;
        }

        /* "İlgilenenleri Gör" — bildirim/paylaş ikonlarıyla AYNI stil (görev
           "Davete Dayalı İlgilenen Erişimi", bkz. .ev-top-actions/.cal-card-actions). */
        .ev-attendees-btn {
            background: none;
            color: var(--muted);
            font-size: 14px;
        }

        .ev-sub-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .ev-social {
            font-size: 11.5px;
            color: var(--text-primary);
            font-weight: 600;
        }

        .ev-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 2px dashed var(--ticket-line);
            /* Kesik çizgi biletin tam genişliğine (çentiklerle aynı hizaya) uzansın
               diye kartın kendi yan padding'i (18px) burada negatif margin ile
               iptal edilir; buton içeriği aynı 18px'le tekrar içeri alınır. */
            margin-left: -18px;
            margin-right: -18px;
            padding-left: 18px;
            padding-right: 18px;
            max-height: 60px;
            overflow: hidden;
            opacity: 1;
            transform: translateY(0);
            transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.3s ease, padding-top 0.35s ease, margin-top 0.35s ease, transform 0.35s ease, border-top-color 0.2s ease;
        }

        .ev-action {
            flex: 1;
            padding: 9px 6px;
            border-radius: 10px;
            border: 2px solid var(--line);
            background: #fff;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            transition: 0.2s;
        }

        .ev-action.going.active {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
        }

        .ev-action.follow.active {
            background: var(--surface);
            border-color: var(--ink);
            color: var(--text-primary);
        }

        /* Etkinlik detayı aksiyon satırı: Katıl/Takvime Ekle'nin yanındaki ikon-only
           bildirim/paylaş butonları — .ev-action ailesiyle aynı çerçeve/renk/
           radius'u paylaşır, yalnızca genişliği .compose-actions'ın varsayılan
           flex:1'i yerine sabit/kompakt bir kareye çevirir (dokunma alanı
           yeterince büyük kalsın diye 42px). */
        .compose-actions .ed-icon-action-btn {
            flex: 0 0 auto;
            width: 42px;
            padding: 9px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Büyük Etkinlikler Şeridi — afişsiz, sade, normal akışta yatay kaydırılır */
        .featured-slider-wrap {
            padding: 14px 0 4px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--line);
        }

        .featured-slider-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 16px 8px;
        }

        .featured-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            gap: 16px;
            padding: 4px 20px 8px;
            scrollbar-width: none;
        }

        .featured-slider::-webkit-scrollbar { display: none; }

        .featured-slide {
            flex: 0 0 80%;
            scroll-snap-align: center;
            border-radius: 18px;
            background: var(--ink);
            color: #fff;
            cursor: pointer;
            padding: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* Kategori arkaplan görseli varsa (bkz. events.js > renderFeaturedSlider /
           categoryImageUrl), background-image inline style ile eklenir: gradient +
           url(). Görsel yüklenemezse (404/eksik dosya) o katman sessizce boş kalır,
           yukarıdaki background: var(--ink) olduğu gibi görünmeye devam eder — ayrı
           bir fallback koduna gerek yok. Kategori eşleşmesi yoksa inline style hiç
           eklenmez, kart bu haliyle mevcut düz siyah görünümünü korur. */

        .featured-slide .fs-icon {
            font-size: 20px;
            width: 20px;
            height: 20px;
            display: block;
            margin-bottom: 8px;
            overflow: hidden;
        }

        /* Büyük Etkinlikler kartındaki küçük kategori kutucuğunda da artık etkinlik
           afişi gösterilir (bkz. events.js > eventCardThumbHtml); kutucuk boyutu
           (20x20) DEĞİŞMEZ. */
        .featured-slide .fs-icon img.ev-card-thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 5px;
        }

        .featured-slide .fs-badge {
            display: inline-block;
            background: rgba(255,255,255,0.18);
            font-size: 9px;
            font-weight: 800;
            padding: 4px 9px;
            border-radius: 999px;
            letter-spacing: 0.4px;
            margin-bottom: 8px;
        }

        .featured-slide .fs-title {
            font-family: var(--font-family-display);
            font-size: 16px;
            font-weight: 600;
            line-height: var(--line-height-title);
        }

        .featured-slide .fs-sub {
            font-size: 11.5px;
            font-weight: 600;
            opacity: 0.75;
            margin-top: 3px;
        }

        .featured-dots {
            display: flex;
            justify-content: center;
            gap: 5px;
            padding: 8px 0 2px;
        }

        .featured-dots span {
            width: 6px; height: 6px; border-radius: 50%; background: var(--line);
        }

        .featured-dots span.active { background: var(--accent-1); width: 16px; border-radius: 999px; }

        .ev-card.pulse-highlight, .ec-check.pulse-highlight { animation: pulseHighlight 1.4s ease; }
        @keyframes pulseHighlight {
            0%, 100% { box-shadow: 0 2px 10px rgba(20, 19, 17, 0.06); }
            40% { box-shadow: 0 0 0 4px rgba(20, 19, 17, 0.18); }
        }

        /* Takvim — "koparılmış bilet" tasarımı. Etkinlikler ekranındaki .ev-card
           ile BİLEREK aynı değil (görev: Takvim vintage/retro bilet estetiği,
           .ev-card'a dokunulmadı, hiçbir selector paylaşılmıyor). Ortak nokta
           yalnızca marka dili: --ticket-line konturu + kesik çizgili ayraçlar +
           yarım daire çentikler, ve .ev-card-thumb-img (bkz. events.js >
           eventCardThumbHtml). */
        .cal-date-header {
            font-size: 12px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 18px 0 8px;
            padding-bottom: 6px;
            border-bottom: 1.5px dashed var(--ticket-line);
        }

        .cal-date-header:first-child { margin-top: 0; }

        .cal-card {
            position: relative;
            background: var(--card-bg);
            border: 1.5px solid var(--ticket-line);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 16px;
            box-shadow: 0 2px 6px rgba(20, 19, 17, 0.07);
            cursor: pointer;
            /* overflow: visible — yan çentiklerin (.cal-notch) kartın DIŞ
               çerçeve çizgisinin üzerine taşıp onu içbükey biçimde
               "koparabilmesi" için gerekli. Çentiğin dış yarısı kendi
               clip-path'i ile kırpılır (bkz. .cal-notch-l/.cal-notch-r);
               kağıt dokusu (::before) kendi border-radius'u ile
               yuvarlatılır. Kart içeriği flex-shrink ile sığdığından
               yatay taşma olmaz. */
            overflow: visible;
            transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* Çok hafif kağıt/baskı dokusu — bir görsel eklemeden, salt CSS ile.
           pointer-events: none, tıklamayı/aksiyonları etkilemez. */
        .cal-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background-image: repeating-linear-gradient(115deg, rgba(28, 27, 25, 0.03) 0px, rgba(28, 27, 25, 0.03) 1px, transparent 1px, transparent 3px);
            mix-blend-mode: multiply;
        }

        @media (hover: hover) {
            .cal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 19, 17, 0.13); }
        }

        /* Bilet sahibi olunan / Takip Ediyorum bilet renkleri — bu ton çifti
           .cal-badge.going/.following için de kullanılıyor (bkz. style.css
           .cal-badge kuralları), burada tüm bilete uygulanır. Renkler ileride
           değişirse iki yer birlikte güncellenmeli: .cal-badge.*, burası
           (bilinçli olarak bir CSS değişkenine taşınmadı). */
        .cal-card.going { background: #ecfdf5; }
        .cal-card.following { background: #fffbeb; box-shadow: none; }
        .cal-card.following:hover { box-shadow: 0 8px 18px rgba(20, 19, 17, 0.1); }

        /* Geçmiş (sona ermiş) etkinlik kartı: tıklayınca etkinlik detayına
           GİTMEZ (görev — mevcut istenen davranış), bu yüzden imleç de "pointer"
           olmamalı. Kartın içindeki "Değerlendir" / bilet butonları kendi
           onclick'leriyle çalışmaya devam eder. */
        .cal-card--past { cursor: default; }
        @media (hover: hover) {
            .cal-card--past:hover { transform: none; box-shadow: 0 2px 6px rgba(20, 19, 17, 0.07); }
        }
        .cal-rating-avg { display: inline-flex; align-items: center; gap: 4px; }
        .cal-rating-avg b { font-weight: 700; }
        .cal-rating-count { color: var(--muted); font-weight: 600; }

        /* Her bilette: yan çentikler (koparılmış/zımbalanmış bilet hissi) —
           artık yalnızca "Katılıyorum" değil, tüm Takvim kartlarında (görev:
           kartlar bir arada bir "bilet koleksiyonu" gibi görünsün). */
        /* Çentik = kartın kenarından "koparılmış" içbükey yarım daire. Dolgusu
           (--surface) Takvim liste arka planıyla (#calendar-list .app-content)
           AYNI renk olduğu için kart kenarındaki düz çerçeve çizgisinin üstünü
           kapatır; görünen tek kenar, dairenin karta bakan içbükey yayı olur.
           clip-path her çentiğin yalnızca karta bakan yarısını (merkezi 1.5px
           geçerek düz border'ı tam örtecek şekilde) bırakır — dış konveks yay
           gösterilmez. Böylece çerçeve, çentiğin içbükey geometrisini takip
           eder (görev md. 1). */
        .cal-notch {
            position: absolute;
            top: 50%;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--surface);
            border: 1.5px solid var(--ticket-line);
            box-shadow: inset 0 1px 2px rgba(20, 19, 17, 0.08);
            transform: translateY(-50%);
        }

        .cal-notch-l { left: -11px; clip-path: inset(0 0 0 9.5px); }
        .cal-notch-r { right: -11px; clip-path: inset(0 9.5px 0 0); }

        .cal-card-top {
            display: flex;
            align-items: stretch;
            gap: 12px;
        }

        /* Bilet gövdesi ile koparılabilir gövde-içi bölüm (stub) arasındaki
           kesik ayraç — sağ kenarında iki yarım daire çentik (::before/::after)
           tam da bu ayracın üstünde/altında "zımbalanmış" gibi durur. Stub'ın
           kendi içeriği (görsel/tarih/saat/seri no) her zaman dikey ortalanır,
           ama ayraç çizgisi satırın TAM yüksekliğini kaplar (align-items:
           stretch, bkz. .cal-card-top) — gerçek bir bilet kesim çizgisi gibi
           uçtan uca uzanır. */
        .cal-stub {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-shrink: 0;
            padding-right: 14px;
            border-right: 2px dashed var(--ticket-line);
        }

        .cal-stub::before, .cal-stub::after {
            content: '';
            position: absolute;
            right: -1px;
            width: 13px;
            height: 13px;
            margin-right: -6.5px;
            border-radius: 50%;
            background: var(--surface);
            border: 1.5px solid var(--ticket-line);
        }

        .cal-stub::before { top: -6px; }
        .cal-stub::after { bottom: -6px; }

        .cal-thumb {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            background: var(--surface);
            overflow: hidden;
        }

        .cal-thumb img.ev-card-thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: inherit;
        }

        /* Bilet üzerinde basılı tarih damgası — büyük gün + küçük ay kısaltması. */
        .cal-stub-date {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
        }

        .cal-stub-day {
            font-family: var(--font-family-display);
            font-size: 19px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .cal-stub-month {
            font-size: 8.5px;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: var(--muted);
            margin-top: 1px;
        }

        .cal-time {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .cal-serial {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--muted);
            opacity: 0.75;
        }

        .cal-info { flex: 1; min-width: 0; }

        .cal-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 5px;
        }

        .cal-badge {
            font-size: 9.5px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 999px;
            background: var(--surface);
            color: var(--text-secondary);
        }

        .cal-badge.going { background: #ecfdf5; color: #0f766e; }
        .cal-badge.following { background: #fffbeb; color: #b45309; }

        .cal-info .cal-title {
            font-family: var(--font-family-display);
            font-size: 15.5px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.25;
        }

        .cal-info .cal-venue { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 3px; }

        .cal-buddy-line {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 2px dashed var(--ticket-line);
            /* Kesik çizgi kartın tam iç genişliğine (yan çentiklerle aynı
               hizaya, sol iç kenardan sağ iç kenara) uzansın diye kartın
               kendi yan padding'i (14px) negatif margin ile iptal edilir;
               içerik aynı 14px ile tekrar içeri alınır. Etkinlikler
               kartındaki .ev-actions ile birebir aynı desen. */
            margin-left: -14px;
            margin-right: -14px;
            padding-left: 14px;
            padding-right: 14px;
            font-size: 12px;
            color: var(--text-primary);
        }

        .cal-buddy-line.alone { color: var(--muted); font-weight: 600; }

        .cal-msg-btn {
            background: var(--surface);
            font-size: 11px;
        }

        /* Mobilde stub sıkışmasın diye en düşük öncelikli detay (seri no) gizlenir;
           tarih/saat/başlık/mekan (bkz. görev md. 5 hiyerarşisi) hep görünür kalır. */
        @media (max-width: 380px) {
            .cal-card { padding: 12px; }
            .cal-card-top { gap: 9px; }
            .cal-stub { padding-right: 10px; gap: 3px; }
            .cal-thumb { width: 28px; height: 28px; }
            .cal-serial { display: none; }
            .cal-info .cal-title { font-size: 14.5px; }
            /* Kart padding'i 12px'e düştüğü için kesik çizginin negatif
               margin'i de eşleşmeli (bkz. .cal-buddy-line). */
            .cal-buddy-line {
                margin-left: -12px;
                margin-right: -12px;
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* Profil görünümü */
        .profile-photo-big {
            width: 100%;
            height: 220px;
            border-radius: 18px;
            background-size: cover;
            background-position: center;
            background-color: var(--line);
            display: flex;
            align-items: flex-end;
            margin-bottom: 10px;
        }

        .photo-strip {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            margin-bottom: 6px;
        }

        .photo-thumb {
            position: relative;
            flex: 0 0 64px;
            height: 64px;
            border-radius: 10px;
            background-size: cover;
            background-position: center;
            background-color: var(--surface);
            cursor: pointer;
        }

        .photo-thumb.add-tile {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--muted);
            border: 2px dashed var(--line);
            cursor: pointer;
        }

        .pt-remove {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ef4444;
            color: #fff;
            border: none;
            font-size: 10px;
            cursor: pointer;
            line-height: 1;
        }

        .pt-primary {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            border: none;
            font-size: 10px;
            cursor: pointer;
            line-height: 1;
        }

        .pt-primary-badge {
            position: absolute;
            bottom: 2px;
            left: 2px;
            right: 2px;
            background: rgba(199, 162, 90, 0.9);
            color: var(--ink);
            font-size: 8px;
            font-weight: 800;
            text-align: center;
            border-radius: 4px;
            padding: 1px 0;
        }

        .photo-warning {
            font-size: 11px;
            color: #b45309;
            font-weight: 600;
            margin-bottom: 8px;
        }

        /* Profil fotoğrafı tam ekran görüntüleyici: dolu bir çerçeveye ya da ana
           fotoğrafa dokununca açılır, ‹ › veya parmakla sağa-sola kaydırılarak
           gezinilir. Diğer tam ekran modallerle (harita, profil detay) aynı görsel
           dili (yuvarlak, yarı saydam beyaz kontrol butonları) kullanır. */
        .photo-viewer-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-viewer);
            background: rgba(10, 9, 8, 0.96);
            align-items: center;
            justify-content: center;
        }

        .photo-viewer-modal.show { display: flex; }

        .ppv-image {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }

        .ppv-close {
            position: absolute;
            top: 14px;
            left: 14px;
            font-size: 16px;
            z-index: 5;
        }

        .ppv-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            font-size: 20px;
            z-index: 5;
        }

        .ppv-prev { left: 10px; }
        .ppv-next { right: 10px; }

        .ppv-counter {
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.15);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 999px;
            z-index: 5;
        }

        .profile-name-overlay {
            width: 100%;
            padding: 16px;
            background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
            color: #fff;
            border-radius: 0 0 18px 18px;
            font-family: var(--font-family-display);
            font-size: 20px;
            font-weight: 600;
            line-height: var(--line-height-title);
        }

        .profile-section-title {
            font-size: 11px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 16px 0 8px;
        }

        /* Profil ekranı: kapanır/açılır bölümler — varsayılan kapalı, yumuşak animasyon */
        .profile-accordion {
            border: 1px solid var(--line);
            border-radius: 12px;
            margin: 16px 0 8px;
            overflow: hidden;
        }

        .profile-accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 12px 14px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .accordion-chevron {
            flex-shrink: 0;
            font-size: 10px;
            color: var(--muted);
            transition: transform 0.3s ease;
        }

        .profile-accordion.open .accordion-chevron { transform: rotate(180deg); }

        .profile-accordion-body {
            max-height: 0;
            overflow: hidden;
            padding: 0 14px;
            transition: max-height 0.35s ease, padding 0.35s ease;
        }

        .profile-accordion.open .profile-accordion-body {
            max-height: 280px;
            padding: 0 14px 14px;
        }

        #acc-interests.open .profile-accordion-body {
            max-height: 3000px;
        }

        .profile-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .profile-chip {
            background: var(--surface);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 999px;
        }

        .profile-bio-box {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 12px 14px;
            font-size: 12.5px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Alt navigasyon: her zaman siyah. will-change ile transform
           (scroll-hide, bkz. ui.js > initBottomNavScrollHide) GPU'da
           compositing'e alınır. position:absolute ile .app-shell'in flex
           akışından ÇIKARILIR (overlay) — akışta kalsaydı, transform ile
           aşağı kaydırıldığında ardında boş/beyaz bir alan bırakırdı (kendi
           yer kapladığı kutu layout'ta hep dururdu, sadece boyanan içerik
           kayardı). Overlay + .app-content'teki --bottom-nav-h boşluğu
           sayesinde slider kaybolunca altında sayfanın gerçek içeriği kalır. */
        .bottom-nav {
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: var(--ink);
            color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 45;
            will-change: transform;
            transition: transform 0.25s ease;
        }

        /* Instagram benzeri, yalnızca ikon odaklı sekmeler — metin etiketi yok,
           ayrım opaklık + aktif sekmedeki hafif "chip" vurgusuyla sağlanır. */
        .nav-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 4px;
            cursor: pointer;
            border: none;
            background: none;
            color: inherit;
        }

        .nav-item .nav-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            padding: 7px 16px;
            border-radius: 999px;
            opacity: 0.45;
            transition: opacity 0.2s ease, background 0.2s ease;
        }

        .nav-item.active .nav-icon {
            opacity: 1;
            background: rgba(255, 255, 255, 0.16);
        }

        .nav-badge {
            display: none;
            position: absolute;
            top: -4px;
            right: -9px;
            min-width: 15px;
            height: 15px;
            padding: 0 3px;
            border-radius: 999px;
            background: var(--color-danger);
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            line-height: 15px;
            text-align: center;
        }

        .nav-badge.show { display: block; }

        .nav-badge.dot {
            width: 8px;
            height: 8px;
            min-width: 0;
            padding: 0;
            top: -1px;
            right: -5px;
        }

        /* Keşif geçiş ekranı — tam ekran, kayıt sonrası etkinlikler yüklenirken */
        .discover-screen {
            text-align: center;
        }

        .step.discover-screen.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            z-index: var(--z-onboarding);
            border-radius: 0;
            overflow: hidden;
            background: var(--cream);
            opacity: 1;
            transition: opacity 0.6s ease;
        }

        .step.discover-screen.active.fade-out { opacity: 0; }

        .discover-mark {
            position: relative;
            z-index: 2;
            margin-bottom: 18px;
            color: var(--ink);
        }

        .discover-text {
            position: relative;
            z-index: 2;
            font-family: var(--font-family-display);
            font-size: 16px;
            font-weight: 600;
            line-height: var(--line-height-title);
            color: var(--ink);
            min-height: 40px;
            padding: 0 30px;
            transition: opacity 0.3s ease;
        }

        .discover-text.fade-out { opacity: 0; }

        /* Hesap silindikten sonraki tam ekran veda anı — discover-screen ile aynı
           "sinematik" ilke: sabit koyu zemin, tema (açık/karanlık mod) ayarından bağımsız. */
        .farewell-screen {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-farewell);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px 30px;
            background: var(--ink);
        }

        .farewell-screen.show { display: flex; }

        .farewell-mark {
            color: #fff;
            margin-bottom: 22px;
            filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
        }

        .farewell-title {
            font-family: var(--font-family-display);
            font-size: 21px;
            font-weight: 600;
            line-height: var(--line-height-title);
            color: #fff;
            margin-bottom: 14px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        .farewell-text {
            font-size: 13.5px;
            font-weight: 500;
            color: rgba(255,255,255,0.72);
            line-height: 1.7;
            max-width: 300px;
            margin-bottom: 26px;
        }

        .farewell-signoff {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.2px;
        }

        .compat-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 11px;
            border-radius: 999px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.25);
        }

        /* ================= PREMIUM / PAYWALL ================= */
        .premium-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-screen);
            background: rgba(15, 14, 13,0.7);
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .premium-modal.show { display: flex; }

        .premium-card {
            background: var(--card-bg);
            border-radius: 24px;
            width: 400px;
            max-width: 100%;
            max-height: min(88vh, calc(var(--app-vvh, 100vh) - 40px));
            overflow-y: auto;
            padding: 26px 24px 24px;
            position: relative;
        }

        .premium-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--surface);
            color: var(--text-secondary);
            font-size: 14px;
        }

        .premium-header { text-align: center; margin-bottom: 18px; }
        .premium-header .p-emoji { display: flex; justify-content: center; }
        .premium-header h2 { font-size: 20px; margin-top: 6px; }
        .premium-header p { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }

        /* Organizatör Ol: modern onboarding tarzı fayda listesi — fiyat/plan kartı yok. */
        .organizer-benefits {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 20px;
        }

        .organizer-benefit {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .organizer-benefit .ob-icon {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }

        .organizer-benefit .ob-title { font-size: 13px; font-weight: 800; color: var(--text-primary); }
        .organizer-benefit .ob-desc { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; line-height: 1.4; }

        .plans-row { display: flex; gap: 10px; margin-bottom: 18px; }

        .plan-box {
            flex: 1;
            border: 2px solid var(--line);
            border-radius: 16px;
            padding: 14px 12px;
        }

        .plan-box.premium {
            border-color: var(--accent-1);
            background: linear-gradient(160deg, var(--surface), #fff);
            position: relative;
        }

        .plan-badge {
            position: absolute;
            top: -10px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .plan-name { font-size: 13px; font-weight: 800; color: var(--text-primary); text-align: center; }
        .plan-price { text-align: center; font-size: 18px; font-weight: 800; margin: 4px 0 10px; color: var(--text-primary); }
        .plan-price span { font-size: 10px; font-weight: 600; color: var(--muted); }

        .plan-features { list-style: none; font-size: 11.5px; color: var(--text-secondary); line-height: 1.9; }
        .plan-features li { padding-left: 16px; position: relative; }
        .plan-features li::before { content: '◆'; position: absolute; left: 0; color: var(--text-primary); font-weight: 800; font-size: 10px; top: 3px; }
        .plan-features li.no::before { content: '◇'; color: var(--line); }
        .plan-features li.no { color: var(--line); }

        .premium-note {
            font-size: 10.5px;
            color: var(--muted);
            text-align: center;
            margin-top: 10px;
            line-height: 1.5;
        }

        /* ================= MESAJLAŞMA =================
           Sohbet ekranı artık ortalanmış bir dialog değil, #profile-editor-screen/
           #map-view ile AYNI "tam ekran overlay" deseninde: position:fixed;inset:0,
           arka planı Splend'in kendi kart rengi, Splend üst/alt slider'ı görünmez. */
        .chat-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-screen);
            background: var(--card-bg);
            flex-direction: column;
        }

        .chat-modal.show { display: flex; }

        .chat-card {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .chat-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }

        .chat-back-btn {
            background: var(--surface);
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
        }

        .chat-menu-btn {
            margin-left: auto;
            background: var(--surface);
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 800;
            line-height: 1;
        }

        .chat-header .chat-avatar {
            width: 38px; height: 38px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: var(--muted); background: var(--line);
            flex-shrink: 0;
        }

        .chat-header .chat-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
        .chat-header .chat-name #chat-verified-badge { color: var(--accent-1); font-size: 12px; }
        .chat-header .chat-lastseen { font-size: 10.5px; color: var(--muted); font-weight: 600; }

        /* Chat/Profil sekmeleri #profile-editor-screen'deki .pe-tabs/.pe-tab
           class'larını doğrudan yeniden kullanır — ayrı bir sekme bileşeni yok. */

        .chat-panel {
            flex: 1;
            min-height: 0;
            flex-direction: column;
            overflow: hidden;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--surface);
        }

        .chat-bubble {
            max-width: 78%;
            padding: 9px 13px;
            border-radius: 16px;
            font-size: 13px;
            line-height: 1.4;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .chat-bubble.them { align-self: flex-start; background: var(--card-bg); color: var(--text-secondary); border-bottom-left-radius: 4px; }
        .chat-bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; }

        /* Etkinlik grup sohbeti — kendime ait olmayan mesajın üstünde gönderen adı (bkz. chat.js > groupSenderNameHtml). */
        .chat-sender-label { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--muted); margin: 2px 4px -2px; }

        .chat-blocked-notice {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            text-align: center;
            border-top: 1px solid var(--line);
        }

        .chat-bubble.media { padding: 6px; cursor: pointer; }
        .chat-bubble.media img { display: block; max-width: 160px; border-radius: 10px; }
        .chat-bubble.media audio { max-width: 200px; }
        .chat-bubble .media-lock-note {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; font-weight: 600; padding: 4px 6px;
        }
        .chat-bubble.me .media-lock-note { color: #fff; }
        .chat-bubble.them .media-lock-note { color: var(--text-primary); }
        .media-badge {
            font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
            background: rgba(0,0,0,0.35); color: #fff; position: absolute; margin: 4px;
        }

        .chat-input-row {
            display: flex;
            gap: 8px;
            padding: 12px;
            border-top: 1px solid var(--line);
            align-items: center;
            flex-shrink: 0;
        }

        .chat-input-row input {
            flex: 1;
            border-radius: 999px;
            padding: 10px 14px;
        }

        .chat-input-row button {
            width: 40px; height: 40px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
            color: #fff;
            font-size: 15px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .chat-media-btn {
            background: var(--surface) !important;
            color: var(--text-primary) !important;
            font-size: 16px !important;
        }

        .chat-recording-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid var(--line);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            flex-shrink: 0;
        }

        .rec-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: #ef4444;
            animation: recPulse 1s infinite;
        }

        @keyframes recPulse {
            0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
        }

        #media-send-modal .chip-filter-row {
            margin: 12px 0;
        }

        .match-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--card-bg);
            border-radius: 14px;
            padding: 10px 12px;
            margin-bottom: 8px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(15,23,42,0.05);
        }

        /* Çevre > Arkadaşlar listesinin EN ÜSTÜndeki minimal "Arkadaşlık
           İstekleri" girişi (bkz. chat.js > friendRequestsEntryHtml). Satır
           görsel diliyle uyumlu ama daha sade — bekleyen istek varsa sağda
           küçük bir sayı rozeti. */
        .friend-requests-entry {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            background: none;
            border: none;
            border-bottom: 1px solid var(--line);
            padding: 4px 4px 12px;
            margin-bottom: 10px;
            cursor: pointer;
            font: inherit;
        }

        .friend-requests-entry .fre-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .friend-requests-entry .fre-label [data-splend-icon] { color: var(--muted); }

        .friend-requests-entry .fre-count {
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 999px;
            background: var(--color-danger);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* .invite-person-row (Davet Et/Arkadaş Ekle/Engellenenler) ve .friend-row
           (Arkadaşlarım) satırları da aynı avatar görselini kullanır — bilinçli
           olarak .match-list-item'a özel değil, sınıf genelinde tanımlanır ki tüm
           ekranlarda aynı boyut/nötr placeholder rengi tutarlı kalsın. */
        .m-avatar-sm {
            width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 19px; color: var(--muted); background: var(--line); flex-shrink: 0;
        }

        /* Instagram benzeri satır iskeleti: üstte isim+zaman, altta önizleme+okunmamış
           noktası. İsim ve önizleme metni taşarsa CSS ile üç noktayla kesilir (uzun
           kullanıcı adı/mesaj taşmayı önlemek için — eskiden .slice(0,32) kullanılıyordu). */
        .match-list-item .m-body { flex: 1; min-width: 0; }

        .match-list-item .m-top-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }

        .match-list-item .m-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .match-list-item .m-time {
            flex-shrink: 0;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--muted);
        }

        .match-list-item .m-bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-top: 1px;
        }

        .match-list-item .m-preview {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11.5px;
            color: var(--muted);
        }

        .match-list-item .m-event-line { font-size: 11px; color: var(--text-primary); font-weight: 600; margin: 2px 0; }
        .match-list-item .m-event-line b { color: var(--text-primary); }

        /* Etkinlik Grupları listesi (.m-name'in altındaki tek satırlık ikincil
           bilgi — "12 kişi · Herkese Açık") daha önce hiç stil almıyordu ve
           tarayıcı varsayılanıyla (16px) .m-name'den (13px) daha BÜYÜK
           görünüyordu — küçük ekranda kaba/dengesiz görünümün asıl kaynağı
           buydu. .m-preview ailesiyle aynı sakin/ikincil tipografi. */
        .match-list-item .m-sub {
            font-size: 12px;
            font-weight: 500;
            color: var(--muted);
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .match-list-item.unread { border: 1px solid var(--ink); }
        .match-list-item.unread .m-preview { color: var(--text-primary); font-weight: 700; }

        /* Katılımcıları Keşfet: dikey liste kartı — .match-list-item/.ev-card
           ailesiyle aynı görsel dil (kart yüzeyi, kenarlık, hafif gölge). */
        .participant-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(20,19,17,0.05);
        }

        .participant-card-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: var(--muted);
            background: var(--line);
            flex-shrink: 0;
        }

        .participant-card-info { flex: 1; min-width: 0; }
        .participant-card-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
        .participant-card-username { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
        .participant-card-compat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
        .participant-card-reason { font-size: 11px; font-weight: 600; color: var(--muted); }
        .participant-card-trust { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

        .participant-card-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex-shrink: 0;
        }

        .participant-card-actions button {
            margin: 0;
            width: 108px;
            font-size: 11px;
            padding: 8px 6px;
        }

        /* Gizli Katılımcılar: socialMode kapalı katılımcılar — etkileşimsiz olduğunu
           (tıklanamaz, buton yok) görsel olarak da belli eden sade/soluk kart. */
        .participant-card-hidden {
            background: transparent;
            border-style: dashed;
            box-shadow: none;
            opacity: 0.7;
        }
        .participant-card-hidden .participant-card-avatar { background: transparent; border: 1px solid var(--line); }

        /* Profilim ekranı (Faz 1): Hinge referanslı sade profil merkezi —
           avatar+isim başlığı ve altında .participant-card ailesiyle aynı görsel
           dili (border/radius/shadow) paylaşan dokunulabilir kartlar. */
        .profile-hub-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 8px 0 20px;
        }

        .profile-hub-avatar {
            position: relative;
            width: 92px;
            height: 92px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            background-color: var(--surface);
            box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 4px var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }

        .profile-hub-avatar-placeholder { font-size: 36px; color: var(--muted); }

        .profile-hub-avatar-pencil {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--text-primary);
        }

        /* Doğrulanmış Profil rozeti isim satırının ÜSTÜNDE, isim bloğuna göre
           yatayda ortalı (bkz. profile.js > renderProfile). İsimle çakışmasın
           diye kendi satırında; dar ekranda rozet metni bölünmesin. */
        .profile-hub-verified {
            display: flex;
            justify-content: center;
            max-width: 100%;
            margin-bottom: 6px;
        }

        .profile-hub-name {
            font-size: 18px;
            font-weight: 800;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .profile-hub-username {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--muted);
            margin-top: 2px;
        }

        .profile-hub-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 12px 14px;
            margin-bottom: 8px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(20,19,17,0.05);
        }

        .profile-hub-card:active { background: var(--surface); }

        .profile-hub-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .profile-hub-card-body { flex: 1; min-width: 0; }
        .profile-hub-card-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
        .profile-hub-card-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }

        .profile-hub-card-chevron {
            font-size: 18px;
            color: var(--muted);
            flex-shrink: 0;
        }

        /* ============================================================
           PROFİL DÜZENLEME EKRANI (Hinge referanslı, Splend shell'i içinde)
           .map-view ile aynı "gerçek tam ekran" iskeletini kullanır (fixed
           inset:0, kart/padding yok) — Splend'in üst/alt slider'ı bu ekranın
           ALTINDA, DOM'da değişmeden durur; bu ekran yalnızca üstünü kaplar.
           Vurgu renkleri :root'taki nötr --accent-1/--accent-2 (kırık siyah)
           token'larını kullanır — Yardım Merkezi ile paylaşılır.
           ============================================================ */
        .profile-editor-screen {
            display: none;
            position: fixed;
            inset: 0;
            /* --z-nav-screen (bkz. :root — MERKEZİ Z-INDEX SİSTEMİ). Hem
               .bottom-sheet (üniversite/kişilik/ilgi alanları seçiciler, --z-sheet)
               hem de bir onay/dialog (ör. Rapor Et/Engelle, --z-dialog) bu ekranın
               İÇİNDEN açılabilir ve ikisi de üzerinde görünmelidir — bu yüzden
               --z-nav-screen ikisinden de düşük olmalı. */
            z-index: var(--z-nav-screen);
            background: var(--card-bg);
            flex-direction: column;
        }

        .profile-editor-screen.show { display: flex; }

        /* İki uçtaki .pe-cancel-btn/.pe-done-btn farklı metin genişliklerine sahip
           ("Vazgeç" vs "Bitti"), ve başka kullanıcı profilinde done-btn hiç yok —
           bu yüzden eski `display:flex + justify-content:space-between + title:flex:1`
           deseni başlığı KALAN boşluğun ortasına hizalıyordu, viewport'un değil (iki
           buton genişliği eşit olmadıkça kayma kaçınılmazdı). Çözüm: üç sütunlu bir
           grid ile sol/sağ sütunları AYNI minmax() değerine sabitleyip (gerçek
           içerikten bağımsız olarak simetrik), başlığı ortadaki esnek sütuna
           koymak — böylece başlık her zaman gerçek yatay merkezde kalır. */
        .pe-header {
            display: grid;
            grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(64px, auto);
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }

        .pe-cancel-btn, .pe-done-btn {
            background: none;
            border: none;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            padding: 4px 2px;
        }

        .pe-cancel-btn { justify-self: start; }
        .pe-done-btn { justify-self: end; }

        /* Başka bir kullanıcının profilinde .pe-done-btn "Bitti" yerine üç nokta
           menü tetikleyicisine dönüşür (bkz. profile.js > setProfileHeaderRightButton)
           — .chat-menu-btn ile AYNI daire/arkaplan görünümü, tutarlı bir tetikleyici
           ikonu İCAT EDİLMEDİ. */
        .pe-done-btn.pe-menu-btn {
            padding: 0;
            background: var(--surface);
            color: var(--text-primary);
        }

        /* Profil sekmesi başlığındaki paylaş ikonu (bkz. index.html > #view-profile
           .page-title-actions) — .pe-menu-btn ile AYNI minimal daire/arkaplan deltası. */
        .profile-share-btn {
            background: var(--surface);
            color: var(--text-primary);
        }

        .pe-header-title {
            min-width: 0;
            text-align: center;
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 8px;
        }

        .pe-tabs {
            display: flex;
            justify-content: center;
            gap: 28px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }

        .pe-tab {
            background: none;
            border: none;
            padding: 12px 4px 10px;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .pe-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-1); }
        .pe-tab.disabled { color: var(--line); cursor: default; }

        .pe-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 16px 16px 40px;
            -webkit-overflow-scrolling: touch;
        }

        /* Fotoğraf kırpma/konumlandırma ekranı (#photo-crop-screen) — WYSIWYG:
           çerçevenin içinde görünen, tam olarak kaydedilecek görünümdür (bkz.
           profile.js > pcropDragMove, aynı background-size:cover + background-
           position deseni fotoğrafın her yerde gösterildiği yerde kullanılıyor). */
        .pcrop-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 28px 20px 24px;
        }

        .pcrop-frame {
            width: 100%;
            max-width: 280px;
            aspect-ratio: 1 / 1.15;
            border-radius: 16px;
            border: 2px solid var(--line);
            background: var(--surface);
            overflow: hidden;
            position: relative;
            touch-action: none;
        }

        /* Etkinlik afişi: ev-card/ed-image'in geniş banner oranına uygun yatay
           çerçeve — sürükleme matematiği (pcropDragMove) frame.clientWidth/Height'a
           dayandığından oran-bağımsızdır, yalnızca bu boyutu değiştirmek yeterli. */
        .pcrop-frame.poster {
            max-width: 360px;
            aspect-ratio: 16 / 9;
        }

        .pcrop-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-repeat: no-repeat;
            cursor: grab;
        }

        .pcrop-hint {
            margin-top: 14px;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            text-align: center;
        }

        .pcrop-actions {
            width: 100%;
            max-width: 280px;
            margin-top: 22px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .pe-section-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 18px 2px 8px;
            border-bottom: 1px solid var(--line);
            margin-bottom: 2px;
        }

        .pe-section-title:first-child { padding-top: 2px; }

        .pe-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 13px 2px;
            border-bottom: 1px solid var(--line);
            cursor: pointer;
            background: var(--card-bg);
        }

        .pe-row:active { background: var(--surface); }
        .pe-row.pe-row-static { cursor: default; }

        .pe-row-main { flex: 1; min-width: 0; }
        .pe-row-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .pe-row-value { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; overflow-wrap: break-word; }

        .pe-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .pe-row-visibility { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
        .pe-row-chevron { font-size: 17px; color: var(--text-primary); flex-shrink: 0; }

        .pe-badge {
            display: inline-block;
            font-size: 9px;
            font-weight: 800;
            color: #fff;
            background: var(--accent-1);
            padding: 2px 6px;
            border-radius: 999px;
            letter-spacing: 0.3px;
        }

        .pe-hint { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 8px 4px 4px; }

        /* ============================================================
           YARDIM MERKEZİ / NASIL ÇALIŞIR (Hinge Help Center referanslı)
           .profile-editor-screen ile AYNI "tam ekran katman" iskeleti (fixed
           inset:0, kart/padding yok, --z-nav-screen) — Splend'in üst/alt slider'ı
           bu ekranların ALTINDA, DOM'da değişmeden durur. Vurgu renkleri
           :root'taki nötr --accent-1/--accent-2 (kırık siyah) token'larını
           kullanır, .profile-editor-screen ile paylaşılır.
           ============================================================ */
        .hc-screen {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-nav-screen);
            background: var(--card-bg);
            flex-direction: column;
        }

        .hc-screen.show { display: flex; }

        /* Bilet satın alma sözleşme ekranları (bkz. legal.js > openDistanceSalesAgreementScreen/
           openTicketRefundPolicyScreen) SATIN ALMA MODALINI (#ticket-purchase-modal, .compose-modal,
           --z-dialog) KAPATMADAN onun ÜZERİNE açılır — aynı z-index'te DOM sırasına güvenmek
           kırılgan olacağından (ticket-purchase-modal DOM'da bu ekranlardan SONRA gelir) burada
           açıkça daha yüksek --z-dialog-elevated verilir (bkz. :root — MERKEZİ Z-INDEX SİSTEMİ). */
        #distance-sales-agreement-screen,
        #ticket-refund-policy-screen {
            z-index: var(--z-dialog-elevated);
        }

        .hc-titlebar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }

        .hc-titlebar-spacer,
        .hc-titlebar-close {
            background: var(--surface);
            color: var(--text-secondary);
            font-size: 13px;
        }

        .hc-titlebar-title {
            flex: 1;
            min-width: 0;
            text-align: center;
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 8px;
        }

        .hc-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px 16px 40px;
            -webkit-overflow-scrolling: touch;
        }

        /* Okuma zorunlu sözleşme ekranları (Mesafeli Satış Sözleşmesi / Bilet İade
           Koşulları — bkz. legal.js > acceptDistanceSalesAgreement/acceptTicketRefundPolicy)
           için sabit alt "Okudum ve Kabul Ediyorum" barı — .hc-titlebar ile aynı flex-shrink:0
           deseni, gövde kaydırılsa bile buton her zaman erişilebilir kalır (md. 8). */
        .hc-footer {
            flex-shrink: 0;
            padding: 12px 16px;
            border-top: 1px solid var(--line);
            background: var(--card-bg);
        }

        /* --- Yardım Merkezi ana ekranı: logo + başlık + dil seçimi header'ı --- */
        .hc-brand-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 16px;
            margin-bottom: 6px;
            border-bottom: 1px solid var(--line);
        }

        .hc-brand-mark { font-size: 24px; flex-shrink: 0; }

        .hc-brand-divider {
            width: 1px;
            align-self: stretch;
            background: var(--line);
            flex-shrink: 0;
        }

        .hc-brand-title {
            flex: 1;
            min-width: 0;
            font-family: var(--font-family-display);
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .hc-lang-select { flex-shrink: 0; max-width: 40%; }

        .hc-lang-select select {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 7px 8px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-primary);
            background: var(--card-bg);
        }

        .hc-welcome {
            text-align: center;
            font-family: var(--font-family-display);
            font-size: 19px;
            font-weight: 500;
            line-height: 1.35;
            color: var(--text-primary);
            padding: 20px 8px 18px;
        }

        .hc-search-wrap { margin-bottom: 18px; }

        .hc-search-input {
            width: 100%;
            height: 46px;
            padding: 0 18px;
            border: none;
            border-radius: 999px;
            background: var(--surface);
            font-size: 13.5px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .hc-search-input::placeholder { color: var(--muted); }

        /* --- Kategori butonları: Hinge referansındaki büyük mor yuvarlatılmış buton --- */
        .hc-category-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .hc-cat-btn {
            width: 100%;
            border: none;
            border-radius: 999px;
            background: var(--accent-1);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            padding: 17px 20px;
            text-align: center;
            cursor: pointer;
        }

        .hc-cat-btn:active { opacity: 0.85; }

        .hc-results-list { display: flex; flex-direction: column; }

        .hc-empty-state {
            text-align: center;
            color: var(--muted);
            font-size: 13px;
            font-weight: 600;
            padding: 30px 10px;
        }

        /* --- Kategori/arama sonucu satırları: sol ikon, ortada başlık, sağda mor chevron --- */
        .hc-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 2px;
            border-bottom: 1px solid var(--line);
            cursor: pointer;
        }

        .hc-row:active { background: var(--surface); }

        .hc-row-icon {
            width: 18px;
            flex-shrink: 0;
            text-align: center;
        }

        .hc-row-star { color: var(--accent-1); font-size: 15px; }

        .hc-row-main { flex: 1; min-width: 0; }
        .hc-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: break-word; }
        .hc-row-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
        .hc-row-chevron { font-size: 18px; color: var(--text-primary); flex-shrink: 0; }

        /* ============================================================
           DESTEK TALEBİ FORMU (bkz. helpcenter.js > hcTicketSectionHtml)
           — Yardım Merkezi ana ekranının en altındaki "Hâlâ yardıma mı
           ihtiyacın var?" kutusu ve açılan form. hcOpenTicketForm()
           formu display:flex yapar; buradaki flex-direction:column
           olmadan select/input/textarea/aksiyonlar tek satırda yan yana
           sıkışıp farklı genişliklerde, hizasız görünüyordu. Konu
           kategorisi seçimi uygulama genelindeki tek-sütun .ec-radio-pill
           deseniyle (bkz. #event-create-modal .ec-radio-pill) birebir
           aynı: tam genişlik, sola hizalı, seçili durum yalnızca kenarlık
           vurgusu — yeni renk/bileşen yok. .hc-body zaten scroll
           container (overflow-y:auto) olduğu için taşma/scroll ayrıca
           ele alınmaz. */
        .hc-ticket-section {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
        }

        .hc-ticket-cta {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .hc-ticket-cta strong {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .hc-ticket-sub {
            font-size: 12.5px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--muted);
            margin-top: 4px;
        }

        .hc-ticket-cta .btn-secondary { width: 100%; margin-top: 0; }

        .hc-ticket-status-note {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            margin-top: 12px;
        }

        .hc-ticket-form {
            /* hcOpenTicketForm() display:flex atar — yön burada sabitlenir */
            flex-direction: column;
            gap: 14px;
            margin-top: 16px;
        }

        .hc-ticket-label {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: var(--muted);
            margin-bottom: 8px;
        }

        .hc-ticket-cats .ec-radio-pill {
            flex: none;
            width: 100%;
            box-sizing: border-box;
            justify-content: flex-start;
            min-height: 44px;
            padding: 12px 16px;
            font-size: 13px;
        }

        .hc-ticket-cats .ec-radio-pill input[type="radio"] { display: none; }

        .hc-ticket-form-actions {
            display: flex;
            gap: 10px;
            margin-top: 2px;
        }

        .hc-ticket-form-actions button {
            flex: 1;
            width: auto;
            margin-top: 0;
        }

        /* --- Breadcrumb + makale/kategori büyük başlığı --- */
        .hc-breadcrumb {
            font-size: 12.5px;
            font-weight: 700;
            padding: 2px 0 14px;
        }

        .hc-breadcrumb a { color: var(--text-primary); cursor: pointer; text-decoration: none; }
        .hc-breadcrumb-sep { margin: 0 6px; color: var(--muted); }
        .hc-breadcrumb-current { color: var(--text-primary); }

        .hc-page-title {
            font-family: var(--font-family-display);
            font-size: 28px;
            font-weight: 600;
            line-height: 1.18;
            color: var(--text-primary);
            margin-bottom: 8px;
            overflow-wrap: break-word;
        }

        .hc-section-title {
            font-size: 12px;
            font-weight: 800;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 18px 2px 6px;
            border-bottom: 1px solid var(--line);
            margin-bottom: 2px;
        }

        .hc-article-body { padding-top: 4px; }

        .hc-article-p {
            font-size: 13.5px;
            line-height: 1.6;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 14px;
            overflow-wrap: break-word;
        }

        .hc-article-list {
            margin: 0 0 14px;
            padding-left: 20px;
        }

        .hc-article-list li {
            font-size: 13.5px;
            line-height: 1.6;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
            overflow-wrap: break-word;
        }

        /* --- Nasıl Çalışır: Hinge "How Hinge Works" 2 kolonlu kart ızgarası --- */
        .hiw-subtitle {
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            line-height: 1.5;
            padding: 4px 4px 22px;
        }

        .hiw-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .hiw-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            min-width: 0;
            cursor: pointer;
        }

        .hiw-card:active { background: var(--surface); }

        .hiw-card-title {
            font-size: 14.5px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 4px;
            overflow-wrap: break-word;
        }

        .hiw-card-desc {
            font-size: 11.5px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--muted);
            flex: 1;
            overflow-wrap: break-word;
        }

        .hiw-card-visual {
            margin-top: 12px;
            height: 60px;
            border-radius: 12px;
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        /* Fotoğraf grid'i: 3 sütun, kareye yakın oran */
        .pe-photo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding-top: 4px;
        }

        .pe-photo-thumb {
            position: relative;
            aspect-ratio: 1 / 1.15;
            border-radius: 14px;
            background-size: cover;
            background-position: center;
            background-color: var(--surface);
            cursor: pointer;
        }

        /* touch-action:none olmadan parmakla tutulan kart, tarayıcının varsayılan
           kaydırma/pan davranışıyla çakışır (sayfa istemeden kayar) — bkz.
           pcrop-frame'deki aynı kural. */
        .pe-photo-thumb.pe-draggable { cursor: grab; touch-action: none; }

        .pe-photo-thumb.pe-photo-dragging {
            cursor: grabbing;
            z-index: 5;
            opacity: 0.92;
            box-shadow: 0 8px 22px rgba(0,0,0,0.28);
            /* Sürüklenen kart parmağın/imlecin altında en üstte durduğundan,
               elementFromPoint hedef karesi ARANIRKEN kendi kendini bulmasın diye
               isabet testinden şeffaf tutulur — pointer capture zaten olayları
               doğrudan bu elemana yönlendirmeye devam eder. */
            pointer-events: none;
        }

        .pe-photo-add {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--muted);
            border: 2px dashed var(--line);
            background: none;
        }

        .pe-photo-remove {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            color: #000;
            border: none;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pe-photo-primary-badge {
            position: absolute;
            bottom: 4px;
            left: 4px;
            right: 4px;
            background: rgba(255,255,255,0.9);
            color: var(--ink);
            font-size: 8.5px;
            font-weight: 800;
            text-align: center;
            padding: 2px 0;
            border-radius: 999px;
        }

        /* Yazılı sorular */
        .pe-prompt-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 10px;
            position: relative;
        }

        .pe-prompt-question { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; padding-right: 24px; }
        .pe-prompt-answer { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; padding-right: 24px; overflow-wrap: break-word; }

        .pe-prompt-remove {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid var(--line);
            color: #000;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        }

        .pe-prompt-suggestion {
            margin-top: 10px;
            background: var(--surface);
            border-radius: 10px;
            padding: 8px 10px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pe-add-prompt-btn {
            width: 100%;
            border: 2px dashed var(--line);
            background: none;
            border-radius: 14px;
            padding: 12px;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--muted);
            cursor: pointer;
            margin-bottom: 10px;
        }

        /* Video / Ses / Anket dashed slot */
        .pe-dashed-slot {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 2px dashed var(--line);
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .pe-dashed-slot-body { flex: 1; min-width: 0; }
        .pe-dashed-slot-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
        .pe-dashed-slot-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }

        .pe-dashed-slot-action {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent-1);
            color: #fff;
            border: none;
            font-size: 16px;
            font-weight: 800;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pe-media-filled {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 12px 14px;
            margin-bottom: 8px;
        }

        .pe-media-filled-icon {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--surface);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }

        /* Mevcut .switch/.slider (Ayarlar) yeniden kullanılır; yalnızca bu ekran
           içinde aktif rengi mor'a çevrilir — global toggle rengine dokunulmaz. */
        .profile-editor-screen .switch input:checked + .slider { background: var(--accent-1); }

        /* ============================================================
           PROFİLİM > DÜZENLE/GÖRÜNTÜLE — "Görüntüle" (View) sekmesi: salt
           okunur profil önizlemesi. Aynı .pe-body kaydırma alanını paylaşır,
           tutarlı köşe yuvarlama (16-20px) ve dikey boşluk (14px) kullanır.
           Temel bilgiler (şehir/bölüm/burç/din) eskiden yatay kaydırılabilir
           .pv-chip-row şeridiydi — dikey, satır satır okunan .pv-detail-card'a
           çevrildi (bkz. görev: Profil Düzenleme veri girişi layout düzeltmesi),
           Güven/Sosyal Medya kartlarıyla AYNI kalıbı paylaşıyor.
           ============================================================ */
        .pv-detail-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 2px 14px;
            margin-bottom: 14px;
        }

        /* Başkasının profilinde üst fotoğrafın hemen altındaki arkadaşlık durumu
           butonu (bkz. profile.js > renderProfileFriendActionButton) — diğer
           .pv-* kartlarıyla AYNI dikey ritim, kendi arkaplanı yok (buton zaten
           .btn-main/.btn-secondary'den geliyor). */
        .pv-friend-action-row { margin-bottom: 14px; }

        .pv-detail-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--line);
        }

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

        /* Sosyal medya satırı — .pv-detail-row ile aynı kart/ritim, ancak
           platform adı yazılı bir etiket YOK (bkz. görev: sosyal medya
           modernizasyonu): sadece marka ikonu + tıklanabilir kullanıcı adı,
           tek satırda ortalanmış hizada. */
        .pv-social-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--line);
            text-decoration: none;
            color: var(--text-primary);
        }

        .pv-social-row:last-child { border-bottom: none; }

        .pv-social-handle {
            font-size: 13.5px;
            font-weight: 600;
            overflow-wrap: break-word;
            min-width: 0;
        }

        a.pv-social-row:hover .pv-social-handle,
        a.pv-social-row:focus-visible .pv-social-handle {
            color: var(--accent-1);
        }

        .pv-detail-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
        /* min-width:0: flex item'lar varsayılan olarak min-width:auto (içerik genişliği)
           taşır — bu, overflow-wrap:break-word'ü es geçip uzun bir kelimenin (ör. uzun
           sosyal medya kullanıcı adı) kartın dışına taşmasına yol açar. 0'a çekilince
           satır gerçekten sarıyor, kart genişliğini asla aşmıyor. */
        .pv-detail-body { min-width: 0; flex: 1; }
        .pv-detail-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
        .pv-detail-value { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-top: 2px; overflow-wrap: break-word; }

        .pv-photo-card {
            width: 100%;
            aspect-ratio: 4 / 5;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            background-color: var(--surface);
            margin-bottom: 14px;
        }

        .pv-bio-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
        }

        .pv-bio-text {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.55;
            color: var(--text-primary);
            white-space: pre-wrap;
            overflow-wrap: break-word;
        }

        .pv-prompt-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 18px;
            margin-bottom: 14px;
        }

        .pv-prompt-question { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
        /* Cevap metni: görsel ağırlık bio metnine (.pv-bio-text) yakın olmalı —
           soru başlığı (.pv-prompt-question) ve punto korunur, yalnızca anormal
           kalınlık giderilir (bkz. görev: profil soru/cevap font ağırlığı). */
        .pv-prompt-answer { font-size: 17px; font-weight: 500; color: var(--text-primary); line-height: 1.4; overflow-wrap: break-word; }

        /* Profil Görüntüle'de Güven/Temel Bilgiler/Sosyal Medya gibi .pv-detail-card
           içine gömülen bölüm başlıkları — İlgi Alanları'ndaki .pv-prompt-question
           ile AYNI yazı stili, yalnızca .pv-detail-card'ın dar (2px 14px) iç
           boşluğuna uyacak üst/alt boşluk eklenir. Kasıtlı olarak ALL CAPS YOK
           (bkz. görev: profil görüntüleme ve profil içerik limitleri md. 7) —
           .settings-section-title'daki text-transform:uppercase burada
           tekrarlanmaz; o sınıf başka ekranlarda (Ayarlar vb.) kullanılmaya
           devam ettiğinden global olarak değiştirilmedi. */
        .pv-card-title { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 10px 0 2px; }

        /* Arkadaşlarının yorumu akordeonu (bkz. profile.js > renderProfileViewBody
           md. 6, toggleFriendTakesSection) — mevcut .filter-group akordeon diliyle
           (bkz. calendar.js filtre paneli) AYNI görsel, yalnızca yorum sayısı
           filtre gruplarından fazla olabileceğinden yorum listesine yapay
           bir yükseklik sınırı UYGULANMAZ (bkz. görev: Arkadaşlarının Yorumu
           sınırını kaldır — 3/20/100 yorum, hepsi erişilebilir olmalı).

           ÖNEMLİ: Aşağıdaki genel `.filter-group.open .filter-group-body`
           kuralı (max-height: 340px) bu dosyada DAHA SONRA tanımlı ve bu
           seçiciyle EŞİT özgüllükte olduğundan, kaynak sırası gereği onu
           ezip yorumları ~3 karta kırpardı (overflow: hidden). `.filter-group`
           sınıfını da seçiciye ekleyerek özgüllüğü kasıtlı olarak artırıyoruz
           ki bu override her koşulda kazansın. */
        .filter-group.pv-friend-takes.open .filter-group-body { max-height: none; }

        /* Anket oylama — Görüntüle sekmesindeki .pv-prompt-card içine gömülür
           (bkz. profile.js > renderPollCard). Oy kullanmadan önce: tıklanabilir
           şık listesi (sonuç YOK, bkz. görev md. 3). Oy kullandıktan sonra / anket
           sahibi için: her şıkkın oy sayısı + yüzdesi + oran çubuğu, kendi
           seçtiğin şık vurgulanır. */
        .pv-poll-vote-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

        .pv-poll-vote-btn {
            width: 100%;
            text-align: left;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 13px 15px;
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .pv-poll-vote-btn:hover, .pv-poll-vote-btn:focus-visible { border-color: var(--accent-1); }
        .pv-poll-vote-btn:active { background: var(--line); }

        .pv-poll-results { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }

        .pv-poll-result-row {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px 13px;
        }
        .pv-poll-result-row-mine { border-color: var(--accent-1); }

        .pv-poll-result-top {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 7px;
        }
        .pv-poll-result-label { font-size: 13.5px; font-weight: 700; color: var(--text-primary); overflow-wrap: break-word; }
        .pv-poll-result-stats { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

        .pv-poll-bar-track { background: var(--surface); border-radius: 999px; height: 8px; overflow: hidden; }
        .pv-poll-bar-fill { background: var(--accent-1); height: 100%; border-radius: 999px; transition: width 0.3s ease; }

        .pv-poll-total { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }

        .m-unread-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-1);
            vertical-align: middle;
            margin-left: 2px;
        }

        /* Arkadaşlar ekranı: satır sonundaki mesaj/çıkar ikonları — profil açma
           tıklamasından ayrı, kendi dokunma alanlarına sahip küçük yuvarlak butonlar. */
        .friend-row-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .friend-action-btn {
            background: var(--surface);
            color: var(--text-primary);
            font-size: 13px;
        }

        .friend-action-btn.remove { color: var(--color-danger); }

        /* Onay/form dialog'ları (Engelle, Rapor Et, bilet satın alma, vs.) —
           .profile-editor-screen/.hc-screen/.admin-app
           gibi "içine girilen ekranlar"ın (--z-nav-screen) İÇİNDEN açılabilir
           ve HER ZAMAN onların üzerinde görünmelidir — bu yüzden --z-dialog,
           --z-nav-screen'den yüksek olmalı (bkz. :root — MERKEZİ Z-INDEX
           SİSTEMİ). Daha önce ikisi de aynı z-index'i (600) paylaşıyordu; bu,
           örn. "Engelle" onay penceresinin başkasının profilinin ALTINDA
           kalmasına yol açıyordu (DOM sırasına bağlı, kırılgan davranış). */
        .compose-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-dialog);
            background: rgba(15, 14, 13,0.75);
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .compose-modal.show { display: flex; }

        /* max-height + overflow-y burada TEK yerde tanımlanır — eskiden her uzun
           içerikli .compose-card (bildirimler, şifre değiştirme, bilet satın alma vb.)
           bunu kendi inline style'ında ayrı ayrı tekrarlıyordu (bkz. git geçmişi);
           bu da bazı ekranlarda (ör. e-posta/telefon doğrulama) unutulup içerik
           viewport dışına taşabiliyordu. --app-vvh (bkz. ui.js) mobil klavye
           açıkken gerçek görünür yüksekliği yansıtır; desteklenmiyorsa 100vh'a
           düşer ve davranış eskisiyle aynı kalır. */
        .compose-card {
            background: var(--card-bg);
            border-radius: 22px;
            width: 380px;
            max-width: 100%;
            max-height: min(85vh, calc(var(--app-vvh, 100vh) - 40px));
            overflow-y: auto;
            padding: 22px 20px;
        }

        .compose-card h3 { font-size: 15px; margin-bottom: 4px; color: var(--text-primary); }
        .compose-card .compose-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }

        .compose-card textarea {
            width: 100%;
            min-height: 90px;
            padding: 12px;
            border: 2px solid var(--line);
            border-radius: 12px;
            font-size: 13px;
            outline: none;
            resize: vertical;
        }

        .compose-card textarea:focus { border-color: var(--accent-1); }

        .compose-actions { display: flex; gap: 10px; margin-top: 14px; }
        .compose-actions button { flex: 1; }

        /* #organizer-announcement-modal: bir bildirime (ORGANIZER_ANNOUNCEMENT)
           tıklanınca #notif-modal'ın (.compose-modal → --z-dialog) ÜZERİNE,
           panel KAPATILMADAN açılır (görev "Organizatör Etkinlik Duyurusu"
           md. 6). Aynı z-index'te DOM sırasına güvenmek kırılgan olduğundan
           açıkça bir üst kademe verilir: --z-dialog-elevated (bir dialog'un
           ÜZERİNE açılan dialog — bkz. :root, MERKEZİ Z-INDEX SİSTEMİ kademe 6b,
           #photo-required ile AYNI desen). */
        #organizer-announcement-modal { z-index: var(--z-dialog-elevated); }

        /* Duyuru metni: organizatörün yazdığı gibi gösterilir — satır sonları/
           paragraflar korunur (pre-wrap), uzun kelimeler taşmaz (anywhere),
           uzun duyurular modal içinde dikey scroll edilir (görev md. 5/15). */
        #organizer-announcement-modal .oad-body {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-primary);
            margin-top: 6px;
            max-height: 45vh;
            overflow-y: auto;
        }
        #organizer-announcement-modal .compose-sub b { color: var(--text-primary); }

        /* ============================================================
           KUPON FORMU — iki sütunlu alan satırları (#coupon-form-modal).
           Neden: "Başlangıç"/"Bitiş" alanları <input type="datetime-local">
           ve Chrome'da bir değer seçilince alan içine "×" temizle butonu +
           tarih/saat spinner'ları eklendiği için alanın intrinsic MIN
           genişliği büyür. Flex item'ların varsayılan min-width:auto'su bu
           büyümeyi kısıtlamadığından "Bitiş" alanı sağa itilip .settings-card
           dışına taşıyor, dar ekranda yatay scroll oluşuyordu.
           Çözüm: min-width:0 ile alanlar container'a göre küçülebilsin +
           flex-wrap ile geniş ekranda yan yana, dar ekranda alt alta.
           Kupon formuna özgü — ortak .input-group davranışı değişmez. */
        #coupon-form-modal .cf-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0 8px;
        }
        #coupon-form-modal .cf-row > .input-group {
            flex: 1 1 160px;
            min-width: 0;
        }
        #coupon-form-modal .cf-row > .input-group input {
            min-width: 0;
        }
        /* Tarih satırı: dolu bir <input type="datetime-local"> ("27.08.2026 14:30"
           + takvim ikonu) Chrome'da ~190px ister; 400px'lik .settings-card içinde
           iki alan yan yana sığmadığından değer seçilince metin kırpılırdı.
           Daha yüksek bir flex-basis ile bu satır dar container'da alt alta
           geçer (değer seçilse de seçilmese de AYNI düzen — seçince kayma yok);
           yeterince geniş bir kapsayıcıda yine yan yana dizilir. */
        #coupon-form-modal .cf-row.cf-row--dates > .input-group {
            flex: 1 1 240px;
        }

        /* Doğrulama rozeti & güven puanı */
        .verified-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--surface);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 999px;
            white-space: nowrap;
            max-width: 100%;
        }

        .trust-score-box {
            background: var(--card-bg);
            border-radius: 14px;
            padding: 14px 16px;
            margin-top: 10px;
        }

        .trust-score-box .ts-stars { color: var(--text-primary); font-size: 15px; letter-spacing: 2px; }
        .trust-score-box .ts-number { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 4px 0 8px; }
        .trust-score-box .ts-check { font-size: 12px; color: var(--text-secondary); padding: 3px 0; }
        .trust-score-box .ts-check b { color: #16a34a; }

        /* ============================================================
           GÜVEN & TOPLULUK — badge/rozet çipleri, rapor sebep seçici, katılımcı/
           organizatör değerlendirme sheet'i. Konteyner olarak yukarıdaki mevcut
           .trust-score-box + .pv-detail-card/.pv-detail-row (profil görünümüyle
           birebir aynı görsel dil) kullanılır — burada yalnızca bu ekranlara özel
           yeni parçalar tanımlanır.
           ============================================================ */
        .trust-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

        .trust-badge-chip {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--surface); color: var(--text-primary);
            font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
            border: none; cursor: pointer;
        }

        .trust-social-note {
            display: flex; align-items: center; gap: 6px;
            font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
            margin-top: 8px;
        }

        .trust-report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

        .trust-report-reason-btn {
            font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px;
            border: 1px solid var(--line); background: var(--card-bg); color: var(--text-primary); cursor: pointer;
        }
        .trust-report-reason-btn.selected { background: var(--card-bg); color: var(--text-primary); border-color: var(--accent-1); }

        .trust-review-row {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 11px 2px; border-bottom: 1px solid var(--line);
        }
        .trust-review-row input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent-1); }
        .trust-review-row:last-of-type { border-bottom: none; }

        /* Organizatör değerlendirmesindeki 1-5 yıldız seçici (görev md. 19) —
           mevcut .verify-badge/.trust-review-row renk tokenlarını kullanır,
           yeni bir renk sistemi icat edilmedi. */
        .trust-star-picker { display: flex; gap: 4px; }
        .trust-star { color: var(--line); cursor: pointer; line-height: 0; }
        .trust-star svg { width: 22px; height: 22px; stroke: currentColor; }
        .trust-star.filled { color: #f59e0b; }
        .trust-star.filled svg { fill: currentColor; }

        .trust-org-stats-grid {
            display: flex; align-items: stretch;
            background: var(--card-bg); border-radius: 12px;
            margin: 10px 0 4px;
        }
        .trust-org-stat-tile {
            flex: 1 1 0; min-width: 0; padding: 10px 8px;
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            text-align: center;
            border-right: 1px solid var(--line);
        }
        .trust-org-stat-tile:last-child { border-right: none; }
        .trust-org-stat-tile .num {
            font-size: 18px; font-weight: 800; color: var(--text-primary);
            line-height: 1.2; max-width: 100%; overflow-wrap: break-word;
        }
        /* Başlık için sabit 2 satır yer ayrılır: farklı uzunluktaki başlıklar
           ("Düzenlenen Etkinlik" 2 satır, "Gerçekleşen" 1 satır) tile'ları farklı
           hizaya kaydırmasın — değer (.num) üstte, başlık altta hep aynı y'de. */
        .trust-org-stat-tile .lbl {
            font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px;
            max-width: 100%; overflow-wrap: break-word;
            line-height: 1.25; min-height: 2.5em;
            display: flex; align-items: flex-start; justify-content: center;
        }
        @media (max-width: 480px) {
            .trust-org-stat-tile { padding: 8px 4px; }
            .trust-org-stat-tile .num { font-size: 15px; }
            .trust-org-stat-tile .lbl { font-size: 9px; }
        }
        @media (max-width: 360px) {
            .trust-org-stat-tile { padding: 7px 3px; }
            .trust-org-stat-tile .num { font-size: 13.5px; }
            .trust-org-stat-tile .lbl { font-size: 8.3px; letter-spacing: 0.1px; }
        }

        /* İstatistiklerim üst özet kartları (organizer.js > renderOrganizerStatsModal)
           artık tıklanabilir — .trust-org-stats-grid/.trust-org-stat-tile'ın TABANI
           değişmedi (yukarıdaki .num/.lbl ellipsis kaldırma dahil, diğer iki kullanım
           yerini de otomatik düzeltir: app.js "Düzenlenen Etkinlik" satırı, organizer.js
           profil kartı "Takipçi/Toplam Etkinlik/Yaklaşan"), sadece bu iki modifier
           class'ı EKLENDİ. Dar ekranda 4 kart tek satıra hâlâ sığmazsa 2x2'ye geçer
           (görev "İstatistiklerim Redesign" md. 3). */
        .stats-kpi-tile {
            cursor: pointer; border: none; border-right: 1px solid var(--line);
            background: none; font: inherit; appearance: none; -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent; position: relative;
        }
        .stats-kpi-tile:last-child { border-right: none; }
        .stats-kpi-tile:active { background: var(--surface); }
        .stats-kpi-chevron { position: absolute; top: 6px; right: 4px; color: var(--muted); opacity: 0.55; }
        @media (max-width: 480px) {
            .trust-org-stats-grid.stats-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; }
            .stats-kpi-grid .stats-kpi-tile { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 8px; }
            .stats-kpi-grid .stats-kpi-tile:nth-child(2n) { border-right: none; }
            .stats-kpi-grid .stats-kpi-tile:nth-child(n+3) { border-bottom: none; }
        }

        /* Toplam Etkinlik/Yayında/Takipçi/Toplam İlgi detay kartları — üst özetlerin
           smooth-scroll hedefi (bkz. organizer.js > scrollToOrganizerStatDetail).
           Büyük sayı stili .admin-stat-value ile AYNI ölçüler, yeni bir tipografi
           sistemi icat edilmedi. */
        .stat-detail-num { font-size: 24px; font-weight: 800; font-family: var(--font-family-display); color: var(--text-primary); }
        .stat-detail-desc { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 2px 0 8px; }
        .stat-detail-desc:last-child { margin-bottom: 0; }
        #stat-detail-events, #stat-detail-published, #stat-detail-followers, #stat-detail-interest { scroll-margin-top: 10px; }

        .boost-box {
            background: linear-gradient(135deg, var(--ink), var(--ink-soft));
            border-radius: 14px;
            padding: 14px 16px;
            margin-top: 10px;
            color: #fff;
        }

        .boost-box .boost-title { font-family: var(--font-family-display); font-size: 14px; font-weight: 600; line-height: var(--line-height-title); margin-bottom: 4px; }
        .boost-box .boost-sub { font-size: 11.5px; color: var(--cream); margin-bottom: 8px; }
        .boost-box .boost-timer { font-size: 20px; font-weight: 800; color: var(--cream); }

        .settings-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-screen);
            background: rgba(15, 14, 13,0.7);
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .settings-modal.show { display: flex; }

        /* Dijital bilet + QR ekranı (#digital-ticket-modal) hem BİLETLERİM
           (#my-tickets-modal) hem de etkinlik detayı (#event-detail-modal) gibi
           --z-screen kademesindeki ekranların İÇİNDEN, onları kapatmadan açılır
           (bkz. app.js > openDigitalTicket çağrı noktaları) — aynı kademede DOM
           sırasına güvenmek kırılgan olacağından (#my-tickets-modal DOM'da bundan
           SONRA geldiği için üstüne biniyordu) burada açıkça --z-dialog verilir,
           aynı desen #distance-sales-agreement-screen'de de kullanılıyor (bkz.
           :root — MERKEZİ Z-INDEX SİSTEMİ). Bilet, kullanıcının QR'ı görevliye
           göstermesi gereken kritik bir ekran olduğundan HER ZAMAN önde açılmalı. */
        #digital-ticket-modal {
            z-index: var(--z-dialog);
        }

        /* Ayarlar alt ekranları (Bildirimler/Ses & Titreşim/Gizlilik/Güvenlik/
           Hesap, bkz. index.html > AYARLAR ALT EKRANLARI) da #digital-ticket-modal
           ile AYNI desen: #settings-modal'ı (--z-screen) kapatmadan üzerine açılır,
           bu yüzden açıkça --z-dialog verilir. */
        #settings-notifications-modal,
        #settings-sound-modal,
        #settings-privacy-modal,
        #settings-security-modal,
        #settings-account-modal {
            z-index: var(--z-dialog);
        }

        /* #coupon-form-modal admin modunda #admin-app'in (--z-admin: 590)
           ÜZERİNE açılır (bkz. app.js > openCouponForm, admin.js > "+ Yeni
           Kupon"), base .settings-modal z-index'i (--z-screen: 500) admin-app'ten
           DÜŞÜK olduğundan açıkça --z-dialog verilmezse modal admin panelinin
           arkasında görünmez kalıyordu — aynı desen #digital-ticket-modal'da da
           kullanılıyor (bkz. :root — MERKEZİ Z-INDEX SİSTEMİ). */
        #coupon-form-modal {
            z-index: var(--z-dialog);
        }

        /* #generic-confirm-modal (bkz. ui.js > showGenericConfirm) proje
           genelinde TEK paylaşılan onay/alert penceresi olduğundan, onu
           tetikleyen katman ne olursa olsun (Ayarlar > Gizlilik >
           "Profilimi Göster" gibi bir #settings-*-modal KAPATILMADAN
           üzerine açılması, ya da bir .bottom-sheet İÇİNDEN — ör. Etkinlik
           Grupları sheet'inden "Fotoğraf Gerekli" — açılması) HER ZAMAN en
           üstte kalmalı. Önceden yalnızca ayar alt ekranlarını (--z-dialog)
           geçecek kadar yüksek olan --z-dialog-elevated (680) kullanıyordu;
           bu, --z-sheet'in (700) ALTINDA kaldığından bir bottom-sheet'ten
           tetiklendiğinde (DOM sırasına bakılmaksızın) sheet'in arkasında
           kalıyordu. --z-confirm (720) tüm dialog/sheet kademelerinin (6-7)
           üzerinde, tek ve öngörülebilir bir üst kademe sağlar (bkz. :root —
           MERKEZİ Z-INDEX SİSTEMİ, kademe 8). */
        #generic-confirm-modal {
            z-index: var(--z-confirm);
        }

        .settings-card {
            background: var(--card-bg);
            border-radius: 24px;
            width: 400px;
            max-width: 100%;
            max-height: min(88vh, calc(var(--app-vvh, 100vh) - 40px));
            overflow-y: auto;
            padding: 22px 20px;
            position: relative;
        }

        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 2px;
            border-bottom: 1px solid var(--line);
        }

        .settings-row .s-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
        .settings-row .s-sub { font-size: 10.5px; color: var(--muted); font-weight: 600; }

        .notif-row.unread {
            background: var(--surface);
            border-left: 3px solid var(--ink);
            padding-left: 8px;
            margin-left: -2px;
        }
        .notif-row.unread .s-label { font-weight: 800; }

        .notif-row.notif-row-removing {
            opacity: 0;
            transform: translateX(6px);
            transition: opacity 0.13s ease, transform 0.13s ease;
        }

        .notif-delete-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            min-width: 32px;
            margin: -6px -4px -6px 2px;
            border: none;
            border-radius: 8px;
            background: none;
            color: var(--muted);
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .notif-delete-btn .splend-icon { width: 16px; height: 16px; }
        .notif-delete-btn:hover, .notif-delete-btn:active {
            background: var(--surface);
            color: #ef4444;
        }

        .notif-load-more {
            display: block;
            width: 100%;
            margin-top: 2px;
            padding: 9px 2px;
            border: none;
            border-radius: 8px;
            background: none;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--muted);
            text-align: center;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .notif-load-more:hover, .notif-load-more:active {
            background: var(--surface);
            color: var(--text-primary);
        }
        .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .switch .slider {
            position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: 0.2s;
        }
        .switch .slider::before {
            content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s;
        }
        .switch input:checked + .slider { background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); }
        .switch input:checked + .slider::before { transform: translateX(18px); }

        /* Zorunlu (kapatılamaz) bildirim switch'leri — ör. Ayarlar > Bildirimler >
           Zorunlu Bildirimler. Native <input disabled> zaten etkileşimi engelliyor
           (bkz. index.html), burada yalnızca görsel pasif/disabled hali eklenir.
           Mevcut .btn-secondary:disabled/.ev-action:disabled ile AYNI kalıp
           (opacity 0.5 + cursor: not-allowed) yeniden kullanılır — yeni bir renk
           sistemi icat edilmedi. Track rengi checked durumundaki ink gradyanı
           yerine düz --muted olur ki "açık ama kilitli" hali normal aktif
           switch'in canlı gradyanından ilk bakışta ayırt edilebilsin. */
        .switch input:disabled + .slider {
            cursor: not-allowed;
            opacity: 0.5;
        }
        .switch input:disabled:checked + .slider { background: var(--muted); }

        .switch.privacy-switch { width: 34px; height: 20px; }
        .switch.privacy-switch .slider::before { width: 14px; height: 14px; }
        .switch.privacy-switch input:checked + .slider::before { transform: translateX(14px); }

        /* Telefon inputu içindeki kompakt görünürlük switch'i (organizatör
           başvurusu/profil düzenleme) — .pw-field'ın input-içi buton konumlandırma
           deseniyle AYNI, ayrı büyük "Telefon Görünürlüğü" bölümü yerine geçer.
           Switch'in kendisi .privacy-switch ile birebir aynı. */
        .input-group.phone-visibility-field { position: relative; }
        .input-group.phone-visibility-field input { padding-right: 54px; }
        .switch.phone-visibility-switch { position: absolute; right: 10px; top: 30px; }

        .profile-section-title.with-switch {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-top: 0;
        }

        /* Profil Düzenle: her alanın gizlilik/Görünürlük kontrolü artık .bottom-sheet-card'ın
           (kendisi scroll container, overflow-y:auto) TABANINA yapışık kalır — uzun listeler
           (üniversite/kişilik/ilgi alanları) veya uzun içerik yüzünden kullanıcı butona
           ulaşmak için tüm sheet'i sona kadar kaydırmak zorunda kalmasın diye. Negatif margin
           kartın kendi yatay/alt padding'ini (10px 20px 20px) iptal edip tam genişlikte bir
           şerit oluşturur; kendi padding'i (+ safe-area) ile içerik geri kazanılır. */
        .pe-visibility-sticky {
            position: sticky;
            bottom: 0;
            z-index: 1;
            background: var(--card-bg);
            margin: 14px -20px 0;
            padding: 12px 20px max(14px, calc(env(safe-area-inset-bottom) + 14px));
            border-top: 1px solid var(--line);
        }

        .settings-section-title { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 4px; }
        .settings-section-title:first-child { margin-top: 0; }


        /* Organizatör formu / filtre paneli: radio pill ve checkbox ızgarası.
           text-transform/letter-spacing sıfırlanır — ikisi de <label> elemanı
           olduğundan, alan etiketleri (AD/SOYAD vb.) için tanımlı global
           `label { text-transform: uppercase }` kuralını miras alıp chip
           metnini (ör. "Şahıs") istemeden TAMAMI BÜYÜK göstermesinler diye
           (.consent-row label'daki AYNI düzeltmeyle aynı desen). */
        .ec-radio-pill {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 9px 8px;
            border-radius: 10px;
            border: 2px solid var(--line);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            text-align: center;
            word-break: break-word;
            text-transform: none;
            letter-spacing: 0;
        }

        .ec-radio-pill input { accent-color: var(--ink); }
        .ec-radio-pill:has(input:checked) { border-color: var(--ink); color: var(--text-primary); background: var(--surface); }

        /* Grup Ayarları (bkz. chat.js > renderGroupSettingsSheetBody) — Herkese
           Açık/Özel/Gizli seçici. .ec-radio-pill'in varsayılanı (flex:1,
           justify-content:center, tek satır) yan yana kısa chip'ler için;
           #event-create-modal'daki AYNI "flex:none, justify-content:flex-start"
           tek-sütun deseni burada bir adım öteye taşınır: her seçenek DİKEY
           olarak ikon+etiket üstte, kısa açıklama altta gösterir (md. 27). */
        #group-settings-sheet-body #group-visibility-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #group-settings-sheet-body .ec-radio-pill {
            flex: none;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            gap: 4px;
        }
        #group-settings-sheet-body .ec-radio-pill input[type="radio"] { display: none; }
        /* Normal üye — salt okunur, aynı kutu görünümü ama tıklanamaz/radyo yok. */
        #group-settings-sheet-body .group-visibility-readonly {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            border-radius: 10px;
            border: 2px solid var(--line);
        }
        #group-settings-sheet-body .group-visibility-option-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            text-transform: none;
        }
        #group-settings-sheet-body .group-visibility-option-desc {
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
            text-transform: none;
        }

        /* Katılma İstekleri (bkz. chat.js > renderGroupJoinRequestsSheetBody) —
           .match-list-item'in .m-body{flex:1} kuralı bu satırı zaten sağa iter,
           yalnızca iki ikon-buton arasına boşluk eklemek yeterli. */
        .join-request-actions { display: flex; gap: 8px; flex-shrink: 0; }

        .ec-checkbox-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .ec-check {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            border-radius: 10px;
            background: var(--surface);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
            text-transform: none;
            letter-spacing: 0;
        }

        .ec-check input { accent-color: var(--ink); }
        /* Global seçili-chip standardı (bkz. .interest-item.selected /
           .ec-radio-pill:has(input:checked)): dolgu değil, sadece kenarlık
           vurgusu. Önceden tam --ink dolgu kullanılıyordu — tüm chip/checkbox/
           radio ailesiyle tutarlı tek bir "seçili" görünümü olsun diye kaldırıldı. */
        .ec-check:has(input:checked) { border-color: var(--accent-1); color: var(--text-primary); background: var(--surface); }

        /* Organizatör başvurusu (#organizer-application-modal) sözleşme onay satırı
           (#oa-terms-check): metin uzun ve içinde bir link span'i var, base .ec-check
           bunun için genişlik/kırılma kuralı tanımlamıyordu — mobilde checkbox
           dar ekranlarda taşıyor/yanlış hizalanıyordu. Checkbox sabit boyutta solda
           kalır, metin ayrı bir span'de (bkz. index.html) esnek genişlikte satır
           satır kırılır; yatay taşma oluşmaz. */
        #organizer-application-modal .ec-check {
            width: 100%;
            box-sizing: border-box;
            align-items: flex-start;
        }

        #organizer-application-modal .ec-check input[type="checkbox"] {
            /* global `input, select, textarea { width:100% }` (satır 702) checkbox'a
               da uygulanıyor — flex-shrink:0 bunu KÜÇÜLTMEDİĞİ için checkbox satırın
               tamamını kaplayıp yanındaki metin span'ini (flex:1, min-width:0,
               word-break:break-word) 0 genişliğe sıkıştırıyor, bu da metnin harf harf
               dikey kırılmasına yol açıyordu — width:auto ile intrinsic checkbox
               boyutuna (diğer .ec-check kullanımlarındaki gibi) dönülür. */
            width: auto;
            flex-shrink: 0;
            margin-top: 3px;
        }

        #organizer-application-modal .ec-check > span {
            flex: 1;
            min-width: 0;
            word-break: break-word;
            line-height: 1.45;
        }

        /* Filtre paneli: her bölüm aynı accordion dilini kullanır — kapalı başlar,
           başlığa dokununca yumuşak şekilde açılır. Her grupta en üstte "Hepsi" satırı vardır. */
        .filter-group {
            border: 1px solid var(--line);
            border-radius: 12px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .filter-group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 12px 14px;
            cursor: pointer;
        }

        .fg-title {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .fg-chevron {
            flex-shrink: 0;
            font-size: 10px;
            color: var(--muted);
            transition: transform 0.3s ease;
        }

        .filter-group.open .fg-chevron { transform: rotate(180deg); }

        .filter-group-body {
            max-height: 0;
            overflow: hidden;
            padding: 0 14px;
            transition: max-height 0.35s ease, padding 0.35s ease;
        }

        .filter-group.open .filter-group-body {
            max-height: 340px;
            padding: 0 14px 14px;
        }

        .filter-subrow {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .filter-subrow .input-group { flex: 1; }

        /* ============================================================
           TEK SÜTUN CHIP KOMPONENTİ — Etkinlikler "Filtrele" paneli (#filter-modal),
           Takvimim "Filtrele" paneli (#cal-filter-modal) VE Organizatör "Yeni
           Etkinlik Oluştur" formu (#event-create-modal) aynı görsel standardı
           paylaşır — üç yerde de aynı bileşen, tek CSS tanımı:
           - Tek sütun, dikey liste (her satırda 1 seçenek).
           - Kategori chip'leri (.interest-item, div/onclick tabanlı), checkbox'lar
             (.ec-check, input/label tabanlı) VE radio pill'ler (.ec-radio-pill,
             input/label tabanlı — Etkinlik Görünürlüğü/Türü/Ücret) aynı boyut/
             padding/radius/font'u paylaşır — mekanizmaları ayrı kalır (checkbox vs.
             radio vs. class-toggle), yalnızca görünümleri birleşir. Hiçbir yerde
             "checkbox + chip" ikili gösterimi yok: native input glyph'i gizlenir,
             seçili durum tamamen :has(input:checked)/.selected üzerinden.
           - Seçili durum HİÇBİR YERDE dolgu (background fill) DEĞİL — uygulama
             genelindeki tek standart: kenarlık vurgusu (bkz. .interest-item.selected,
             .ec-check:has(input:checked), .ec-radio-pill:has(input:checked) temel
             kuralları). Bu üç modal artık o temel kurallardan SAPMIYOR, kendi dolu-
             koyu varyantları yok — tutarlılık için ayrı override tutulmuyor.
           - Metin asla nowrap+ellipsis ile kesilmez; sığmazsa kontrollü şekilde
             2. satıra sarar (word-break).
           ============================================================ */
        #filter-modal .ec-checkbox-grid,
        #cal-filter-modal .ec-checkbox-grid,
        #event-create-modal .ec-checkbox-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #filter-modal #filter-category-grid,
        #cal-filter-modal #cal-filter-category-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 220px;
            overflow-y: auto;
            padding: 2px;
        }

        #filter-modal .ec-check,
        #filter-modal .interest-item,
        #cal-filter-modal .ec-check,
        #cal-filter-modal .interest-item,
        #event-create-modal .ec-check,
        #event-create-modal .ec-radio-pill {
            width: 100%;
            box-sizing: border-box;
            min-height: 40px;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 12.5px;
            font-weight: 600;
            line-height: 1.3;
            white-space: normal;
            word-break: break-word;
            margin: 0;
        }

        #filter-modal .ec-check,
        #cal-filter-modal .ec-check,
        #event-create-modal .ec-check {
            border: 2px solid var(--line);
        }

        /* ID-scoped .ec-check border yukarıda "border" shorthand kullandığı için
           (id+class specificity), global .ec-check:has(input:checked) kenarlık
           kuralını (yalnızca iki class/pseudo) her zaman geçersiz kılardı — seçili
           durumun kenarlığı bu üç panelde hiç görünmüyordu. Aynı standardı burada
           eşit specificity ile tekrar uygulanır (dolgu YOK, sadece kenarlık). */
        #filter-modal .ec-check:has(input:checked),
        #cal-filter-modal .ec-check:has(input:checked),
        #event-create-modal .ec-check:has(input:checked) {
            border-color: var(--accent-1);
            color: var(--text-primary);
            background: var(--surface);
        }

        #filter-modal .ec-check input[type="checkbox"],
        #cal-filter-modal .ec-check input[type="checkbox"],
        #event-create-modal .ec-check input[type="checkbox"],
        #event-create-modal .ec-radio-pill input[type="radio"],
        #my-tickets-modal .ec-radio-pill input[type="radio"],
        #cal-time-chip-row .ec-radio-pill input[type="radio"],
        #organizer-application-modal .ec-radio-pill input[type="radio"],
        #media-send-modal .ec-radio-pill input[type="radio"] {
            display: none;
        }

        /* .ec-radio-pill'in kendi varsayılanı (flex:1, justify-content:center) eşit
           genişlikte YAN YANA pilller için tasarlanmıştı; burada tek sütunlu, sola
           hizalı tam-genişlik satırlara dönüşür. Seçili durum diğer chip'lerle aynı
           kenarlık-vurgu standardını kullanır (temel .ec-radio-pill:has(input:checked)
           kuralı — ayrı bir dolu-koyu varyant yok). */
        #event-create-modal .ec-radio-pill {
            flex: none;
            justify-content: flex-start;
        }

        /* Etkinlik Görünürlüğü / Etkinlik Türü / Ücret grupları — .location-container'ın
           2-3 kolonlu grid'i (Tarih/Saat gibi gerçek yan yana alanlar için kalır)
           yerine bu formda kullanılan tek sütunlu chip listesi kabı. */
        .ec-pill-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Biletlerim / Takvimim üstündeki yatay chip filtre sırası (Yaklaşan/
           Geçmiş/İptal-İade) — .ec-pill-list'in tek sütunlu form dilinden farklı,
           .ec-radio-pill'in kendi orijinal yan-yana düzeni burada kullanılır. Aynı
           chip görünümü (.ec-radio-pill, border-only seçili durum), sadece satır
           yönü değişir. Takvimim'de bu satır #cal-time-chip-row'a .discover-toolbar
           class'ıyla eklenir (mevcut toolbar satırıyla aynı çerçeve), burada ise
           modal kartı içine sade bir satır olarak. */
        .chip-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .chip-filter-row .ec-radio-pill,
        #cal-time-chip-row .ec-radio-pill {
            flex: 1 1 88px;
        }

        /* Takvimim: Yaklaşan/Geçmiş/İptal-İade sekmeleri ile en sağdaki arama
           ikonu aynı satırda (#cal-tabs-row, görev: Takvim üst slider
           sadeleştirme) — sekmeler kalan alanı paylaşır, ikon sabit kalır. */
        .cal-tabs-row #cal-time-chip-row { flex: 1; min-width: 0; }
        .cal-tabs-row .icon-btn { flex-shrink: 0; }

        #filter-modal .filter-group.open .filter-group-body,
        #cal-filter-modal .filter-group.open .filter-group-body {
            max-height: 520px;
        }


        /* Organizatör Etkinlik Detayı: aynı akordeon dilini (.filter-group ailesi,
           .fg-title/.fg-chevron reuse) kullanır, ama içerik (katılımcı listeleri,
           form özetleri) filtre gruplarından çok daha uzun olabileceğinden
           max-height belirgin şekilde daha büyük tutulur. */
        .oed-section {
            border: 1px solid var(--line);
            border-radius: 12px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .oed-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 12px 14px;
            cursor: pointer;
        }

        .oed-section.open .fg-chevron { transform: rotate(180deg); }

        .oed-section-body {
            max-height: 0;
            overflow: hidden;
            padding: 0 14px;
            transition: max-height 0.35s ease, padding 0.35s ease;
        }

        .oed-section.open .oed-section-body {
            max-height: 2400px;
            padding: 0 14px 14px;
        }

        /* Organizatör kartı/detayı: durum, görünürlük, sayı rozetleri — .ev-price
           ile aynı pill boyutu, renk .verify-badge.ok/warn/danger'dan alınır. */
        .oed-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--surface);
            color: var(--text-secondary);
        }

        .oed-actions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 14px 0;
        }


        .oed-empty-note {
            font-size: 12px;
            color: var(--muted);
            font-weight: 600;
            padding: 8px 0;
        }

        /* Genel Bilgiler / İstatistikler: etiket-değer satırları */
        .oed-info-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
        .oed-info-row:last-child { border-bottom: none; }
        .oed-info-label { display: block; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
        .oed-info-value { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: pre-wrap; }

        /* Moderatör Paneli: "Onay Bekleyen Etkinlikler" kuyruğu kartı — mevcut
           .oed-badge/.oed-info-row/.ev-price/.ev-meta diliyle uyumlu, yeni bir kart
           sistemi icat edilmedi (bkz. app.js > renderModerationQueueItem). */
        .mod-queue-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .mod-queue-top {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .mod-queue-poster {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            background: var(--surface);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
        }

        .mod-queue-title-wrap { flex: 1; min-width: 0; }
        .mod-queue-title { font-size: 14px; font-weight: 800; color: var(--text-primary); overflow-wrap: break-word; }

        /* Organizatör İstatistiklerim: durum dağılımı / etkinlik bazlı ilgi için
           minimal yatay çubuk satırı — yeni bir grafik kütüphanesi eklenmedi, düz
           div genişliği kullanılıyor (bkz. organizer.js > statBarRow). */
        .stat-bar-row { margin-bottom: 10px; }
        .stat-bar-row:last-child { margin-bottom: 0; }
        .stat-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
        .stat-bar-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .stat-bar-value { font-size: 12.5px; font-weight: 800; color: var(--text-primary); flex-shrink: 0; }
        .stat-bar-track { height: 7px; border-radius: 999px; background: var(--surface); overflow: hidden; }
        .stat-bar-fill { height: 100%; border-radius: 999px; background: var(--ink); }

        .filter-distance-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-distance-row input[type="range"] { flex: 1; }

        .filter-distance-row span {
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            flex-shrink: 0;
        }

        /* Uygulanmış filtrelerin özet etiketleri — ana ekranda, filtre ikonunun yanında */
        .active-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--ink);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 6px 5px 10px;
            border-radius: 999px;
        }

        .filter-chip button {
            border: none;
            background: rgba(255,255,255,0.2);
            color: #fff;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Filtre Paneli — sağdan açılır */
        .filter-panel {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-panel);
            background: rgba(15, 14, 13, 0.5);
            justify-content: flex-end;
        }

        .filter-panel.show { display: flex; }

        .filter-panel-card {
            background: var(--card-bg);
            width: 320px;
            max-width: 88vw;
            height: 100%;
            overflow-y: auto;
            padding: 20px 18px;
            box-shadow: -8px 0 30px rgba(15, 14, 13, 0.25);
            animation: filterPanelIn 0.25s ease;
        }

        @keyframes filterPanelIn {
            from { transform: translateX(24px); opacity: 0.6; }
            to { transform: translateX(0); opacity: 1; }
        }

        .filter-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .filter-panel-header .ed-close { position: static; }

        /* Alttan açılan seçim ekranı (bottom sheet) — üniversite seçimi gibi
           "listeden ara + seç" akışları için genel amaçlı, tekrar kullanılabilir. */
        .bottom-sheet {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-sheet);
            align-items: flex-end;
            justify-content: center;
        }

        .bottom-sheet.show { display: flex; }

        .bottom-sheet-scrim {
            position: absolute;
            inset: 0;
            background: rgba(15, 14, 13, 0.5);
        }

        /* max-height zaten vardı ama overflow-y hiç tanımlanmamıştı: kart flex
           column olduğundan ve default overflow:visible olduğundan, içeriği
           (ör. uzun üniversite/ilgi alanı listeleri) max-height'i aştığında
           kart TAŞMIYOR gibi göründüğü halde içerik yuvarlak kartın dışına,
           viewport altına taşıyordu. Bu düzeltme tüm bottom-sheet varyantlarını
           (şehir/üniversite/bölüm/burç/din/biyografi/sosyal medya/anket/arkadaşın
           yorumu/sohbet üç-nokta menüsü) aynı anda kapsar — .settings-card/
           .premium-card'daki AYNI max-height+overflow-y kalıbı.
           Doğrudan çocuklar flex-shrink:0'dır: aksi halde flexbox, kartı max-
           height'e sığdırmak için önce İÇERİDEKİ elemanları (ör. zaten kendi
           150px'lik iç scroll'u olan .interests-grid) sıkıştırmayı dener — bu da
           kartın kendisi hiç scroll olmadan içeriği görünmez küçüklükte bir
           kutuya sıkıştırır. flex-shrink:0 ile hiçbir çocuk küçülmez, taşan
           fark bunun yerine kartın KENDİ overflow-y:auto'suyla karşılanır
           (bkz. .pe-body'deki flex:1;min-height:0 kalıbının tersi durumu). */
        .bottom-sheet-card {
            position: relative;
            background: var(--card-bg);
            width: 100%;
            max-width: 420px;
            max-height: min(78vh, calc(var(--app-vvh, 100vh) - 24px));
            overflow-y: auto;
            border-radius: 22px 22px 0 0;
            padding: 10px 20px 20px;
            display: flex;
            flex-direction: column;
            animation: sheetSlideUp 0.25s ease;
            /* Aşağı sürükleyerek kapatma jesti (bkz. ui.js >
               initBottomSheetDismissGesture) dikey pan'i kendisi yönetir;
               tarayıcının yatay/geri gesture'ıyla karışmasın. */
            touch-action: pan-y;
        }

        /* Sürükleme sırasında transform parmakla birebir aksın — sheetSlideUp
           açılış animasyonu bittiğinden çakışma olmaz, jest bitince ui.js inline
           transition'ı geri koyar. */
        .bottom-sheet-card.sheet-dragging {
            animation: none;
            will-change: transform;
        }

        .bottom-sheet-card > * {
            flex-shrink: 0;
        }

        @keyframes sheetSlideUp {
            from { transform: translateY(24px); opacity: 0.6; }
            to { transform: translateY(0); opacity: 1; }
        }

        .bottom-sheet-handle {
            width: 36px;
            height: 4px;
            border-radius: 999px;
            background: var(--line);
            margin: 6px auto 14px;
        }

        /* flex-shrink:0 artık .bottom-sheet-card > * genel kuralından geliyor. */
        .bottom-sheet-card h3 { margin-bottom: 10px; }
        .bottom-sheet-card input[type="text"] { margin-bottom: 10px; }

        /* Admin kategori ikonu: SVG kodu yapıştırmaya uygun, taşmayan bir alan
           + yanında canlı önizleme kutusu (bkz. admin.js > previewAdminCategoryIcon). */
        .admin-category-icon-textarea {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.4;
            resize: vertical;
            max-height: 160px;
            margin-bottom: 6px;
        }

        .admin-icon-preview-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
        }

        .admin-icon-preview-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
        }

        .admin-icon-preview-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border-radius: 10px;
            border: 2px solid var(--line);
            background: var(--surface);
            color: var(--text-primary);
            font-size: 20px;
            overflow: hidden;
        }

        /* Sohbet ekranı: üç nokta menüsü — mevcut .bottom-sheet iskeletini
           kullanır, yalnızca satırların kendi görünümü buradadır. */
        .chat-action-sheet-btn {
            display: block;
            width: 100%;
            padding: 14px 4px;
            border: none;
            border-top: 1px solid var(--line);
            background: none;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            cursor: pointer;
        }

        .chat-action-sheet-btn:first-child { border-top: none; }
        .chat-action-sheet-btn.danger { color: #ef4444; }
        .chat-action-sheet-btn.cancel { font-weight: 800; margin-top: 8px; border-top: none; }

        /* Sohbet ekranı: "Bildir" — bildirilecek mesajları tek tek seçtiren liste. */
        .report-message-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 4px;
            border-bottom: 1px solid var(--line);
            cursor: pointer;
        }

        .report-message-row input[type="checkbox"] {
            margin-top: 2px;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            accent-color: var(--accent-1);
        }

        .report-message-text {
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.4;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        /* Davet Et ekranı: arama kutusunun altındaki hızlı eylemler (Arkadaşlarım
           filtresi, Tüm Arkadaşları Seç) — filtre panellerindeki .filter-check ile
           aynı pill dilini kullanır. */
        .invite-picker-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        /* Yeni Davet Gönder: "kullanıcı adıyla ara" ile "arkadaşlarından seç"
           yöntemleri arasındaki görsel ayraç (bkz. index.html #invite-picker-sheet). */
        .invite-method-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 4px 0 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--muted);
        }
        .invite-method-divider::before,
        .invite-method-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--line);
        }

        #invite-username-results { max-height: 38vh; margin-bottom: 8px; }
        #invite-username-results .invite-person-name,
        #invite-username-results .invite-person-username {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .invite-username-hint {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            margin-bottom: 8px;
        }

        .invite-filter-chip {
            flex: 1;
            padding: 9px 10px;
            border-radius: 999px;
            border: 2px solid var(--line);
            background: var(--surface);
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        /* Global seçili-chip standardına uyar (bkz. .interest-item.selected /
           .ec-radio-pill:has(input:checked)): dolgu değil, kenarlık vurgusu. */
        .invite-filter-chip.active {
            background: var(--surface);
            border-color: var(--ink);
            color: var(--ink);
            font-weight: 800;
        }

        .uni-list {
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .uni-item {
            padding: 12px 10px;
            border-radius: 10px;
            border: 2px solid transparent;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
        }

        .uni-item:active { background: var(--surface); }
        /* Global seçili-chip standardı: dolgu değil, kenarlık vurgusu (bkz.
           .interest-item.selected). Liste satırı olduğu için chip'e dönüştürülmedi,
           ama seçili görünümü aynı dile uyar. */
        .uni-item.selected { background: var(--surface); border-color: var(--accent-1); color: var(--text-primary); }

        .uni-empty {
            padding: 24px 10px;
            text-align: center;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        /* Davet Et ekranı: yalnızca arkadaş listesi satırı (avatar + isim/kullanıcı adı + seçim kutucuğu) */
        .invite-person-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 12px;
            cursor: pointer;
        }

        .invite-person-row:active { background: var(--surface); }

        .invite-person-info { flex: 1; min-width: 0; }
        .invite-person-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
        .invite-person-username { font-size: 11px; font-weight: 600; color: var(--muted); }
        .invite-person-status { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
        .invite-person-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; }

        /* Çevre > Kullanıcı Keşfi (bkz. chat.js > renderUserDiscoveryRow) — mevcut
           .invite-person-row deseninin üstünde iki küçük ekleme: uzun kullanıcı
           adları satırı taşırmasın diye tek satır + üç nokta, ve normal kullanıcı /
           organizatör ayrımı için sağda minimal bir etiket (.verify-badge ile aynı
           görsel dil, yeni bir rozet sistemi değil). */
        #user-discovery-list .invite-person-name,
        #user-discovery-list .invite-person-username,
        #env-search-list .invite-person-name,
        #env-search-list .invite-person-username,
        #discovery-users-list .invite-person-name,
        #discovery-users-list .invite-person-username,
        #discovery-organizers-list .invite-person-name,
        #discovery-organizers-list .invite-person-username {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Çevre keşfet/arama satırındaki aksiyon butonu — içeriğine göre sığar,
           satırı taşırmaz (bkz. .participant-card-actions button ile aynı desen). */
        #env-search-list .invite-person-row .discovery-action,
        #discovery-users-list .invite-person-row .discovery-action,
        #discovery-organizers-list .invite-person-row .discovery-action {
            width: auto;
            margin: 0;
            padding: 8px 12px;
            font-size: 11px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        /* Uyum yüzdesi — kullanıcı adı satırında minimal, marka aksanıyla. */
        .discovery-compat {
            color: var(--accent-2, var(--ink));
            font-weight: 800;
        }
        .discovery-type-badge {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 700;
            color: var(--muted);
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 3px 8px;
            white-space: nowrap;
        }
        .discovery-type-badge svg { width: 12px; height: 12px; }

        /* Profil Düzenle > Arkadaşının Yorumu: cevaplanmış yorumun yanındaki
           minimal çöp kutusu. .notif-delete-btn ile aynı görsel dil (sade, ikon
           boyutlu, hover/active'de kırmızı) ama .invite-person-row satırına özel
           konumlanır — dokunma alanı 34px, mobilde rahat basılır. */
        .pe-friend-take-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            min-width: 34px;
            margin: -6px -4px -6px 2px;
            padding: 0;
            border: none;
            border-radius: 8px;
            background: none;
            color: var(--muted);
            cursor: pointer;
            flex-shrink: 0;
        }
        .pe-friend-take-remove .splend-icon { width: 16px; height: 16px; }
        .pe-friend-take-remove:hover, .pe-friend-take-remove:active {
            background: var(--surface);
            color: #ef4444;
        }

        /* Arkadaş Ekle ekranı: satırın sonundaki durum butonu (Tabler ikonlu: plus/clock/check) — genel
           .btn-main/.btn-secondary'nin varsayılan width:100%'ü yerine içeriğine
           göre sığar (bkz. .participant-card-actions button ile aynı desen). */
        #add-friend-list .invite-person-row button,
        #blocked-users-list .invite-person-row button,
        #invite-username-results .invite-person-row button {
            width: auto;
            margin: 0;
            padding: 8px 12px;
            font-size: 11px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Profil > Üniversite alanı: normal input gibi görünen ama sadece
           alttan açılan seçim ekranını tetikleyen buton */
        .uni-picker-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            background: var(--surface);
            border: 2px solid var(--line);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
        }

        .uni-picker-trigger span.placeholder { color: var(--muted); font-weight: 500; }
        .uni-picker-chevron { color: var(--muted); font-size: 12px; }

        /* Harita: yüzen (floating) alt-orta buton, hem liste hem harita görünümünde */
        .map-float-btn {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            background: var(--ink);
            color: #fff;
            border: none;
            border-radius: 999px;
            padding: 10px 17px;
            font-size: 11px;
            font-weight: 700;
            box-shadow: 0 8px 22px rgba(15, 14, 13, 0.35);
            cursor: pointer;
            z-index: 40;
        }

        .map-view .map-float-btn { position: fixed; }

        /* Etkinlikler listesindeki "Haritada Göster" butonu, .bottom-nav ile
           aynı overlay katmanını paylaştığı için sabit bottom:18px değeri
           slider tam görünürken sliderın altında kalırdı (bkz. ui.js >
           initBottomNavScrollHide). --bottom-nav-h ve --bottom-nav-hide-offset
           (aynı fonksiyon tarafından her scroll frame'inde güncellenir) burada
           yeniden kullanılarak buton, sliderın görünürlük durumuna göre
           kademeli olarak sliderın üstü (görünürken) ile normal 18px konumu
           (kaybolduğunda) arasında hareket eder — z-index'e dokunmadan
           fiziksel çakışma engellenir. Yalnızca bu butonu etkiler, harita
           ekranındaki "Liste Görünümü" butonunu (position:fixed, üstteki
           kural) etkilemez. */
        .map-float-btn--events {
            bottom: calc(18px + var(--bottom-nav-h, 64px) - var(--bottom-nav-hide-offset, 0px));
            transition: bottom 0.25s ease;
        }

        /* "Haritada Göster" yüzen butonu alt nav'ın üstünde durduğundan, liste
           en alta kaydırıldığında son etkinlik kartının aksiyon butonları
           (Takvime Ekle vb.) butonun altında kalıp tıklanamıyordu. Etkinlik
           listesine buton yüksekliği kadar ekstra alt boşluk verilir; harita
           ekranındaki "Liste Görünümü" butonu (#map-view) ve Takvim listesi
           (#calendar-list) bundan etkilenmez. */
        .events-scroll-area #events-list {
            padding-bottom: calc(16px + var(--bottom-nav-h, 64px) + 56px);
        }

        /* Etkinlik detayının ana aksiyon satırı (Bilet/Bileti Görüntüle · Takvime
           Ekle/Çıkar · Bildirim · Davet Et/Paylaş) uzun açıklama/koşullar/kurallar
           yüzünden mobilde ekranın çok altında kalıyordu. Sticky ile scroll
           konteynerinin (.settings-card) alt kenarına sabitlenir — kullanıcı
           metnin sonuna kadar kaydırmadan temel aksiyonlara erişir. Butonların
           anlamı/işlevi DEĞİŞMEZ; İlgilenenleri Gör / Etkinlik Grupları ayrı
           butonları hemen üstünde normal akışta kalır. */
        #event-detail-modal .ed-actions-bar {
            position: sticky;
            bottom: 0;
            margin-top: 16px;
            padding: 12px 0 calc(4px + env(safe-area-inset-bottom, 0px));
            background: var(--card-bg);
            border-top: 1px solid var(--line);
            z-index: 3;
        }

        /* Etkinlik Detay Ekranı */
        .ed-close {
            position: absolute;
            top: 14px;
            right: 14px;
            background: var(--surface);
            color: var(--text-primary);
            font-size: 14px;
        }

        .ed-image {
            height: 140px;
            border-radius: 14px;
            background-size: cover;
            background-position: center;
            cursor: zoom-in;
            transition: height 0.25s ease;
        }

        .ed-image.placeholder {
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }

        .ed-image.zoomed { height: 280px; cursor: zoom-out; }

        .ed-category { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; }
        .ed-short { font-weight: 700; color: var(--text-primary); margin: 10px 0 6px; font-size: 13.5px; }
        /* white-space:pre-line: organizatörün yazdığı boş satırlar/paragraf
           aralarını korur — aksi halde tek bir sıkışık metin bloğu haline
           geliyordu (veri değişmiyor, sadece gösterim). */
        /* color: Katılım Koşulları (.ed-requirements li) ile AYNI --text-secondary —
           uzun provider açıklamaları --muted'ta (12.5px normal metin) düşük
           kontrastlıydı; metin içeriği DEĞİŞMEZ, yalnızca okunabilirlik. */
        .ed-detail { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; white-space: pre-line; }

        .ed-requirements {
            list-style: none;
            margin-top: 4px;
        }

        .ed-requirements li {
            font-size: 12.5px;
            color: var(--text-secondary);
            padding: 4px 0 4px 16px;
            position: relative;
        }

        .ed-requirements li::before {
            content: '◆';
            position: absolute;
            left: 0;
            color: var(--text-primary);
            font-size: 9px;
            top: 8px;
        }

        /* Etkinlik detayında Detaylı Açıklama / Katılım Koşulları / Etkinlik
           Kuralları blokları tek bir metin bloğu gibi görünmesin diye aralarına
           hairline + ekstra boşluk — yalnızca bu bloklar birbirini ardışık takip
           ettiğinde devreye girer, üstteki Kısa Tanıtım ile ilişkisi (mevcut
           section-title spacing'i) değişmez. */
        .ed-detail-block + .ed-detail-block {
            margin-top: 20px;
            padding-top: 14px;
            border-top: 1px solid var(--line);
        }
        .ed-detail-block + .ed-detail-block > .settings-section-title {
            margin-top: 0;
        }

        /* justify-content ÖNCEDEN space-between idi: tek boş #ed-organizer-trust-badge
           span'i ile birlikte kalan boşluğu avatar/isim/buton arasına EŞİT dağıtıyor,
           bu da ismi avatardan koparıp satırın ortasına doğru itiyordu ("ortalanmış"
           görünümün gerçek nedeni buydu, text-align değil). flex-start ile öğeler
           sola bitişik kalır; "Takip Et" butonunun sağda kalmasını #ed-organizer-follow-btn
           üzerindeki margin-left:auto tek başına sağlar (bkz. aşağı). */
        .ed-organizer-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
        }

        /* Organizatör profil fotoğrafı — organizer.js > .m-avatar-sm ile aynı
           görsel desen (dairesel, cover, logoUrl yoksa building ikonu), bu satır
           13px isim metniyle hizalanacak kadar küçük tutulur. */
        .ed-organizer-avatar {
            width: 22px; height: 22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; color: var(--muted); background: var(--line); flex-shrink: 0;
        }

        /* Organizatör adı tam gösterilmeli (ellipsis YASAK) — uzun isimlerde
           kelime bazlı satır kırılır, satır sayısı gerektiği kadar büyür.
           flex:1 ile isim satırdaki boş alanı doldurur (avatar/rozet/buton
           flex-shrink:0 ile sabit kalır), min-width:0 flex item'ın içeriğe
           göre taşmasını değil satır kırmasını sağlar. Buton yine küçülmez
           — aksi halde "Takip Et" metni .btn-secondary'nin overflow:hidden'ından
           (bkz. satır ~1114) ötürü kırpılır. */
        .ed-organizer-row #ed-organizer-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: left;
            flex: 1 1 auto;
            min-width: 0;
            white-space: normal;
            overflow-wrap: break-word;
        }

        .ed-organizer-row .btn-secondary { flex-shrink: 0; margin-left: auto; }
        /* Etkinlik detayı: küçük harita önizlemesi — dokununca tam ekran mock haritayı açar */
        .ed-map-preview {
            position: relative;
            height: 110px;
            border-radius: 14px;
            margin-top: 4px;
            cursor: pointer;
            overflow: hidden;
            background:
                linear-gradient(var(--line) 1px, transparent 1px),
                linear-gradient(90deg, var(--line) 1px, transparent 1px),
                var(--surface);
            background-size: 24px 24px, 24px 24px, auto;
        }

        .ed-map-preview-pin {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--ink);
            border: 2px solid #fff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            box-shadow: 0 2px 6px rgba(20, 19, 17, 0.3);
        }

        /* Harita Görünümü — gerçek Leaflet/OpenStreetMap haritası (bkz. events.js > openMapView) */
        .map-view {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-fullscreen);
            background: #fff;
            flex-direction: column;
        }

        .map-view.show { display: flex; }

        .map-view-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            font-weight: 700;
            color: var(--text-primary);
            flex-shrink: 0;
        }

        .map-view-header .ed-close { position: static; }

        /* Leaflet'in L.map() ile ele geçirdiği ham konteyner — genişlik/yükseklik
           flex:1 ile akışkan (mobil/masaüstü aynı kutuda otomatik boyutlanır,
           bkz. events.js > renderSingleEventMap/renderCityMap > invalidateSize). */
        /* isolation: isolate -> Leaflet'in kendi iç katmanları (tile/marker/popup
           pane'leri, zoom/attribution kontrolleri) z-index 200-1200 arası değerler
           kullanır (bkz. leaflet.css). #map-canvas'ın kendisi z-index/transform
           TAŞIMADIĞI için (position:relative tek başına yeni bir stacking context
           açmaz) bu iç katmanlar stacking context'i .map-view ile PAYLAŞIYORDU —
           yani üstteki yüzen "Liste Görünümü" butonuyla (z-index:40) DOĞRUDAN
           karşılaştırılıyorlardı. Harita boşta dururken kayan tile'lar henüz
           `leaflet-tile-loaded` olmadığından invisible kalıp fark edilmiyordu,
           ama zoom/pan/marker güncellemesi YENİ tile'lar yükleyip boyadığı anda
           (tile-pane z-index:200 > buton z-index:40) buton görsel olarak
           ÖRTÜLÜYORDU — DOM'dan silinmiyordu, sadece haritanın altında kalıyordu.
           isolation:isolate #map-canvas'ı KENDİ stacking context'ine hapsederek
           bu iç z-index'lerin dışarı (kardeş elemanlara) sızmasını kesin olarak
           engeller; buton artık harita etkileşimlerinden tamamen bağımsız kalır. */
        .map-canvas {
            flex: 1;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background: var(--surface);
        }

        /* Yükleniyor / konum bulunamadı durumu — bu sırada #map-canvas'ın kendisi
           display:none olur (bkz. events.js > setMapStatus), asla boş/sahte bir
           harita görünmez; bu, aynı flex sırasında onun yerini alır. */
        .map-status {
            display: none;
            flex: 1;
            align-items: center;
            justify-content: center;
            background: var(--surface);
        }

        .map-status.show { display: flex; }

        /* Splend'in sade daire pin tasarımı — Leaflet L.divIcon içinde kullanılır
           (bkz. events.js > splendMapMarkerIcon), varsayılan kırmızı damla ikonun yerine. */
        .splend-map-marker {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--ink);
            border: 2px solid #fff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(20, 19, 17, 0.35);
        }

        .splend-map-marker--focus {
            background: var(--accent-1);
            animation: mapPinPulse 1.6s ease-in-out infinite;
        }

        .splend-map-marker--me {
            background: #2563eb;
        }

        @keyframes mapPinPulse {
            0%, 100% { box-shadow: 0 2px 6px rgba(20, 19, 17, 0.3), 0 0 0 0 rgba(28, 27, 25, 0.35); }
            50% { box-shadow: 0 2px 6px rgba(20, 19, 17, 0.3), 0 0 0 8px rgba(28, 27, 25, 0); }
        }

        /* Leaflet varsayılan popup kutusu Splend kart diline uyumlu hafif düzeltme */
        .leaflet-popup-content-wrapper {
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(20, 19, 17, 0.22);
        }

        .leaflet-popup-content {
            font-family: inherit;
            font-size: 12.5px;
            color: var(--text-primary);
        }

        .leaflet-control-attribution {
            font-size: 9.5px;
        }

        .map-zoom-controls {
            position: absolute;
            right: 14px;
            bottom: 90px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            z-index: 1200;
        }

        .map-zoom-controls button {
            background: #fff;
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(20, 19, 17, 0.2);
        }

        /* ============================================================
           MOBİL RESPONSIVE DÜZENLEMELER
           Bu dosyada daha önce hiç @media sorgusu yoktu — ekranlar yalnızca
           flex/%, vh, aspect-ratio gibi akışkan birimlerle "kendiliğinden"
           responsive kalıyordu. Bu TEK blok, mobil audit'te tespit edilen
           gerçek kırılma noktalarını giderir. 480px altı = telefon: .app-card
           (onboarding) ve .app-shell (ana uygulama) masaüstündeki "telefon
           çerçevesi" (yuvarlak köşe/gölge/ortalanmış küçük kart) görünümünü
           bırakıp tam ekran native bir uygulama gibi davranır. 480px ve üstü
           (tablet/masaüstü) hiçbir kuralda değişmez — mevcut tasarım aynen
           korunur. Kırılma noktası .app-shell'in kendi genişliği olan 430px'in
           hemen üstünden (480px) seçildi ki gerçek telefonların tamamı (320-
           430px) bu bloğa girsin, küçük tabletler girmesin.
           ============================================================ */
        @media (max-width: 480px) {

            /* --- Uygulama çerçevesi: yüzen kart yerine tam ekran --- */
            body {
                padding: 0;
                min-height: 100vh;
                min-height: 100dvh;
            }

            .app-card {
                width: 100%;
                min-height: 100vh;
                min-height: 100dvh;
                border-radius: 0;
                box-shadow: none;
                padding-top: max(35px, calc(env(safe-area-inset-top) + 20px));
                padding-bottom: max(35px, calc(env(safe-area-inset-bottom) + 20px));
                padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right));
                /* display:flex + children'ın doğal blok/tam-genişlik davranışı
                   (align-items:stretch varsayılanı) normal akışla görsel olarak
                   birebir aynıdır — yalnızca Adım 7'nin (#step-reg-transition,
                   aşağıda) flex:1 ile kalan boş alanı doldurabilmesi için var. */
                display: flex;
                flex-direction: column;
            }

            /* Adım 7: üstündeki nav-row/progress-label ve altındaki alt metin/buton
               ne kadar yer kaplarsa kaplasın, kalan grup (görsel+metin+buton)
               dikey olarak ortalanır — ekranda boşluk kalırsa üstte/altta eşit
               dağılır, tek taraflı boşluk oluşmaz. Görsel kutusunun kendisi
               ARTIK flex-grow ile esnetilmiyor (bkz. .onb-transition altındaki
               not) — boyutu her zaman aspect-ratio'dan gelir, masaüstüyle
               birebir aynı kırpma/kompozisyonu korur. Yalnızca #step-reg-transition'a
               özel; diğer adımlar .step.active (display:block) kuralını değişmeden korur. */
            #step-reg-transition.step.active {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1 1 auto;
                min-height: 0;
            }

            /* flex: 0 0 auto — kutu HER ZAMAN aspect-ratio'dan gelen doğal
               yüksekliğinde kalır; ne büyür ne küçülür.
               - grow:0 (önceden 1 idi): eskiden kalan boş dikey alanı doldurmak
                 için kutu esnetiliyordu, bu da görseli aspect-ratio'nun ötelesinde
                 boyuyor, object-fit:cover'ı fazla kırpıyor VE ::after gradyanının
                 yüzde tabanlı stop'larını (bkz. yukarıda) çok daha fazla piksele
                 yayarak yazının arkasındaki siyah alanın fotoğrafın gereksiz
                 büyük bir bölümünü kaplamasına yol açıyordu. Artık taşan boşluk
                 #step-reg-transition.step.active üzerindeki justify-content:center
                 ile grubun (görsel+metin+buton) etrafına eşit dağılıyor.
               - shrink:0 (korunuyor): kutu görselin doğal yüksekliğinin altına
                 inmez; dar/kısa ekranlarda içerideki görsel taşıp overflow:hidden
                 tarafından kırpılmasın diye. */
            #step-reg-transition .onb-transition {
                flex: 0 0 auto;
            }

            #step-reg-transition p.subtitle,
            #step-reg-transition .btn-main {
                flex-shrink: 0;
            }

            .app-shell {
                width: 100%;
                height: 100vh;
                height: 100dvh;
                max-height: none;
                border-radius: 0;
                box-shadow: none;
            }

            .demo-badge {
                top: max(14px, env(safe-area-inset-top));
                left: max(14px, env(safe-area-inset-left));
            }

            /* --- Safe-area: notch / home-indicator ile çakışabilecek
               sabit/tam-ekran bileşenler --- */
            .app-header {
                padding-top: max(16px, calc(env(safe-area-inset-top) + 12px));
            }

            .bottom-nav {
                padding-bottom: env(safe-area-inset-bottom);
            }

            .map-view-header {
                padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
            }

            .map-view .map-float-btn {
                bottom: calc(18px + env(safe-area-inset-bottom));
            }

            .map-zoom-controls {
                bottom: calc(90px + env(safe-area-inset-bottom));
            }

            .pe-header {
                padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
            }

            .hc-titlebar {
                padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
            }

            .hc-body {
                padding-bottom: calc(40px + env(safe-area-inset-bottom));
            }

            .hc-footer {
                padding-bottom: calc(12px + env(safe-area-inset-bottom));
            }

            .pcrop-body {
                padding-bottom: calc(24px + env(safe-area-inset-bottom));
            }

            .pe-body {
                padding-bottom: calc(40px + env(safe-area-inset-bottom));
            }

            .toast {
                bottom: calc(24px + env(safe-area-inset-bottom));
            }

            /* --- Sohbet ekranı: tam ekran olduğundan notch/home-indicator ile
               doğrudan çakışabilir --- */
            .chat-header {
                padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
            }

            .chat-input-row {
                padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
            }

            .chat-blocked-notice {
                padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px));
            }

            /* --- iOS Safari: input font-size 16px altındaysa odaklanınca
               sayfayı otomatik yakınlaştırır. Görsel tasarım aynı kalsın diye
               SADECE burada 16px'e çıkarılır, masaüstünde 13-14px korunur. --- */
            input, select, textarea,
            .messages-search-input,
            .compose-card textarea {
                font-size: 16px;
            }

            /* --- "Geri" butonu diğer ikon butonlara (34-38px) göre belirgin
               küçük kalıyordu (28px) — dokunma alanı büyütüldü. --- */
            .back-btn {
                width: 36px;
                height: 36px;
            }

            /* --- Uzun kullanıcı adı/başlık taşması --- */
            .participant-card-name,
            .participant-card-username {
                overflow-wrap: break-word;
            }

            /* --- Katılımcı kartı: sabit 108px'lik aksiyon sütunu, avatar +
               isim/uyum/güven rozetleri için kalan alanı ~70px'e düşürüyordu —
               tek bir güven rozeti (ör. "Doğrulanmış") bile bu dar sütuna
               sığmayıp sağdaki "Arkadaş Ekle" butonunun üzerine taşıyordu.
               Kökten çözüm: aksiyon butonları dar bir sütun yerine avatar+bilgi
               satırının ALTINA, tam genişlikte ikinci bir satıra iner — bilgi
               sütunu böylece kartın neredeyse tamamı kadar yer kazanır. --- */
            .participant-card {
                flex-wrap: wrap;
            }

            .participant-card-actions {
                flex-direction: row;
                flex-basis: 100%;
                width: 100%;
                margin-top: 4px;
            }

            .participant-card-actions button {
                width: auto;
                flex: 1;
            }

            /* --- Etkinlik Yönetimi aksiyon ızgarası: sabit 2 sütun, uzun
               Türkçe etiketleri (ör. "Tamamlandı Olarak İşaretle",
               "Katılımcıları Yönet") dar telefonlarda kompakt kuralın
               (yukarıda .oed-actions-grid .btn-secondary/.btn-main)
               white-space:nowrap + ellipsis'i yüzünden kesiyordu. Tek sütuna
               alınıp metin normal şekilde sarmasına izin verilir — buton
               birbirini sıkıştırmaz, metin kesilmez. --- */
            .oed-actions-grid {
                grid-template-columns: 1fr;
            }

            .oed-actions-grid .btn-secondary,
            .oed-actions-grid .btn-main {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }

            /* Adım 8 görsel/alıntı: görsel kutusu artık masaüstüyle aynı
               aspect-ratio'yu koruduğundan (bkz. #step-reg-transition
               .onb-transition yukarıda) metin boyutunu küçültmeye gerek yok —
               masaüstündeki 15px/13px değerleri burada da aynen kullanılır. */
        }

        /* ============================================================
           MASAÜSTÜ "TELEFON ÇERÇEVESİ" MODU (> 480px) — kök neden düzeltmesi.
           Bu genişlikte .app-shell/.app-card, body'nin ortasında sabit 430px'lik
           bir "telefon kutusu" olarak render edilir. AŞAĞIDAKİ katmanların TÜMÜ
           ise (.chat-modal, .profile-editor-screen, .hc-screen, .map-view,
           .filter-panel, .bottom-sheet, .compose-modal, .settings-modal,
           .premium-modal, .photo-viewer-modal, .farewell-screen,
           .discover-screen) position:fixed; inset:0
           kullanıyor — bu varsayılan olarak GERÇEK browser viewport'una göre
           konumlanır, .app-shell kutusuna göre DEĞİL. Sonuç: ana ekranlar
           430px'lik kutunun içinde kalırken, bu katmanlardan biri açıldığında
           (ör. bir kullanıcının profiline girmek, sohbet, harita, filtre,
           bottom sheet) ekran birden gerçek pencere genişliğine sıçrıyor,
           "masaüstü web sitesi" gibi görünüyordu. Çözüm: bu katmanlara
           transform (translate) verilip KENDİLERİ, konum bakımından bağımlı
           position:fixed alt elemanları için de bir "containing block" haline
           getirilir (ör. .map-float-btn artık gerçek viewport yerine
           .map-view'in kendisine sabitlenir — CSS'te transform'lu bir atanın
           fixed alt elemanlar için yeni containing block oluşturması kuralına
           dayanır) VE kutuları .app-shell ile birebir aynı 430×780 (max 92vh)
           ölçüsüne, ekranın ortasına sabitlenir. 480px ve altında (gerçek
           telefon) HİÇ etkilenmez — orada .app-shell zaten viewport'un ta
           kendisi olduğundan bu katmanlarla zaten örtüşüyordu. .admin-app
           KASITLI OLARAK bu listenin DIŞINDA tutulur (yukarıdaki ADMIN PANELİ
           notuna bkz. — telefon çerçevesinden bağımsız, ayrı bir masaüstü
           paneli olarak tasarlandı; bu davranış korunur). */
        @media (min-width: 481px) {
            .chat-modal,
            .profile-editor-screen,
            .hc-screen,
            .map-view,
            .filter-panel,
            .bottom-sheet,
            .compose-modal,
            .settings-modal,
            .premium-modal,
            .photo-viewer-modal,
            .farewell-screen,
            .step.discover-screen.active {
                top: 50%;
                left: 50%;
                right: auto;
                bottom: auto;
                width: 430px;
                height: 780px;
                max-height: 92vh;
                transform: translate(-50%, -50%);
            }
        }

        @media (max-width: 360px) {
            /* --- Katılımcı kartı: 320-360px'te avatar + sabit genişlikli aksiyon
               butonları isim/kullanıcı adına çok az yer bırakıyordu. --- */
            .participant-card {
                gap: 8px;
                padding: 12px;
            }

            .participant-card-avatar {
                width: 46px;
                height: 46px;
                font-size: 20px;
            }

            .participant-card-actions button {
                font-size: 10.5px;
                padding: 7px 4px;
            }
        }

        /* ================================================================
           ADMIN PANELİ (bkz. admin.js) — mevcut Splend token'ları (--ink,
           --surface, --line, --card-bg, --font-family-*) yeniden kullanılır,
           yeni bir renk paleti icat edilmedi. Telefon çerçevesi (.app-shell)
           genişliğine bağlı DEĞİL — tüm viewport'u kaplayan ayrı bir katman
           (--z-admin: .compose-modal/.bottom-sheet'in (--z-dialog/--z-sheet)
           ALTINDA tutulur ki admin aksiyonlarından açılan onay/sheet'ler
           (showGenericConfirm, admin-reason-sheet, admin-reply-sheet) her
           zaman üstte görünsün — bkz. :root, MERKEZİ Z-INDEX SİSTEMİ).
           ================================================================ */
        .admin-app {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-admin);
            background: var(--paper);
            flex-direction: column;
            /* .admin-topbar/.admin-body'nin dolaylı çocukları .admin-content/
               .admin-sidebar zaten kendi overflow-y:auto'ları sayesinde
               overflow-x'i de 'auto'ya çeker (CSS overflow hesaplama kuralı)
               ve taşmayı içeride tutar — ama .admin-topbar bu katmanların
               DIŞINDA, doğrudan .admin-app'in çocuğu. Uzun rol etiketi gibi
               tek bir satır-içi öğe topbar'ı taşırırsa bu, position:fixed
               olsa dahi document.documentElement.scrollWidth'i büyütüp GERÇEK
               telefonlarda tüm sayfanın "masaüstü gibi küçültülmüş" görünmesine
               yol açar (viewport otomatik yeniden ölçeklenir). Bu güvenlik
               ağı, kök neden düzeltmelerinin (bkz. admin-topbar-right/
               admin-role-label) üstüne ikinci bir kilit olarak eklendi. */
            overflow-x: hidden;
        }
        .admin-app.show { display: flex; }

        .admin-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 24px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }
        .admin-topbar-brand {
            font-family: var(--font-family-display);
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .admin-topbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
        .admin-topbar-right .btn-secondary { flex-shrink: 0; }
        /* min-width:0 olmadan flex item'lar varsayılan min-width:auto (içerik
           genişliği) alır — uzun kullanıcı adı + rol etiketi (ör. "Muhteşem
           Demirçelik — Süper Yönetici") dar telefonlarda satırı taşırır.
           Burada kısaltılıp "..." ile gösterilir, buton her zaman tam görünür kalır. */
        .admin-role-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-body { flex: 1; display: flex; min-height: 0; }

        .admin-sidebar {
            width: 260px;
            flex-shrink: 0;
            background: var(--card-bg);
            border-right: 1px solid var(--line);
            overflow-y: auto;
            padding: 14px 10px;
        }
        .admin-nav-group-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--muted);
            padding: 14px 10px 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .admin-nav-group { display: flex; flex-direction: column; gap: 2px; }
        /* Bekleyen işlem sayacı (görev md. 12-16) — menü öğesi + grup başlığı. */
        .admin-nav-badge {
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            padding: 3px 6px;
            border-radius: 999px;
            background: var(--splend-burgundy, #7a1f3d);
            color: #fff;
            flex-shrink: 0;
            min-width: 16px;
            text-align: center;
        }
        .admin-nav-item.active .admin-nav-badge { background: rgba(255,255,255,.25); color: var(--cream); }
        .admin-nav-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            text-align: left;
            padding: 9px 10px;
            border-radius: 10px;
            border: none;
            background: transparent;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
        }
        .admin-nav-item:hover:not(.disabled) { background: var(--surface); }
        .admin-nav-item.active { background: var(--ink); color: var(--cream); }
        .admin-nav-item.disabled { opacity: .45; cursor: not-allowed; }
        .admin-soon-badge {
            font-size: 9px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 999px;
            background: var(--surface);
            color: var(--muted);
            flex-shrink: 0;
        }
        .admin-nav-item.active .admin-soon-badge { background: rgba(255,255,255,.2); color: var(--cream); }

        .admin-content { flex: 1; overflow-y: auto; padding: 26px 30px; min-width: 0; }

        .admin-section-title {
            font-family: var(--font-family-display);
            font-size: var(--font-size-h2);
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .admin-count-badge {
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            background: var(--surface);
            padding: 2px 9px;
            border-radius: 999px;
        }

        .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px; }
        .admin-stat-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding: 16px;
            border-radius: 16px;
            background: var(--card-bg);
            border: 1px solid var(--line);
            /* <button> öğeleri color/font'u varsayılan olarak miras almaz —
               açıkça belirtilmezse kart yüzeyinde okunmaz kalır. */
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
        }
        .admin-stat-card:hover { border-color: var(--ink); }
        .admin-stat-icon { font-size: 20px; }
        .admin-stat-value { font-size: 24px; font-weight: 800; font-family: var(--font-family-display); }
        .admin-stat-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }

        .admin-activity-list { display: flex; flex-direction: column; gap: 2px; }
        .admin-activity-item { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
        .admin-activity-icon { font-size: 16px; }
        .admin-activity-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

        .admin-toolbar { margin-bottom: 14px; }
        .admin-search-input {
            width: 100%;
            max-width: 360px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--line);
            background: var(--card-bg);
            font-size: 13px;
            color: var(--text-primary);
        }
        /* Sayfa-bazlı arama + sıralama kontrol barı (görev md. 8/9/19). */
        .admin-list-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .admin-list-controls .admin-search-input { flex: 1 1 220px; }
        .admin-list-sort {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .admin-list-sort label {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            white-space: nowrap;
        }
        .admin-sort-select {
            padding: 9px 12px;
            border-radius: 12px;
            border: 1px solid var(--line);
            background: var(--card-bg);
            font-size: 12.5px;
            color: var(--text-primary);
            cursor: pointer;
        }
        @media (max-width: 640px) {
            .admin-list-controls { flex-direction: column; align-items: stretch; }
            .admin-list-controls .admin-search-input { max-width: none; }
            .admin-list-sort { justify-content: space-between; }
            .admin-sort-select { flex: 1; }
        }

        .admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); }
        .admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
        .admin-table th {
            text-align: left;
            padding: 10px 14px;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--muted);
            border-bottom: 1px solid var(--line);
            white-space: nowrap;
        }
        .admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .admin-self-tag { font-size: 10px; font-weight: 700; color: var(--muted); }

        .admin-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 14px; }
        .admin-complaint-card, .admin-ticket-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 12.5px;
        }
        .admin-complaint-top { display: flex; align-items: center; justify-content: space-between; }
        .admin-complaint-date { font-size: 11px; color: var(--muted); }
        .admin-complaint-content { background: var(--surface); border-radius: 10px; padding: 8px 10px; font-style: italic; }
        .admin-complaint-resolution { font-size: 11.5px; font-weight: 700; color: #0f766e; }

        /* Tablet/mobil: sidebar üste, tam genişlik, sabit yükseklikte kaydırılabilir
           liste olur; tablolar (bkz. .admin-table-wrap) zaten overflow-x:auto olduğundan
           sayfayı taşırmaz, yatayda kaydırılır (görev md. 18). */
        @media (max-width: 900px) {
            .admin-body { flex-direction: column; }
            .admin-sidebar { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--line); }
            .admin-content { padding: 18px; }
            .admin-topbar { padding: 12px 16px; }
        }
        @media (max-width: 520px) {
            .admin-stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
            /* .admin-card-grid'in sabit minmax(320px,1fr) alt sınırı 375-414px
               telefonlarda (padding düşüldükten sonra ~340-380px kullanılabilir
               alan) kartı hâlâ container'dan geniş tutup iç yatay kaydırmaya
               zorluyordu — auto-fill "tek sütuna iner" ama o tek sütun yine de
               320px'in altına küçülemiyordu. Burada tek sütuna sabitlenip kart
               container genişliğine tam oturur. */
            .admin-card-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .admin-topbar { padding: 10px 14px; }
            .admin-content { padding: 14px; }
            .admin-topbar-brand { font-size: 16px; }
        }