/*
 * public/css/panel-ozel.css
 *
 * Faz 3 Görev 3.5 düzeltme turu — teşhis: bu projede bir Vite/npm derleme
 * adımı YOK (bkz. bin/tt, sadece rsync yapar), bu yüzden Filament'in kendi
 * CSS'i (public/css/filament/filament/app.css) yalnızca FİLAMENT'İN KENDİ
 * paket blade'lerini tarayarak üretildi — App\ altındaki blade dosyalarının
 * kullandığı ham Tailwind sınıfları (flex, grid, gap-4, rounded-xl,
 * min-w-[180px] vb.) o CSS'te HİÇ YOK. Sonuç: `<x-filament::section>` gibi
 * gerçek Filament bileşenleri çalışıyor (kendi `fi-*` sınıfları gerçek CSS
 * karşılığına sahip), ama bunların üzerine/içine elle yazılmış Tailwind
 * DÜZEN sınıfları (flex/grid/gap/ızgara) hiçbir şey YAPMIYOR — kart alt alta
 * düz bir liste gibi çöküyor.
 *
 * Çözüm: Tailwind'i BURADA yeniden inşa etmiyoruz (hem kırılgan hem gereksiz
 * geniş). Onun yerine etkilenen görünümlerdeki (bkz. dosya listesi altta)
 * ham Tailwind düzen sınıfları KENDİ, küçük, elle yazılmış sınıflarımızla
 * (`tt-` öneki) değiştirildi; bu dosya da o sınıfların GERÇEK CSS
 * karşılığını taşıyor. Derleme YOK — düz bir statik dosya, bin/tt'nin rsync
 * adımıyla public/ altında zaten giden diğer her şey gibi gidiyor
 * (public/css/filament/filament/app.css'in de AYNI şekilde git'e committed
 * bir statik dosya olması gibi).
 *
 * Renkler Tailwind hex'i ELLE KOPYALANMADI — Filament'in her istekte
 * <head>'e enjekte ettiği --gray-N, --primary-N ve --color-white CSS
 * değişkenleri kullanılıyor (bkz. AdminPanelProvider/SaglayiciPanelProvider
 * ->colors() — ikisi de AYNI #001553 ailesini kaydediyor). Böylece panel
 * renk paleti ileride değişirse bu dosya OTOMATİK uyum sağlar.
 *
 * Her iki panel de ->darkMode(true, isForced: true) — kullanıcı asla açık
 * temaya geçemiyor, bu yüzden burada dark: varyantı YOK, doğrudan koyu
 * palet için yazıldı.
 *
 * ⚠️ Marka kırmızısı (#FF2800, --primary-*) burada YARI SAYDAM dolgu olarak
 * KULLANILMADI — bu zeminde çamurlaştığı zaten bir kez yaşandı (giriş
 * ekranı). Vurgu yalnızca kenarlık/metin rengi olarak, hep OPAK.
 *
 * Nerede kullanılıyor (panel renderHook ile <head>'e ekleniyor, bkz. her
 * iki PanelProvider):
 *   - resources/views/filament/saglayici/ilan-panosu.blade.php
 *   - resources/views/filament/saglayici/ilan-karti.blade.php        (tek kart, K1'de ayrıldı)
 *   - resources/views/filament/saglayici/gosterge.blade.php
 *   - resources/views/filament/widgets/talep-mod-dagilimi.blade.php   (admin panosu)
 *   - resources/views/filament/widgets/son-kontor-hareketleri.blade.php (admin panosu)
 *   - resources/views/filament/pages/pazaryeri-ayarlari-page.blade.php  (admin, ayrı sayfa)
 *
 * Yeni bir görünüm bu sınıfları kullanmak isterse: burada YOKSA, önce burada
 * TANIMLANMALI — bu dosya Tailwind'in yerini TAM almıyor, yalnızca şu an
 * kullanılan düzen kalıplarını kapsıyor.
 */

/* ————————————————————— Ortak: ikincil/vurgulu metin ————————————————————— */

/* ————————————————————————————————————————————————————————————————
 * Anlamsal renk jetonları — AÇIK tema (Göktuğ kararı: "panel içleri çok
 * mavi duruyor, beyaz olsun arkası").
 *
 * Panel gövdesi BEYAZ, marka mavisi kenar yapıda (yan menü + üst çubuk) ve
 * tipografide yaşıyor. Kural şu: mavi ARTIK ZEMİN DEĞİL, VURGU.
 *
 * Renkler doğrudan hex — Filament'in gri rampası açık temada zemin için
 * kullanılıyor ve o rampaya bağlanmak kart yüzeyini zeminle aynı tona
 * düşürüyordu. Marka değerleri burada TEK yerde duruyor; tema tekrar
 * değişirse yalnızca bu blok düzenlenir.
 * ———————————————————————————————————————————————————————————————— */

