@charset "UTF-8";

/* ==========================================================================
   TR AVUKAT BUL • trv.css
   Okunabilir tasarım sistemi — _travukatbul_spec/assets/ui.css dosyasının
   birebir, biçimlendirilmiş ve gruplanmış yeniden yazımı + eksik bileşenler.

   KAYNAK (tek gerçek):
     • _travukatbul_spec/assets/ui.css              (4 satır, minified)
     • _travukatbul_spec/mockups/html/*.html        (92 sayfa, sınıf kanıtı)
     • _travukatbul_spec/docs/BRAND.md
     • _travukatbul_spec/docs/PAGE_STATE_REQUIREMENTS.md
     • _travukatbul_spec/mockups/html/PAGES.json    (sayfa kimlikleri)

   KURALLAR
     • ui.css ve mockup HTML'de geçen HİÇBİR sınıf adı değiştirilmedi.
     • Harici font / CDN yoktur. Başlık: Georgia, "Times New Roman", serif.
       Arayüz: Arial, Helvetica, sans-serif. Tümü sistem fontu.
     • Renk tokenları ui.css ile aynıdır (bkz. 01).
     • Yeni eklenen bağımsız bileşenler "trv-" önekiyle yazıldı; mevcut
       bileşenlerin yeni varyantları mevcut kalıpla (ör. .badge.ok) verildi.
     • Belge: implementation/tasarim-sistemi.md

   İÇİNDEKİLER
     01. Tasarım tokenları
     02. Sıfırlama ve temel tipografi
     03. Yardımcı metin ve etiket sınıfları
     04. Public kabuk: topbar, logo, menü, drawer
     05. Butonlar
     06. Form elemanları ve doğrulama
     07. Public sayfa düzeni: publicmain, hero, askbox
     08. Public bölümler: section, three, card, soft, topicgrid, feature
     09. Filtre çubuğu, avukat listesi, tablo, tanım listesi, harita
     10. Panel kabuğu: sidebar, panelbody, paneltop, panelmain, pagehead
     11. Panel veri görünümleri: stats, timeline, steps, segmented, calendar
     12. Belge ve dosya: upload, filechoose, filelist, document
     13. Teklif, abonelik ve ödeme
     14. Sohbet
     15. Auth ekranları
     16. Galeri ve uzun metin (prose)
     17. Durum ekranları: state, statusicon, skeleton
     18. EKLENEN bileşenler (trv-*): sayfalama, bottom sheet, drawer,
         tab bar rozeti, toast, pill, yoğun admin tablosu, canlı bölge
     19. Erişilebilirlik katmanı
     20. Duyarlı düzen: 1440 / 1100 / 1024 kırılımları
     21. Duyarlı düzen: 768 kırılımı — MOBİL KOMPOZİSYON (ayrı yazıldı)
     22. Duyarlı düzen: 390 ve 360 kırılımları
     23. Hareket azaltma ve yazdırma
   ========================================================================== */

/* ==========================================================================
   01. TASARIM TOKENLARI
   ui.css ile birebir aynı değerler. Sıra ve değer değiştirilmedi.
   ========================================================================== */

:root {
  /* --- ui.css çekirdek paleti (DEĞİŞTİRİLEMEZ) --- */
  --green: #155443;
  --ink: #182d28;
  --cream: #f8f6f0;
  --pale: #eaf1ea;
  --muted: #64746b;
  --line: #dde5dc;
  --warn: #8a5a1d;

  /* --- türev tokenlar (EKLENDİ) ---
  Hepsi yukarıdaki yedi tokenın açık/koyu tonudur; yeni renk ailesi
  getirilmedi. Adları trv- önekli olduğu için mevcut css/site.css,
  css/marka.css, css/uygulama.css, css/avukat.css ile çakışmaz. */
  --trv-sans: Arial, Helvetica, sans-serif;
  --trv-serif: Georgia, "Times New Roman", serif;
  --trv-focus: #74a48a;          /* ui.css :focus-visible rengi */
  --trv-ok-bg: #e5f1e9;          /* ui.css .badge */
  --trv-ok-fg: #246041;          /* ui.css .badge */
  --trv-warn-bg: #fff3df;        /* ui.css .badge.amber */
  --trv-bad-bg: #f6e6d5;         /* --warn türevi, koyu ton */
  --trv-bad-fg: #7c4f14;         /* --warn türevi, koyu ton */
  --trv-idle-bg: #eef0ed;        /* ui.css .badge.muted */
  --trv-idle-fg: #64746b;        /* ui.css .badge.muted */
  --trv-panel: var(--ink);       /* ui.css .sidebar zemini */
  --trv-panel-soft: #2c483b;     /* ui.css .sidenav a:hover */
  --trv-panel-active: #345443;   /* ui.css .sidenav a.active */
  --trv-shadow-card: 0 10px 32px #182d2807;
  --trv-shadow-float: 0 12px 42px #132c2320;
  --trv-radius: 14px;
  --trv-radius-sm: 9px;
  --trv-tap: 44px;               /* en küçük dokunma hedefi */
}

/* ==========================================================================
   02. SIFIRLAMA VE TEMEL TİPOGRAFİ
   ui.css: *, body, a, button/input/select/textarea, h1-h3, p, small
   ========================================================================== */
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--trv-sans); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
}

button { cursor: pointer; }

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 { font-size: 50px; line-height: 1.12; letter-spacing: -1.7px; margin-bottom: 22px; }
h2 { font-size: 29px; line-height: 1.25; letter-spacing: -0.7px; }
h3 { font-size: 18px; line-height: 1.35; margin-bottom: 12px; }
p { color: var(--muted); }

small,
.small {
  font-size: 12px;
  color: var(--muted);
}

/* Başlık fontu ui.css ile birebir: yalnızca aşağıdaki seçicilerde serif
   uygulanır (.hero h1, .publictitle h1, .feature h2, .gallery h1,
   .authaside h2, .bigindex, .avatar, .price, .stats strong, .statusicon,
   .visual-label span). Diğer h1/h2/h3 öğeleri Arial + kalın kalır;
   mockup ekran görüntüleri bu davranışı doğrular
   (ör. 65-admin-dashboard.png: sayfa başlığı sans-serif kalın,
   istatistik sayıları serif). */

/* EKLENDİ: taşma güvenlik ağı. ui.css'te yok; grid/flex çocuklarının
   uzun içerikle kutuyu taşırmasını engeller. */
img { max-width: 100%; height: auto; }

/* ui.css'te tanımlı ölçüler korunur (yukarıdaki genel kuralı ezer) */
.hero-visual > img { height: 100%; }
.featurephoto { height: 390px; }
.authaside img { height: 270px; }

/* ==========================================================================
   03. YARDIMCI METİN VE ETİKET SINIFLARI
   ui.css: .eyebrow, .lead, em, .notice, .badge (+ .amber, .muted),
           .separator, .bigindex, .iconbox, .spark
   ========================================================================== */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.9px; color: var(--green); margin-bottom: 16px; }
.lead { font-size: 18px; line-height: 1.7; max-width: 610px; }
em { font-style: normal; color: var(--green); }

.notice {
  padding: 16px 19px;
  background: var(--pale);
  border-left: 3px solid #9fb7a4;
  border-radius: 7px;
  color: #526a59;
  font-size: 12px;
  line-height: 1.65;
  margin: 20px 0;
}

