/* ================================================================
   SNL // COMPONENTS.CSS — Bileşenler
   ================================================================
   Satır     : ~200
   Değişiklik:
     - map-filter-btn tekrar kaldırıldı (index.html'deki style ile)
     - settings-card tekrar kaldırıldı (index.html'deki style ile)
     - Tüm stiller var() kullanıyor
     - Ürün kartı hover efekti eklendi
     - Harita filtreleri tutarlı
================================================================ */

/* ================================================================
   ÜRÜN KARTI
================================================================ */

.product-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       12px;
    margin-bottom: 8px;
    display:       flex;
    gap:           10px;
    align-items:   center;
    transition:    border-color 0.2s, transform 0.2s;
}

.product-card:hover {
    border-color: var(--accent);
    transform:    translateY(-1px);
}

.product-card img {
    width:         50px;
    height:        50px;
    object-fit:    cover;
    border-radius: 8px;
    flex-shrink:   0;
}

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

.product-price {
    color:       var(--neon);
    font-weight: 700;
    font-size:   14px;
}

/* ================================================================
   AYARLAR KARTLARI
================================================================ */

.settings-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       16px;
    margin-bottom: 10px;
}

.settings-card-title {
    font-family:    var(--font-title);
    font-size:      11px;
    font-weight:    700;
    color:          var(--neon);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.theme-btn {
    flex:          1;
    padding:       8px;
    border-radius: 8px;
    border:        1px solid var(--border);
    background:    var(--surface2);
    color:         var(--muted);
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     13px;
    cursor:        pointer;
    transition:    all 0.2s;
    width:         auto;
}

.theme-btn.active {
    background:    var(--gradient);
    color:         #fff;
    border-color:  transparent;
}

.theme-btn:hover:not(.active) {
    border-color: var(--accent);
    color:        var(--neon);
    box-shadow:   none;
    transform:    none;
}

/* ================================================================
   HARİTA
================================================================ */

#map {
    height:        35vh;
    width:         100%;
    border-radius: 12px;
    border:        1px solid var(--border);
    margin-bottom: 10px;
}

.map-filter-btn {
    background:    var(--surface2);
    color:         var(--muted);
    border:        1px solid var(--border);
    padding:       6px 14px;
    border-radius: 20px;
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     12px;
    cursor:        pointer;
    transition:    all 0.15s;
    width:         auto;
}

.map-filter-btn.active {
    background:   var(--gradient);
    color:        #fff;
    border-color: transparent;
}

.map-filter-btn:hover:not(.active) {
    border-color: var(--accent);
    color:        var(--neon);
    box-shadow:   none;
    transform:    none;
}

/* ================================================================
   DISPLAY AREA (eski chat)
================================================================ */

.display-area {
    height:        160px;
    overflow-y:    auto;
    background:    var(--bg);
    border-radius: 8px;
    padding:       10px;
    border:        1px solid var(--border);
}

.message {
    background:    rgba(168,85,247,0.05);
    border-left:   3px solid var(--accent);
    padding:       6px 12px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
    font-size:     14px;
    word-break:    break-all;
    color:         var(--text);
}

.whisper    { border-left-color: var(--pink) !important; color: var(--pink) !important; font-style: italic; }
.system-msg { border-left-color: var(--muted) !important; color: var(--muted) !important; font-size: 12px; }

/* ================================================================
   İŞ İLANI KARTLARI
================================================================ */

.job-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       16px;
    margin-bottom: 10px;
    transition:    border-color 0.2s;
}

.job-card:hover { border-color: var(--accent); }

/* ================================================================
   FEED KART
================================================================ */

.feed-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow:      hidden;
}

/* ================================================================
   DATE DIVIDER (DM Mesajları)
================================================================ */

.chat-date-divider {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          8px 0;
}

.chat-date-divider span {
    background:    var(--surface2);
    color:         var(--muted);
    font-size:     11px;
    padding:       3px 12px;
    border-radius: 20px;
    border:        1px solid var(--border);
}

.new-messages-divider {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          8px 0;
}

.new-messages-divider span {
    background:    rgba(99,102,241,0.15);
    color:         var(--neon);
    font-size:     11px;
    font-weight:   700;
    padding:       3px 12px;
    border-radius: 20px;
    border:        1px solid var(--accent);
}

/* ================================================================
   KARANLIK TEMA OVERRIDE (index.html'deki eski dark-theme)
================================================================ */

body.dark-theme .settings-card,
body.dark-theme .profile-info-wrap,
body.dark-theme .profile-tabs,
body.dark-theme .chat-page-wrap,
body.dark-theme .panel,
body.dark-theme .modal,
body.dark-theme .inbox-container,
body.dark-theme .conversations-panel,
body.dark-theme .chat-panel,
body.dark-theme .chat-header,
body.dark-theme .chat-input-area,
body.dark-theme .conversation-item {
    background:   var(--surface) !important;
    border-color: var(--border) !important;
    color:        var(--text) !important;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background:   var(--bg) !important;
    border-color: var(--border) !important;
    color:        var(--text) !important;
}

/* ================================================================
   SEÇİCİ SHEET (Şehir / İlçe / Kategori / Ürün / Marka / Model)
   Native'deki components/select-sheet.tsx karşılığı.
   ⚠️ Buradaki HİÇBİR renk sabit değil — hepsi değişkenden gelir,
   yoksa koyu/açık temadan biri kırılır. Eski satırlar inline
   color:#1e293b ile basılıyordu ve koyu temada okunmuyordu.
================================================================ */

.snl-picker {
    --pk-row:        var(--surface);
    --pk-row-hover:  var(--surface2);
    --pk-sel:        color-mix(in srgb, var(--accent) 22%, var(--bg3));
    --pk-sel-border: color-mix(in srgb, var(--accent) 55%, transparent);
    --pk-tile:       color-mix(in srgb, var(--accent) 18%, var(--bg3));
    --pk-count:      color-mix(in srgb, var(--text) 8%, transparent);
    --pk-radio:      color-mix(in srgb, var(--text) 25%, transparent);
}
body.light-theme .snl-picker {
    --pk-row:        #ffffff;
    --pk-row-hover:  #f8fafc;
    --pk-sel:        #f5f3ff;
    --pk-sel-border: #a5b4fc;
    --pk-tile:       #ede9fe;
    --pk-count:      #f1f5f9;
    --pk-radio:      #cbd5e1;
}

/* ── Başlık ─────────────────────────────────────────────────── */
.snl-picker__head {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 14px;
}
.snl-picker__tile {
    width:           46px;
    height:          46px;
    flex:            0 0 46px;
    border-radius:   16px;
    background:      var(--pk-tile);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
}
.snl-picker__titles { flex: 1; min-width: 0; }
.snl-picker__title {
    font-family:    var(--font-title);
    color:          var(--text);
    font-size:      17px;
    font-weight:    800;
    letter-spacing: -0.3px;
}
.snl-picker__sub {
    color:     var(--muted);
    font-size: 13px;
    margin-top: 3px;
}
.snl-picker__clear {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       9px 13px;
    border:        none;
    border-radius: 12px;
    background:    var(--pk-tile);
    color:         var(--accent2);
    font-family:   var(--font-main);
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    transition:    filter .15s;
}
.snl-picker__clear:hover { filter: brightness(1.15); }

/* ── Arama ──────────────────────────────────────────────────── */
.snl-picker__search {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       0 14px;
    height:        48px;
    border-radius: 16px;
    background:    var(--bg);
    border:        1px solid var(--border);
    margin-bottom: 12px;
}
.snl-picker__search input {
    flex:        1;
    background:  transparent !important;
    border:      none !important;
    outline:     none;
    color:       var(--text) !important;
    font-family: var(--font-main);
    font-size:   15px;
    margin:      0 !important;
    padding:     0 !important;
}