:root {
    --tt-yuzey: #FFFFFF;
    --tt-zemin: #F4F7FC;
    --tt-cizgi: #E3E9F4;
    --tt-cizgi-koyu: #CBD6EA;
    --tt-metin: #001553;
    --tt-metin-2: #47608F;
    --tt-metin-3: #6B84AC;
    --tt-vurgu: #FF2800;
    --tt-basari: #0F7B4F;
    --tt-lacivert: #001553;
    --tt-lacivert-2: #0A2468;
}

.tt-metin-ikincil {
    font-size: 0.875rem;
    color: var(--tt-metin-2);
}

.tt-metin-vurgu {
    font-weight: 500;
    color: var(--tt-metin);
}

/* İkincil metin ama üstünde biraz boşluk isteyen tek satırlık notlar için
   (ör. "son güncelleyen: ..."). */
.tt-metin-ikincil--ust-bosluklu {
    font-size: 0.875rem;
    color: var(--tt-metin-2);
    margin-top: 1rem;
}

/* ————————————————————————————— Ortak: tablo ————————————————————————————— */

.tt-tablo-sarici {
    overflow-x: auto;
}

.tt-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tt-tablo thead tr {
    text-align: left;
    color: var(--tt-metin-2);
}

.tt-tablo th {
    padding: 0.5rem 1rem 0.5rem 0;
    font-weight: 500;
}

.tt-tablo td {
    padding: 0.5rem 1rem 0.5rem 0;
}

.tt-tablo tbody tr {
    border-top: 1px solid var(--tt-cizgi);
}

/* Tarih hücreleri satır kırmasın — eskiden whitespace-nowrap. */
.tt-tablo-tarih {
    white-space: nowrap;
}

/* ————————————————————————— Ortak: boş durum kutusu ————————————————————————— */

.tt-bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-block: 2rem;
    text-align: center;
}

.tt-bos-durum-ikon {
    height: 2.5rem;
    width: 2.5rem;
    color: var(--tt-metin-3);
}

.tt-bos-durum-kategoriler {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ————————————————————— İlan panosu: filtre çubuğu ————————————————————— */

.tt-filtre-govde {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.tt-filtre-alan {
    min-width: 180px;
    flex: 1 1 0%;
}

/* Sıralama seçeneği en uzun etiketi taşıyor ("Yükleme: en yakın önce");
   yerel <select> metni kırpar, bu yüzden biraz daha geniş bir taban. */
.tt-filtre-alan-sirala {
    min-width: 210px;
}

.tt-filtre-etiket {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tt-metin-2);
}

.tt-filtre-secim {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--tt-cizgi-koyu);
    background-color: var(--tt-yuzey);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--tt-metin);
}

.tt-filtre-secim:focus {
    outline: none;
    border-color: var(--tt-vurgu);
    box-shadow: 0 0 0 1px var(--tt-vurgu);
}

.tt-filtre-temizle {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tt-vurgu);
    cursor: pointer;
}

.tt-filtre-temizle:hover {
    text-decoration: underline;
}

.tt-filtre-sayac {
    margin-left: auto;
    align-self: center;
    font-size: 0.75rem;
    color: var(--tt-metin-2);
    font-variant-numeric: tabular-nums;
}

/* ————————————————————— İlan panosu: kart ızgarası ————————————————————— */

.tt-ilan-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 64rem) {
    .tt-ilan-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tt-ilan-karti {
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
    /* Kart bir sütun: gövde esner, alt şerit ("x/5 kez açıldı · Aç") her
       kartta AYNI hizaya oturur. Yan yana iki kartın altlıkları farklı
       yükseklikte kalıyordu (ölçüldü, 18 Eyl). */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tt-ilan-govde {
    padding: 1.25rem;
    flex: 1 1 auto;
}

@media (min-width: 40rem) {
    .tt-ilan-govde {
        padding: 1.5rem;
    }
}

.tt-ilan-baslik {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--tt-metin);
}

.tt-ilan-meta {
    margin-top: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--tt-metin-2);
}

/* Planlama şeridi — kartta güzergahtan sonra "ne zaman". Lacivert
   zeminli yumuşak bir bant: sayısal tarih öne, "12 gün sonra" ipucu
   ikincil. Sağlayıcı panoyu taradığında yakın işler bu bantla ayrışır. */
.tt-ilan-plan {
    margin-top: 0.625rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.375rem 0.625rem 0.375rem 0.5rem;
    border-radius: 0.5rem;
    background: #EEF2FA;
    color: var(--tt-lacivert, #001553);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.tt-ilan-plan svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: 0.8;
}

.tt-ilan-plan-tarih {
    font-weight: 600;
}

.tt-ilan-plan-ipucu {
    color: var(--tt-metin-2);
}

.tt-ilan-istatistikler {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
    font-size: 0.875rem;
}

.tt-ilan-istatistik {
    min-width: 92px;
}

.tt-ilan-istatistik-etiket {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tt-metin-3);
}

.tt-ilan-istatistik-deger {
    margin-top: 0.125rem;
    font-weight: 600;
    color: var(--tt-metin);
}