.separator { height: 1px; background: var(--line); margin: 20px 0; }
.bigindex { display: block; font-size: 37px; font-family: var(--trv-serif); color: #9bb5a3; margin: 10px 0; }

.iconbox {
  background: var(--pale);
  color: var(--green);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 25px;
  flex: none;
}

.spark {
  display: inline-grid;
  place-items: center;
  background: var(--pale);
  border-radius: 10px;
  color: var(--green);
  width: 36px;
  height: 36px;
  font-size: 22px;
  flex: none;
}

/* --- Rozetler ---------------------------------------------------------- */

.badge {
  display: inline-block;
  background: var(--trv-ok-bg);
  color: var(--trv-ok-fg);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: normal;
}

.badge.amber { background: var(--trv-warn-bg); color: var(--warn); }
.badge.muted { background: var(--trv-idle-bg); color: var(--trv-idle-fg); }

/* EKLENDİ: durum rozeti varyantları. PAGE_STATE_REQUIREMENTS.md'teki
   durum sözlüğünü (loading/empty/error/403/404/expired vb.) karşılar.
   .badge.amber ve .badge.muted ui.css kökenlidir, korunur. */

.badge.ok,
.badge.paid,
.badge.verified,
.badge.accepted,
.badge.confirmed,
.badge.clean {
  background: var(--trv-ok-bg);
  color: var(--trv-ok-fg);
}

.badge.warn,
.badge.pending,
.badge.submitted,
.badge.requested,
.badge.saving,
.badge.scanning,
.badge.uploading,
.badge.rescheduled {
  background: var(--trv-warn-bg);
  color: var(--warn);
}

.badge.error,
.badge.failed,
.badge.rejected,
.badge.declined,
.badge.cancelled,
.badge.quarantined,
.badge.service-error,
.badge.rate-limited {
  background: var(--trv-bad-bg);
  color: var(--trv-bad-fg);
}

.badge.info,
.badge.draft,
.badge.valid,
.badge.ocr-failed,
.badge.uncertain {
  background: var(--pale);
  color: var(--green);
}

.badge.locked,
.badge.denied,
.badge.is-403,
.badge.withdrawn,
.badge.unconfigured {
  background: var(--trv-idle-bg);
  color: #4a5850;
}

.badge.expired,
.badge.empty,
.badge.is-404,
.badge.refund,
.badge.duplicate {
  background: var(--trv-idle-bg);
  color: var(--trv-bad-fg);
}

.badge.loading,
.badge.streaming {
  background: var(--pale);
  color: var(--green);
  position: relative;
  padding-left: 22px;
}

.badge.loading::before,
.badge.streaming::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  border: 2px solid #9bb5a3;
  border-top-color: var(--green);
  animation: trv-spin 0.9s linear infinite;
}

@keyframes trv-spin {

  to { transform: rotate(360deg); }

}

/* ==========================================================================
   04. PUBLIC KABUK: TOPBAR, LOGO, MENÜ, DRAWER
   ui.css: .topbar, .logo, .topbar nav, .navright, .mobilemenu, .demo,
           .mobile-drawer
   ========================================================================== */

.topbar {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.logo { width: 248px; height: 52px; display: block; }
.topbar nav { display: flex; gap: 29px; align-items: center; font-size: 13px; font-weight: 600; }
.navright { display: flex; gap: 12px; align-items: center; }
.mobilemenu { display: none; border: 0; background: transparent; font-size: 22px; min-height: 44px; min-width: 44px; }
.demo { font-size: 10px; text-align: center; background: #eaf1ea; color: #4b6658; letter-spacing: 0.5px; padding: 6px; }

/* Mobil menü paneli. ui.css yalnızca .mobile-drawer.open kuralını 760px
   altında tanımlar; masaüstünde gizli kalır. */
.mobile-drawer { display: none; }

/* ==========================================================================
   05. BUTONLAR
   ui.css: .btn, .btn.secondary, .btn:disabled, .btn span
   ========================================================================== */

.btn {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  background: var(--green);
  color: #fff;
  padding: 13px 18px;
  border: 1px solid var(--green);
  border-radius: var(--trv-radius-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 46px;
}

.btn.secondary { background: transparent; color: var(--green); border-color: #becfc4; }
.btn:disabled { background: #e4e8e3; border-color: var(--line); color: #8b938c; cursor: default; }
.btn span { font-size: 16px; }

/* EKLENDİ: buton durum varyantları (form doğrulama ve gönderim akışı) */
.btn.is-saving { pointer-events: none; opacity: 0.85; }

.btn.is-saving::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #ffffff66;
  border-top-color: #fff;
  animation: trv-spin 0.9s linear infinite;
  flex: none;
}

.btn.secondary.is-saving::before { border-color: #15544333; border-top-color: var(--green); }
.btn.is-success { background: var(--trv-ok-fg); border-color: var(--trv-ok-fg); }

/* ui.css .mobilemenu ve .filechoose zaten min-height:44px taşır; bu iki
   hedef için ek kural gerekmez. */

/* ==========================================================================
   06. FORM ELEMANLARI VE DOĞRULAMA
   ui.css: label, input/select/textarea, textarea, ::placeholder,
           .formgrid, .check, .actions
   ========================================================================== */

label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  color: #42594c;
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d8e1d6;
  border-radius: 8px;
  background: #fbfcf9;
  color: var(--ink);
  padding: 12px;
  min-height: 46px;
  min-width: 0;
  font-size: 13px;
}

textarea { min-height: 100px; resize: vertical; }

input::placeholder,
textarea::placeholder {
  color: #89988b;
  font-size: 12px;
}

.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; line-height: 1.55; margin: 17px 0; }
.check input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0; }
.check a { text-decoration: underline; color: var(--green); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }

/* --- EKLENDİ: alan doğrulama, kaydetme ve başarı durumları --------------
   PAGE_STATE_REQUIREMENTS.md: "Her form: field validation, server error,
   saving, success, stale version." Sınıf adları görev tanımındadır. */

.is-invalid,
[aria-invalid="true"] {
  border-color: var(--warn);
  background: #fffdf8;
  box-shadow: inset 3px 0 0 var(--warn);
}

label.is-invalid { border: 0; box-shadow: none; background: transparent; color: var(--trv-bad-fg); }

label.is-invalid input,
label.is-invalid select,
label.is-invalid textarea {
  border-color: var(--warn);
  background: #fffdf8;
}

.field-error { display: block; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--trv-bad-fg); margin-top: 2px; }
.field-hint { display: block; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.is-saving { opacity: 0.9; }

.is-saving [type="submit"],
.is-saving .btn {
  pointer-events: none;
}

.is-success { border-color: #9cc4a9; background: #f5fbf6; }

.trv-formstatus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0;
  background: var(--pale);
  color: #3c5849;
}

.trv-formstatus.is-error { background: var(--trv-bad-bg); color: var(--trv-bad-fg); }
.trv-formstatus.is-success { background: var(--trv-ok-bg); color: var(--trv-ok-fg); }
.trv-formstatus.is-saving { background: var(--trv-warn-bg); color: var(--warn); opacity: 1; }
[aria-busy="true"] { cursor: progress; }

/* ==========================================================================
   07. PUBLIC SAYFA DÜZENİ: PUBLICMAIN, HERO, ASKBOX
   ui.css: .publicmain, .hero, .hero h1, .hero .lead, .hero-visual,
           .visual-label, .floatcard, .askbox, .askbottom, .hero-foot
   ========================================================================== */
.publicmain { padding: 36px 5% 70px; max-width: 1600px; margin: auto; }
.hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 50px; padding: 28px 0 40px; align-items: center; }

.hero h1,
.publictitle h1 {
  font-family: var(--trv-serif);
  font-weight: 400;
}

.hero .lead { font-size: 16px; }

/* EKLENDİ: mockup HTML'de (01-home.html) kullanılan fakat ui.css'te
   kuralı olmayan sarmalayıcı. Grid çocuğu taşma koruması verir. */
.hero-copy { min-width: 0; }
.hero-visual { position: relative; height: 550px; min-width: 0; }
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; border-radius: 120px 20px 20px 20px; }
.visual-label { position: absolute; bottom: 24px; left: 26px; font-size: 11px; letter-spacing: 2px; color: white; }
.visual-label span { display: block; letter-spacing: 0; font-family: var(--trv-serif); font-size: 27px; }