/* ── Satırlar ───────────────────────────────────────────────── */
.snl-picker__list {
    display:        flex;
    flex-direction: column;
    gap:            9px;
    max-height:     52vh;
    overflow-y:     auto;
    margin-bottom:  12px;
}
.snl-picker__row {
    display:       flex;
    align-items:   center;
    gap:           13px;
    padding:       12px 13px;
    border-radius: 16px;
    background:    var(--pk-row);
    border:        1px solid var(--border);
    cursor:        pointer;
    transition:    background .15s, border-color .15s;
}
.snl-picker__row:hover { background: var(--pk-row-hover); }
.snl-picker__row.is-active {
    background:   var(--pk-sel);
    border-color: var(--pk-sel-border);
}
.snl-picker__emoji {
    width:           42px;
    height:          42px;
    flex:            0 0 42px;
    border-radius:   12px;
    background:      var(--pk-tile);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       21px;
}
.snl-picker__text { flex: 1; min-width: 0; }
.snl-picker__label {
    color:         var(--text);
    font-size:     16px;
    font-weight:   700;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.snl-picker__sublabel {
    color:      var(--muted);
    font-size:  12.5px;
    margin-top: 2px;
}
.snl-picker__count {
    padding:       5px 10px;
    border-radius: 8px;
    background:    var(--pk-count);
    color:         var(--muted);
    font-size:     12px;
    font-weight:   600;
    white-space:   nowrap;
}
.snl-picker__radio {
    width:         22px;
    height:        22px;
    flex:          0 0 22px;
    border-radius: 50%;
    border:        2px solid var(--pk-radio);
}
.snl-picker__row.is-active .snl-picker__radio {
    border:          none;
    background:      var(--accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.snl-picker__row.is-active .snl-picker__radio::after {
    content:     '';
    width:       6px;
    height:      10px;
    margin-top:  -2px;
    border:      solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform:   rotate(45deg);
}

/* ── Alt buton ──────────────────────────────────────────────── */
.snl-picker__cta {
    width:         100%;
    height:        52px;
    border:        none;
    border-radius: 16px;
    background:    var(--gradient);
    color:         #fff;
    font-family:   var(--font-main);
    font-size:     16px;
    font-weight:   800;
    cursor:        pointer;
    transition:    filter .15s;
}
.snl-picker__cta:hover { filter: brightness(1.08); }

/* ── Akordeon (meslek seçici: ana dal → uzmanlık) ───────────── */
.snl-picker__chev {
    color:       var(--accent2);
    font-size:   15px;
    width:       22px;
    text-align:  center;
    flex:        0 0 22px;
}
.snl-picker__subrow {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-left:   14px;
    padding:       11px 14px;
    border-radius: 12px;
    background:    var(--pk-row-hover);
    border:        1px solid var(--border);
    cursor:        pointer;
    transition:    background .15s, border-color .15s;
}
.snl-picker__subrow:hover { background: var(--pk-tile); }
.snl-picker__subrow.is-active {
    background:   var(--pk-sel);
    border-color: var(--pk-sel-border);
}
.snl-picker__sublabel-main {
    flex:        1;
    min-width:   0;
    color:       var(--text);
    font-size:   14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.snl-picker__subrow.is-active .snl-picker__radio {
    border:          none;
    background:      var(--accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.snl-picker__subrow.is-active .snl-picker__radio::after {
    content:      '';
    width:        6px;
    height:       10px;
    margin-top:   -2px;
    border:       solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform:    rotate(45deg);
}

/* ── Çizilmiş ikonlar (emoji değil) ─────────────────────────── */
.snl-picker__tile svg,
.snl-picker__searchico svg,
.snl-picker__clear svg { display: block; }

.snl-picker__tile {
    /* Düz renk yerine ince gradient + iç kenar: kare "basılı" görünsün */
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 30%, transparent),
            color-mix(in srgb, var(--accent) 10%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
    color:      var(--accent2);
}
.snl-picker__searchico { color: var(--muted); display: flex; }

/* Satır başındaki SVG kutusu — emoji kutusuyla aynı ölçü, farklı dolgu */
.snl-picker__emoji.is-ico {
    color:      var(--accent2);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.snl-picker__row.is-active .snl-picker__emoji.is-ico {
    color:      #fff;
    background: var(--accent);
    box-shadow: none;
}

/* Akordeon oku: açıkken 180° döner */
.snl-picker__chev {
    display:    flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease;
}
.snl-picker__chev.is-open { transform: rotate(180deg); }

/* ── Etkileşim cilası ───────────────────────────────────────── */
.snl-picker__row,
.snl-picker__subrow { will-change: transform; }
.snl-picker__row:hover  { transform: translateY(-1px); }
.snl-picker__row:active { transform: translateY(0); }

.snl-picker__row:focus-visible,
.snl-picker__subrow:focus-visible,
.snl-picker__cta:focus-visible,
.snl-picker__clear:focus-visible {
    outline:        2px solid var(--accent2);
    outline-offset: 2px;
}

/* Liste kaydırma çubuğu — varsayılan kalın gri yerine ince, temaya uyumlu */
.snl-picker__list { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.snl-picker__list::-webkit-scrollbar { width: 8px; }
.snl-picker__list::-webkit-scrollbar-thumb {
    background:    var(--border);
    border-radius: 8px;
}
.snl-picker__list::-webkit-scrollbar-track { background: transparent; }

/* Hareket azaltma tercihi olan kullanıcılar için */
@media (prefers-reduced-motion: reduce) {
    .snl-picker__row,
    .snl-picker__subrow,
    .snl-picker__chev,
    .snl-picker__cta { transition: none; }
    .snl-picker__row:hover { transform: none; }
}

/* ================================================================
   ORTAK ARAYÜZ PARÇALARI
   Native karşılığı: snl-native/src/components/ui/primitives.tsx
   Ölçüler oradaki Type / Radius / Space skalasıyla eşleşir.
================================================================ */

/* ── Tipografi skalası ──────────────────────────────────────── */
.snl-display { font-family: var(--font-title); font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.snl-title   { font-family: var(--font-title); font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.snl-heading { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.snl-body    { font-size: 16px; font-weight: 700; color: var(--text); }
.snl-text    { font-size: 15px; line-height: 21px; color: var(--text); }
.snl-small   { font-size: 13px; font-weight: 500; color: var(--muted); }
.snl-micro   { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ── Kart ───────────────────────────────────────────────────── */
.snl-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       16px;
}
body.light-theme .snl-card { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }

/* ── Bölüm başlığı ──────────────────────────────────────────── */
.snl-section {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 12px;
}
.snl-section > svg   { color: var(--accent2); flex: 0 0 auto; }
.snl-section > .t    { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }

/* ── Çip ────────────────────────────────────────────────────── */
.snl-chip {
    /* [GORSEL TUR 18] width:auto ŞART: çip <button> olarak da kullanılıyor
       (Detaylı Arama Hepsi/Satılık/Arıyorum) ve base.css button{width:100%}
       kuralı onları tam genişlik dikey yığına çeviriyordu (ölçüldü). */
    width:         auto;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 13px;
    border-radius: 12px;
    background:    var(--surface);
    border:        1px solid var(--border);
    color:         var(--muted);
    font-size:     13px;
    font-weight:   500;
    cursor:        default;
}
.snl-chip.is-clickable { cursor: pointer; }
.snl-chip.is-active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
    font-weight:  700;
}

/* ── [VİDEO+TWEET] Ana sayfa şerit düğmeleri: Harita | Video | Tweet ──
   Üçü aynı şeritte; stil TEK yerde tutuluyor. Inline kopyalansaydı koyu temada
   biri açık kalırdı — renkler token'dan geliyor. */
.snl-homebar {
    display:       flex;
    gap:           10px;
    margin-bottom: 14px;
    position:      sticky;
    top:           68px;
    z-index:       20;
    background:    var(--bg);
    padding:       10px 0;
}
.snl-homebar-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         13px;
    border-radius:   16px;
    background:      var(--surface);
    border:          1px solid var(--border);
    color:           var(--accent);
    font-family:     'Rajdhani';
    font-weight:     700;
    font-size:       15px;
    cursor:          pointer;
    box-shadow:      0 2px 8px rgba(99, 102, 241, 0.08);
}
.snl-homebar-btn.is-active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}
/* Tıklama sonrası tarayıcının siyah focus kutusu kalmasın; klavye
   kullanıcısına tasarlanmış halka. (Alt nav'daki fix'in eşi.) */
.snl-homebar-btn:focus         { outline: none; }
.snl-homebar-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ── [GÖNDERİ ARAMA] Şeridin altındaki iki motor: # etiket · @ kişi ──
   Renkler token'dan: koyu temada da doğru. "#" ve "@" birer ikon değil,
   ARANAN karakterin kendisi — kutunun hangi motoru sürdüğünü tek bakışta
   söylüyor, bu yüzden material-symbols kullanılmadı. */
.snl-ga            { margin-bottom: 14px; }
.snl-ga-satir      { display: flex; gap: 10px; }
.snl-ga-kutu {
    flex:          1;
    min-width:     0;
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       0 12px;
    height:        42px;
    border-radius: 16px;
    background:    var(--surface);
    border:        1px solid var(--border);
}
.snl-ga-kutu:focus-within { border-color: var(--accent); }
.snl-ga-isaret {
    color:       var(--accent);
    font-family: 'Rajdhani';
    font-size:   18px;
    font-weight: 800;
    line-height: 1;
}
.snl-ga-kutu input {
    flex:        1;
    min-width:   0;
    border:      none;
    outline:     none;
    background:  transparent;
    color:       var(--text);
    font-family: 'Rajdhani';
    font-size:   15px;
    font-weight: 600;
}
.snl-ga-x {
    width:       auto;
    padding:     0 2px;
    border:      none;
    background:  transparent;
    color:       var(--muted);
    font-size:   18px;
    line-height: 1;
    cursor:      pointer;
}

/* Öneri şeridi — yatay kaydırılır, satır sarmaz: kutunun altında iki satıra
   taşıp aşağıdaki akışı zıplatmasın. */
.snl-ga-oneri {
    display:        flex;
    gap:            8px;
    align-items:    center;
    margin-top:     8px;
    padding-bottom: 2px;
    overflow-x:     auto;
    scrollbar-width: none;
}
.snl-ga-oneri::-webkit-scrollbar { display: none; }
.snl-ga-cip {
    /* base.css > button { width:100% } sıfırlanmalı — ölçüldü: sıfırlanmadan
       her öneri çipi şeridin TAM genişliğine yayılıp sayfayı yatay taşırıyor. */
    width:         auto;
    flex-shrink:   0;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 12px;
    border-radius: 20px;
    background:    var(--surface);
    border:        1px solid var(--border);
    color:         var(--text);
    font-family:   'Rajdhani';
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    white-space:   nowrap;
}
.snl-ga-cip img   { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.snl-ga-cip-adet  { color: var(--muted); font-size: 12px; }
.snl-ga-bos       { color: var(--muted); font-size: 13px; padding: 6px 2px; white-space: nowrap; }

/* Uygulanan süzgeç. Kutudaki yazı "arayacağım", buradaki çip "arıyorum"
   demek — ikisi ayrı, çünkü arama sürerken kutuya başka şey yazılabiliyor. */
.snl-ga-cipler {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-top:  10px;
}
.snl-ga-cipler .snl-ga-etiket { color: var(--muted); font-size: 13px; }
.snl-ga-aktif {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 11px;
    border-radius: 20px;
    background:    var(--accent);
    border:        none;
    color:         #fff;
    font-family:   'Rajdhani';
    font-size:     13px;
    font-weight:   800;
    cursor:        pointer;
    width:         auto;
}
.snl-ga-sil {
    margin-left: auto;
    border:      none;
    background:  transparent;
    color:       var(--accent);
    font-family: 'Rajdhani';
    font-size:   13px;
    font-weight: 800;
    cursor:      pointer;
    width:       auto;
    padding:     0;
}

/* Gönderi metnindeki dokunulabilir #etiket / @kişi */
.snl-ga-link {
    color:           var(--accent);
    font-weight:     700;
    cursor:          pointer;
    text-decoration: none;
}
.snl-ga-link:hover { text-decoration: underline; }

/* ── [REKLAM #177] Self-servis "Reklam Ver" ekranı ──
   ⚠️ base.css'te `button { width:100% }` GLOBAL: çip/ikon düğmelerine
   `width:auto` verilmezse kabın tamamına yayılıp satırı taşırıyor
   (bkz. .snl-ga-cip'te ölçülen 351px hatası). Aşağıda gerekli her yerde var. */
.ads-self-ust {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 16px;
    background:    var(--bg2);
    border-bottom: 1px solid var(--border);
    position:      sticky;
    top:           0;
    z-index:       10;
    flex-shrink:   0;
}
.ads-self-ust button {
    width:      auto;
    background: none;
    border:     none;
    color:      var(--accent);
    font-size:  20px;
    cursor:     pointer;
    padding:    0;
}
.ads-self-ust-baslik {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-family:    'Orbitron';
    font-size:      13px;
    letter-spacing: 1px;
    color:          var(--accent);
}
.ads-self-govde { padding: 12px; }

.ads-self-tarife {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       12px 14px;
    margin-bottom: 12px;
}
.ads-self-tarife-baslik {
    font-weight:    800;
    font-size:      13px;
    color:          var(--text);
    margin-bottom:  8px;
}
.ads-self-tarife-satir {
    display:               grid;
    grid-template-columns: auto auto 1fr;
    gap:                   8px;
    align-items:           baseline;
    padding:               4px 0;
}
.ads-self-tarife-ad    { font-weight: 700; font-size: 13px; color: var(--text); }
.ads-self-tarife-fiyat { font-weight: 800; font-size: 13px; color: var(--accent); }
.ads-self-tarife-not   { font-size: 11px; color: var(--muted); }

.ads-self-bilgi {
    background:    color-mix(in srgb, var(--accent) 10%, transparent);
    border:        1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 14px;
    padding:       10px 12px;
    font-size:     12px;
    line-height:   1.5;
    color:         var(--text);
    margin-bottom: 12px;
}

.ads-self-form { display: flex; flex-direction: column; gap: 10px; }
.ads-self-form input,
.ads-self-form textarea {
    width:         100%;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 14px;
    padding:       11px 13px;
    font-family:   'Rajdhani';
    font-size:     14px;
    color:         var(--text);
    outline:       none;
    resize:        vertical;
}
.ads-self-form input:focus,
.ads-self-form textarea:focus { border-color: var(--accent); }

.ads-self-gorsel {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--surface);
    border:        1px dashed var(--border);
    border-radius: 14px;
    padding:       11px 13px;
    font-size:     13px;
    color:         var(--muted);
    cursor:        pointer;
}
.ads-self-etiket { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.ads-self-cipler { display: flex; gap: 8px; flex-wrap: wrap; }
.ads-self-cipler button {
    width:         auto;               /* base.css button{width:100%} sıfırlanıyor */
    padding:       8px 14px;
    border-radius: 20px;
    background:    var(--surface);
    border:        1px solid var(--border);
    color:         var(--text);
    font-family:   'Rajdhani';
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
}
.ads-self-cipler button.is-active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

.ads-self-tutar {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             8px;
    padding:         10px 13px;
    border-radius:   14px;
    background:      var(--surface2);
    min-height:      42px;
}
.ads-self-tutar-etiket { font-size: 12px; color: var(--muted); font-weight: 700; }
.ads-self-tutar-deger  { font-size: 18px; color: var(--accent); font-weight: 800; }
.ads-self-tutar-uyari  { font-size: 12px; color: var(--muted); }

.ads-self-gonder {
    background:  var(--gradient);
    color:       #fff;
    border:      none;
    border-radius: 14px;
    padding:     13px;
    font-family: 'Rajdhani';
    font-weight: 800;
    font-size:   15px;
    cursor:      pointer;
}
.ads-self-gonder:disabled { opacity: .6; cursor: default; }

.ads-self-baslik2 {
    margin:      22px 0 10px;
    font-weight: 800;
    font-size:   15px;
    color:       var(--text);
}
.ads-self-bos, .ads-self-hata {
    padding:    18px 4px;
    font-size:  13px;
    color:      var(--muted);
    text-align: center;
}
.ads-self-hata { color: var(--danger, #ef4444); }

.ads-self-kart {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       12px 14px;
    margin-bottom: 10px;
}
.ads-self-kart-ust {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.ads-self-kart-baslik { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; color: var(--text); }
.ads-self-kart-aciklama { margin-top: 4px; font-size: 12px; color: var(--muted); }
.ads-self-red  { margin-top: 6px; font-size: 12px; color: var(--danger, #ef4444); }
.ads-self-not  { margin-top: 6px; font-size: 12px; color: var(--muted); }

.ads-self-rozet {
    flex-shrink:   0;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   800;
}
.ads-self-rozet-bekle { background: color-mix(in srgb, var(--muted) 18%, transparent);  color: var(--muted); }
.ads-self-rozet-onay  { background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent); color: var(--success, #22c55e); }
.ads-self-rozet-red   { background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent);  color: var(--danger, #ef4444); }

.ads-self-olcum {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   6px;
    margin-top:            10px;
}
.ads-self-olcum div  { text-align: center; }
.ads-self-olcum b    { display: block; font-size: 15px; color: var(--text); }
.ads-self-olcum span { font-size: 10px; color: var(--muted); }

.ads-self-kart-alt {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    margin-top:      10px;
}
.ads-self-kart-meta { font-size: 11px; color: var(--muted); }
.ads-self-durdur {
    width:         auto;               /* base.css button{width:100%} sıfırlanıyor */
    padding:       7px 14px;
    border-radius: 20px;
    background:    var(--surface);
    border:        1px solid var(--border);
    color:         var(--accent);
    font-family:   'Rajdhani';
    font-size:     12px;
    font-weight:   800;
    cursor:        pointer;
}

/* ── Rozet ──────────────────────────────────────────────────── */
.snl-badge {
    display:       inline-block;
    padding:       4px 9px;
    border-radius: 8px;
    border:        1px solid var(--border);
    background:    var(--surface);
    color:         var(--muted);
    font-size:     12px;
    font-weight:   600;
}
.snl-badge.is-success { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: var(--success); color: var(--success); }
.snl-badge.is-danger  { background: color-mix(in srgb, var(--danger) 15%, transparent);  border-color: var(--danger);  color: var(--danger); }
.snl-badge.is-accent  { background: color-mix(in srgb, var(--accent) 18%, transparent);  border-color: var(--accent);  color: var(--accent2); }

/* [DENETİM 4.14] "Satıldı" etiketi — ilan silinmiyor, üstü işaretleniyor.
   Renkler token'dan geliyor ki koyu/açık temada da okunsun. */
.snl-sold-tag {
    display:        inline-block;
    margin-left:    6px;
    padding:        1px 6px;
    border-radius:  4px;
    border:         1px solid var(--danger);
    background:     color-mix(in srgb, var(--danger) 15%, transparent);
    color:          var(--danger);
    font-size:      10px;
    font-weight:    800;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ── İstatistik şeridi ──────────────────────────────────────── */
.snl-stats {
    display:       flex;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       12px 0;
}
body.light-theme .snl-stats { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.snl-stats > .cell {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             2px;
    padding:         0 4px;
    min-width:       0;
}
.snl-stats > .cell + .cell { border-left: 1px solid var(--border); }
.snl-stats .cell > svg { color: var(--accent2); margin-bottom: 2px; }
.snl-stats .v { font-family: var(--font-title); font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--text); }
.snl-stats .l { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ── Boş durum ──────────────────────────────────────────────── */
.snl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; }
.snl-empty > .ico {
    width: 62px; height: 62px; border-radius: 20px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent2);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.snl-empty > .t { font-size: 17px; font-weight: 700; color: var(--text); }
.snl-empty > .s { font-size: 15px; line-height: 21px; color: var(--muted); margin-top: 6px; }
.snl-empty > .a { margin-top: 16px; }

/* ── Buton varyantları ──────────────────────────────────────── */
/* Native karşılığı: components/ui/controls.tsx > Button */
.snl-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          50px;
    padding:         0 24px;
    border:          none;
    border-radius:   16px;
    font-family:     var(--font-main);
    font-size:       16px;
    font-weight:     700;
    cursor:          pointer;
    transition:      filter .15s, opacity .15s;
}
.snl-btn.is-full      { width: 100%; }
.snl-btn:hover        { filter: brightness(1.08); }
.snl-btn:disabled     { opacity: .5; cursor: not-allowed; filter: none; }
.snl-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.snl-btn--primary   { background: var(--gradient); color: #fff; }
.snl-btn--secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.snl-btn--ghost     { background: transparent; color: var(--accent2); }
.snl-btn--danger    {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    border:     1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    color:      var(--danger);
}

/* Kompakt satır-içi düğme: liste satırının sağına oturur (2FA "Kur/Kapat").
   base.css'teki global button{width:100%; padding:13px 20px} kuralını ezer —
   o kural flex satırda düğmeyi şişirip satırı taşırıyordu. */
.snl-btn-sm {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           auto;
    flex:            0 0 auto;
    height:          34px;
    padding:         0 14px;
    border:          1px solid var(--border);
    border-radius:   10px;
    background:      var(--surface);
    color:           var(--text);
    font-family:     var(--font-main);
    font-size:       13px;
    font-weight:     700;
    cursor:          pointer;
}
.snl-btn-sm:hover  { filter: brightness(1.08); }
.snl-btn-sm:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ── Input ──────────────────────────────────────────────────── */
.snl-fieldlabel { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.snl-field {
    display:       flex;
    align-items:   center;
    gap:           12px;
    min-height:    50px;
    padding:       0 16px;
    border-radius: 16px;
    background:    var(--bg);
    border:        1px solid var(--border);
}
.snl-field.is-error { border-color: var(--danger); }
.snl-field > svg    { color: var(--muted); flex: 0 0 auto; }
.snl-field input,
.snl-field textarea {
    flex:        1;
    background:  transparent !important;
    border:      none !important;
    outline:     none;
    margin:      0 !important;
    padding:     0 !important;
    color:       var(--text) !important;
    font-family: var(--font-main);
    font-size:   15px;
}
.snl-fieldhint { font-size: 12px; font-weight: 600; color: var(--muted); margin: 5px 0 0 2px; }
.snl-fielderr  { font-size: 12px; font-weight: 600; color: var(--danger); margin: 5px 0 0 2px; }

/* ── Ekran başlığı şeridi ───────────────────────────────────── */
.snl-appbar {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        12px 16px;
    background:     var(--bg);
    border-bottom:  1px solid var(--border);
}
.snl-appbar > .t   { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.snl-appbar > svg  { color: var(--accent2); }
.snl-appbar .btn {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: none; color: var(--text); cursor: pointer;
}
.snl-appbar .btn:hover { filter: brightness(1.15); }

/* ── SVG ikon koruması ──────────────────────────────────────────
   Flex kapsayıcıda svg genişliği 0'a EZİLEBİLİYOR (ölçüldü 30.08:
   pazar detayındaki geri oku 0px'e düşüp görünmez olmuştu — "geri
   tuşu yok" şikayetinin ikinci kökü; inline width bile kurtarmıyor,
   tek çare shrink kilidi). Tüm snl-ico'lara uygulanır. */
svg.snl-ico { flex-shrink: 0; }

/* ── Liste satırı ───────────────────────────────────────────── */
.snl-listrow {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    border-radius: 16px;
    background:    var(--bg2);
    border:        1px solid var(--border);
}
body.light-theme .snl-listrow { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.snl-listrow.is-clickable { cursor: pointer; transition: background .15s; }
.snl-listrow.is-clickable:hover { background: var(--surface2); }
.snl-listrow > .ico {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent2);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.snl-listrow.is-danger > .ico {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 15%, transparent);
}
.snl-listrow > .txt   { flex: 1; min-width: 0; }
.snl-listrow .t       { font-size: 16px; font-weight: 700; color: var(--text);
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snl-listrow.is-danger .t { color: var(--danger); }
/* overflow-wrap: alt satırda serbest metin durabiliyor (açık adres, e-posta,
   bağlantı). Boşluksuz uzun bir dizge satırı yatay taşırıyordu. */
.snl-listrow .s       { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px;
                        overflow-wrap: anywhere; }
.snl-listrow > .chev  { color: var(--muted); flex: 0 0 auto; }

/* ── Metin için erişilebilir vurgu renkleri ─────────────────────
   --accent2 (#a855f7) ve --danger (#ef4444) ZEMİN/KENARLIK için iyi ama
   YAZI olarak açık temada kontrast eşiğini geçmiyordu (3.6–3.8:1).
   Yazıda bu iki değişken kullanılır; zeminde eskiler kalır.
------------------------------------------------------------------ */
:root            { --accent-text: #c4b5fd; --danger-text: #f87171; }
body.dark-theme  { --accent-text: #c4b5fd; --danger-text: #f87171; }
body.light-theme { --accent-text: #6d28d9; --danger-text: #b91c1c; }


.snl-btn--ghost          { color: var(--accent-text); }
.snl-fielderr            { color: var(--danger-text); }
.snl-listrow.is-danger .t { color: var(--danger-text); }
.snl-btn--danger         { color: var(--danger-text); }

/* Rozet YAZI renkleri — zemin tonlu olduğu için ayrı ele alınır.
   --success/--danger/--accent2 zemin+kenarlık için doğru, ama yazı olarak
   tonlu zeminin üstünde 1.9–4.0:1 kalıyordu. Yazıda bunlar kullanılır. */
:root            { --success-text: #4ade80; }
body.dark-theme  { --success-text: #4ade80; }
body.light-theme { --success-text: #166534; }

.snl-badge.is-success { color: var(--success-text); }
.snl-badge.is-danger  { color: var(--danger-text); }
.snl-badge.is-accent  { color: var(--accent-text); }

/* Yıldız/puan sarısı — YAZI olarak. #eab308 açık zeminde ~1.9:1 ile
   okunmuyordu; zemin/ikon dolgusu olarak hâlâ sarı kullanılabilir. */
:root            { --warning-text: #facc15; }
body.dark-theme  { --warning-text: #facc15; }
body.light-theme { --warning-text: #a16207; }

/* ── Anahtar (switch) ───────────────────────────────────────────
   Bildirim tercihleri gibi aç/kapa satırları için. Native'deki RN
   <Switch> karşılığı; erişilebilirlik için gerçek bir checkbox'ın
   üstüne çizilir (klavye + ekran okuyucu çalışır). */
.snl-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 46px; }
.snl-switch input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.snl-switch .track {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--surface2); border: 1px solid var(--border);
    transition: background .18s, border-color .18s;
}
.snl-switch .track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--muted); transition: transform .18s, background .18s;
}
.snl-switch input:checked + .track {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    border-color: var(--accent);
}
.snl-switch input:checked + .track::after { transform: translateX(20px); background: var(--accent); }
.snl-switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.snl-switch input:disabled { cursor: default; }
.snl-switch input:disabled + .track { opacity: .5; }

/* ================================================================
   KİŞİ KEŞFİ IZGARASI  (#userSearchPage)
   Native karşılığı: snl-native/src/components/discover-cell.tsx
   Tüm renkler tema değişkeninden — eski arama ekranı baştan sona
   sabit açık tema rengiydi (#fff/#1e293b/#e0e7ff), koyu temada okunmuyordu.
================================================================ */

/* ── Üst bar ── */
.kesif-ustbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.kesif-ikonbtn {
    background: none; border: none; padding: 4px; width: auto;
    color: var(--muted); cursor: pointer; display: flex; align-items: center;
}
.kesif-ikonbtn:hover { color: var(--text); }
.kesif-arama {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px; padding: 0 14px;
}
.kesif-arama-ico { color: var(--muted); display: flex; flex: 0 0 auto; }
.kesif-arama input {
    flex: 1; border: none; outline: none; background: none;
    padding: 11px 2px; font-family: var(--font-main);
    font-size: 15px; color: var(--text);
}

/* ── Filtre çipleri ── */
.kesif-cipsatiri {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 4px; flex-shrink: 0;
}
.kesif-cipler {
    flex: 1; display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.kesif-cipler::-webkit-scrollbar { display: none; }
.kesif-cip {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--bg2);
    color: var(--muted); font-family: var(--font-main);
    font-size: 13px; font-weight: 600; cursor: pointer; width: auto;
    transition: background .15s, color .15s, border-color .15s;
}
.kesif-cip:hover { color: var(--text); }
.kesif-cip.is-active {
    background: var(--accent); border-color: var(--accent);
    color: #fff; font-weight: 700;
}
.kesif-sliders {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg2);
    color: var(--accent); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* ── Başlık ── */
.kesif-baslik {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px 4px; flex-shrink: 0;
    font-family: var(--font-main); font-weight: 700;
    font-size: 15px; color: var(--text);
}
.kesif-baslik-ico { color: var(--accent); display: flex; }

/* ── Izgara ── */
.kesif-kaydir { flex: 1; overflow-y: auto; padding: 4px 8px 24px; }
.kesif-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 2px;
    max-width: 620px; margin: 0 auto;
}
/* Dar ekranda 5 sütun sıkışıyor — kademeli azalt */
@media (max-width: 420px) { .kesif-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 330px) { .kesif-grid { grid-template-columns: repeat(3, 1fr); } }

.kesif-bos {
    grid-column: 1 / -1; text-align: center;
    padding: 40px 16px; color: var(--muted); font-size: 13px;
}

/* ── Hücre ── */
.kesif-hucre {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 2px; cursor: pointer; border-radius: 12px;
    /* Damla: yukarıdan hızlanarak in, çarpınca hafif yayıl-toparlan.
       SADECE yeni eklenen hücrede çalışır — mevcut hücre DOM'da kaldığı
       için animasyon yeniden tetiklenmez. */
    animation: kesifDamla .34s cubic-bezier(.55, .06, .68, .19) backwards;
}
.kesif-hucre:hover { background: var(--hover); }
@keyframes kesifDamla {
    0%   { opacity: 0; transform: translateY(-26px) scale(1); }
    70%  { opacity: 1; transform: translateY(0) scale(1); }
    82%  { transform: translateY(0) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hareket hassasiyeti olan kullanıcıda animasyon kapanır */
@media (prefers-reduced-motion: reduce) {
    .kesif-hucre { animation: none; }
}

.kesif-avatar-kutu { position: relative; width: 62px; height: 62px; margin-bottom: 6px; }
.kesif-avatar {
    width: 62px; height: 62px; border-radius: 50%;
    border: 2px solid var(--accent); background: var(--surface);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.kesif-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kesif-harf { font-size: 22px; font-weight: 700; color: var(--muted); }

.kesif-online {
    position: absolute; top: 1px; right: 1px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--success); border: 2px solid var(--bg2);
}
.kesif-ekle {
    position: absolute; bottom: -1px; right: -1px;
    width: 22px; height: 22px; border-radius: 50%; padding: 0;
    background: var(--accent); color: #fff;
    border: 2px solid var(--bg2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.kesif-ekle:hover { background: var(--accent2); }

.kesif-ad {
    font-family: var(--font-main); font-size: 12px; font-weight: 700;
    color: var(--text); text-align: center; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kesif-alt {
    font-size: 10px; color: var(--muted); text-align: center;
    margin-top: 1px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Keşif: sıralama seçici ── */
.kesif-baslik-bosluk { flex: 1; }
.kesif-sira-sarmal { position: relative; }
.kesif-sira-btn {
    display: flex; align-items: center; gap: 3px;
    background: none; border: none; padding: 2px 0; width: auto;
    cursor: pointer; font-family: var(--font-main);
}
.kesif-sira-etiket { font-size: 12px; font-weight: 500; color: var(--muted); }
.kesif-sira-deger  { font-size: 12px; font-weight: 700; color: var(--accent); }
.kesif-sira-ok     { display: flex; color: var(--accent); }
.kesif-sira-menu {
    display: none; position: absolute; right: 0; top: 100%; z-index: 20;
    min-width: 148px; padding: 6px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.kesif-sira-secenek {
    display: block; width: 100%; text-align: left;
    padding: 9px 12px; border: none; border-radius: 8px; background: none;
    font-family: var(--font-main); font-size: 13px; font-weight: 600;
    color: var(--text); cursor: pointer;
}
.kesif-sira-secenek:hover    { background: var(--hover); }
.kesif-sira-secenek.is-active { background: var(--accent); color: #fff; }

/* ── Keşif: kesikli "Arkadaş Ekle" hücresi ── */
.kesif-ekle-daire {
    width: 62px; height: 62px; border-radius: 50%;
    border: 2px dashed var(--accent); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.kesif-eklehucre:hover .kesif-ekle-daire { background: var(--hover); }
.kesif-ekle-yazi { font-weight: 600; }

/* ── Keşif: alt davet şeridi ── */
/* [TAŞMA] Bir <button>'da `width:auto` "kabı doldur" DEĞİL "içeriğin kadar ol"
   demektir (form kontrolü shrink-to-fit ölçülür), display:flex verilmiş olsa
   bile. Şeridin yazısı nowrap olduğundan düğme 392px'e çıkıp 360px'lik ekranı
   45px taşırıyordu (ölçüldü). max-width kabı aşmayı keser; yazıdaki
   min-width:0 da ellipsis'in gerçekten çalışmasını sağlar — flex öğesinin
   varsayılan min-width:auto'su min-content'in altına inmeyi engelliyordu. */
.kesif-paylas {
    display: flex; align-items: center; gap: 10px;
    margin: 0 12px 12px; padding: 8px 10px; width: auto;
    max-width: calc(100% - 24px);
    border-radius: 26px; cursor: pointer;
    background: var(--bg2); border: 1px solid var(--border);
    font-family: var(--font-main); flex-shrink: 0;
}
.kesif-paylas:hover { background: var(--hover); }
.kesif-paylas-ico {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: var(--surface2); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.kesif-paylas-yazi {
    flex: 1; min-width: 0; text-align: left; font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kesif-paylas-ok {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}

/* ── Şablon ikon yuvası (picker-ui.js > snlHydrateIcons) ──────────
   Statik HTML'de emojinin yerini alan boş span. Emoji metnin içinde
   kendiliğinden hizalanıyordu; SVG hizalanmaz — yuva satır içinde
   ortalanıp yazının hemen soluna oturuyor.
   ⚠️ Sınıf adı "snl-ico-" ile BAŞLAMAMALI: feed-icons.css'teki
   [class*="snl-ico-"] kuralı animasyon kancası, buraya uymaz. */
.snl-slot {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 6px;
}
.snl-slot:last-child { margin-right: 0; }

/* ================================================================
   FOTOGRAF AKISI (kaynak sheet + kamera + duzenleyici)
   JS karsiligi: static/foto-akisi.js
   Native karsiligi: photo-source-sheet.tsx / camera-capture.tsx /
   photo-editor.tsx
   Sheet tema degiskenlerinden beslenir; KAMERA ve DUZENLEYICI her
   temada koyudur (native ile ayni karar: canli goruntunun ve
   fotografin gercek rengi ancak notr zeminde degerlendirilebilir).
================================================================ */

.snl-fa-karart {
    position: fixed;
    inset: 0;
    z-index: 100050;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.snl-fa-sheet {
    width: 100%;
    max-width: 520px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: snlFaYukari 0.18s ease-out;
}
@keyframes snlFaYukari { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.snl-fa-tutamak {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    align-self: center;
    margin-bottom: 6px;
}
.snl-fa-baslik {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.snl-fa-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-main);
}
.snl-fa-satir:hover { background: var(--surface2); }
.snl-fa-tile {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
    color: var(--accent);
}
.snl-fa-satir-yazi { display: flex; flex-direction: column; }
.snl-fa-satir-yazi b { font-size: 15px; font-weight: 700; }
.snl-fa-satir-yazi i { font-size: 12.5px; font-style: normal; color: var(--muted); }
.snl-fa-vazgec {
    padding: 12px;
    border: none;
    background: none;
    color: var(--muted);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Kamera ─────────────────────────────────────────────────── */
.snl-fa-kamera {
    position: fixed;
    inset: 0;
    z-index: 100060;
    background: #000;
}
.snl-fa-video { width: 100%; height: 100%; object-fit: contain; }
.snl-fa-kamera-ust { position: absolute; top: 0; left: 0; right: 0; padding: 14px; }
.snl-fa-kamera-alt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 24px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.35);
}
.snl-fa-yuvarlak {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.snl-fa-yan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 72px;
    border: none;
    background: none;
    color: #fff;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.snl-fa-deklansor {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25) inset;
    cursor: pointer;
}

/* ── Duzenleyici ────────────────────────────────────────────── */
.snl-fa-editor {
    position: fixed;
    inset: 0;
    z-index: 100070;
    background: #000;
    display: flex;
    flex-direction: column;
}
.snl-fa-ed-ust {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}
.snl-fa-ed-ust-sag { display: flex; gap: 8px; }
.snl-fa-tuval { flex: 1; display: flex; align-items: center; justify-content: center; padding: 62px 0 10px; }
.snl-fa-canvas { touch-action: none; border-radius: 4px; cursor: grab; max-width: 100%; }
.snl-fa-canvas.is-cizim { cursor: crosshair; }
.snl-fa-ed-alt {
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.snl-fa-arac {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    min-height: 34px;
    scrollbar-width: none;
}
.snl-fa-arac::-webkit-scrollbar { display: none; }
.snl-fa-ipucu { color: rgba(255, 255, 255, 0.7); font-size: 12px; margin: 0 auto; }
.snl-fa-cip {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.snl-fa-cip.is-active { background: #fff; color: #000; }
.snl-fa-renk {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
}
.snl-fa-renk.is-active { border-color: #fff; border-width: 3px; transform: scale(1.15); }
.snl-fa-ayrac { flex: 0 0 1px; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.25); }
.snl-fa-kalin {
    flex: 0 0 auto;
    width: 34px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.snl-fa-kalin.is-active { background: rgba(255, 255, 255, 0.35); }
.snl-fa-kalin span { display: block; border-radius: 999px; background: #fff; }
.snl-fa-yazi-ekle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.snl-fa-sekmeler { display: flex; gap: 8px; }
.snl-fa-sekme {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.snl-fa-sekme.is-active { background: #facc15; color: #000; }
.snl-fa-bitti {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

/* Form alanlarina bagli foto secici (snlFotoInputBagla) */
.snl-fa-secsatir {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.snl-fa-secbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.snl-fa-secbtn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.snl-fa-onizleme {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Urun ekleme: cok resimli onizleme seridi */
.snl-fa-kare { position: relative; width: 64px; height: 64px; }
.snl-fa-kare img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border);
}
.snl-fa-kare.is-kapak img { border-color: var(--accent); }
.snl-fa-kapak-rozet {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
}
/* Cokli secimde duzenleyici atlaniyor: kareyi tek tek duzenlemek isteyen
   icin kalem dugmesi (snlCokluFotoDuzenle). Sil dugmesinin simetrigi. */
.snl-fa-kare-duzenle {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: var(--surface2, #1e293b);
    color: var(--text, #fff);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snl-fa-kare-sil {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   ÖZEL BİLDİRİM KURALI KARTI  (#193 FAZ 1)
   Native karşılığı: snl-native/src/app/ozel-bildirimler.tsx
   Kural artık silinip yeniden kurulmuyor — kartın kendi anahtarı,
   eşleşme kipi, hariç kelimeleri ve sessizlik ayarları var.
================================================================ */

.sr-kart {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 8px;
}
.sr-kart.is-pasif .sr-ad { color: var(--muted); text-decoration: line-through; }
.sr-kart.is-pasif .sr-ikon { opacity: .5; }

.sr-ust { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.sr-ikon {
    width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface2); color: var(--accent-text);
}
.sr-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sr-ad { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.sr-rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-rozet {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
}
.sr-rozet.is-accent {
    color: var(--accent-text); border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.sr-rozet.is-danger { color: #ef4444; border-color: #ef4444; background: transparent; }

.sr-ayarac {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 0 12px 12px; background: none; border: none;
    color: var(--muted); font-size: 11px; cursor: pointer;
}
.sr-ayarac span:first-of-type { flex: 1; text-align: left; }
.sr-ok { display: flex; transition: transform .18s; }
.sr-ok.is-acik { transform: rotate(180deg); }

.sr-panel {
    border-top: 1px solid var(--border);
    padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.sr-baslik { font-size: 11px; font-weight: 800; color: var(--text2, var(--text)); }
.sr-ipucu { font-size: 11px; color: var(--muted); line-height: 1.45; }
.sr-chipler { display: flex; flex-wrap: wrap; gap: 8px; }

.sr-ikili { display: flex; gap: 8px; }
.sr-ikili > .sr-haric { flex: 1; min-width: 0; }
.sr-haric { display: flex; gap: 8px; align-items: center; }
.sr-haric input {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
    border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text);
}
.sr-haric .snl-chip { cursor: pointer; flex: 0 0 auto; }

.sr-sil {
    display: flex; align-items: center; gap: 8px; width: auto; margin-top: 4px;
    background: none; border: none; padding: 4px 0;
    color: #ef4444; font-size: 13px; cursor: pointer;
}

/* ================================================================
   MAGAZA PANELI ALT BARI (#188)
   Satis / personel / finans ayni ekranda ic ice duruyordu; panel
   bolumlere ayrildi ve gezinme uygulamanin alt bari diliyle yapildi.
   Renkler token'dan: iki temada da dogru.
================================================================ */
.snl-storenav {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: flex;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg2);
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.snl-storenav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px;
    border: none;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    transition: background 0.15s, color 0.15s;
}
.snl-storenav-btn span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snl-storenav-btn:hover { background: var(--hover); }
.snl-storenav-btn.is-active {
    color: var(--accent-text);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Finans bolumunun basindaki "Gelir / Gider Defteri" girisi */
.snl-storefin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.snl-storefin-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ================================================================
   [MASAÜSTÜ RAYLAR] Ana sayfada feed kolonunun iki yanındaki sabit
   paneller (_pages.html'deki aside.snl-ray). Yalnız >=1240px'te var;
   mobil/tablet bu bloğu hiç görmez. position:fixed: akışı bozmaz,
   kolon hesabı: 640/2 + 24 boşluk = merkezden 344px.
================================================================ */
.snl-ray { display: none; }
@media (min-width: 1240px) {
    .snl-ray {
        display:        flex;
        flex-direction: column;
        gap:            14px;
        position:       fixed;
        top:            96px;
        width:          272px;
        z-index:        15;
        max-height:     calc(100vh - 210px);
        overflow-y:     auto;
        scrollbar-width: none;
    }
    .snl-ray::-webkit-scrollbar { display: none; }
    .snl-ray-sol { right: calc(50% + 344px); }
    .snl-ray-sag { left:  calc(50% + 344px); }
}
.snl-ray-kart {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       16px;
    box-shadow:    0 8px 28px rgba(99, 102, 241, 0.08);
}
.snl-ray-baslik {
    font-family:    'Orbitron';
    font-size:      11px;
    letter-spacing: 1.5px;
    color:          var(--muted);
    margin-bottom:  12px;
}
.snl-ray-bos { color: var(--muted); font-size: 13px; }

/* Profil kartı */
.snl-ray-profil { text-align: center; }
.snl-ray-avatar {
    width: 64px; height: 64px; margin: 0 auto 8px;
    border-radius: 50%; padding: 2px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex; align-items: center; justify-content: center;
}
.snl-ray-avatar img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block; border: 2px solid var(--bg2);
}
.snl-ray-avatar span {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--surface2); border: 2px solid var(--bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: var(--accent-text);
}
.snl-ray-me { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 10px; }
.snl-ray-profilbtn {
    width: auto; padding: 8px 22px; border-radius: 18px; font-size: 13px;
}

/* Hızlı menü — base.css global button (gradient, %100) sıfırlanır */
.snl-ray-nav { display: flex; flex-direction: column; gap: 2px; }
.snl-ray-nav button {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: none; border: none; box-shadow: none;
    padding: 9px 10px; border-radius: 12px;
    color: var(--text); font-family: 'Rajdhani'; font-size: 15px;
    font-weight: 700; letter-spacing: 0; text-align: left; cursor: pointer;
}
.snl-ray-nav button:hover { background: var(--hover); transform: none; box-shadow: none; }
.snl-ray-nav .material-symbols-outlined { font-size: 20px; color: var(--accent); }

/* Trend etiketler */
.snl-ray-trend { display: flex; flex-direction: column; gap: 2px; }
.snl-ray-etiket {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; box-shadow: none;
    padding: 7px 10px; border-radius: 10px; cursor: pointer;
    font-family: 'Rajdhani'; letter-spacing: 0;
}
.snl-ray-etiket:hover { background: var(--hover); transform: none; box-shadow: none; }
.snl-ray-etiket-ad   { color: var(--accent-text); font-weight: 800; font-size: 14px; }
.snl-ray-etiket-adet { color: var(--muted); font-size: 12px; font-weight: 700; }

/* Önerilen kişiler */
.snl-ray-kisiler { display: flex; flex-direction: column; gap: 4px; }
.snl-ray-kisi {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 12px; cursor: pointer;
}
.snl-ray-kisi:hover { background: var(--hover); }
.snl-ray-kisi-avatar { position: relative; width: 38px; height: 38px; flex: 0 0 38px; }
.snl-ray-kisi-avatar img,
.snl-ray-kisi-avatar span {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface2); color: var(--accent-text);
    font-weight: 800; font-size: 15px;
}
.snl-ray-online {
    position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
    border-radius: 50%; background: #22c55e; border: 2px solid var(--bg2);
}
.snl-ray-kisi-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.snl-ray-kisi-ad b {
    font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snl-ray-kisi-ad span {
    font-size: 11px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snl-ray-takip {
    width: auto; flex: 0 0 auto; padding: 5px 10px; border-radius: 14px;
    font-size: 11px; letter-spacing: 0;
}
.snl-ray-takip.is-done {
    background: var(--surface2); color: var(--muted); box-shadow: none;
}

/* ── Masaüstü cilası: zemine çok hafif marka degrade ışığı + kart hover ── */
@media (min-width: 700px) {
    body {
        background:
            radial-gradient(900px 480px at 8% -5%, rgba(124, 58, 237, 0.06), transparent 60%),
            radial-gradient(900px 480px at 95% 0%, rgba(236, 72, 153, 0.05), transparent 60%),
            var(--bg);
        background-attachment: fixed;
    }
}
@media (min-width: 700px) and (hover: hover) {
    .snl-fc { transition: transform .18s ease, box-shadow .18s ease; }
    .snl-fc:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(99, 102, 241, 0.16) !important; }
}

/* ── [100/10 CİLASI] Küçük ama hissedilir dokunuşlar ────────────────
   1) Feed kartları yumuşak yükselerek girer (reduced-motion sayar)
   2) Masaüstünde marka renginde ince kaydırma çubuğu
   3) Ray kartlarında hover derinliği                                 */
@keyframes snlKartGir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.snl-fc { animation: snlKartGir .32s ease backwards; }
@media (prefers-reduced-motion: reduce) {
    .snl-fc { animation: none; }
}

@media (min-width: 700px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--accent) 50%, transparent);
        background-clip: padding-box;
    }

    .snl-ray-kart { transition: box-shadow .18s ease, border-color .18s ease; }
    .snl-ray-kart:hover {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
        box-shadow: 0 12px 34px rgba(99, 102, 241, 0.14);
    }
}

/* ================================================================
   [ETKİLEŞİM CİLASI] Feed aksiyon satırı (beğeni/yorum/paylaş/kaydet)
   Markup feed.js kart şablonunda; renk kimliği eylem başına:
   beğeni=kırmızı, yorum=mor, paylaş=indigo, kaydet=amber.
   Negatif margin: padding eklerken satırın oturduğu yer değişmesin.
================================================================ */
.snl-act {
    position:      relative;
    padding:       5px 8px;
    margin:        -5px -8px;
    border-radius: 12px;
    transition:    background .15s, color .15s, transform .12s;
}
.snl-act:active { transform: scale(.9); }
@media (hover: hover) {
    .snl-act-like:hover    { color: #ef4444 !important; background: rgba(239, 68, 68, 0.10); }
    .snl-act-comment:hover { color: #7c3aed !important; background: rgba(124, 58, 237, 0.10); }
    .snl-act-share:hover   { color: #6366f1 !important; background: rgba(99, 102, 241, 0.10); }
    .snl-act-save:hover    { color: #f59e0b !important; background: rgba(245, 158, 11, 0.10); opacity: 1 !important; }
}

/* Beğeni parçacık patlaması (feed.js _likeBurst üretir) */
.snl-burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.snl-burst i {
    position:      absolute;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    transform:     translate(-50%, -50%);
    animation:     snlBurst .55s ease-out forwards;
}
@keyframes snlBurst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35); }
}

/* Çift-tık büyük kalbi (feed.js snlCiftBegen üretir) */
.snl-bigheart {
    position:       absolute;
    z-index:        5;
    pointer-events: none;
    transform:      translate(-50%, -50%);
    filter:         drop-shadow(0 6px 24px rgba(232, 16, 47, 0.55));
    animation:      snlBigHeart .9s ease forwards;
}
@keyframes snlBigHeart {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    32%  { transform: translate(-50%, -50%) scale(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* Sayaç tiki: değer değişince minik zıplama (_setCount tetikler) */
.snl-tik { display: inline-block; animation: snlTik .3s ease; }
@keyframes snlTik {
    30% { transform: translateY(-4px) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .snl-burst i, .snl-bigheart, .snl-tik { animation: none; }
    .snl-bigheart { display: none; }
}

/* ================================================================
   [İSKELET] Yükleme yer tutucuları — düz "Yükleniyor..." yazısı yerine
   gelecek içeriğin ŞEKLİNİ taklit eden bloklar. İki kazancı var:
   bekleme kısa hissettirir ve içerik gelince sayfa zıplamaz.
   Üretici: static/utils.js > snlIskelet().
================================================================ */
@keyframes snlIskParilti { 100% { transform: translateX(100%); } }
.snl-isk-blok {
    position:      relative;
    overflow:      hidden;
    background:    color-mix(in srgb, var(--muted) 20%, transparent);
    border-radius: 8px;
    flex-shrink:   0;
}
.snl-isk-blok::after {
    content:    "";
    position:   absolute;
    inset:      0;
    transform:  translateX(-100%);
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--muted) 14%, transparent), transparent);
    animation:  snlIskParilti 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .snl-isk-blok::after { animation: none; }
}
/* Akış kartı iskeleti: avatar + iki satır + görsel alanı */
.snl-isk-kart {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 20px;
    margin-bottom: 14px;
    overflow:      hidden;
}
.snl-isk-ust    { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.snl-isk-avatar { width: 42px; height: 42px; border-radius: 50%; }
.snl-isk-gorsel { width: 100%; height: 220px; border-radius: 0; }
.snl-isk-alt    { display: flex; gap: 16px; padding: 12px 16px; }
/* Liste satırı iskeleti: kare görsel + sağda üç çizgi (pazar/ilan kartı) */
.snl-isk-satir {
    display:       flex;
    gap:           12px;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       12px;
    margin-bottom: 10px;
}
.snl-isk-kare   { width: 96px; height: 96px; border-radius: 12px; }
.snl-isk-govde  { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

/* ================================================================
   [PAZAR KART] Ürün ızgarası ve kartı
   Web tek kolon YATAY satır listesiydi; native (pazar.tsx) iki kolon
   KARE kart ızgarası — aynı ilan iki yüzeyde bambaşka görünüyordu.
   Web native'e getirildi. Renkler TOKEN'dan: eski kart mor/pembe
   degradeyi ve rgba gölgeyi inline hex ile taşıyordu, tema değişince
   donuyordu (tasarım sistemi notundaki tekrarlayan hata deseni).
================================================================ */
.mkt-grid {
    display:               grid;
    gap:                   12px;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width: 600px) {
    .mkt-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}

.mkt-kart {
    display:        flex;
    flex-direction: column;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  14px;
    overflow:       hidden;
    cursor:         pointer;
    text-align:     left;
    transition:     transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mkt-kart:hover {
    transform:    translateY(-3px);
    border-color: var(--accent);
    box-shadow:   0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.mkt-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mkt-kart:hover { transform: none; } }

/* Kapak: native `image` stiliyle aynı — kare, doldurarak kırp */
.mkt-kapak     { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--surface2); }
/* Görsel, yer tutucunun ÜSTÜNDE ayrı katman: kırık/silinmiş URL'de img
   kendini kaldırıyor (onerror) ve altındaki "SNL" yer tutucusu ortaya
   çıkıyor. Eskiden tarayıcının kırık görsel ikonu görünüyordu. */
.mkt-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fotoğrafsız ilan: eski hâli mor→pembe degrade + 28px Orbitron "SNL" idi,
   ilanın kendisinden daha çok bakılıyordu. Native'deki gibi sakin yer tutucu. */
.mkt-kapak-bos {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title); font-weight: 800; font-size: 22px;
    letter-spacing: 3px; color: var(--muted); opacity: .5;
}

.mkt-rozet {
    position: absolute; display: flex; align-items: center; gap: 3px;
    border-radius: 8px; padding: 2px 7px; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.5;
}
.mkt-rozet-foto     { right: 8px; bottom: 8px; background: rgba(0,0,0,.58); }
.mkt-rozet-ariyorum { left: 8px; top: 8px; background: var(--accent);
                      font-size: 10px; font-weight: 900; letter-spacing: .5px; }

/* Kalp: eskiden tıklanmayan bir SÜSTÜ (beyaz daire içinde ikon) — kaydetme
   ucu (toggleSaveProduct) zaten vardı, karta hiç bağlanmamıştı. */
.mkt-kalp {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    border: none; padding: 0; cursor: pointer;
    background: rgba(0,0,0,.45); color: #fff;
    transition: transform .15s ease, background .15s ease;
}
.mkt-kalp:hover      { transform: scale(1.08); background: rgba(0,0,0,.65); }
.mkt-kalp.dolu       { color: var(--danger); }
.mkt-kalp.dolu svg   { fill: currentColor; }

.mkt-govde  { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 10px 11px 11px; }
.mkt-baslik {
    font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
/* Fiyat eskiden degrade METİNDİ (-webkit-text-fill-color:transparent):
   kartın en önemli bilgisi en düşük kontrastlı öğesiydi. Native `t.accent`. */
.mkt-fiyat  { font-size: 15px; font-weight: 800; color: var(--accent-text); }
.mkt-meta   { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Çip şeridi TEK SATIR. `flex-wrap:wrap + max-height` ikinci satırın üst
   birkaç pikselini gösteriyordu (kırpılmış çip yarısı görünüyordu); nowrap ile
   fazlalık yatayda kesiliyor ve sağdaki maske kesintiyi kasıtlı gösteriyor. */
.mkt-cipler {
    display: flex; gap: 4px; flex-wrap: nowrap;
    height: 20px; align-items: center; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
            mask-image: linear-gradient(to right, #000 86%, transparent);
}
/* Çipler yeşildi (--success): özellik bir "başarı" değil, nötr bilgi. */
.mkt-cip {
    font-size: 10px; font-weight: 700; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
}
.mkt-alt {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    margin-top: auto; padding-top: 6px;
}
.mkt-satici { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Aksiyon eskiden metin düğmesiydi ve İKİ DALDA DA "İletişim" yazıyordu
   (sepete ekleyen düğme de). İkon + title/aria-label ile anlamı ayrıştı. */
.mkt-aksiyon {
    /* ⚠️ base.css'te GLOBAL `button { width:100%; padding:13px 20px }` var:
       padding sıfırlanmazsa 30px'lik ikon düğmesi 41.6px'e şişiyor. */
    flex-shrink: 0; width: 30px; height: 30px; padding: 0; border-radius: 9px;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--accent-text);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-aksiyon:hover, .mkt-kalp:hover { box-shadow: none; }
.mkt-aksiyon:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Izgara iskeleti (kare kapak + üç satır) — pazar "Yükleniyor…" düz yazısı
   kullanıyordu, iskelet altyapısı (snlIskelet) varken. */
.snl-isk-kutu { display: flex; flex-direction: column; gap: 8px; }

/* ================================================================
   [BOŞ DURUM] Liste boşken görünen ekran. Eskiden her yerde farklıydı:
   kimi çıplak gri yazı, kimi ikonlu — ve hiçbiri KULLANICIYA YOL
   GÖSTERMİYORDU. Tek dil: yumuşak rozet içinde ikon + net başlık +
   açıklama + (varsa) doğrudan eyleme götüren düğme.
   Üretici: static/utils.js > snlBosDurum().
================================================================ */
.snl-bos { text-align: center; padding: 44px 20px; }
.snl-bos-ikon {
    width:           64px;
    height:          64px;
    margin:          0 auto 14px;
    border-radius:   20px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      color-mix(in srgb, var(--accent) 12%, transparent);
    color:           var(--accent-text);
}
.snl-bos-ikon .material-symbols-outlined { font-size: 30px; }
.snl-bos-baslik { font-size: 15px; font-weight: 800; color: var(--text); }
.snl-bos-alt {
    font-size:   13px;
    color:       var(--muted);
    margin-top:  5px;
    line-height: 1.5;
    max-width:   300px;
    margin-left: auto;
    margin-right: auto;
}
.snl-bos-eylem {
    width:         auto;
    margin-top:    16px;
    padding:       10px 22px;
    border-radius: 22px;
    font-size:     13px;
    letter-spacing: 0.5px;
}


/* ================================================================
   [PAZAR ÜST ŞERİDİ] Başlık + eylemler + arama araç çubuğu
   İki komşu düğme İKİ FARKLI degrade taşıyordu (mavi→mor "Alışveriş",
   mor→pembe "Sat"): ikisi de birincil eylem gibi bağırıyordu. Artık tek
   birincil (Sat) + nötr ikincil. Stiller de satır içinden buraya taşındı.
================================================================ */
.mkt-ust        { display: flex; justify-content: space-between; align-items: center;
                  flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mkt-ust-baslik { display: flex; align-items: center; gap: 6px;
                  font-family: var(--font-title); font-size: 14px; letter-spacing: 1px;
                  color: var(--accent-text); }
.mkt-ust-baslik .material-symbols-outlined { font-size: 18px; }
.mkt-ust-etiket { font-size: 10px; color: var(--muted); letter-spacing: 0; }
.mkt-ust-alt    { margin-top: 2px; font-size: 11px; color: var(--muted); }
.mkt-ust-btnler { display: flex; gap: 8px; }

.mkt-btn {
    display: inline-flex; align-items: center; gap: 5px;
    width: auto; padding: 9px 14px; border-radius: 14px;
    font-size: 13px; font-weight: 700; font-family: var(--font-main);
    letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
.mkt-btn .material-symbols-outlined { font-size: 18px; }
.mkt-btn-birincil { background: var(--gradient); color: #fff; border: none; }
.mkt-btn-ikincil  { background: var(--surface); color: var(--accent-text); border: 1px solid var(--border); }
.mkt-btn-ikincil:hover { background: var(--hover); border-color: var(--accent); box-shadow: none; }

.mkt-arac   { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mkt-arama  {
    width: 100%; padding: 11px 16px; border-radius: 22px;
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font-main); font-size: 14px; outline: none;
}
.mkt-arama:focus { border-color: var(--accent); }
.mkt-arac-alt { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
/* Masaüstünde arama + filtre + sıralama TEK satır: üç ayrı satır, içerik
   başlamadan ekranın üçte birini yiyordu. */
@media (min-width: 760px) {
    .mkt-arac     { flex-direction: row; align-items: center; }
    .mkt-arama    { flex: 1; min-width: 0; }
    .mkt-arac-alt { flex-shrink: 0; grid-template-columns: auto auto; }
    .mkt-filtre   { width: auto; padding: 11px 18px; }
}
.mkt-filtre {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 11px; border-radius: 14px;
    background: var(--bg2); color: var(--accent-text); border: 1.5px solid var(--border);
    font-family: var(--font-main); font-size: 14px; font-weight: 800; letter-spacing: 0; cursor: pointer;
}
.mkt-filtre:hover { border-color: var(--accent); box-shadow: none; }
.mkt-sirala {
    padding: 11px 12px; border-radius: 14px;
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font-main); font-size: 13px; font-weight: 600; outline: none; cursor: pointer;
}

/* ================================================================
   [ÜRÜN DETAY] Tam sayfa görünüm
   Eskiden: 28px degrade METİN fiyat, Orbitron ürün başlığı, ÜÇ ayrı renkte
   yedi çipin karıştığı bir şerit ve dört tane arka arkaya tam genişlik
   düğme. Galeri zeminleri (#0b0b12) ile boş galeri (açık lila→pembe
   degrade) sabit hex'ti: koyu temada ekrana parlak bir blok basıyordu.
================================================================ */
.pd-krom {
    position: fixed; top: 14px; z-index: 9010;
    display: flex; align-items: center; justify-content: center;
    height: 40px; width: auto; padding: 0 14px;
    border: none; border-radius: 20px; cursor: pointer;
    background: rgba(0,0,0,.55); color: #fff;
    font-family: var(--font-main); font-size: 13px; font-weight: 800; letter-spacing: 0;
    backdrop-filter: blur(6px);
}
/* Görselin üstünde duruyor: temaya değil, altındaki fotoğrafa göre okunmalı.
   Eski hâli beyaz zemin + koyu yazıydı, açık fotoğrafta kayboluyordu. */
.pd-krom:hover { background: rgba(0,0,0,.72); box-shadow: none; transform: none; }
.pd-geri   { left: 14px; width: 40px; padding: 0; border-radius: 50%; }
.pd-kaydet { right: 14px; }

/* Geniş ekranda galeri de gövdeyle aynı kolonda kalır: gövde 600px'e
   ortalanmışken galerinin ekranı boydan boya kaplaması dağınık duruyordu. */
.pd-galeri     { position: relative; background: var(--surface2); max-width: 600px; margin: 0 auto; }
.pd-slaytlar   { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pd-slaytlar::-webkit-scrollbar { display: none; }
.pd-slayt      { width: 100%; height: 55vh; max-height: 480px; object-fit: contain;
                 flex-shrink: 0; scroll-snap-align: center; background: var(--surface2); }
.pd-galeri-bos { width: 100%; max-width: 600px; margin: 0 auto; height: 240px; display: flex; align-items: center; justify-content: center;
                 background: var(--surface2); color: var(--muted);
                 font-family: var(--font-title); font-weight: 800; font-size: 30px; letter-spacing: 4px; opacity: .5; }
.pd-noktalar   { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
                 display: flex; gap: 6px; padding: 5px 10px; border-radius: 12px; background: rgba(0,0,0,.4); }
.pd-nokta      { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .2s; }
.pd-nokta.aktif{ background: #fff; }

.pd-govde  { max-width: 600px; margin: 0 auto; padding: 18px 16px 100px; }
/* Başlık Orbitron'daydı: marka fontu, uzun Türkçe ilan başlığı için değil. */
.pd-baslik { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
.pd-fiyat  { font-size: 26px; font-weight: 900; color: var(--accent-text); margin-bottom: 4px; }
.pd-meta   { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.pd-rozet  { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 8px;
             background: var(--accent); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .5px; }
.pd-satildi{ margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; text-align: center;
             background: color-mix(in srgb, var(--danger) 12%, transparent);
             border: 1px solid var(--danger); color: var(--danger);
             font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.pd-aciklama { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
               background: var(--bg2); border: 1px solid var(--border);
               font-size: 14px; color: var(--text); line-height: 1.55; white-space: pre-wrap; }

/* Çipler tek dilde: nötr. Eskiden "İkinci El" amber, özellikler yeşil,
   kalanlar mor — yedi çip üç renkte, hiyerarşi okunmuyordu. */
.pd-cipler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pd-cip    { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 700;
             background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pd-cip-ana{ background: color-mix(in srgb, var(--accent) 12%, transparent);
             border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-text); }

/* Dört tam genişlik düğme üst üsteydi: hepsi aynı ağırlıkta görünüyordu. */
.pd-eylem     { display: flex; flex-direction: column; gap: 10px; }
.pd-ikili     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-btn       { width: 100%; padding: 13px; border-radius: 14px; cursor: pointer;
                font-family: var(--font-main); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.pd-btn-ana   { background: var(--gradient); color: #fff; border: none; font-size: 15px; }
.pd-btn-yan   { background: var(--bg2); color: var(--accent-text); border: 1px solid var(--border); }
.pd-btn-yan:hover { border-color: var(--accent); box-shadow: none; }
.pd-teklif    { display: none; gap: 8px; }
.pd-teklif input {
    flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font-main); font-size: 14px; font-weight: 700;
}
.pd-teklif button { width: auto; padding: 10px 16px; border: none; border-radius: 12px;
                    background: var(--gradient); color: #fff;
                    font-family: var(--font-main); font-size: 13px; font-weight: 700; letter-spacing: 0; }
/* Şikayet bir düğme değil, son çare bağlantısı. */
.pd-sikayet { width: auto; align-self: center; margin-top: 4px; padding: 8px 12px;
              background: transparent; border: none; color: var(--muted);
              font-family: var(--font-main); font-size: 12.5px; font-weight: 700;
              letter-spacing: 0; text-decoration: underline; cursor: pointer; }
.pd-sikayet:hover { color: var(--danger-text); box-shadow: none; transform: none; }

/* [PAZAR DETAYLI ARAMA] Modal içi bölüm etiketleri ve temizle işareti.
   Satır içinde SABİT gri hex'lerdi: #9ca3af beyaz zeminde 2.55:1 (eşik 4.5)
   — açık temada "Sıfırla" ve ipucu yazısı okunmuyordu. Tasarım sistemi
   notundaki tekrarlayan hata deseninin aynısı. */
.mkt-etiket  { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mkt-sifirla { font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.mkt-sifirla:hover { color: var(--accent-text); }
.mkt-temizle { display: none; color: var(--danger-text); font-weight: 700; }
.mkt-ipucu   { margin-top: 3px; font-size: 11px; color: var(--muted); }

/* ================================================================
   [#ARAMA] SESLI / GORUNTULU ARAMA KATMANI  (cagri.js)
   ================================================================
   Katman TEMA DISI koyu: goruntu ustunde acik zemin okunmaz ve telefon
   uygulamalarinin alisilmis gorunumu koyudur. z-index reels (9998) ve
   cekim (10000) katmanlarinin USTUNDE: arama her seyi keser.
================================================================ */

.cagri-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #0b1020;
    padding: 32px 16px;
}

.cagri-overlay .cagri-uzak {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;              /* ses icin DOM'da kalir, gorunmez olur */
    pointer-events: none;
}
.cagri-overlay .cagri-uzak.gorunur { opacity: 1; }

.cagri-overlay .cagri-yerel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 116px;
    height: 168px;
    object-fit: cover;
    border-radius: 16px;
    background: #111827;
    border: 1px solid rgba(255,255,255,0.18);
    transform: scaleX(-1);   /* ayna: kendi goruntun */
}

.cagri-kimlik {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    text-align: center;
}

.cagri-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #1e293b;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 800;
    overflow: hidden;
    margin-bottom: 12px;
}
.cagri-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cagri-ad     { font-size: 22px; font-weight: 800; color: #fff; }
.cagri-durum  { font-size: 15px; color: #94a3b8; }
.cagri-rozet  {
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,0.7);
    color: #e2e8f0;
    font-size: 13px;
}

.cagri-dugmeler {
    position: relative;
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.cagri-dugme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 84px;
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
}
.cagri-dugme svg {
    box-sizing: content-box;
    padding: 19px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.cagri-dugme.kapali  svg { background: #f1f5f9; color: #0f172a; }
.cagri-dugme.kirmizi svg { background: var(--danger); color: #fff; }
.cagri-dugme.yesil   svg { background: var(--success); color: #fff; }
.cagri-dugme:hover svg { filter: brightness(1.12); }

/* Sohbetteki arama kaydi satiri — balon degil, ortada ince serit */
.cagri-kayit {
    display: flex;
    justify-content: center;
    margin: 4px 0;
}
.cagri-kayit button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 88%;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--fill-soft);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.cagri-kayit button:hover { border-color: var(--accent); }
.cagri-kayit.kacan button {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.45);
    color: #fca5a5;
}
.cagri-kayit .cagri-kayit-saat { color: var(--muted); opacity: 0.75; font-size: 11px; }

/* [BENZER İLANLAR] Detay altındaki şerit — ana kartla aynı dil. Fiyat burada
   da degrade METİNDİ, boş görsel mor-pembe degrade + beyaz Orbitron'du. */
.pd-benzer-baslik { margin: 22px 0 10px; font-size: 14px; font-weight: 800; color: var(--text); }
.pd-benzer-serit  { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
                    padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pd-benzer-serit::-webkit-scrollbar { display: none; }
.pd-benzer-kart   { flex: 0 0 150px; background: var(--bg2); border: 1px solid var(--border);
                    border-radius: 12px; overflow: hidden; cursor: pointer; scroll-snap-align: start; }
.pd-benzer-kart:hover { border-color: var(--accent); }
.pd-benzer-kapak  { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--surface2); }
.pd-benzer-bos    { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center;
                    font-family: var(--font-title); font-weight: 800; font-size: 16px; letter-spacing: 3px;
                    color: var(--muted); opacity: .5; background: var(--surface2); }
.pd-benzer-govde  { padding: 8px 10px; }
.pd-benzer-ad     { font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-benzer-fiyat  { margin-top: 2px; font-size: 13px; font-weight: 900; color: var(--accent-text); }
.pd-benzer-sehir  { margin-top: 2px; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   [BİLDİRİM ŞERİDİ] Tarayıcının "sananelazim.tr diyor ki:" kutusu
   yerine markalı, kapanabilen bildirim. 358 çağrı yerinin hepsini
   tek yerden değiştirmek için utils.js'te window.alert bu şeride
   yönlendiriliyor — çağrı yerleri olduğu gibi kalır.
   Konum: header'ın hemen altı, ortada; alt navigasyonu örtmez.
================================================================ */
#snlTostKap {
    position:       fixed;
    top:            78px;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        10000;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    width:          calc(100% - 28px);
    max-width:      420px;
    pointer-events: none;
}
.snl-tost {
    display:        flex;
    align-items:    flex-start;
    gap:            10px;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-left:    3px solid var(--accent);
    border-radius:  14px;
    padding:        12px 14px;
    box-shadow:     0 12px 34px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    cursor:         pointer;
    animation:      snlTostGir .22s ease;
}
.snl-tost.is-cikis { animation: snlTostCik .2s ease forwards; }
.snl-tost-ikon { display: flex; flex: 0 0 auto; color: var(--accent); margin-top: 1px; }
.snl-tost-yazi {
    flex:        1;
    min-width:   0;
    font-size:   13.5px;
    line-height: 1.45;
    color:       var(--text);
    overflow-wrap: anywhere;
}
.snl-tost.is-hata    { border-left-color: #ef4444; }
.snl-tost.is-hata    .snl-tost-ikon { color: #ef4444; }
.snl-tost.is-basari  { border-left-color: #22c55e; }
.snl-tost.is-basari  .snl-tost-ikon { color: #22c55e; }
@keyframes snlTostGir { from { opacity: 0; transform: translateY(-10px); } }
@keyframes snlTostCik { to   { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
    .snl-tost, .snl-tost.is-cikis { animation: none; }
}

/* ================================================================
   [ALIŞVERİŞ ŞERİTLERİ] base.css'in global button/select %100
   genişlik kuralı buradaki kompakt kontrolleri şişiriyordu — ÖLÇÜLDÜ:
   375px'te 11 kategori çipinin HER BİRİ 323px olmuş, şerit "her
   seferinde tek dev çip" kaydırmasına dönmüştü; sıralama select'i de
   323px olup Stokta/fiyat süzgeçlerini ekran dışına itiyordu.
   (Aynı tuzak sınıfı: web-overlay notlarındaki width:auto kuralı.)
================================================================ */
.shop-cat-chip { width: auto; }
#shopSortSel   { width: auto; margin-bottom: 0; }

/* ================================================================
   TEMA KARTLARI (Ayarlar > Görünüm) — [TARAMA 18.09]
   Önizleme renkleri BİLEREK sabit: kart, o temanın NASIL görüneceğini
   gösteriyor; o anki temadan boyanırsa ikisi de aynı çıkardı.
================================================================ */
.tema-kartlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
button.tema-kart {
    width: 100%;
    padding: 8px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    letter-spacing: 0;
    text-align: left;
    transition: border-color .15s, transform .15s;
}
button.tema-kart:hover { transform: translateY(-1px); box-shadow: none; }
button.tema-kart.active { border-color: var(--accent); }
.tema-onizleme {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    overflow: hidden;
}
.tema-kart--light .tema-onizleme { background: #f5f7ff; border: 1px solid #e0e7ff; }
.tema-kart--dark  .tema-onizleme { background: #0f0f0f; border: 1px solid #2a2a2a; }
.to-ust     { display: flex; align-items: center; gap: 6px; }
.to-logo    { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #6366f1, #ec4899); flex-shrink: 0; }
.to-kart    { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 6px; }
.to-avatar  { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.to-satirlar{ display: flex; flex-direction: column; gap: 4px; flex: 1; }
.to-cubuk   { display: block; height: 4px; border-radius: 2px; width: 100%; }
.to-kisa    { width: 55%; }
.to-dugme   { margin-top: 2px; height: 10px; width: 45%; border-radius: 5px; background: #6366f1; align-self: flex-end; }
.tema-kart--light .to-kart   { background: #ffffff; border: 1px solid #e0e7ff; }
.tema-kart--light .to-avatar { background: #c7d2fe; }
.tema-kart--light .to-cubuk  { background: #cbd5e1; }
.tema-kart--dark  .to-kart   { background: #1a1a1a; border: 1px solid #2a2a2a; }
.tema-kart--dark  .to-avatar { background: #3f3f46; }
.tema-kart--dark  .to-cubuk  { background: #3f3f46; }
.tema-kart-alt   { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; }
.tema-kart-ad    { font-size: 14px; font-weight: 700; }
.tema-kart-isaret{
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border);
    box-sizing: border-box;
}
button.tema-kart.active .tema-kart-isaret {
    border: 5px solid var(--accent);
    background: #fff;
}