.tt-ilan-istatistik-deger.tt-sayisal {
    font-variant-numeric: tabular-nums;
}

.tt-ilan-yerlesim {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
}

/* Güzergah haritası kabı — ilan kartındaki iki nokta önizlemesi.
   ⚠️ Sabit piksel genişlik YOK: bileşen kendi içinde viewBox +
   width:100% kullanıyor, buradaki kural yalnızca kartın içine
   hapsediyor (mobilde taşma). */
.tt-ilan-guzergah {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
    max-width: 100%;
}

/* Faz 3 Görev 4 — "Aç" sonrası iletişim bilgisi bloğu (bkz.
   ilan-panosu.blade.php'nin $iletisim notu). `.tt-ilan-istatistikler`
   ailesiyle AYNI görsel dil (üst kenarlık + etiket/değer çifti), ama BİLEREK
   AYRI sınıf adları: bu blok koşullu (yalnızca açılmış kartlarda) render
   ediliyor, istatistik şeridiyle KARIŞTIRILMAMALI. */
.tt-iletisim-blok {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
}

.tt-iletisim-baslik {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tt-basari);
}

.tt-iletisim-baslik-ikon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
}

.tt-iletisim-satirlar {
    margin-top: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.tt-iletisim-satir {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.tt-iletisim-satir > dt {
    flex-shrink: 0;
    min-width: 80px;
}

/* Faz 3 Görev 5 — teklif verme bloğu (bkz. ilan-panosu.blade.php'nin
   $teklifim notu). `.tt-iletisim-blok` İLE AYNI görsel dil (üst kenarlık +
   dl/dt/dd satırları, o sınıfın kendisi `.tt-iletisim-satirlar`/
   `.tt-iletisim-satir` İÇİNDE YENİDEN KULLANILIYOR) — yalnızca kapsayıcı
   BİLEREK AYRI bir sınıf: bu blok, iletişim bloğunun HEMEN ALTINDA, kendi
   üst kenarlığıyla ikinci bir bölüm olarak render ediliyor. */
.tt-teklif-blok {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
}

.tt-teklif-eylemler {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Faz 3 Görev 4+5 düzeltme turu (K1) — "Açtıklarım" bölümündeki kapalı/
   seçilmiş kalemde NEDEN teklif verilemediğini söyleyen not (bkz.
   ilan-karti.blade.php `$kapaliSebep`). `.tt-metin-ikincil`den BİLEREK
   ayrı: bu bir eylem KISITININ gerekçesi, sıradan bir açıklama satırı
   değil — sol kenarlıkla ayırt ediliyor. Marka kırmızısı burada YARI
   SAYDAM DOLGU olarak KULLANILMIYOR (bkz. dosya başındaki uyarı), yalnızca
   opak bir kenarlık. */
.tt-teklif-kapali-not {
    margin-top: 0.75rem;
    border-left: 2px solid var(--tt-cizgi-koyu);
    padding-left: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.35rem;
    color: var(--tt-metin);
}

/* Kart üstündeki rozet sırası (kategori + — "Açtıklarım" bölümünde —
   kalemin durumu). Görev 3.5'te tek bir rozet vardı ve sarmalayıcıya
   gerek yoktu; K1 ikinci bir rozet ekliyor. */
.tt-ilan-rozetler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.tt-ilan-alt-serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--tt-cizgi);
    background-color: var(--tt-zemin);
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    color: var(--tt-metin-2);
}

.tt-acilma-sayaci {
    font-variant-numeric: tabular-nums;
}

/* ————————————————————————————— Gösterge sayfası ————————————————————————————— */

.tt-ozet-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 40rem) {
    .tt-ozet-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tt-ozet-satir {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tt-ozet-ikon {
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    color: var(--tt-metin-3);
}

.tt-ozet-baslik {
    font-size: 0.875rem;
    color: var(--tt-metin-2);
}

.tt-ozet-deger {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tt-metin);
}

/* ——————————————— Admin panosu: "moda göre talep dağılımı" widget'ı ——————————————— */

.tt-dagilim-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tt-dagilim-satir-ust {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.tt-dagilim-bar-arka {
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
}

.tt-dagilim-bar-dolgu {
    height: 100%;
    border-radius: 9999px;
}

/* ————————————————— Admin: Pazaryeri Ayarları sayfası — "şu anki değerler" ————————————————— */

.tt-ayarlar-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 40rem) {
    .tt-ayarlar-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .tt-ayarlar-izgara {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tt-ayarlar-karti {
    border-radius: 0.5rem;
    border: 1px solid var(--tt-cizgi-koyu);
    padding: 1rem;
}

.tt-ayarlar-deger {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tt-metin);
}

.tt-ayarlar-rozet {
    margin-top: 0.5rem;
}


/* ————————————————————————————————————————————————————————————————
 * Filament kabuğu — "mavi ile beyazı harmanla" (Göktuğ).
 *
 * Çalışma alanı beyaz; marka mavisi yan menü ve üst çubukta duruyor.
 * Gerekçe: paneli tamamen beyaza çevirmek onu jenerik bir yönetim
 * arayüzüne dönüştürüyor ve pazarlama sitesiyle (lacivert) bağı
 * koparıyordu. Kenar yapı lacivert kalınca marka sürekliliği korunuyor,
 * içerik ise nefes alıyor.
 *
 * ⚠️ Bu bloktaki seçiciler Filament'in KENDİ sınıflarına dokunuyor
 * (fi-sidebar, fi-topbar, fi-main-ctn). Filament ana sürüm yükseltmesinde
 * bu isimler değişebilir — panel garipleşirse İLK BURAYA bak.
 * ———————————————————————————————————————————————————————————————— */

.fi-main-ctn {
    background-color: var(--tt-zemin);
}

/* ⚠️ Göktuğ (18 Eyl 2026): "panellerin UI'larını tam bir uygulama
 * deneyimine getir." Kenar/üst çubuk artık BEYAZ — hizmet alan paneli
 * (hesabim-kabuk.css) ve sitenin beyaz kâğıt dünyasıyla aynı dil.
 * Lacivert kabuk, site lacivertken marka sürekliliği içindi; site
 * beyaza geçince iki panel iki ayrı ürün gibi durmaya başlamıştı. */
.fi-topbar,
.fi-sidebar {
    background-color: var(--tt-yuzey);
    border-color: var(--tt-cizgi);
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-group-label {
    color: var(--tt-metin-2);
}

.fi-sidebar .fi-sidebar-item-btn {
    border-radius: 10px;
}

.fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: var(--tt-zemin);
}

.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--tt-metin);
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--tt-metin);
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
}

