/* pys_takvim_raf.css — Havuz Rafı, takvim tarafı (Eylül–Ekim 2026)
 * ===========================================================================
 * Raf, beyaz şeritteki "Zamanlanmamış İşler" düğmesinden açılan listedir (Yön 2,
 * Alperen 5 Eki; adı ve içeriği 6 Eki'de değişti): yalnız günü verilmemiş ve
 * bitmemiş işler. Takvim her zaman tam genişlikte, liste iş tutulunca kapanır ve
 * seçim düğmede yazar. Zemin soğuk (HÇP kanvası), kart beyaz, kategori rengi noktayla,
 * seçili iş Aurora mavisi (Planım'daki gün seçimiyle aynı). Krem ve şeftali yok.
 * Üç ağırlık: ekip kaydı dolu mavi gradyan, kendi Planım işim sakin beyaz blok ve
 * ince mavi çerçeve, başkasının kişisel işi hiç görünmez.
 * ===========================================================================
 */

/* —— Planım düğmesi ve listesi (Haftalık Takvim revizyonu, 20 Eki 2026) ——————————————————
   Düğme şeridin öteki düğmeleriyle aynı aile (.tk-tool-btn): beyaz, ince çerçeve, yanında turuncu sayı.
   İş tutulunca açık turuncu zemin, işin adı ve çarpı. Liste düğmenin altında beyaz kart: başlık, ipucu,
   işler (tutamak, ad, gün etiketi), altta Planım'da Düzenle. 7 Eki'deki mavi ikon kutulu düğme kalktı. */