.floatcard {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  bottom: 90px;
  left: -30px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 13px;
  box-shadow: var(--trv-shadow-float);
  max-width: 370px;
}

.floatcard p { margin: 3px 0 0; font-size: 12px; }

.askbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--trv-shadow-card);
  margin: 25px 0;
}

.askbox > div:first-child { display: flex; gap: 12px; align-items: center; font-size: 13px; }

.askbox textarea {
  border: 0;
  background: transparent;
  font-size: 14px;
  margin: 14px 0 8px;
  padding: 8px 0;
  min-height: 88px;
  resize: vertical;
  width: 100%;
}

.askbox textarea:focus-visible { outline-offset: 0; }
.askbottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.askbottom small { max-width: 240px; line-height: 1.5; }
.hero-foot { display: flex; gap: 20px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

/* ==========================================================================
   08. PUBLIC BÖLÜMLER
   ui.css: .section, .sectionhead, .three, .card, .soft, .topicgrid,
           .publictitle, .split, .feature, .featurephoto, .footer
   ========================================================================== */
.section { padding: 38px 0; }
.sectionhead { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 22px; }
.sectionhead h2 { margin: 0; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--trv-radius);
  padding: 28px;
  margin-bottom: 22px;
  min-width: 0;
}

.card p:last-child { margin-bottom: 0; }
.highlight { background: var(--pale); }
.soft { background: var(--pale); padding: 35px; border-radius: 18px; margin: 8px 0 26px; }
.topicgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }

.topicgrid a {
  background: #fff;
  border: 1px solid var(--line);
  padding: 25px 22px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.topicgrid a > span { font-size: 28px; color: var(--green); }
.topicgrid small { font-size: 11px; }
.publictitle { max-width: 850px; padding: 22px 0 32px; }
.publictitle h1 { font-size: 43px; margin-bottom: 12px; }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 25px; }
.feature { align-items: center; margin-bottom: 38px; grid-template-columns: 1fr 1fr; gap: 60px; }
.feature h2 { font-family: var(--trv-serif); font-size: 42px; font-weight: 400; }
.featurephoto { width: 100%; height: 390px; object-fit: cover; border-radius: 90px 18px 18px 18px; }

.footer {
  padding: 36px 5%;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer nav { display: flex; gap: 22px; font-size: 11px; }
.footer img { width: 180px; }
.footer p { margin: 0; font-size: 11px; }
.linklist { display: flex; flex-direction: column; gap: 0; }
.linklist a { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; min-height: var(--trv-tap); }
.linklist p { font-size: 12px; margin: 6px 0 0; }
.prose { max-width: 850px; }
.prose p { font-size: 14px; }

/* ==========================================================================
   09. FİLTRE ÇUBUĞU, AVUKAT LİSTESİ, TABLO, TANIM LİSTESİ, HARİTA
   ui.css: .filters, .lawyergrid, .lawyercard, .avatar, .tags, .tablewrap,
           table/th/td, dl/dt/dd, .map, .map>span, .map small
   ========================================================================== */

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 13px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--line);
  padding: 23px;
  border-radius: var(--trv-radius);
  margin-bottom: 22px;
}

.lawyergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.lawyercard {
  display: flex;
  gap: 18px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 26px;
  background: #fff;
  min-width: 0;
}

.lawyercard h3 { margin: 8px 0; }
.lawyercard p { margin-bottom: 12px; font-size: 12px; }

/* EKLENDİ: ui.css bu sınıfı yalnızca 760px altındaki blokta dolaylı
   olarak kullanır (`.lawyerinfo{min-width:0}`). Masaüstü karşılığı
   buraya eklendi; ad değiştirilmedi. */
.lawyerinfo { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #e6eee6;
  color: var(--green);
  font-size: 20px;
  font-family: var(--trv-serif);
}

.avatar.large { width: 78px; height: 78px; font-size: 30px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.tags span { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; color: var(--muted); }
.tablewrap { overflow: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }

th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #7b8d7e;
  background: #f6f8f3;
  padding: 13px;
}