/* Sayfa başlığı ve bölüm kartları açık zeminde okunur kalsın. */
.fi-header-heading {
    color: var(--tt-metin);
}

.fi-section {
    background-color: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
}

.fi-section-header-heading {
    color: var(--tt-metin);
}

.fi-section-header-description {
    color: var(--tt-metin-2);
}


/* Beyaz üst çubukta logo ve ikonlar lacivert. */
.fi-topbar .fi-logo,
.fi-topbar .fi-icon-btn {
    color: var(--tt-metin);
}

/* Etkin madde: açık zemin + solda ince kırmızı işaret — hesabim-kabuk.css
 * ile birebir aynı. Kırmızı EYLEME ayrılı; navigasyon bağırmaz. */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #EEF2FA;
    box-shadow: inset 3px 0 0 0 var(--tt-vurgu);
}

/* 🔴 Filament 5 AÇIK temada birincil düğmeyi `fi-bg-color-400` ile boyuyor —
 * #FF2800'ün açık tonu, beyaz üstünde soluk somon gibi duruyor ve metni
 * koyu yazıyor. Marka kırmızısı DOLU olmalı: bu, sağlayıcının para harcayan
 * eylemi ("Aç") ve asıl eylemi ("Teklif ver"). Yalnızca DOLU birincil
 * düğmeler hedefleniyor — gri/ikincil düğmelere dokunulmuyor. */
.fi-btn.fi-color-primary {
    background-color: var(--tt-vurgu);
    color: #FFFFFF;
}

.fi-btn.fi-color-primary:hover {
    background-color: #DB2200;
}

.fi-btn.fi-color-primary .fi-icon {
    color: #FFFFFF;
}

/* Kategori rozetleri bilgi etiketidir, uyarı değil — hepsi kırmızı tonda
 * olunca panoda sürekli bir alarm hissi veriyordu. Lacivert-kırıklı nötr. */
.tt-ilan-rozetler .fi-badge {
    background-color: #EDF1F9;
    color: #2C4986;
    border: 1px solid var(--tt-cizgi);
}


/* ————————————————————————————————————————————————————————————————
 * Faz 3 — profil ve puan işi.
 *
 * ⚠️ Bu blok İKİ yüzeyde birden kullanılıyor: `/saglayici` paneli
 * (Filament) VE `/hesabim` (sade Blade, kendi gömülü `--ink/--panel/
 * --paper` stiliyle). `/hesabim` bu dosyayı ayrıca `<link>`liyor —
 * gerekçe: "firma kimlik kartı iki yüzeyde de görünecek; iki kopya
 * yazılırsa sessizce sapar ve kişisel veri kapısı yalnızca birinde
 * kalır" (ilan kartının kendi başında anlattığı ders). Ortak partial
 * `resources/views/ortak/firma-kimlik-karti.blade.php`.
 *
 * `--tt-*` jetonları `/hesabim`'ın kendi `--ink/--panel/--paper`
 * değişkenleriyle ÇAKIŞMAZ (farklı adlar) — iki tema yan yana yaşıyor.
 * ———————————————————————————————————————————————————————————————— */

/* ————————————————— Profil görseli / baş harf yer tutucusu ————————————————— */