#main-app #page-calendar .tk-raf-btn { max-width: 260px; padding: 0 8px 0 12px; }
#main-app #page-calendar .tk-raf-btn[hidden] { display: none; }
.tk-raf-btn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-raf-btn__n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #EA580C; color: #FFFFFF; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#main-app #page-calendar .tk-raf-btn.is-armed { background: #FFF4EC; border-color: #F2A46A; color: #9A3412; }
#main-app #page-calendar .tk-raf-btn.is-armed i { color: #EA580C; }
.tk-raf-btn.is-armed .tk-raf-btn__n { font-size: 14px; }
.tk-raf-kap { position: relative; }
.tk-raf {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 300px;
    max-height: min(70vh, 520px);
    overflow: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 12px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #D3DEEC, 0 18px 40px -12px rgba(15, 23, 42, .35);
    color: var(--tk-ink);
    font-family: var(--tk-font);
    text-align: left;
    white-space: normal;
}
.tk-raf[hidden] { display: none; }
.tk-raf__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-raf__lbl { font-size: 13px; font-weight: 800; color: var(--tk-ink); }
.tk-raf__x { appearance: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: #5C6B85; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.tk-raf__x:hover { background: #F1F5F9; color: var(--tk-ink); }
.tk-raf__x:focus-visible { outline: 2px solid #EA580C; outline-offset: 1px; }
.tk-raf__hint { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: #64748B; }
.tk-raf__bitti { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #F2F7EF; color: #3F6B35; font-size: 12.5px; font-weight: 700; }
.tk-raf__bitti i { color: #16A34A; }
.tk-raf__chips { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }

/* Kart: tutamak, kategori noktası, iki satıra kadar ad, altında süre ve tür. */
.tk-raf__chip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #D3DEEC;
    color: var(--tk-ink);
    font-size: var(--pys-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.tk-raf__chip:hover { box-shadow: inset 0 0 0 1px #F2A46A, 0 6px 14px -8px rgba(234, 88, 12, .5); }
.tk-raf__chip:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.tk-raf__chip:active { cursor: grabbing; }
.tk-raf__chip.is-armed { background: #FFF4EC; color: #9A3412; box-shadow: inset 0 0 0 1.5px #EA580C, 0 8px 18px -10px rgba(234, 88, 12, .6); }
.tk-raf__g { display: block; flex: none; width: 9px; margin-top: 3px; color: #A3B1C2; }
.tk-raf__g svg { display: block; width: 9px; height: 14px; }
.tk-raf__chip.is-armed .tk-raf__g { color: #EA580C; }
.tk-raf__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-raf__ttl { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 700; }
.tk-raf__ttl > .tk-st { margin-right: 5px; vertical-align: -1px; }
.tk-raf__dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 2px #fff; }
.tk-raf__chip.is-armed .tk-raf__dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
/* Aynı nokta yerleşmiş blokta ve saatsiz hapta da durur; kategori adı yazmaz (kesin karar, 1 Eki). */
.tk-pp .tk-raf__dot { margin-right: 0; }
.tk-pp.is-armed .tk-raf__dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.tk-raf__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--pys-fs-xs); font-weight: 600; color: #64748B; }
.tk-raf__chip.is-armed .tk-raf__meta { color: #9A3412; }
/* Devir etiketi Planım'daki "Devir ×N" rozetiyle aynı mor. */
.tk-raf__tag { flex: none; padding: 1px 7px; border-radius: 999px; background: #EDE9FE; box-shadow: inset 0 0 0 1px #C4B5FD; color: #6D28D9; font-size: var(--pys-fs-xs); font-weight: 700; }
.tk-raf__chip.is-armed .tk-raf__tag { background: #FFFFFF; }
/* Gün etiketi (revizyon): işin günü açık turuncu hapta, Planım listesinde günü belli iş böyle ayrılır. */
.tk-raf__tag--gun { border-radius: 6px; background: #FFF4EC; box-shadow: none; color: #9A3412; }

/* Düz zemin: kesik çizgi "buraya bırak" gibi okunuyordu (1 Eki dersi). */
.tk-raf__empty { display: grid; gap: 4px; padding: 12px 10px; border-radius: 11px; background: #F0FDF4; font-size: var(--pys-fs-xs); color: #166534; text-align: center; line-height: 1.4; }
.tk-raf__empty b { font-size: var(--pys-fs-xs); color: #166534; }
.tk-raf__foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid #E6ECF5; font-size: var(--pys-fs-xs); font-weight: 600; color: #64748B; }
.tk-raf__link { appearance: none; padding: 0; border: 0; background: transparent; color: #C2410C; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tk-raf__link:hover { text-decoration: underline; }
.tk-raf__link:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; border-radius: 4px; }

/* Telefon: liste kenardan kenara. */
@media (max-width: 640px) {
    .tk-raf { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 70vh; }
    /* Telefon bandı tek satır: düğmede yalnız simge ve sayı kalır. */
    .tk-raf-btn__t { display: none; }
    .tk-raf-btn.is-armed .tk-raf-btn__t { display: inline; max-width: 120px; }
    /* Boş haftada şeritte başka bilgi yok, yazı sığar: Ekle'nin artısıyla karışmasın (TK-23). */
    .tk-raf-btn.is-empty .tk-raf-btn__t { display: inline; }
}
body.tk-print #tk-raf, body.tk-print #tk-raf-btn { display: none !important; }

/* —— Gün başlığı: saatsiz işler ve İpuçları açıkken aynı tür noktası ———————————
   Doluluk çizgisi kalktı (Alperen, 6 Eki). */
#page-calendar .tk-dh[data-tk-dayhead] { position: relative; transition: background .15s ease; }
/* İş tutulunca başlığın alt kenarında "Saatsiz Bırak" belirir. Başlığa yer açmaz, kenarın
   üstüne biner: başlık uzamaz ve takvim sürüklerken yerinden oynamaz (1 Eki kuralı). */
.tk-grid.is-arming .tk-dh[data-tk-dayhead]::after {
    content: 'Saatsiz Bırak';
    position: absolute;
    z-index: 5;
    left: 8%;
    right: 8%;
    bottom: -9px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1.5px dashed rgba(234, 88, 12, .7);
    border-radius: 999px;
    background: #FFF4EC;
    color: #9A3412;
    font-size: var(--pys-fs-xs);
    font-weight: 800;
    box-sizing: border-box;
}
#page-calendar .tk-dh.is-drop::after,
.tk-grid.is-arming .tk-dh[data-tk-dayhead]:hover::after { border-style: solid; border-color: #EA580C; background: #EA580C; color: #fff; }
/* Farede yalnız üstünde durulan gün (6 Eki, TK-19): altı başlıkta aynı söz kalabalık ediyordu. */
@media (hover: hover) {
    .tk-grid.is-arming .tk-dh[data-tk-dayhead]:not(.is-hover-day):not(.is-drop)::after { display: none; }
}
.tk-dh__pills { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 7px; padding: 0 4px; }
.tk-pp {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    min-width: 0;
    padding: 0 8px;
    /* Renkli Bloklar (Alperen, 7 Eki): hap kategori renginde dolu (zemin satır içinde), yazı beyaz. */
    border-radius: 8px;
    background: #64748B;
    box-shadow: none;
    color: #FFFFFF;
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.tk-pp:hover { box-shadow: 0 4px 10px rgba(34, 48, 58, .18); }
/* Gümüş blokta kategori noktası görünür (16 Eki, TK-34). */
.tk-pp .tk-raf__dot { display: none; }
.tk-pi .tk-raf__dot { margin-right: 5px; box-shadow: 0 0 0 2px #FFFFFF; }
.tk-pp:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 1px; }
.tk-pp__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-pp.is-armed { background: linear-gradient(135deg, #2F9CFF, #5F7CFF); color: #fff; box-shadow: 0 6px 14px rgba(46, 143, 255, .3); }
.tk-pp.is-done { opacity: .6; }
/* Bitmiş iş soluk, adı ince çizgiyle çizili, yeşil tik kalır (Alperen, 6 Eki; 1 Eki'de çizili değildi). */
.tk-pp.is-done .tk-pp__t { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .85); }
.tk-pp.is-locked { cursor: default; }
.tk-pp--more {
    appearance: none;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    color: var(--tk-accent-ink);
    font: inherit;
    font-size: var(--pys-fs-xs);
    font-weight: 800;
    cursor: pointer;
}
.tk-grid.is-arming .tk-dh[data-tk-dayhead] { cursor: pointer; }
/* Bırakma yeri: gün kartı kendi renginde kalır, çevresinde beyaz boşluklu mavi halka (1b, 19 Eki):
   eski açık mavi zemin renkli kartın beyaz yazısını okunmaz yapıyordu. */
.tk-grid.is-arming .tk-dh[data-tk-dayhead]:hover,
#page-calendar .tk-dh.is-drop { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #EA580C, 0 16px 26px -12px rgba(234, 88, 12, .6); }

/* —— Seçim sırasında sütunlar bırakma yeri olduğunu söyler —————————————— */
.tk-grid.is-arming .tk-col { cursor: pointer; outline: 1.5px solid rgba(234, 88, 12, .28); outline-offset: -1.5px; }
.tk-grid.is-arming .tk-col:hover { outline-color: rgba(234, 88, 12, .6); }
.tk-ghost {
    position: absolute;
    left: 6px;
    right: 6px;
    z-index: 5;
    display: block;
    padding: 5px 9px;
    border: 2px dashed #EA580C;
    border-radius: 10px;
    background: rgba(255, 237, 220, .9);
    color: #9A3412;
    font-family: var(--tk-font);
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.tk-ghost__t, .tk-ghost__w { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Gölge dolu zeminli: altındaki kart ya da hap yazının arasından görünüp okunmayı bozuyordu. */
.tk-ghost { background: #FFEDDC; box-shadow: 0 12px 24px -12px rgba(234, 88, 12, .6); }
/* Çakışma: gölge sarıya döner, altında "Bu saatte … var" etiketi asılı durur (Alperen, 6 Eki).
   Etiket gölgenin dışında: kısa blokta da tam okunur. Bırakmayı engellemez. */
.tk-ghost.is-warn { overflow: visible; border-color: #D97706; background: #FFF6DB; color: #92400E; box-shadow: 0 8px 20px rgba(217, 119, 6, .2); }
.tk-ghost__w {
    position: absolute;
    left: -2px;
    right: -2px;
    top: calc(100% + 4px);
    padding: 4px 8px;
    border-radius: 8px;
    background: #92400E;
    color: #fff;
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    box-shadow: 0 6px 14px rgba(146, 64, 14, .25);
}
.tk-ghost__w i { margin-right: 5px; font-size: var(--pys-fi-xs); color: #FCD34D; }


/* —— Saat eksenindeki Planım işi (Haftalık Takvim revizyonu, 20 Eki 2026) ———————————————————
   Beyaz kart, köşe 10, ince gri çerçeve ve hafif gölge. Üst satırda turuncu nokta ve gri saat, altında
   kalın ad. Bitmiş iş açık yeşilimsi gri, noktanın yerinde yeşil tik; çizili ve saydam değil. Kırk
   dakikalık kartta ad tek satır, yarım saatten kısa kartta saat ve ad yan yana. 19 Eki'deki günün
   renginde saat hapı ve sütunun tepesindeki Saatsiz İşler şeridi kalktı. */
.tk-pi {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #E4E9EF;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 14px -12px rgba(15, 23, 42, .3);
    color: #2F3A4B;
    font-family: var(--tk-font);
    text-align: left;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .18s ease, box-shadow .2s ease;
}
.tk-pi:hover { z-index: 2; transform: translateY(-2px); }
/* Beyaz Tahta (Alperen, 26 Eki 2026, A yönü): Planım işi beyaz ve turuncu çerçeveli; ekip kayıtlarının tür
   renklerinden ayrı durur. Bitmiş iş yeşilimsi gri kalır. */
.tk-pi:not(.is-done):not(.tk-dg) { border: 1.5px solid #FDBA74; box-shadow: none; color: #7C2D12; }
.tk-pi { padding-top: 4px; padding-bottom: 4px; gap: 1px; }
.tk-pi:not(.is-done):not(.tk-dg) .tk-pi__saat { color: #C2410C; }
.tk-pi:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; z-index: 2; }
.tk-pi:active { cursor: grabbing; }
.tk-pi > * { flex-shrink: 0; }
/* Durum rozeti sağ üstte ve yalnız başlanmış ya da yapılmamış işte (Alperen, 1 Eki). */
.tk-pi.has-st { padding-right: 24px; }
.tk-pi > .tk-st { position: absolute; right: 7px; top: 7px; }
.tk-pi__ust { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tk-pi__nokta { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #E0683A; }
.tk-pi__ok { flex: 0 0 auto; font-size: 11px; color: #5F9B74; }
/* Karttaki Tamamlandı yuvarlağı (Alperen, 28 Eki 2026, A): noktanın yerinde turuncu halka, tek tıkla işi bitirir;
   üstüne gelince yeşil tik belirir. Bitmiş işte yeşil tik, basınca iş açılır. Tıklama alanı halkanın dışına
   taşar, kart büyümez. Kapanmış haftada ve başkasının takviminde halka yok, eski nokta ya da tik durur. */
.tk-pi__tamam { appearance: none; position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 13px; height: 13px; margin: -1px 0; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #E0683A; color: transparent; font: inherit; font-size: 7px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.tk-pi__tamam::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.tk-pi__tamam:hover { background: #EEF6F0; color: #5F9B74; box-shadow: inset 0 0 0 1.5px #5F9B74; }
.tk-pi__tamam.is-bitti { background: #5F9B74; color: #FFFFFF; box-shadow: none; }
.tk-pi__tamam.is-bitti:hover { background: #4C8360; }
.tk-pi__tamam:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.tk-pi__saat { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; line-height: 1.3; color: #8A96A8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-pi__title { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-pi--orta { justify-content: center; }
.tk-pi--orta .tk-pi__title, .tk-pi--short .tk-pi__title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.tk-pi--short { flex-direction: row; align-items: center; gap: 6px; padding: 0 9px; }
.tk-pi--short .tk-pi__ust { flex: 0 0 auto; }
.tk-pi--short .tk-pi__title { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.tk-pi--orta > .tk-st, .tk-pi--short > .tk-st { top: 50%; margin-top: -6px; }
.tk-pi.is-done { background: #F0F3F0; border-color: #DCE5DC; box-shadow: none; color: #3F4F44; }
/* Bitmiş iş tikli ve üstü çizili (Alperen, 20 Eki 2026); yazı soluk değil, saydamlık yok (16 Eki, TK-31). */
.tk-pi.is-done .tk-pi__title { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(63, 79, 68, .55); }
.tk-pi.is-done .tk-pi__saat { color: #8A978E; }
.tk-pi.is-armed { z-index: 3; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #EA580C, 0 14px 30px -12px rgba(234, 88, 12, .5); }
.tk-pi.is-locked { cursor: default; }
.tk-pi.is-flash { animation: tk-pi-flash 1.6s ease-out .3s; }
.tk-pp.is-flash { animation: tk-rise .5s cubic-bezier(.2, .8, .2, 1) forwards, tk-pi-flash 1.6s ease-out .45s; }
.tk-pp.is-flash { opacity: 1; transform: none; }
@keyframes tk-pi-flash {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .55); }
    100% { box-shadow: 0 0 0 12px rgba(234, 88, 12, 0); }
}
/* Alt kenardaki süre tutamağı: farede belirir, çekince süre uzar ya da kısalır. */
.tk-pi__rs { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.tk-pi__rs::after { content: ''; position: absolute; left: 35%; right: 35%; bottom: 2px; height: 3px; border-radius: 3px; background: #94A3B8; opacity: 0; transition: opacity .15s ease; }
.tk-pi:hover .tk-pi__rs::after, body.tk-resizing .tk-pi__rs::after { opacity: 1; }
.tk-pi__rsl { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: #22303A; color: #fff; font-size: var(--pys-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Süre uzarken çakışma olursa saat etiketi bloğun altına iner ve uyarıyı da yazar. */
body.tk-resizing .tk-pi { overflow: visible; }
.tk-pi__rsl.is-warn { left: -2px; right: -2px; top: calc(100% + 4px); bottom: auto; padding: 4px 8px; border-radius: 8px; background: #92400E; white-space: normal; line-height: 1.3; z-index: 6; }
body.tk-resizing, body.tk-resizing * { cursor: ns-resize !important; user-select: none; }
.tk-grid.is-plan-drag .tk-ev,
.tk-grid.is-plan-drag .tk-pi:not(.is-armed) { pointer-events: none; }

/* —— Durum halkası ———————————————————————————————————————————————————— */
.tk-st {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #9FB3CC;
    color: #fff;
}
.tk-st svg { width: 9px; height: 9px; }
.tk-st--done { background: #16A34A; box-shadow: none; }
.tk-st--prog { background: conic-gradient(#2F9CFF 0 50%, #fff 50% 100%); box-shadow: inset 0 0 0 1.5px #2F9CFF; }
.tk-st--no { background: repeating-linear-gradient(135deg, #E2E8F0 0 2px, #fff 2px 4px); box-shadow: inset 0 0 0 1.5px #B6C0CE; }
.tk-pp .tk-st { width: 11px; height: 11px; }
.tk-pp.is-armed .tk-st { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); background: transparent; }

/* —— Planım işinin bilgi kartı: Saat Şeridi (Alperen, 21 Eki 2026, Yön B) ——————————————
   Yazı yalnız işin adı ve saatler. Tepe bant bloktaki "Planım işi" noktasının turuncusunda
   (.tk-pi__nokta), yazı beyaz. Büyük saatler, aralarında süre, altında günün çizgisi. Durum altta
   tek yuvarlak, yanında ikon düğmeler. Takvimin bilgi kartıyla aynı yüzey (.tk-pop). */
.tk-pop--plan { width: 300px; }
.tk-pc__bas { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 8px 8px 14px; background: #E0683A; color: #FFFFFF; }
.tk-pc__gun { display: flex; align-items: baseline; gap: 6px; }
.tk-pc__gun b { font-family: var(--pys-font-neseli, 'Baloo 2'), var(--tk-font); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-pc__gun span { font-size: 13px; font-weight: 800; }
.tk-pc__devir { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .22); font-size: 12px; }
.tk-pc__parca { display: inline-flex; gap: 4px; }
.tk-pc__parca i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.tk-pc__parca i.is-on { background: #FFFFFF; }
.tk-pc__acts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tk-pc__x { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .2); color: #FFFFFF; font: inherit; font-size: 15px; cursor: pointer; }
.tk-pc__x:hover { background: rgba(255, 255, 255, .34); }
.tk-pc__x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.tk-pc__govde { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.tk-pc__title { margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.32; letter-spacing: -.01em; color: var(--tk-ink); overflow-wrap: anywhere; text-wrap: pretty; }
.tk-pc__when { display: flex; align-items: center; gap: 8px; }
.tk-pc__time { flex: none; width: 76px; height: 40px; padding: 0 6px; box-sizing: border-box; border: 1px solid #D3DEEC; border-radius: 11px; background: #F5F8FC; color: var(--tk-ink); font: inherit; font-family: var(--pys-font-neseli, 'Baloo 2'), var(--tk-font); font-size: 22px; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.tk-pc__time::placeholder { color: #A8B4C4; }
.tk-pc__time:hover { border-color: #9FC0EE; }
.tk-pc__time:focus { outline: none; border-color: #2F9CFF; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(47, 156, 255, .18); }
.tk-pc__time.is-ro { display: grid; place-items: center; width: auto; padding: 0; border: 0; background: transparent; }
/* Süre iki saatin arasında, iki yanında ince çizgi. */
.tk-pc__len { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--tk-ink-soft); font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-pc__len::before, .tk-pc__len::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: #E2E7EE; }
/* Günün çizgisi: takvimin görünen saat aralığı, her saat bir çentik, iş bandın turuncusunda. */
.tk-pc__serit { position: relative; height: 8px; border-radius: 99px; background-color: #EEF1F5;
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--tk-pc-saat, 12) - 1px), #D6DDE6 calc(100% / var(--tk-pc-saat, 12) - 1px) calc(100% / var(--tk-pc-saat, 12))); }
.tk-pc__serit i { position: absolute; top: -3px; bottom: -3px; border-radius: 99px; background: #E0683A; box-shadow: 0 0 0 2px #FFFFFF; }
.tk-pc__uc { display: flex; justify-content: space-between; margin-top: -8px; font-size: 11px; font-weight: 700; color: #8A96A8; font-variant-numeric: tabular-nums; }
.tk-pc__alt { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid #EDF0F4; }
.tk-pc__tamam { appearance: none; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; color: #C5CFDB; box-shadow: inset 0 0 0 2.5px #C5CFDB; font: inherit; font-size: 17px; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.tk-pc__tamam:hover { color: #16A34A; box-shadow: inset 0 0 0 2.5px #16A34A; }
.tk-pc__tamam.is-bitti { background: #16A34A; color: #FFFFFF; box-shadow: 0 6px 14px -6px rgba(22, 163, 74, .7); }
.tk-pc__tamam.is-bitti:hover { background: #15803D; }
.tk-pc__tamam.is-kilit { background: #EEF1F5; color: #64748B; box-shadow: none; font-size: 15px; cursor: default; }
.tk-pc__tamam.is-ro { cursor: default; }
.tk-pc__tamam:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 2px; }
.tk-pc__toplam { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #15803D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-pc__toplam i { font-size: 12px; }
.tk-pc__ic { appearance: none; display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #F5F8FC; box-shadow: inset 0 0 0 1px #D3DEEC; color: var(--tk-ink); font: inherit; font-size: 14px; cursor: pointer; }
.tk-pc__ic:hover { background: #EEF5FF; color: #1D4ED8; box-shadow: inset 0 0 0 1px #9FC0EE; }
.tk-pc__ic:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 1px; }


/* —— Boşluklara Yerleştir (6 Eki, TK-14) —————————————————————————————————————
   Raftaki düğme Planım mavisinde, öneriler kesik çizgili açık mavi kart, üstte tek şerit. */
/* Revizyon (20 Eki 2026): düğme Planım listesinin turuncusunda, açık zemin ve ince çerçeve. */
.tk-raf__auto { appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: #FFF4EC; color: #9A3412; font: inherit; font-family: var(--tk-font); font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1px #F6CDB2; }
.tk-raf__auto:hover { background: #FFE9D8; }
.tk-raf__auto:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.tk-oneri { position: absolute; left: 4px; right: 4px; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 22px 4px 8px; border: 1.5px dashed #2F9CFF; border-radius: 10px; background: rgba(47, 156, 255, .09); color: #1E3A5F; font-family: var(--tk-font); font-size: var(--pys-fs-xs); font-weight: 700; line-height: 1.25; cursor: default; }
.tk-oneri > * { flex-shrink: 0; }
.tk-oneri__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-oneri--kisa { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.tk-oneri--kisa .tk-oneri__t { flex: 1 1 auto; min-width: 0; }
.tk-oneri--kisa .tk-oneri__x { top: 50%; transform: translateY(-50%); }
.tk-oneri__z { font-weight: 600; color: #3B5B85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-oneri__x { appearance: none; position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #3B5B85; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.tk-oneri__x:hover { background: rgba(47, 156, 255, .18); color: #1E3A5F; }
.tk-oneri-bar { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #BBD3F3, 0 14px 30px rgba(15, 23, 42, .16); color: #1E3A5F; font-family: var(--tk-font); font-size: var(--pys-fs-sm); font-weight: 700; white-space: nowrap; }
.tk-oneri-bar i { color: #2563EB; }
.tk-oneri-bar__ok { appearance: none; padding: 7px 16px; border: 0; border-radius: 999px; background: #2563EB; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.tk-oneri-bar__ok:hover { background: #1D4ED8; }
.tk-oneri-bar__no { appearance: none; padding: 7px 8px; border: 0; background: transparent; color: var(--tk-ink-soft); font: inherit; font-weight: 700; cursor: pointer; }
.tk-oneri-bar__ok:focus-visible, .tk-oneri-bar__no:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 2px; }
@media print { .tk-oneri, .tk-oneri-bar { display: none !important; } }

/* —— Haftan Hazır (6 Eki, TK-15): son iş yerleşince birkaç saniyelik kart ————————— */
.tk-kutla {
    position: fixed;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #BBF7D0, 0 18px 36px rgba(22, 101, 52, .18);
    font-family: var(--pys-font-display, 'Plus Jakarta Sans'), system-ui, sans-serif;
    animation: tk-kutla-in .35s cubic-bezier(.2, .8, .2, 1) both;
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.tk-kutla.is-out { opacity: 0; transform: translateY(-6px); }
.tk-kutla__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #16A34A; color: #fff; font-size: 16px; }
.tk-kutla__t { display: flex; flex-direction: column; line-height: 1.3; }
.tk-kutla__t b { color: #14532D; font-size: 15px; font-weight: 800; }
.tk-kutla__t span { color: #166534; font-size: 13px; font-weight: 600; }
.tk-kutla__kf { position: absolute; top: 6px; width: 7px; height: 9px; border-radius: 2px; opacity: 0; animation: tk-kutla-kf 1.4s ease-out forwards; }
@keyframes tk-kutla-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tk-kutla-kf { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--tk-kx, 0px), -46px) rotate(220deg); } }
@media (prefers-reduced-motion: reduce) { .tk-kutla { animation: none; } .tk-kutla__kf { display: none; } }

@media (max-width: 640px) {
    .tk-raf__hint { display: none; }
    .tk-oneri-bar { left: 8px; right: 8px; transform: none; flex-wrap: wrap; white-space: normal; border-radius: 16px; }
    .tk-raf__chip { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tk-pi, .tk-pp.is-flash, .tk-pi.is-flash { animation: none; opacity: 1; transform: none; }
}
@media print {
    .tk-raf, .tk-ghost { display: none !important; }
}

/* ——— Süre penceresi (Alperen, 11 Eki 2026): saate yerleşen iş ne kadar sürer? ——————————
   Ortada küçük pencere, gövdeye takılı; hazır süreler hap, isteğe bağlı dakika, canlı saat aralığı.
   Seçili hap takvimin turuncusu. Telefonda kenarlardan 12 piksel pay. */
.tk-sure-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(34, 48, 58, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: var(--tk-font); color: #22303A; }
.tk-sure-backdrop[hidden] { display: none; }
.tk-sure { width: min(400px, 100%); background: #FFFFFF; border-radius: 18px; box-shadow: 0 30px 80px rgba(34, 48, 58, .32), 0 4px 14px rgba(34, 48, 58, .12); padding: 18px 18px 16px; display: grid; gap: 14px; transform: translateY(8px) scale(.98); opacity: 0; animation: tk-sure-in .22s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes tk-sure-in { to { transform: none; opacity: 1; } }
.tk-sure__head { display: grid; gap: 4px; }
.tk-sure__kicker { margin: 0; font-size: var(--pys-fs-xs); font-weight: 700; color: #9A3412; }
.tk-sure__title { margin: 0; font-size: var(--pys-fs-lg); font-weight: 800; line-height: 1.25; }
.tk-sure__is { margin: 0; font-size: var(--pys-fs-sm); font-weight: 600; color: #5C6B85; overflow-wrap: anywhere; }
.tk-sure__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-sure__chip { appearance: none; border: 1.5px solid #D3DEEC; background: #FFFFFF; color: #22303A; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--pys-fs-sm); font-weight: 700; cursor: pointer; }
.tk-sure__chip:hover { border-color: #F6CDB2; background: #FFF4EC; }
.tk-sure__chip.is-on { background: #EA580C; border-color: #EA580C; color: #FFFFFF; }
.tk-sure__chip:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 2px; }
.tk-sure__ozel { display: flex; align-items: center; gap: 8px; font-size: var(--pys-fs-sm); font-weight: 700; color: #5C6B85; }
.tk-sure__ozel input { width: 84px; height: 36px; padding: 0 10px; border: 1.5px solid #D3DEEC; border-radius: 10px; font: inherit; font-weight: 700; color: #22303A; font-variant-numeric: tabular-nums; }
.tk-sure__ozel input:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 1px; border-color: #2F9CFF; }
.tk-sure__sonuc { margin: 0; padding: 8px 12px; border-radius: 10px; background: #F5F8FC; font-size: var(--pys-fs-sm); font-weight: 800; color: #22303A; font-variant-numeric: tabular-nums; }
.tk-sure__foot { display: flex; justify-content: flex-end; gap: 8px; }
.tk-sure__btn { appearance: none; border: 1.5px solid #D3DEEC; background: #FFFFFF; color: #22303A; height: 38px; padding: 0 16px; border-radius: 11px; font: inherit; font-size: var(--pys-fs-sm); font-weight: 800; cursor: pointer; }
.tk-sure__btn--p { background: #EA580C; border-color: #EA580C; color: #FFFFFF; }
.tk-sure__btn:hover { border-color: #B4C4D9; }
.tk-sure__btn--p:hover { background: #C2410C; border-color: #C2410C; }
.tk-sure__btn:focus-visible { outline: 2px solid #2F9CFF; outline-offset: 2px; }
@media (max-width: 560px) { .tk-sure-backdrop { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .tk-sure { animation: none; transform: none; opacity: 1; } }
html.pys-theme-dark .tk-sure { background: #141A26; color: #E5EAF2; }
html.pys-theme-dark .tk-sure__title { color: #E5EAF2; }
html.pys-theme-dark .tk-sure__chip, html.pys-theme-dark .tk-sure__btn { background: #1A2130; border-color: #2A3A57; color: #E5EAF2; }
html.pys-theme-dark .tk-sure__sonuc { background: #1A2130; color: #E5EAF2; }
html.pys-theme-dark .tk-sure__ozel input { background: #1A2130; border-color: #2A3A57; color: #E5EAF2; }