td { padding: 19px 13px; border-bottom: 1px solid var(--line); }
td a { color: var(--green); font-weight: 700; }
dl { display: grid; grid-template-columns: 1fr 1.6fr; gap: 13px; margin: 23px 0; }
dt { font-size: 12px; color: var(--muted); }
dd { margin: 0; font-size: 13px; color: #344c3d; overflow-wrap: anywhere; }

.map {
  height: 240px;
  background:
  repeating-linear-gradient(33deg, transparent 0 54px, #d3dfd0 55px 63px, transparent 64px 100px),
  repeating-linear-gradient(115deg, #eef1e8 0 70px, #fff 71px 78px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.map > span { font-size: 44px; color: var(--green); }
.map small { background: #ffffffb8; padding: 3px 8px; border-radius: 5px; }

/* ui.css genel liste kuralı */

.offer ul,
ul {
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 2.1;
}

/* ==========================================================================
   10. PANEL KABUĞU
   ui.css: .panel, .sidebar, .sidebar .logo, .workspace, .sidenav,
           .navicon, .sidebar .notice, .panelbody, .paneltop, .paneluser,
           .panelmain, .pagehead, .personrow
   ========================================================================== */
.panel { display: flex; min-height: calc(100vh - 28px); }
.sidebar { width: 242px; background: var(--ink); color: #dfe9df; padding: 28px 19px; flex-shrink: 0; }
.sidebar .logo { width: 202px; margin: 0 0 28px; }
.workspace { color: #a7bbad; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 14px; }
.sidenav { display: flex; flex-direction: column; gap: 5px; }

.sidenav a {
  padding: 11px 14px;
  font-size: 12px;
  border-radius: 7px;
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: var(--trv-tap);
}

.sidenav a.active,
.sidenav a[aria-current="page"] {
  background: var(--trv-panel-active);
  color: white;
}

.sidenav a:hover { background: var(--trv-panel-soft); }
.sidenav .navicon { width: 18px; color: #b5cbbc; font-size: 17px; }
.sidebar .notice { background: #294238; color: #c7d7c9; border: 0; margin-top: 35px; }
.panelbody { width: calc(100% - 242px); min-width: 0; }

.paneltop {
  height: 78px;
  padding: 0 38px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

/* EKLENDİ: ui.css .desktopcrumb'ı yalnızca mobilde gizler; masaüstü
   görünümü burada açıkça tanımlandı. */
.desktopcrumb { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paneluser { display: flex; gap: 14px; align-items: center; }
.paneluser .avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }

.paneluser > a {
  min-height: var(--trv-tap);
  min-width: var(--trv-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panelmain { padding: 34px 38px 80px; max-width: 1500px; margin: auto; }
.pagehead { display: flex; justify-content: space-between; gap: 25px; align-items: center; margin-bottom: 28px; }
.pagehead h1 { font-size: 29px; letter-spacing: -0.8px; margin: 0 0 6px; }
.pagehead p { margin: 0; font-size: 13px; }
.pagehead .eyebrow { font-size: 10px; margin-bottom: 7px; }
.personrow { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.personrow h3 { margin: 0; }
.personrow p { font-size: 12px; margin: 4px 0 0; }

/* ==========================================================================
   11. PANEL VERİ GÖRÜNÜMLERİ
   ui.css: .stats, .timeline, .steps, .tabs, .segmented, .calendar, .bars,
           .lockedrows
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 25px; }
.stats > div { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 23px; min-width: 0; }
.stats span { display: block; font-size: 12px; color: var(--muted); }

.stats strong {
  display: block;
  font-family: var(--trv-serif);
  font-size: 34px;
  font-weight: 400;
  margin: 4px 0;
  color: var(--green);
  overflow-wrap: anywhere;
}

.stats small { font-size: 10px; }
.timeline > div { border-left: 1px solid #bfd1c0; padding: 0 0 25px 24px; position: relative; }

.timeline > div:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: #8eaa97;
}

.timeline b { font-size: 13px; }
.timeline p { font-size: 12px; margin: 4px 0; }
.timeline small { font-size: 10px; }
.timeline > div:last-child { padding-bottom: 5px; }
.steps { display: flex; gap: 0; margin-bottom: 26px; justify-content: space-between; }
.steps > span { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); padding: 9px 5px; }

.steps b {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  font-size: 11px;
  flex: none;
}

.steps .current { color: var(--green); font-weight: 700; }
.steps .current b { background: var(--green); color: white; border-color: var(--green); }

/* EKLENDİ: adım durumlarının tamamı (tamamlandı / bekliyor) */
.steps .done { color: #3f5c4b; }
.steps .done b { background: var(--pale); border-color: #a8c2b0; color: var(--green); }
.steps .upcoming { color: #8b9a90; }
.steps .upcoming b { border-color: var(--line); color: #8b9a90; }

/* Adımlar bağlantılıysa dokunma hedefi */
.steps a { display: flex; gap: 8px; align-items: center; min-height: var(--trv-tap); font-size: 11px; }
.tabs { display: flex; gap: 23px; font-size: 12px; }
.tabs a { min-height: var(--trv-tap); display: inline-flex; align-items: center; white-space: nowrap; }

/* ui.css paritesi: ilk sekme etkin varsayılır */
.tabs a:first-child { color: var(--green); font-weight: 700; }

/* EKLENDİ: açık .active desteği — ilk sekme kuralını geçersiz kılar */

.tabs a.active,
.tabs a[aria-selected="true"] {
  color: var(--green);
  font-weight: 700;
}

.tabs:has(a.active) a:first-child:not(.active),
.tabs:has(a[aria-selected="true"]) a:first-child:not([aria-selected="true"]) {
  color: var(--muted);
  font-weight: 400;
}

.tabs a:hover { color: var(--green); }

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 25px;
  background: #fff;
  width: fit-content;
  gap: 6px;
}

.segmented button {
  border: 0;
  background: transparent;
  padding: 11px 18px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--muted);
  min-height: var(--trv-tap);
}

.segmented button.active,
.segmented button[aria-selected="true"] {
  background: var(--pale);
  color: var(--green);
  font-weight: 700;
}

.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }

.calendar span {
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  background: #f7f9f4;
}

.calendar span.selected { background: var(--green); color: white; }

/* EKLENDİ: takvim hücreleri etkileşimliyse dokunma hedefi 44px olur */

.calendar a,
.calendar button,
.calendar [role="button"] {
  min-height: var(--trv-tap);
  display: grid;
  place-items: center;
  border: 0;
  background: #f7f9f4;
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

.calendar a.selected,
.calendar button.selected {
  background: var(--green);
  color: #fff;
}

.bars { display: flex; flex-direction: column; gap: 24px; margin: 25px 0; }
.bars div { position: relative; padding-bottom: 18px; font-size: 12px; }

.bars div:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--w);
  height: 7px;
  background: #b2caba;
  border-radius: 4px;
}

.bars b { float: right; font-size: 10px; color: var(--muted); }
.lockedrows { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.lockedrows span { height: 15px; border-radius: 8px; background: #edf0ea; width: 80%; }
.lockedrows span:nth-child(2) { width: 60%; }

/* ==========================================================================
   12. BELGE VE DOSYA
   ui.css: .upload, .uploadicon, .filechoose, .filelist, .document
   ========================================================================== */
.upload { padding: 30px; border: 1px dashed #a2bca9; border-radius: 12px; text-align: center; background: #f7faf5; }
.uploadicon { font-size: 35px; color: var(--green); }
.upload p { font-size: 12px; }
.upload input { font-size: 11px; max-width: 350px; background: #fff; margin-bottom: 12px; }
.upload small { display: block; }

.filechoose {
  position: relative;
  display: inline-flex;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid #b8cbbd;
  border-radius: 8px;
  color: var(--green);
  margin: 4px auto 12px;
  cursor: pointer;
  min-height: var(--trv-tap);
}

.filechoose input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.filelist > div {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.document {
  height: 230px;
  border: 1px dashed #c9d7c9;
  border-radius: 10px;
  background: #f7f9f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  font-size: 40px;
}

.document b { font-size: 13px; }

/* ==========================================================================
   13. TEKLİF, ABONELİK VE ÖDEME
   ui.css: .offergrid, .offer, .offer .price, .offer p, .price, .price small
   ========================================================================== */
.offergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer { padding: 24px; }
.offer .price { font-size: 29px; }
.offer p { font-size: 12px; }
.price { font-family: var(--trv-serif); font-weight: 400; font-size: 35px; display: block; color: var(--green); margin: 20px 0; }
.price small { font-family: var(--trv-sans); font-size: 13px; display: block; margin-top: 8px; }

/* EKLENDİ: teklif durum sözleşmesi
   (PAGE_STATE_REQUIREMENTS.md: draft, submitted, valid, expired,
   withdrawn, accepted, declined) */

.offer.draft,
.offer.submitted,
.offer.valid {
  border-color: var(--line);
}

.offer.accepted { border-color: #9cc4a9; box-shadow: 0 0 0 1px #9cc4a9 inset; }

.offer.expired,
.offer.withdrawn,
.offer.declined {
  background: #fbfbf8;
  opacity: 0.85;
}

.offer .offerstate { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.offer-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

/* EKLENDİ: abonelik / ödeme satırı ve tutar gösterimi */

.trv-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.trv-payment-row:last-child { border-bottom: 0; }
.trv-payment-row > span:first-child { color: var(--muted); min-width: 0; }
.trv-amount { font-family: var(--trv-serif); font-size: 19px; color: var(--green); white-space: nowrap; }

/* ==========================================================================
   14. SOHBET
   ui.css: .chatlayout, .chatrail, .chat, .chathead, .bubble, .bubble.user,
           .bubble.ai, .source, .composer
   ========================================================================== */
.chatlayout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; }
.chatrail { display: flex; flex-direction: column; gap: 14px; font-size: 12px; padding-top: 8px; }
.chatrail > a { padding: 12px; border-radius: 8px; min-height: var(--trv-tap); display: flex; align-items: center; }

.chatrail > a.current,
.chatrail > a[aria-current="page"] {
  background: #e8eee5;
}

.chatrail small { padding: 10px; }
.chat { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 24px; min-width: 0; }
.chathead { display: flex; gap: 12px; align-items: center; margin-bottom: 25px; }
.chathead small { display: block; font-size: 10px; }
.chathead .badge { margin-left: auto; }
.bubble { padding: 22px; border-radius: 12px; margin: 20px 0; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.bubble.user { margin-left: 15%; background: var(--pale); color: #375244; }
.bubble.ai { border: 1px solid var(--line); background: #fff; }
.bubble h3 { font-size: 19px; margin-top: 10px; }
.bubble p { margin-bottom: 13px; }
.source { border-left: 2px solid #aac1ae; background: #f6f9f3; padding: 13px 16px; margin: 20px 0; }
.source b { font-size: 11px; }
.source p { font-size: 11px; margin: 5px 0; }
.source small { font-size: 10px; }
.composer { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 20px 0 12px; background: #fcfdf9; }
.composer textarea { border: 0; background: transparent; min-height: 60px; }
.composer > div { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 12px; }

.composer button {
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 12px;
  font-size: 12px;
  min-height: var(--trv-tap);
}

/* ui.css: .bottomnav yalnızca mobilde görünür. Masaüstünde gizlidir ve
   ≤768px bloğunda position:fixed tab bar olarak açılır. */
.bottomnav { display: none; }

/* EKLENDİ: sohbet durum sözleşmesi
   (PAGE_STATE_REQUIREMENTS.md: streaming/polling, source_missing,
   uncertain, rate_limited, service_error, draft_saved) */

.bubble.is-streaming::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -2px;
  background: var(--green);
  animation: trv-blink 1s steps(2, start) infinite;
}

@keyframes trv-blink {

  50% { opacity: 0; }

}

.bubble.is-uncertain { border-color: #dcc9a8; background: #fffdf7; }
.bubble.is-error { border-color: #dfc3a4; background: #fffaf5; }
.source.is-missing { border-left-color: var(--warn); background: var(--trv-warn-bg); }
.source.is-missing b { color: var(--warn); }

.chatnote {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 7px;
  background: #f6f8f3;
  margin-top: 10px;
}

.chatnote.draft-saved { background: var(--pale); color: #3f5c4b; }

.chatnote.rate-limited,
.chatnote.service-error {
  background: var(--trv-warn-bg);
  color: var(--warn);
}

.chatnote.source-missing { background: var(--trv-bad-bg); color: var(--trv-bad-fg); }

/* ==========================================================================
   15. AUTH EKRANLARI
   ui.css: .authmain, .authaside, .authcontent
   ========================================================================== */

.authmain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1130px;
  margin: 50px auto 65px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}

.authaside {
  background: var(--green);
  padding: 45px;
  color: #f8f6f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.authaside img { width: 100%; height: 270px; object-fit: cover; border-radius: 80px 14px 14px 14px; margin: 30px 0; }
.authaside h2 { font-family: var(--trv-serif); font-size: 39px; font-weight: 400; }
.authaside p { color: #cbded2; font-size: 14px; }
.authaside .eyebrow { color: #c4d9ca; }
.authcontent { padding: 42px; min-width: 0; }
.authcontent h1 { font-size: 29px; letter-spacing: -0.6px; line-height: 1.2; }
.authcontent .formgrid { gap: 16px; }

.authcontent .actions .btn,
.authcontent > .btn {
  width: 100%;
}

.authcontent .linklist a { font-size: 12px; }

/* ==========================================================================
   16. GALERİ VE UZUN METİN
   ui.css: .gallery, .gallerygrid
   ========================================================================== */
.gallery { padding: 45px 5%; max-width: 1600px; margin: auto; }
.gallery h1 { font-family: var(--trv-serif); font-weight: 400; }
.gallerygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.gallerygrid a {
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}

.gallerygrid a small { font-size: 10px; }
.gallery .sectionhead { margin-top: 40px; }

/* ==========================================================================
   17. DURUM EKRANLARI
   ui.css: .statusicon, .state, .skeleton, .skeleton.short
   Sayfa kimlikleri: 87 empty, 88 error, 89 403, 90 404, 91 expired,
   92 loading (PAGES.json)
   ========================================================================== */

.statusicon {
  display: inline-grid;
  place-items: center;
  min-width: 70px;
  height: 70px;
  border-radius: 22px;
  background: var(--pale);
  color: var(--green);
  font-family: var(--trv-serif);
  font-size: 33px;
  margin: 10px 0 25px;
}

.state { text-align: center; padding: 35px 10px; }
.state p { max-width: 500px; margin: 0 auto 25px; }
.skeleton { height: 15px; background: #eef1e9; border-radius: 6px; max-width: 550px; margin: 13px auto; }
.skeleton.short { max-width: 360px; }

/* EKLENDİ: durum ekranı varyantları (görev tanımındaki durum adları) */
.state.is-loading .statusicon { background: var(--pale); color: var(--green); animation: trv-pulse 1.6s ease-in-out infinite; }
.state.is-empty .statusicon { background: var(--trv-idle-bg); color: #55635b; }

.state.is-error .statusicon,
.state.is-404 .statusicon {
  background: var(--trv-warn-bg);
  color: var(--warn);
}

.state.is-403 .statusicon { background: var(--trv-idle-bg); color: #4a5850; }
.state.is-expired .statusicon { background: var(--trv-idle-bg); color: var(--trv-bad-fg); }
.state.is-success .statusicon { background: var(--trv-ok-bg); color: var(--trv-ok-fg); }

@keyframes trv-pulse {

  50% { opacity: 0.55; }

}

/* EKLENDİ: iskelet ek parçaları */
.skeleton.title { height: 26px; max-width: 320px; }
.skeleton.block { height: 92px; max-width: none; border-radius: 10px; }
.skeleton.avatar { width: 46px; height: 46px; min-width: 46px; border-radius: 14px; margin: 0; }
.skeleton.badge { width: 74px; height: 20px; margin: 0; }

/* EKLENDİ: sayfa geçişi için ince üst ilerleme çubuğu */

.trv-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), #9bb5a3);
  z-index: 60;
  transform-origin: 0 50%;
  animation: trv-loadbar 1.4s ease-in-out infinite;
}

@keyframes trv-loadbar {

  0% { transform: scaleX(0.05); }
  60% { transform: scaleX(0.75); }
  100% { transform: scaleX(1); }

}

/* ==========================================================================
   18. EKLENEN BİLEŞENLER (trv-*)
   Aşağıdaki adların TAMAMI ui.css ve mockup HTML'de YOKTUR; tasarım
   sisteminin eksik parçalarını tamamlamak için eklendi. Adlandırma
   kuralı: bağımsız bileşen => trv- öneki; mevcut bileşenin varyantı =>
   mevcut kalıp (.badge.ok, .state.is-error, .filters.dense).
   ========================================================================== */

/* --- 18.1 Sayfalama ---------------------------------------------------- */

.trv-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.trv-pagination-info { font-size: 11px; color: var(--muted); }

.trv-pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.trv-pagination a,
.trv-pagination button {
  min-width: var(--trv-tap);
  min-height: var(--trv-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  padding: 0 10px;
}

.trv-pagination .current,
.trv-pagination [aria-current="page"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 700;
}

.trv-pagination .disabled,
.trv-pagination [aria-disabled="true"] {
  color: #a9b3ab;
  background: #f4f6f2;
  pointer-events: none;
}

/* --- 18.2 Alt sayfa (bottom sheet) ------------------------------------ */
.trv-sheet-backdrop { position: fixed; inset: 0; background: #182d2866; z-index: 40; display: none; }
.trv-sheet-backdrop.open { display: block; }
.trv-sheet { display: none; }

.trv-sheet.open {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  flex-direction: column;
  gap: 14px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 42px #172d2822;
  max-height: 82vh;
  overflow: auto;
}

.trv-sheet-handle { width: 42px; height: 4px; border-radius: 4px; background: #c3cfc5; margin: 2px auto 6px; flex: none; }
.trv-sheet-title { font-size: 17px; font-weight: 700; color: var(--ink); font-family: var(--trv-serif); }
.trv-sheet-body { font-size: 13px; line-height: 1.7; color: var(--muted); }
.trv-sheet-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.trv-sheet-foot .btn { flex: 1; justify-content: center; }

/* --- 18.3 Yan çekmece (drawer, tablet) -------------------------------- */
.trv-drawer-backdrop { position: fixed; inset: 0; background: #182d2866; z-index: 30; display: none; }
.trv-drawer-backdrop.open { display: block; }
.trv-drawer { display: none; }

.trv-drawer.open {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 286px;
  max-width: 86vw;
  z-index: 35;
  flex-direction: column;
  gap: 6px;
  background: var(--ink);
  color: #dfe9df;
  padding: 24px 18px;
  overflow: auto;
}

.trv-drawer .logo { width: 190px; height: auto; margin-bottom: 18px; }

.trv-drawer a {
  min-height: var(--trv-tap);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 7px;
  font-size: 12px;
}

.trv-drawer a.active,
.trv-drawer a[aria-current="page"] {
  background: var(--trv-panel-active);
  color: #fff;
}

.trv-drawer .workspace { padding-left: 14px; }

/* --- 18.4 Mobil tab bar rozeti ve etkin sekme ------------------------- */

.bottomnav a.active,
.bottomnav a[aria-current="page"] {
  color: var(--green);
  font-weight: 700;
}

.trv-dot { position: relative; }

.trv-dot::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  border: 1.5px solid #fff;
}

.trv-dot[data-count]::after {
  content: attr(data-count);
  width: auto;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0 4px;
  margin-right: -20px;
  top: -2px;
}

/* --- 18.5 Kısa bildirim (toast) ve canlı bölge ------------------------ */

.trv-toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.trv-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 10px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px #182d281f;
  pointer-events: auto;
}

.trv-toast.ok { background: var(--trv-ok-bg); border-color: #bcd8c6; color: var(--trv-ok-fg); }
.trv-toast.warn { background: var(--trv-warn-bg); border-color: #e6d0ae; color: var(--warn); }
.trv-toast.error { background: var(--trv-bad-bg); border-color: #dfc3a4; color: var(--trv-bad-fg); }

.trv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 18.6 Yoğun durum etiketi (admin satırları) ----------------------- */

.trv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--trv-idle-bg);
  color: var(--trv-idle-fg);
  white-space: nowrap;
}

.trv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.trv-pill.ok { background: var(--trv-ok-bg); color: var(--trv-ok-fg); }
.trv-pill.warn { background: var(--trv-warn-bg); color: var(--warn); }
.trv-pill.bad { background: var(--trv-bad-bg); color: var(--trv-bad-fg); }
.trv-pill.idle { background: var(--trv-idle-bg); color: var(--trv-idle-fg); }

/* --- 18.7 Admin yoğun tablo ve filtre çubuğu -------------------------- */

.filters.dense {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.filters.dense label { font-size: 11px; }

.filters.dense input,
.filters.dense select {
  font-size: 12px;
  min-height: 42px;
  padding: 10px;
}

.filters.dense .btn { min-height: 42px; font-size: 12px; padding: 10px 14px; }
.tablewrap.dense table { font-size: 11px; }
.tablewrap.dense th { padding: 9px 10px; white-space: nowrap; }
.tablewrap.dense td { padding: 10px; border-bottom-color: #eef1ea; vertical-align: middle; }
.tablewrap.dense td:first-child { font-weight: 700; color: var(--ink); }
.tablewrap.sticky thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.trv-table-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.trv-table-actions a,
.trv-table-actions button {
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
  background: none;
  border: 0;
  padding: 0;
  min-height: var(--trv-tap);
  display: inline-flex;
  align-items: center;
}

/* --- 18.8 Atlama bağlantısı (klavye) ---------------------------------- */

.trv-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 70;
  background: var(--green);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  font-size: 13px;
  font-weight: 700;
  transition: top 0.15s ease-out;
}

.trv-skip-link:focus { top: 0; }

/* --- 18.9 Panel mobil uygulama çubuğu (uygulama kabuğu) --------------- */
.trv-appbar-title { display: none; font-size: 17px; font-weight: 700; color: var(--green); }

/* ==========================================================================
   19. ERİŞİLEBİLİRLİK KATMANI
   ui.css: a/button/input/textarea/select :focus-visible
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--trv-focus);
  outline-offset: 3px;
}

/* EKLENDİ: klavye ile erişilebilen diğer hedefler */

summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.check input:focus-visible,
.filechoose:focus-within {
  outline: 3px solid var(--trv-focus);
  outline-offset: 3px;
}

/* Koyu panelde açık halka gerekir (kontrast) */

.sidebar :focus-visible,
.trv-drawer :focus-visible,
.authaside :focus-visible {
  outline: 3px solid #cfe3d6;
  outline-offset: 2px;
}

/* Yazı alanı içi odak halkası kutuyu büyütmesin */

.askbox textarea:focus-visible,
.composer textarea:focus-visible {
  outline-offset: -2px;
}

/* Metin seçimi marka rengi */
::selection { background: #cfe3d6; color: var(--ink); }

/* ==========================================================================
   20. DUYARLI DÜZEN: 1440 / 1100 / 1024
   ========================================================================== */

@media (max-width: 1440px) {

  .publicmain { padding: 34px 4.5% 64px; }
  .hero { gap: 42px; }
  .hero-visual { height: 500px; }
  .panelmain { max-width: 1320px; }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .filters.dense { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }

}

/* ui.css paritesi: 1100px kırılımı */

@media (max-width: 1100px) {

  .topbar nav { gap: 15px; }
  .logo { width: 215px; }
  .hero { gap: 30px; }
  .hero h1 { font-size: 43px; }
  .sidebar { width: 210px; }
  .panelbody { width: calc(100% - 210px); }
  .panelmain { padding: 28px; }
  .paneltop { padding: 0 28px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .btn { grid-column: span 2; }

  .three,
  .offergrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lawyergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chatlayout { grid-template-columns: 1fr; }
  .chatrail { display: none; }
  .gallerygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trv-pagination { justify-content: center; }

}

/* Tablet: panel kabuğu sadeleşir, tablolar yoğunlaşır */

@media (max-width: 1024px) {

  .panelmain { padding: 26px 22px 70px; }
  .paneltop { height: 72px; padding: 0 22px; }
  .stats { gap: 14px; }
  .stats strong { font-size: 29px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

  .split.feature,
  .feature {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .featurephoto { height: 320px; border-radius: 70px 16px 16px 16px; }
  .hero { gap: 26px; }
  .hero-visual { height: 420px; }
  .floatcard { left: 12px; bottom: 24px; }
  .topicgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters.dense .btn { grid-column: span 2; }
  .tablewrap.dense { overflow-x: auto; }
  .authmain { margin: 34px 24px 50px; }
  .authaside { padding: 32px; }
  .authcontent { padding: 32px; }

}

/* ==========================================================================
   21. DUYARLI DÜZEN: 768 KIRILIMI — MOBİL KOMPOZİSYON
   ui.css'in 760px bloğunun birebir karşılığıdır; 768'e genişletildi.
   Mobil yalnızca küçültülmüş masaüstü değildir: gezinme çekmeceye taşınır,
   panel bir uygulama kabuğuna dönüşür, tablolar kart olur, hero akışı
   dikey sıraya geçer.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- 21.1 Mobil tipografi ve ritim (ayrı ölçek) ---- */
  body { font-size: 14px; }
  h1 { font-size: 33px; letter-spacing: -1px; line-height: 1.16; margin-bottom: 16px; }
  h2 { font-size: 24px; letter-spacing: -0.4px; }
  h3 { font-size: 17px; }
  p { font-size: 14px; }
  .lead { font-size: 15px; line-height: 1.7; max-width: none; }

  /* ---- 21.2 Public uygulama çubuğu ---- */
  .topbar { height: 74px; padding: 0 20px; position: sticky; top: 0; z-index: 20; }
  .logo { width: 203px; height: 43px; }

  .topbar nav,
  .navright > .btn,
  .navright > small {
    display: none;
  }

  .mobilemenu { display: block; }
  .demo { font-size: 9px; padding: 5px; }

  .mobile-drawer.open {
    display: flex;
    position: fixed;
    inset: 74px 0 auto;
    z-index: 25;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    background: var(--cream);
    box-shadow: 0 20px 30px #172d2818;
    max-height: 70vh;
    overflow: auto;
  }

  .mobile-drawer a { padding: 12px; border-bottom: 1px solid var(--line); font-size: 13px; min-height: var(--trv-tap); }
  .publicmain { padding: 26px 20px 40px; }

  /* ---- 21.3 Hero: dikey akış, görsel aşağı iner ---- */
  .hero { display: flex; flex-direction: column; padding: 12px 0 25px; gap: 28px; align-items: stretch; }
  .hero h1 { font-size: 38px; letter-spacing: -1.4px; line-height: 1.14; margin: 16px 0; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .hero .lead { font-size: 14px; line-height: 1.7; }
  .hero-visual { height: 295px; order: 2; }
  .hero-visual > img { border-radius: 75px 15px 15px 15px; }
  .hero-copy { order: 1; }
  .floatcard { left: 12px; bottom: 68px; padding: 13px; max-width: calc(100% - 24px); border-radius: 10px; }
  .floatcard b { font-size: 11px; }
  .floatcard p { font-size: 10px; }
  .visual-label { bottom: 16px; left: 20px; font-size: 8px; }
  .visual-label span { font-size: 22px; }
  .askbox { padding: 17px; margin: 20px 0; }
  .askbox > div:first-child { font-size: 11px; gap: 8px; flex-wrap: wrap; }
  .askbox .badge { font-size: 8px; padding: 4px 6px; }
  .askbox textarea { min-height: 82px; font-size: 13px; }
  .askbottom { align-items: stretch; flex-direction: column; gap: 12px; }
  .askbottom small { max-width: none; font-size: 10px; }
  .askbottom .btn { justify-content: center; gap: 35px; }
  .hero-foot { gap: 12px; flex-wrap: wrap; font-size: 9px; }

  /* ---- 21.4 Public bölümler ---- */
  .section { padding: 25px 0; }
  .sectionhead { align-items: flex-start; flex-direction: column; gap: 17px; }
  .sectionhead h2 { font-size: 26px; }
  .sectionhead .btn { font-size: 11px; padding: 10px 13px; min-height: var(--trv-tap); }

  .three,
  .split,
  .lawyergrid,
  .offergrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card { padding: 22px; margin-bottom: 16px; }
  .card h2 { font-size: 25px; }
  .topicgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topicgrid a { padding: 18px 13px; }
  .topicgrid b { font-size: 12px; }
  .topicgrid small { font-size: 9px; }
  .soft { padding: 22px 16px; }
  .publictitle { padding: 8px 0 20px; }
  .publictitle h1 { font-size: 33px; letter-spacing: -1px; }
  .feature { gap: 25px; }
  .feature h2 { font-size: 33px; }
  .feature .lead { font-size: 15px; }
  .featurephoto { height: 260px; border-radius: 70px 14px 14px 14px; }
  .price { font-size: 32px; }
  .footer { flex-direction: column; align-items: flex-start; padding: 28px 20px; gap: 16px; }
  .footer nav { flex-wrap: wrap; gap: 13px; }

  /* ---- 21.5 Filtreler ve avukat kartı (yatay mobil kart) ---- */
  .filters { grid-template-columns: 1fr 1fr; padding: 16px; gap: 12px; }
  .filters label:first-child { grid-column: span 2; }
  .filters label { font-size: 10px; }

  .filters input,
  .filters select {
    font-size: 12px;
    padding: 10px;
  }

  .filters.dense { grid-template-columns: 1fr 1fr; padding: 14px; }
  .filters.dense label:first-child { grid-column: span 2; }

  /* Formlar mobilde tek sütuna iner (ui.css m760 paritesi) */
  .formgrid { grid-template-columns: 1fr; gap: 16px; }
  .lawyercard { flex-direction: row; padding: 20px; gap: 15px; }
  .lawyercard .avatar { width: 49px; height: 49px; border-radius: 14px; font-size: 18px; }
  .lawyerinfo { min-width: 0; }
  .lawyercard .tags { margin: 13px 0; }
  .lawyercard h3 { font-size: 17px; }
  .lawyercard .btn { width: 100%; justify-content: center; }

  /* ---- 21.6 Panel: sidebar çekmeceye taşınır, uygulama kabuğu ---- */
  .panel { display: block; min-height: 100vh; }
  .sidebar { display: none; }
  .panelbody { width: 100%; }
  .paneltop { height: 72px; padding: 0 18px; position: sticky; top: 0; z-index: 20; }
  .paneltop .desktopcrumb { display: none; }
  .paneltop:before { content: "TR Avukat Bul"; font-size: 17px; font-weight: 700; color: var(--green); }

  /* EKLENDİ: uygulama kabuğu başlığı (mobil kompozisyon) */

  .trv-appbar-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--green);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .paneltop:has(.trv-appbar-title):before { content: none; }
  .paneluser { gap: 7px; }
  .paneluser > span { display: none; }
  .panelmain { padding: 24px 18px 94px; }
  .pagehead { gap: 12px; margin-bottom: 24px; align-items: flex-start; }
  .pagehead h1 { font-size: 25px; letter-spacing: -0.6px; }
  .pagehead p { font-size: 11px; }
  .pagehead .eyebrow { font-size: 9px; }
  .pagehead > .badge { font-size: 8px; padding: 4px 6px; max-width: 75px; }
  .stats { gap: 8px; margin-bottom: 22px; }
  .stats > div { padding: 15px 10px; }
  .stats span { font-size: 9px; line-height: 1.4; min-height: 25px; }
  .stats strong { font-size: 25px; overflow-wrap: anywhere; }
  .stats small { font-size: 8px; line-height: 1.4; display: block; }

  /* ---- 21.7 Adımlar, sekmeler, segment, takvim ---- */
  .steps { gap: 2px; }
  .steps > span { flex-direction: column; font-size: 8px; gap: 5px; flex: 1; padding: 5px 1px; text-align: center; }
  .steps b { width: 24px; height: 24px; font-size: 10px; }
  .tabs { gap: 18px; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px 0 6px; }

  /* EKLENDİ: yatay kaydırmalı sekme şeridi (yalnız mobil) */
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { font-size: 12px; }
  .tabs a:focus-visible { outline-offset: 0; }
  .segmented { gap: 3px; width: 100%; justify-content: space-between; }
  .segmented button { padding: 12px 9px; font-size: 10px; flex: 1; }
  .calendar { gap: 5px; }
  .calendar span { height: 34px; font-size: 11px; }

  .calendar a,
  .calendar button {
    min-height: var(--trv-tap);
    font-size: 12px;
  }

  /* ---- 21.8 Tablo → kart dönüşümü ---- */
  .tablewrap { overflow: visible; }
  thead { display: none; }
  tbody { display: block; }
  tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }

  td {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border: 0;
    padding: 7px 0;
    font-size: 11px;
    text-align: right;
  }

  td:before { content: attr(data-label); text-align: left; color: var(--muted); font-size: 10px; min-width: 70px; }
  td .badge { font-size: 9px; }
  th { display: block; }
  td:first-child { font-size: 13px; font-weight: 700; }

  /* EKLENDİ: kart modunda satır eylemleri dokunma hedefine ulaşır */

  .tablewrap td a,
  .tablewrap td button {
    min-height: var(--trv-tap);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  .tablewrap.dense td { padding: 6px 0; font-size: 11px; }
  .tablewrap.dense td:before { font-size: 10px; }
  .trv-table-actions { justify-content: flex-end; }

  /* ---- 21.9 Belge ve dosya ---- */
  .upload { padding: 23px 14px; }
  .upload h3 { font-size: 16px; }
  .filelist > div { font-size: 10px; gap: 9px; flex-wrap: wrap; }
  .document { height: 200px; }

  /* ---- 21.10 Sohbet ---- */
  .chatlayout { display: block; }
  .chat { padding: 16px; border-radius: 12px; }
  .chathead { gap: 8px; }
  .chathead b { font-size: 12px; }
  .chathead small { font-size: 8px; }
  .chathead .badge { font-size: 8px; max-width: 60px; }
  .bubble { padding: 16px; font-size: 12px; }
  .bubble.user { margin-left: 10%; }
  .bubble h3 { font-size: 18px; }
  .bubble .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .bubble .btn { font-size: 10px; padding: 11px; gap: 12px; }
  .composer { padding: 10px; }
  .composer textarea { padding: 7px; font-size: 12px; }
  .composer button { font-size: 11px; }
  .chat > small { font-size: 9px; line-height: 1.4; display: block; }

  /* ---- 21.11 Mobil tab bar ---- */

  .bottomnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fffffff5;
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--line);
    justify-content: space-around;
    z-index: 10;
    padding: 10px 8px max(10px, env(safe-area-inset-bottom));
  }

  .bottomnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--muted);
    min-width: 50px;
    min-height: var(--trv-tap);
  }

  .bottomnav span { font-size: 20px; color: var(--green); line-height: 1.2; }

  /* ---- 21.12 Auth ---- */
  .authmain { display: block; margin: 24px 18px 35px; border-radius: 15px; }
  .authaside { padding: 25px; }
  .authaside h2 { font-size: 28px; margin-bottom: 13px; }
  .authaside p { font-size: 12px; margin: 0; }
  .authaside img { display: none; }
  .authaside .eyebrow { font-size: 9px; }
  .authcontent { padding: 25px 22px; }
  .authcontent h1 { font-size: 26px; }
  .authcontent .formgrid { grid-template-columns: 1fr; }

  /* ---- 21.13 Tanım listesi, galeri, durum ---- */
  dl { grid-template-columns: 1fr 1.35fr; gap: 13px; }
  dt { font-size: 10px; }
  dd { font-size: 12px; }
  .gallery { padding: 30px 20px; }
  .gallery h1 { font-size: 34px; }
  .gallerygrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallerygrid a { padding: 16px; font-size: 11px; }
  .state { padding: 20px 0; }
  .statusicon { min-width: 62px; height: 62px; font-size: 28px; border-radius: 18px; }
  .check { font-size: 11px; }
  .check input { margin-top: 1px; }

  /* ---- 21.14 Eklenen bileşenlerin mobil davranışı ---- */
  .trv-pagination { justify-content: center; }
  .trv-pagination ul { flex-wrap: wrap; justify-content: center; }
  .trv-sheet-foot .btn { width: 100%; flex: none; }
  .trv-toast-region { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .filters.dense .btn { grid-column: span 2; }
  .offer .price { font-size: 27px; }
  .trv-payment-row { flex-direction: column; align-items: flex-start; gap: 6px; }

}

/* ==========================================================================
   22. DUYARLI DÜZEN: 390 VE 360
   Küçük telefonlar için ek daraltma; yatay taşma yoktur.
   ========================================================================== */

@media (max-width: 390px) {

  .publicmain { padding: 22px 16px 36px; }
  .panelmain { padding: 20px 14px 92px; }
  .paneltop { padding: 0 14px; }
  .hero h1 { font-size: 34px; }
  .publictitle h1 { font-size: 29px; }
  .feature h2 { font-size: 29px; }
  .hero-visual { height: 260px; }
  .floatcard { bottom: 56px; padding: 11px; gap: 10px; }
  .askbox { padding: 15px; }
  .askbottom .btn { gap: 20px; width: 100%; }
  .card { padding: 18px 16px; }
  .three { gap: 14px; }
  .filters { grid-template-columns: 1fr; padding: 14px; }

  .filters label:first-child,
  .filters.dense label:first-child,
  .filters.dense .btn {
    grid-column: span 1;
  }

  .filters .btn { grid-column: span 1; justify-content: center; }
  .filters.dense { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stats span { min-height: 0; }
  .topicgrid { grid-template-columns: 1fr 1fr; }
  .gallerygrid { grid-template-columns: 1fr; }
  .steps > span { font-size: 7px; }
  .segmented button { padding: 11px 6px; }
  .authmain { margin: 18px 12px 30px; }
  .authcontent { padding: 22px 18px; }
  .footer nav { gap: 11px; font-size: 10px; }
  .bottomnav a { min-width: 46px; font-size: 8px; }
  .trv-drawer.open { width: 100%; max-width: 100%; }
  .trv-sheet.open { padding-left: 16px; padding-right: 16px; max-height: 88vh; }
  .trv-pagination ul { gap: 4px; }

  .trv-pagination a,
  .trv-pagination button {
    min-width: 40px;
    padding: 0 8px;
  }

}

@media (max-width: 360px) {

  body { font-size: 13.5px; }
  .topbar { padding: 0 14px; }
  .logo { width: 176px; height: 38px; }
  .hero h1 { font-size: 30px; letter-spacing: -0.9px; }
  .publictitle h1 { font-size: 26px; }
  .feature h2 { font-size: 26px; }
  .card { padding: 16px 14px; }
  .sectionhead h2 { font-size: 22px; }
  .topicgrid { grid-template-columns: 1fr; }

  .buttons,
  .actions {
    gap: 8px;
  }

  .actions .btn,
  .hero .btn {
    width: 100%;
    justify-content: center;
  }

  .lawyercard { flex-direction: column; gap: 12px; }
  .stats strong { font-size: 22px; }
  .bubble { padding: 13px; font-size: 11.5px; }
  .bubble.user { margin-left: 4%; }
  .bottomnav a { min-width: 42px; font-size: 7.5px; }
  .bottomnav span { font-size: 18px; }
  .trv-payment-row { font-size: 11px; }
  .trv-amount { font-size: 17px; }

}

/* ==========================================================================
   22b. AVUKAT LİSTESİ — görsel iyileştirmeler (2026-10)
   Mevcut sınıf adları korunur; yalnızca görünüm ve mikro etkileşim.
   ========================================================================== */

.lawyercard {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {

  .lawyercard:hover {
    border-color: #b8cfc0;
    box-shadow: var(--trv-shadow-card);
    transform: translateY(-2px);
  }

}

.lawyercard .tags span {
  display: inline-block;
  background: var(--pale);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 3px 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  border: 1px solid #dce8dc;
}

.avatar--photo {
  padding: 0;
  overflow: hidden;
  background: var(--pale);
}

.avatar--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar.large.avatar--photo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.trv-result-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 14px 20px;
  margin: 0 0 20px;
  background: linear-gradient(135deg, #fff 0%, var(--pale) 55%, #f4f8f4 100%);
  border: 1px solid var(--line);
  border-radius: var(--trv-radius);
}

.trv-result-strip strong {
  font-family: var(--trv-serif);
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--green);
  letter-spacing: -0.02em;
}

.trv-result-strip .small {
  margin: 0;
  color: var(--muted);
}

.publictitle h1 {
  letter-spacing: -0.02em;
}

.filters {
  box-shadow: 0 4px 22px #182d2808;
}

.lawyergrid {
  margin-bottom: 8px;
}

/* ==========================================================================
   23. HAREKET AZALTMA VE YAZDIRMA
   ui.css: @media(prefers-reduced-motion:reduce)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  * { scroll-behavior: auto !important; transition: none !important; }

  /* EKLENDİ: trv.css içindeki animasyonlar da durur */

  .badge.loading::before,
  .badge.streaming::before,
  .btn.is-saving::before,
  .state.is-loading .statusicon,
  .trv-loading-bar,
  .bubble.is-streaming::after {
    animation: none !important;
  }

  .trv-skip-link { transition: none !important; }

}

@media print {

  .topbar,
  .mobile-drawer,
  .bottomnav,
  .sidebar,
  .demo,
  .trv-toast-region,
  .trv-sheet,
  .trv-sheet-backdrop,
  .trv-drawer,
  .trv-drawer-backdrop,
  .mobilemenu {
    display: none !important;
  }

  body { background: #fff; }

  .card,
  .tablewrap {
    break-inside: avoid;
  }

}