.tt-profil-gorsel,
.tt-profil-basharf {
    /* ⚠️ ÖLÇÜ ZORUNLU: ölçüsüz bir görsel/SVG konteyner genişliğine
       yayılıp ekranı kaplıyor — bir kez oldu. */
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 14px;
    display: block;
    object-fit: contain;
    background-color: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
}

.tt-profil-basharf {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--tt-metin);
    background-color: #EDF1F9;
}

.tt-profil-gorsel--kucuk,
.tt-profil-basharf--kucuk {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    font-size: 14px;
}

/* ————————————————— Firma kimlik kartı (ortak partial) ————————————————— */

.tt-firma-karti {
    background-color: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
    border-radius: 12px;
    padding: 16px 18px;
}

.tt-firma-ust {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tt-firma-kimlik {
    min-width: 0;
}

.tt-firma-unvan {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tt-metin);
    margin: 0;
}

.tt-firma-meta {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tt-metin-2);
}

.tt-firma-hakkinda {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--tt-metin-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tt-firma-bolum {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tt-cizgi);
}

.tt-firma-bolum-baslik {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tt-metin-3);
    margin: 0 0 8px;
}

/* Etiket listesi (hizmet kategorileri) — emoji değil düz etiket. */
.tt-etiket-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-etiket {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #2C4986;
    background-color: #EDF1F9;
    border: 1px solid var(--tt-cizgi);
}

/* Doğrulama rozeti — "Belgeleri incelendi, ... onaylandı" (Ç-5). */
.tt-dogrulama-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-basari);
    background-color: #EAF6F0;
    border: 1px solid #BFE0CE;
}

.tt-dogrulama-rozeti svg {
    /* ⚠️ Satır içi SVG'ye ÖLÇÜ. */
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* ————————————————— Gerçek sayaçlar (A5) ————————————————— */

.tt-sayac-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 40rem) {
    .tt-sayac-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tt-sayac {
    border: 1px solid var(--tt-cizgi);
    border-radius: 10px;
    padding: 10px 12px;
    background-color: var(--tt-zemin);
}

.tt-sayac-deger {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--tt-metin);
    font-variant-numeric: tabular-nums;
}

.tt-sayac-etiket {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-metin-2);
    margin-top: 2px;
}

/* Her sayacın altında kaynağını açıklayan tek satırlık ipucu. */
.tt-sayac-ipucu {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: var(--tt-metin-3);
    margin-top: 4px;
}

/* ————————————————— Yıldız / puan ————————————————— */

/* 🔴 Bu sınıflar BUGÜN hiçbir ekranda RENDER EDİLMİYOR: platformda
   tamamlanmış tek bir iş yok, dolayısıyla gösterilecek tek bir dürüst
   puan da yok (bkz. App\Services\Degerlendirmeler::gosterimAcik()).
   Mekanizmanın parçası olarak burada duruyorlar. */
.tt-yildizlar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.tt-yildiz {
    /* ⚠️ ÖLÇÜ ZORUNLU — ölçüsüz satır içi SVG konteyner genişliğine
       yayılır ve ekranı kaplar (bu projede bir kez oldu). */
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--tt-cizgi-koyu);
}

.tt-yildiz-dolu {
    color: #E8A33D;
}

.tt-puan-metin {
    font-size: 13px;
    font-weight: 700;
    color: var(--tt-metin);
    font-variant-numeric: tabular-nums;
}

/* 🔴 Ortalamanın yanında değerlendirme SAYISI HER ZAMAN görünür. */
.tt-puan-adet {
    font-size: 12px;
    font-weight: 500;
    color: var(--tt-metin-2);
}

/* Yorum metni — HAM saklanır, çıktıda `{{ }}` ile kaçırılır; satır sonu
   `nl2br` ile DEĞİL burada, CSS ile gösterilir. */
.tt-yorum-metni {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--tt-metin);
    margin: 6px 0 0;
}

.tt-yorum-satiri {
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 12px;
    margin-top: 12px;
}

.tt-yorum-yazar {
    font-size: 12px;
    color: var(--tt-metin-3);
}

.tt-saglayici-cevabi {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--tt-cizgi-koyu);
    background-color: var(--tt-zemin);
    border-radius: 0 8px 8px 0;
}

/* 🔴 Boş durum — metin FİRMAYA değil PLATFORMA ait ve TÜM kartlarda
   BİREBİR AYNI görünmeli, yoksa bir firma diğerinden dezavantajlı okunur. */
.tt-bos-not {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tt-metin-2);
}

.tt-bos-not + .tt-bos-not {
    margin-top: 4px;
    color: var(--tt-metin-3);
}

/* ————————————————— Kontör hareket dökümü (§13) ————————————————— */

