/* ORBİ 11.2 · Claude sekmesi (telefon) — PC'deki Claude'a iş (claude.js). Kullanıcı tercihi "az ve öz": tek satırlık
 * iş, renkli durum halkası, ayrıntı dokununca. Yalnız tema belirteçleri (--m-*, --kat, --canli …): Tuval, Açık, Koyu ve
 * Eski koyu temada kendiliğinden uyar. Ayrı dosya: ORBİ yeniden başlamadan önce de (eski style.css önbellekteyken)
 * beş sekmeli alt çubuk bozulmasın diye. */

.sekmeler{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
#rozet-claude{ top: 9px; left: calc(50% + 9px); min-width: 0; width: 6px; height: 6px; padding: 0; font-size: 0; background: var(--canli); }
#rozet-claude.hata{ background: var(--kritik); }

#v-claude.aktif{ display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* Durum satırı: nokta · "PC'deki Claude" + durum · kilit */
.cl-ust{ flex: none; display: flex; align-items: center; gap: var(--b-3); height: 52px; padding: 0 2px 0 var(--kenar-pay);
         border-bottom: 1px solid var(--cizgi-ince); }
.cl-ust .nokta{ margin: 0 2px; }
.cl-durum{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cl-durum b, .cl-durum span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-durum b{ font: var(--a-orta) 14px/1.25 var(--baslik); color: var(--m-1); }
.cl-durum span{ font-size: 12.5px; line-height: 1.25; color: var(--m-3); }
.cl-kilit{ flex: none; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; min-width: 44px;
           padding: 0 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--m-3);
           font: var(--a-normal) 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cl-kilit svg{ width: 18px; height: 18px; }
.cl-kilit.acik{ color: var(--canli); }
.cl-kilit:active{ background: var(--vurgu-hover); }

.cl-uyari{ flex: none; padding: 0 var(--kenar-pay); }
.cl-uyari:empty{ display: none; }
.cl-uyari .serit{ margin: var(--b-2) 0; }

/* İşler: tek satır; çalışan işin altında aşama · süre */
.cl-liste{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
           padding: var(--b-1) var(--kenar-pay) var(--b-3); }
.cl-bolum{ margin: var(--b-3) 0 2px; color: var(--m-3); }
.cl-is{ display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 48px;
        padding: 6px 0; border-bottom: 1px solid var(--cizgi-ince); cursor: pointer; }
.cl-is:last-child{ border-bottom: 0; }
.cl-is:active{ background: var(--vurgu-hover); }
.cl-halka{ position: relative; width: 14px; height: 14px; border-radius: var(--r-tam); box-shadow: inset 0 0 0 1.5px var(--m-3); }
.cl-is[data-d="calisiyor"] .cl-halka{ box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.cl-is[data-d="calisiyor"] .cl-halka::before{ content: ""; position: absolute; inset: 0; border-radius: var(--r-tam);
        background: conic-gradient(var(--canli) 0 72%, transparent 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
        animation: don var(--h-don) linear infinite; }
.cl-is[data-d="bitti"] .cl-halka{ box-shadow: none; background: radial-gradient(circle, var(--tamam) 0 4px, transparent 4.5px); }
.cl-is[data-d="hata"] .cl-halka{ box-shadow: none; background: radial-gradient(circle, var(--kritik) 0 4px, transparent 4.5px); }
.cl-is[data-d="iptal"] .cl-halka{ box-shadow: inset 0 0 0 1.5px var(--m-4); }
.cl-is[data-d="iptal"] .cl-halka::after{ content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 1.5px; background: var(--m-4); }
.cl-govde{ min-width: 0; }
.cl-metin{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m-1); font-size: var(--t-govde); }
.cl-is[data-d="iptal"] .cl-metin{ color: var(--m-3); }
.cl-alt{ display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m-3); font-size: 12px; }
.cl-is[data-d="calisiyor"] .cl-alt{ color: var(--canli); }
.cl-is[data-d="hata"] .cl-alt{ color: var(--kritik); }
.cl-son{ display: flex; align-items: center; gap: 2px; }
.cl-zaman{ font: var(--a-normal) var(--t-meta)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--m-3); white-space: nowrap; }
.cl-is[data-d="calisiyor"] .cl-zaman{ color: var(--m-1); }
.cl-x{ position: relative; flex: none; width: 36px; height: 36px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--r-1);
       background: none; color: var(--m-3); display: grid; place-items: center; }
.cl-x svg{ width: 16px; height: 16px; }
.cl-x::after{ content: ""; position: absolute; inset: -4px; }
.cl-x:active{ background: var(--kritik-zemin); color: var(--kritik); }
.cl-x[disabled]{ opacity: .35; pointer-events: none; }

/* Açılan ayrıntı: künye · sonuç (4 satırda kesik, "Devamı") · eylemler */
.cl-ayrinti{ display: none; grid-column: 2 / -1; padding: 6px 0 4px; cursor: auto; }
.cl-is.acik{ align-items: start; }
.cl-is.acik > .cl-halka{ margin-top: 3px; }
.cl-is.acik .cl-ayrinti{ display: block; }
.cl-is.acik .cl-metin{ white-space: normal; overflow-wrap: anywhere; }
.cl-kunye{ color: var(--m-3); font-size: 12px; line-height: 1.4; }
.cl-sonuc{ margin-top: 6px; color: var(--m-2); font-size: var(--t-okuma); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-sonuc.kisa{ display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cl-sonuc.hata{ color: var(--kritik); }
.cl-eylem{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.cl-eylem .baglanti{ min-height: 32px; font-size: 13px; }
.cl-bekle{ color: var(--m-3); font-size: 12.5px; }

/* Boş durum: tek satır örnek */
.cl-bos{ padding: var(--b-5) 2px; color: var(--m-3); font-size: 13.5px; line-height: 1.5; }
.cl-bos b{ display: block; margin-bottom: 4px; color: var(--m-1); font-weight: var(--a-orta); }
.cl-bos .baglanti{ margin-top: 8px; }

/* Yazma alanı: [kapsam][metin][ses][gönder] */
.cl-form{ flex: none; padding: 4px var(--kenar-pay); }
.cl-form textarea{ scrollbar-width: none; }
.cl-form textarea::-webkit-scrollbar{ display: none; }
.cl-kapsam{ margin: 9px 0 9px 6px; }
.cl-kapsam[data-risk="1"]::before{ content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--r-tam); background: var(--altin); }
.cl-kapsam.devam{ color: var(--canli); }

/* Kapsam alt listesi ve PIN */
.cl-kapsam-oge .meta{ white-space: normal; text-align: right; max-width: 62%; }
.cl-pin{ margin-top: var(--b-3); font: var(--a-orta) 20px/1 var(--mono); letter-spacing: .3em; text-align: center; }
.cl-pin-hata{ min-height: 18px; margin-top: 6px; color: var(--kritik); font-size: 12.5px; text-align: center; }

/* Rapor alt sayfası */
.cl-rapor{ margin: 0; color: var(--m-2); font: var(--a-normal) 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 720px){
  .cl-form{ padding-left: max(var(--kenar-pay), calc(50% - 340px)); padding-right: max(var(--kenar-pay), calc(50% - 340px)); }
  .cl-liste{ padding-left: max(var(--kenar-pay), calc(50% - 340px)); padding-right: max(var(--kenar-pay), calc(50% - 340px)); }
}
@media (prefers-reduced-motion: reduce){
  .cl-is[data-d="calisiyor"] .cl-halka::before{ animation: none; }
}