.tt-tutar-arti {
    color: var(--tt-basari);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tt-tutar-eksi {
    color: var(--tt-metin);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tt-tablo-ikincil {
    display: block;
    font-size: 11.5px;
    color: var(--tt-metin-3);
    margin-top: 2px;
}

.tt-sayfalama {
    margin-top: 14px;
}

/* 🔴 "Kontör Yükle" düğmesi YOK — yükleme bugün yönetici tarafından elle
   yapılıyor, ödeme entegrasyonu yok. Yerine dürüst bilgi kutusu. */
.tt-bilgi-kutusu {
    /* Sol kenardaki kalın kırmızı şerit kaldırıldı: (a) dekoratif bir
       vurgu, taşıdığı bilgi yok; (b) kırmızı bu üründe HATA ve BİRİNCİL
       EYLEM rengi — bilgilendirme kutusuna konunca yanlış sinyal veriyor,
       kullanıcı bir sorun olduğunu sanıyor. Kutu zaten kenarlık ve zemin
       tonuyla ayrışıyor. */
    border: 1px solid var(--tt-cizgi);
    border-radius: 8px;
    padding: 13px 16px;
    background-color: var(--tt-zemin);
    font-size: 13px;
    line-height: 1.65;
    color: var(--tt-metin-2);
}

.tt-bilgi-kutusu b {
    display: block;
    color: var(--tt-metin);
    margin-bottom: 4px;
}

.tt-sayfalama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.tt-sayfa-baglantisi {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--tt-cizgi-koyu);
    background-color: var(--tt-yuzey);
    color: var(--tt-metin);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tt-sayfa-baglantisi:hover {
    border-color: var(--tt-metin-3);
}

.tt-sayfa-bilgi {
    font-size: 12.5px;
    color: var(--tt-metin-2);
}

/* ————————————————————— 🔴 Faz 3 pazaryeri: SÖZLEŞME —————————————————————
   Sağlayıcı panosunda, KAZANILAN kalemin kartında görünen sözleşme bloğu
   (bkz. ilan-karti.blade.php ve sozlesme-yukleme-brief.md). `.tt-teklif-blok`
   ile AYNI görsel dil ve AYNI yapı: iletişim/teklif bloklarının HEMEN
   ALTINDA, kendi üst kenarlığıyla ÜÇÜNCÜ bir bölüm.

   ⚠️ Satır içi/bileşen ikonlarına ÖLÇÜ VERİLDİ (`.tt-sozlesme-baslik-ikon`)
   — bu projede bir kez ölçüsüz bir ikon ekranı kaplamıştı.
   ⚠️ Mobilde yan yana iki panel YOK: liste ve form tek sütun; form satırı
   yalnızca dosya seçici + düğme ve o da sarıyor. */
.tt-sozlesme-blok {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
}

.tt-sozlesme-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tt-metin);
    margin-bottom: 0.5rem;
}

.tt-sozlesme-baslik-ikon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--tt-metin-2);
}

.tt-sozlesme-listesi {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tt-sozlesme-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    border: 1px solid var(--tt-cizgi);
    border-radius: 0.5rem;
    background-color: var(--tt-yuzey);
    padding: 0.5rem 0.75rem;
}

.tt-sozlesme-satir .tt-metin-ikincil {
    flex: 1 1 auto;
}

.tt-sozlesme-indir {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tt-cizgi-koyu);
    border-radius: 0.5rem;
    padding: 0.3125rem 0.6875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tt-metin);
    text-decoration: none;
    white-space: nowrap;
}

.tt-sozlesme-indir:hover {
    border-color: var(--tt-metin-3);
}

.tt-sozlesme-etiket {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tt-metin);
    margin-bottom: 0.4375rem;
}

.tt-sozlesme-formu-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.tt-sozlesme-dosya {
    flex: 1 1 13.75rem;
    min-width: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--tt-metin-2);
    border: 1px solid var(--tt-cizgi-koyu);
    border-radius: 0.5rem;
    background-color: var(--tt-yuzey);
    padding: 0.5rem 0.625rem;
}

.tt-sozlesme-not {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--tt-metin-2);
}

/* Yükleme reddedildiğinde panonun üstünde basılan uyarı. Marka kırmızısı
   YARI SAYDAM DOLGU olarak KULLANILMIYOR (bu zeminde çamurlaşıyor, bkz.
   dosya başı notu) — yalnızca metin rengi ve opak bir kenarlık. */
.tt-sozlesme-hata {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--tt-vurgu);
}

/* ————————————————————————————————————————————————————————————————
 * 🔴 Faz 3 Görev 7 — UYGULAMA İÇİ BİLDİRİM (bkz. bildirim-brief.md).
 *
 * Yalnızca ALICI tarafı (`/hesabim/bildirimler` ve `/hesabim` üst
 * çubuğundaki rozet) — SAĞLAYICI tarafı Filament'in HAZIR zilini
 * kullanıyor ve onun kendi CSS'i var, buraya TEK satır bile yazılmadı.
 *
 * `/hesabim` ailesi bu dosyayı zaten <link>'liyor (bkz. hesabim/duzen ve
 * hesabim/index blade'lerinin <head>'i), yani üst çubuk rozeti iki
 * yüzeyde de AYNI tanımdan geliyor — markup'ı iki yere kopyalayıp birini
 * güncellememe hatası (bu projede ilan kartında bir kez yaşandı) burada
 * mümkün değil.
 * ———————————————————————————————————————————————————————————————— */

/* Üst çubuktaki okunmamış sayacı. Marka kırmızısı OPAK dolgu olarak
   (yarı saydam DEĞİL — bkz. dosya başı notu). */
.tt-bildirim-rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background-color: var(--tt-vurgu);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.tt-bildirim-listesi {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tt-bildirim-satir {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--tt-cizgi);
    border-radius: 0.625rem;
    background-color: var(--tt-yuzey);
}

/* Okunmamış satır. Sol kenarda kalın bir vurgu şeridi vardı; tasarım
   denetimi onu haklı olarak "yapay üretilmiş arayüz izi" diye işaretledi.
   ⚠️ Ama bu şerit DEKORATİF DEĞİLDİ: satır bazında okunmamışlığın TEK
   görsel işaretiydi (nav'daki rozet yalnızca TOPLAM sayıyı gösterir).
   Silmek bilgi kaybı olurdu — o yüzden anlam korunup biçim değişti:
   hafif vurgu tonlu zemin + tam çerçevede belirginleşen kenarlık. */
.tt-bildirim-satir-okunmamis {
    background-color: #FFF6F3;
    border-color: rgba(255, 40, 0, 0.28);
}

.tt-bildirim-ust {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

/* 🔴 Satır içi SVG'ye ÖLÇÜ — verilmeyince ikon ekranı kaplıyor. */
.tt-bildirim-ikon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    margin-top: 0.125rem;
    color: var(--tt-metin-2);
}

.tt-bildirim-baslik {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--tt-metin);
}

.tt-bildirim-govde {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--tt-metin-2);
}

.tt-bildirim-tarih {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tt-metin-3);
}

/* Mobilde yan yana iki panel YOK — eylem satırı kendi satırında sarar. */
.tt-bildirim-eylemler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.tt-bildirim-dugme {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tt-metin-2);
    background: none;
    border: 1px solid var(--tt-cizgi-koyu);
    border-radius: 0.375rem;
    padding: 0.3125rem 0.625rem;
    cursor: pointer;
}

.tt-bildirim-dugme:hover {
    color: var(--tt-metin);
    background-color: var(--tt-zemin);
}

.tt-bildirim-okundu-etiket {
    font-size: 0.75rem;
    color: var(--tt-metin-3);
}


/* ————————————————————————————————————————————————————————————————
 * Gösterge şeridi (sağlayıcı paneli) — hesabim-kabuk.css'teki `.gosterge`
 * ile AYNI dil: beyaz kart, ikonlu etiket, büyük sayı, kısa not.
 * İki panel tek uygulama gibi dursun.
 * ———————————————————————————————————————————————————————————————— */
.tt-gosterge {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
@media (max-width: 1100px) { .tt-gosterge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tt-gosterge { grid-template-columns: 1fr; } }

.tt-gosterge-kart {
    display: flex;
    flex-direction: column;
    background: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
    border-radius: 14px;
    padding: 16px 18px;
    color: var(--tt-metin);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 21, 83, .04);
    transition: border-color .15s, box-shadow .15s;
}
a.tt-gosterge-kart:hover {
    border-color: #C9D4EA;
    box-shadow: 0 8px 20px -14px rgba(0, 21, 83, .35);
}
/* Birincil kart: sağlayıcının işi burada başlar. */
.tt-gosterge-birincil { border-color: rgba(255, 40, 0, .35); }
.tt-gosterge-etiket {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--tt-metin-2); letter-spacing: .02em;
}
.tt-gosterge-ikon { width: 16px; height: 16px; color: var(--tt-vurgu); }
.tt-gosterge-deger {
    margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.tt-gosterge-deger small { font-size: 13px; font-weight: 500; color: var(--tt-metin-2); margin-left: 4px; }
.tt-gosterge-not { margin-top: 6px; font-size: 12px; color: var(--tt-metin-2); }

/* ————————————————————————————————————————————————————————————————
 * İlan panosu — liste satırı ve ilan detayı (16 Eki 2026 görüşmesi).
 * "Her satıra bir ilan" → .tt-ilan-liste/.tt-ilan-satir (tek sütun).
 * "İş detayı UI düzeltmesi, renkli, kırmızılı" → .tt-ilan-detay: lacivert
 * üst bant + kırmızı işaret çizgisi, kırmızı etiketli detay ızgarası.
 * Kırmızı yine yalnız OPAK vurgu (kenar/metin); lacivert bant üzerindeki
 * yarı saydam katmanlar beyazdır, kırmızı değil (dosya başı uyarısı).
 * ———————————————————————————————————————————————————————————————— */

.tt-ilan-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tt-ilan-satir {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    background-color: var(--tt-yuzey);
    border: 1px solid var(--tt-cizgi);
    border-left: 3px solid var(--tt-cizgi-koyu);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tt-ilan-satir:hover {
    border-left-color: var(--tt-vurgu);
    box-shadow: 0 6px 18px -12px rgba(0, 21, 83, .35);
}

.tt-ilan-satir-acilmis {
    border-left-color: var(--tt-basari);
}

@media (min-width: 64rem) {
    .tt-ilan-satir {
        grid-template-columns: minmax(220px, 1.1fr) 2fr auto;
        align-items: center;
        gap: 1.5rem;
        padding: 1.125rem 1.375rem;
    }
}

.tt-ilan-satir-baslik {
    margin-top: 0.375rem;
    font-size: 1.125rem;
}

.tt-ilan-satir-link {
    color: inherit;
    text-decoration: none;
}

/* Satırın tamamını tıklanabilir yapan katman; eylem düğmeleri üstte. */
.tt-ilan-satir-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.tt-ilan-satir-link:focus-visible {
    outline: none;
}

.tt-ilan-satir-link:focus-visible::after {
    box-shadow: 0 0 0 2px var(--tt-vurgu);
}

.tt-ilan-satir-ozet {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    font-size: 0.875rem;
}

.tt-ilan-satir-ozet .tt-ilan-istatistik {
    min-width: 0;
}

.tt-ilan-satir-eylem {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--tt-metin-2);
}

@media (min-width: 64rem) {
    .tt-ilan-satir-eylem {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
}

.tt-ilan-satir-dugmeler {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tt-ilan-satir-detay {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tt-cizgi-koyu);
    background: var(--tt-yuzey);
    color: var(--tt-metin);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.tt-ilan-satir-detay:hover {
    border-color: var(--tt-metin);
}

/* —— İlan detayı —— */

.tt-detay-geri {
    margin-bottom: -0.25rem;
}

.tt-detay-geri-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tt-metin-2);
    text-decoration: none;
}

.tt-detay-geri-link svg {
    width: 16px;
    height: 16px;
}

.tt-detay-geri-link:hover {
    color: var(--tt-vurgu);
}

.tt-ilan-detay {
    height: auto;
}

.tt-detay-bant {
    position: relative;
    padding: 1.25rem 1.25rem 1.375rem;
    background: var(--tt-lacivert);
    border-top: 4px solid var(--tt-vurgu);
    color: #FFFFFF;
}

@media (min-width: 40rem) {
    .tt-detay-bant {
        padding: 1.5rem 1.75rem 1.625rem;
    }
}

.tt-detay-rozet {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
}

.tt-detay-rozet-durum {
    border-color: var(--tt-vurgu);
    background: var(--tt-vurgu);
}

.tt-detay-rozet-acik {
    border-color: #2FB37A;
    background: #0F7B4F;
}

.tt-detay-baslik {
    margin-top: 0.75rem;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

@media (min-width: 40rem) {
    .tt-detay-baslik {
        font-size: 2rem;
    }
}

.tt-detay-meta {
    color: #B9C6E2;
}

.tt-detay-plan {
    margin-top: 0.875rem;
    background: rgba(255, 255, 255, .1);
    border-left: 3px solid var(--tt-vurgu);
    color: #FFFFFF;
    font-size: 0.875rem;
}

.tt-detay-plan .tt-ilan-plan-ipucu {
    color: #B9C6E2;
}

.tt-detay-eylem {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 0.875rem;
    color: #B9C6E2;
}

.tt-detay-bolum-baslik {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-vurgu);
}

.tt-detay-istatistikler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    border-top: 0;
    padding-top: 0;
}

.tt-detay-istatistikler .tt-ilan-istatistik {
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--tt-zemin);
    border-left: 3px solid var(--tt-vurgu);
}

.tt-detay-istatistikler .tt-ilan-istatistik-etiket {
    color: var(--tt-vurgu);
    font-weight: 700;
}

.tt-detay-istatistikler .tt-ilan-istatistik-deger {
    font-size: 0.9375rem;
}

.tt-detay-ikili {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
}

@media (min-width: 64rem) {
    /* auto-fit: harita yoksa (elle yazılmış adres) yerleşim tek başına
       tüm genişliği alır, yarım sütunda boşluk bırakmaz. */
    .tt-detay-ikili {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        align-items: start;
    }
}

.tt-detay-ikili > .tt-ilan-yerlesim:only-child {
    max-width: 760px;
}

/* —— Teklif modalı: iş özeti —— */

.tt-teklif-ozet-rota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tt-metin);
}

.tt-teklif-ozet-mod {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--tt-vurgu);
    color: var(--tt-vurgu);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tt-teklif-ozet-satirlar {
    margin-top: 0.75rem;
}

/* Rota koşulları (hava + kur) kabı — içerik rota-kosullari.js'ten (rk-). */
.tt-ilan-kosullar {
    margin-top: 1rem;
    border-top: 1px solid var(--tt-cizgi);
    padding-top: 1rem;
}