/* pys_takvim.css — Haftalık Takvim · Mesh Bahçesi (24 Eylül 2026)
 * ===========================================================================
 * Alperen krem/bento kimliğini bıraktı. Bu modülün kendi dili var: lavanta,
 * pembe ve mint renklerinin yavaşça aktığı zemin, beyaz buzlu cam sütunlar,
 * gradyan kayıt blokları. Sol eksende saatler, kart süresi kadar yer kaplar.
 * Mockup: HCP_Redesign_Mockuplar/takvim_serbest_uc_yon.html (Yön 3).
 *
 * Değişkenler ÜÇ yerde tanımlı: ekleme penceresi ve Kim Nerede penceresi body'ye
 * takılıyor, orada #page-calendar kapsamı yok (23 Eylül dersi; 19 Ekim 2026).
 * ===========================================================================
 */

#page-calendar,
.tk-modal-backdrop,
.tk-kn-back {
    /* Yazı renkleri sitenin kendi mürekkebi (HÇP ile aynı). */
    --tk-ink: #22303A;
    --tk-ink-soft: #5C6B85;
    --tk-ink-4: #64748B;
    /* Takvimin kimliği TURUNCU kalır (Alperen, 24 Eyl): üst bant, bugün, şimdi çizgisi,
       ana düğmeler. Mesh zemin ve mor kartlar bu turuncunun etrafında durur. */
    --tk-accent: #EA580C;
    --tk-accent-2: #FBA94C;
    --tk-accent-ink: #9A3412;
    --tk-accent-soft: #FFF4EC;
    --tk-accent-border: #F6CDB2;
    --tk-hero: linear-gradient(135deg, #FBA94C 0%, #C2410C 100%);
    /* Sütunlar zeminden keskin ayrılır (Alperen, 24 Eyl): daha dolu beyaz, ince sıcak kenar. */
    --tk-glass: rgba(255, 255, 255, .9);
    --tk-glass-strong: #FFFFFF;
    --tk-glass-line: rgba(194, 65, 12, .14);
    --tk-line: rgba(34, 48, 58, .08);
    --tk-field-bg: #F5F8FC;
    --tk-warm-line: rgba(34, 48, 58, .12);
    /* Etkinlik kartı HÇP kartlarıyla aynı Aurora mavisi: mor siteye yabancıydı. */
    --tk-ev-a: #2E8FFF;
    --tk-ev-b: #1453B8;
    --tk-away-a: #FBBF24;
    --tk-away-b: #F97316;
    --tk-hour: 32px;
    /* Eksen 50 piksel (Haftalık Takvim revizyonu, 20 Eki 2026). */
    --tk-axis: 50px;
    /* Sitenin kendi yazı tipi. Yabancı font (Inter, JetBrains) siteden koptu (Alperen, 24 Eyl). */
    --tk-font: var(--pys-font-display, 'Plus Jakarta Sans'), system-ui, sans-serif;
    --tk-mono: var(--tk-font);
}

/* —— Başlık: Haftalık Takvim revizyonu (Alperen'in tasarımı, 20 Ekim 2026) ————————————————
   HÇP başlık kalıbı (.hcp-uhead: 36 piksel ikon, 19 piksel başlık, cam hafta kapsülü, beyaz iç kart)
   turuncu degradeyle, köşeleri yuvarlak ayrı bir kart olarak. Bandın içinde sekmeler: Ekip Takvimi
   (yönetici dışında Ekibim), Takvimim, yöneticide Kişi seç; sağda hangi kayıtların göründüğü. 19 Eki'deki
   1b bandı (kayan çizgili degrade, 50 piksel ikon, beyaz hap hafta seçici, altı renkli alt şerit) ve
   günlerin altı rengi kalktı. */
/* HÇP başlığıyla aynı çerçeve (Alperen, 20 Eki 2026: "takvimdeki header ile HÇP'deki header aynı
   büyüklükte olmalı, header kimliğimizi bozma"): panelin tam genişliğinde ve tepesine yapışık,
   yalnız üst köşeler 19 piksel, gölge yok; bant 50, sekme satırı 35 piksel. Renk takvimin turuncusu. */
#main-app #page-calendar .tk-uhead {
    position: relative;
    z-index: 30;
    margin: 0;
    padding: 10px 12px;
    border-radius: 19px 19px 0 0;
    background: linear-gradient(135deg, #FBA94C 0%, #EA580C 55%, #9A3412 100%);
    box-shadow: none;
}
#main-app #page-calendar .hcp-wk-today { color: #C2410C; box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
/* Sekmeler: seçili sekme beyaz hap ve turuncu yazı, ötekiler saydam ve beyaz yazı. */
.tk-sekmeler { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 10px; padding: 0; }
.tk-sekmeler[hidden] { display: none; }
.tk-sekme {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 35px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font: inherit;
    font-family: var(--tk-font);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tk-sekme > i { font-size: 12px; }
.tk-sekme:hover { background: rgba(255, 255, 255, .14); }
/* Seçili sekme HÇP'deki gibi bandın açık tonunda (HÇP mavi bantta #EDF6FF, takvim turuncuda #FFF4EC). */
.tk-sekme.is-on { background: #FFF4EC; color: #C2410C; box-shadow: none; }
.tk-sekme:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.tk-sekme .tk-av { width: 22px; height: 22px; border: 0; font-size: 9px; }
.tk-sekme > .tk-sekme__ok { font-size: 10px; opacity: .8; }
/* Kişi seç (yalnız yönetici): bandın altında beyaz menü, fotoğraf ve tam ad, seçilende tik. */
.tk-kisi-sec { position: relative; }
.tk-kisi-menu { position: absolute; top: 40px; left: 0; z-index: 40; width: 250px; padding: 6px; box-sizing: border-box; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px #D3DEEC, 0 18px 40px -12px rgba(15, 23, 42, .35); }
.tk-kisi-menu p { margin: 0; padding: 6px 8px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: #64748B; }
.tk-kisi-menu__it { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.tk-kisi-menu__it:hover, .tk-kisi-menu__it:focus-visible { background: #F5F8FC; outline: none; }
.tk-kisi-menu__it.is-on { background: #FFF4EC; }
.tk-kisi-menu__it .tk-av { width: 26px; height: 26px; border: 0; font-size: 10px; flex: 0 0 auto; }
.tk-kisi-menu__it span { flex: 1 1 auto; min-width: 0; }
.tk-kisi-menu__it > i { color: #EA580C; font-size: 12px; }
.tk-kapsam { margin-left: auto; padding-right: 6px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .92); white-space: nowrap; }
/* Beyaz iç kart: solda Sıradaki, sağda Paylaş, Planım ve Ekle. */
#main-app #page-calendar .tk-uhead .tk-uhead__card { margin: 0; box-shadow: none; }
#page-calendar .tk-uhead__card {
    position: relative;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    min-height: 0;
    padding: 8px 10px;
    box-sizing: border-box;
}
.tk-uhead__info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; flex: 1 1 auto; }
/* Görünen bilgi parçalarının arasında ince ayraç: hangi yazının neye ait olduğu karışmasın. */
.tk-uhead__info > :not([hidden]) ~ :not([hidden]) { padding-left: 16px; border-left: 1px solid #E9EDF2; }
.tk-uhead__acts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Sıradaki: turuncu saat kutusu, üstte küçük "Sıradaki", altında kalın kayıt; basınca kartı açılır. */
.tk-band-info { display: flex; align-items: center; min-width: 0; }
.tk-band-info[hidden] { display: none; }
.tk-sira { appearance: none; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; padding: 2px 10px 2px 2px; border: 0; border-radius: 11px; background: transparent; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); text-align: left; cursor: pointer; transition: background .15s ease; }
.tk-sira:hover:not(:disabled) { background: #FFF8F2; }
.tk-sira:disabled { cursor: default; }
.tk-sira:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tk-sira__ic { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #FFF4EC; color: #EA580C; font-size: 13px; }
.tk-sira__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tk-sira__t small { font-size: 11.5px; font-weight: 600; color: #64748B; }
.tk-sira__t b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Düğme ailesi (revizyon): 34 piksel, köşe 12, ince mavi-gri çerçeve, beyaz zemin. */
.tk-tool-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #D3DEEC;
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--tk-ink);
    font: inherit;
    font-family: var(--tk-font);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.tk-tool-btn:hover { background: #F5F8FC; }
.tk-tool-btn:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tk-tool-btn[hidden] { display: none; }
.tk-tool-btn i { color: var(--tk-ink-soft); }
.tk-tool-btn--icon { width: 34px; padding: 0; justify-content: center; }
/* Paylaş menüsü (6 Eki, TK-13): Google Takvim'e ekleme ve yazdırma tek düğmenin altında. */
.tk-share { position: relative; }
.tk-share__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px; padding: 6px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px #D3DEEC, 0 16px 34px rgba(15, 23, 42, .16); }
.tk-share__menu[hidden] { display: none; }
.tk-share__it { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); font-size: var(--pys-fs-sm); font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }
.tk-share__it:hover, .tk-share__it:focus-visible { background: #F1F5FA; outline: none; }
.tk-share__it i { width: 18px; text-align: center; color: var(--tk-ink-soft); }
.tk-share-btn[aria-expanded="true"] { background: #F5F8FC; }
/* Ekle: turuncu degrade, beyaz yazı, turuncu gölge (revizyon). */
#main-app #page-calendar #cal-add-event-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #FBA94C 0%, #C2410C 100%);
    color: #fff;
    font: inherit;
    font-family: var(--tk-font);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(234, 88, 12, .6);
    cursor: pointer;
    transition: filter .15s ease;
}
#main-app #page-calendar #cal-add-event-btn:hover { filter: brightness(1.06); }
#main-app #page-calendar #cal-add-event-btn:focus-visible { outline: 2px solid #F97316; outline-offset: 2px; }
#main-app #page-calendar #cal-add-event-btn[hidden],
#main-app #page-calendar #cal-add-event-btn.hidden { display: none; }

/* Google Takvim aboneliği penceresi (6 Eki): Ekle penceresiyle aynı kalıp, içinde üç
   adımlık tarif ve kopyalanacak bağlantı. */
.tk-feed__title { margin: 3px 0 0; color: #fff; font-size: var(--pys-fs-lg); font-weight: 800; }
.tk-feed__steps { margin: 2px 0 4px; padding-left: 20px; list-style: decimal; display: grid; gap: 4px; font-size: var(--pys-fs-sm); font-weight: 600; color: var(--tk-ink); }
.tk-feed__link { display: flex; align-items: center; gap: 8px; }
.tk-feed__link .tk-input { flex: 1; min-width: 0; font-size: var(--pys-fs-xs); }
.tk-feed__msg--err { color: #B91C1C; font-weight: 700; }
.tk-feed__open { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.tk-feed__open.is-off { opacity: .55; pointer-events: none; }

/* Etkinliğin türü (Alperen, 6 Eki): kartta adın önünde, pencerede düğmede ve bilgi
   kartının etiketinde aynı ikon. Toplantı insanlar, Ziyaret bina, Etkinlik yıldız. */
.tk-ev__ic { margin-right: 5px; font-size: var(--pys-fi-xs); opacity: .9; }
.tk-kind__btn i { margin-right: 6px; }
.tk-kind__btn svg { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }
.tk-pop__tag-ic { margin-right: 5px; font-size: var(--pys-fi-xs); }

/* Doğum günü (Alperen, 6 Eki; 7 Eki'de takvimin içine indi): gün sütununda 15:45'te
   yarım saatlik gül rengi blok, şapkalı yüz, ad ve pasta. Kimse elle girmez, profildeki
   gün ve aydan gelir. Tıklanmaz: altındaki saate kayıt eklemeyi engellemez. */
.tk-bdev {
    position: absolute; left: 4px; right: 4px; z-index: 1; box-sizing: border-box;
    display: flex; align-items: center; gap: 6px; padding: 0 8px;
    border-radius: 8px; background: #E11D48; color: #FFFFFF;
    font-family: var(--tk-font); font-size: var(--pys-fs-xs); font-weight: 700; line-height: 1;
    white-space: nowrap; overflow: hidden; pointer-events: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .14);
}
.tk-bday__face { position: relative; flex: none; display: inline-grid; }
.tk-bday__face .tk-av { width: 16px; height: 16px; border-width: 1px; font-size: 7px; }
.tk-bday__hat { position: absolute; left: 50%; top: -7px; width: 9px; height: 11px; transform: translateX(-25%) rotate(-14deg); }
.tk-bday__t { display: flex; flex-direction: row; align-items: center; gap: 4px; min-width: 0; line-height: 1; }
.tk-bday__t b { flex: 0 0 auto; font-weight: 800; }
.tk-bday__t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #FCE7F3; }
.tk-bday__ic { flex: 0 0 auto; color: #FBCFE8; font-size: 10px; }
.tk-bday__gun { flex: 0 0 auto; }
/* Dar sütunda (kenar çubuğu açık, ~125 piksel) "Doğum Günü" sözü sığmıyordu ("Özge'nin Doğ…"):
   söz düşer, ad ve pasta kalır. Şapkalı yüz ve gül rengi blok anlamı taşır. */
@container tkcol (max-width: 175px) {
    .tk-bdev .tk-bday__alt { display: none; }
    .tk-bdev { padding: 0 5px; gap: 4px; }
    .tk-bdev .tk-bday__t { gap: 3px; }
}
/* "· Pazar" notlu blokta söz daha geniş sütunda da düşer (190 piksellik sütunda kesiliyordu). */
@container tkcol (max-width: 240px) {
    .tk-bdev.has-pazar .tk-bday__alt { display: none; }
}
/* Bugün doğum günü varsa takvim açılınca kısa konfeti, oturum başına bir kez. */
.tk-konfeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.tk-konfeti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation-name: tk-konfeti; animation-timing-function: cubic-bezier(.25, .6, .45, 1); animation-fill-mode: forwards; }
@keyframes tk-konfeti {
    0% { opacity: 1; transform: translateY(0) rotate(0); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(420px) rotate(var(--tk-don, 360deg)); }
}
@media (prefers-reduced-motion: reduce) { .tk-konfeti { display: none; } }

/* "Sadece ben" rozeti: kartta kilit simgesiyle, Tüm Ekip rozetiyle aynı yerde. */
.tk-ev__team--me i { margin-right: 4px; font-size: var(--pys-fi-xs); }
#tk-vis-hint { margin: 6px 0 0; }

/* —— İzinliler: beyaz şeritte tek satır (6 Eki; eskiden bandın altında ayrı kutuydu) ——— */
.tk-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--tk-ink);
    font-size: var(--pys-fs-xs);
    font-weight: 600;
    line-height: 1.35;
}
.tk-notice[hidden] { display: none; }
.tk-notice__icon { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; color: #EA580C; }
.tk-notice__icon svg { width: 16px; height: 16px; }
.tk-notice b { font-weight: 800; }
#main-app #page-calendar .tk-uhead .tk-notice { margin: 0; }

/* —— Sayfa ve tahta (Haftalık Takvim revizyonu, 20 Eki 2026) ——————————————————————————————
   Sayfa sitenin açık zemininde durur; başlık ve tahta iki ayrı kart. Tahta beyaz, köşe 22, ince çerçeve,
   yumuşak gölge; altında açıklama satırı. 19 Eki'deki tek beyaz panel ve Gün Bandı kalktı. */
/* Panel HÇP'deki gibi tek yüzey: başlık tepesine yapışık (20 Eki 2026). Zemin açık gri, tahta onun
   üstünde beyaz kart, kenarlardan boşluklu. */
#main-app #page-calendar .glass-panel.pys-page-shell {
    background: #F5F6F8;
    border: 0;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
    overflow: visible;
}
#main-app #content-area > #page-calendar { margin-bottom: 0; padding-bottom: 0; }
/* index.html'deki eski kenar boşlukları (1rem) tahtayı başlıktan içeri itiyordu. */
#main-app #page-calendar .glass-panel .tk-board { margin: 16px 16px 0; }
.tk-board {
    position: relative;
    /* Beyaz Tahta (26 Eki 2026): çerçeve ve köşe ızgaranın kendisinde, kap yalnız taşır. */
    padding: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    color: var(--tk-ink);
    font-family: var(--tk-font);
}
/* Açıklama satırı: türlerin küçük örneği; sağda nasıl kullanılacağı ya da "Salt okunur". */
.tk-lejant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 14px 22px 16px; font-family: var(--tk-font); font-size: 12px; font-weight: 600; color: #6B7A90; }
.tk-lejant[hidden] { display: none; }
.tk-lj__o { display: inline-flex; align-items: center; gap: 7px; }
.tk-lj__k { display: inline-block; flex: 0 0 auto; width: 22px; height: 14px; box-sizing: border-box; border-radius: 5px; }
.tk-lj__k--up { background: #FBF0E9; border: 1px solid #F1D3C1; }
.tk-lj__k--out { background: #EEF1F5 repeating-linear-gradient(135deg, rgba(76, 95, 130, .16) 0 2px, transparent 2px 6px); border: 1px solid #D9E0E8; }
/* Diğer (26 Eki 2026): petrol, noktalı çerçeve; Yukarıda'nın turuncusundan ve Dışarıda'nın gri mavisinden ayrı. */
.tk-lj__k--diger { background: #ECF7F9; border: 1.5px dotted #5FA9BA; }
.tk-lj__k--plan { border-radius: 4px; background: #FFFFFF; border: 1.5px solid #FDBA74; }
.tk-lj__k--ev { border-radius: 4px; background: linear-gradient(135deg, #5B6E90 0%, #4C5F82 100%); }
.tk-lj__ic { display: inline-grid; place-items: center; width: 12px; height: 12px; }
.tk-lj__ic svg { width: 12px; height: 12px; }
.tk-lj__ic--up { color: #E0683A; }
.tk-lj__ic--out { color: #5B6E90; }
.tk-lj__ic--diger { color: #0E7490; }
/* Tür renkleri (Beyaz Tahta, Alperen 26 Eki 2026, A yönü): açık zemin, koyu yazı. Kart, Gün Boyu şeridi,
   bilgi kartı ve açıklama satırı aynı dört rengi kullanır. Planım işi beyaz ve turuncu çerçeveli kalır. */
.tk-tur--toplanti { --t-bg: #EAF1FF; --t-br: #C9DAFB; --t-ink: #1E3A8A; --t-ic: #2563EB; }
.tk-tur--ziyaret { --t-bg: #E3F5EF; --t-br: #B7E3D3; --t-ink: #065F46; --t-ic: #059669; }
.tk-tur--egitim { --t-bg: #FFF4D6; --t-br: #F4DC94; --t-ink: #854D0E; --t-ic: #CA8A04; }
.tk-tur--etkinlik { --t-bg: #FDEBF3; --t-br: #F5C3D8; --t-ink: #9D174D; --t-ic: #DB2777; }
.tk-lj__o.tk-tur--toplanti, .tk-lj__o.tk-tur--ziyaret, .tk-lj__o.tk-tur--egitim, .tk-lj__o.tk-tur--etkinlik { color: var(--t-ink); font-weight: 700; }
.tk-lj__t { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--t-bg); box-shadow: inset 0 0 0 1px var(--t-br); color: var(--t-ic); font-size: 10px; font-style: normal; }
.tk-lj__t i { font-style: normal; }
.tk-lj__ipucu { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; color: #A5AFBE; }
.tk-lj__ipucu > span { display: inline-flex; align-items: center; gap: 6px; }
.tk-lj__ipucu b { padding: 1px 6px; border-radius: 5px; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE3EC; font-size: 11px; color: #6B7A90; }
.tk-lj__ipucu--salt { color: #5C6B85; }

/* —— Kim Nerede penceresi (Alperen, 19 Eki 2026, TK-37; Sade Tablo 26 Eki 2026, A yönü) ——————————
   Herkesin baktığı ve Özge'nin doldurduğu ortak tablo. Ortada açılır; başlık sabit, içerik kayar.
   İnce çizgili tek tablo, hücre kartı yok, bugün sütunu açık turuncu (KN-05). Çip renkleri takvimin
   ızgarasıyla aynı: Yukarıda sıcak turuncu, Dışarıda gri mavi, Diğer petrol (KN-01). Kayıt kartı
   basılan hücrenin yanında açılır (KN-09). Telefonda gün sekmeleri ve seçili günün listesi (KN-11). */
.tk-kn-back {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(16px, 5vh) var(--pys-space-16) var(--pys-space-16);
    background: rgba(34, 48, 58, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--tk-font);
}
.tk-kn-back[hidden] { display: none; }
.tk-kn {
    width: min(960px, 100%);
    max-height: calc(100vh - max(16px, 5vh) - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(34, 48, 58, .32);
    color: var(--tk-ink);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    animation: tk-rise .35s cubic-bezier(.2, .8, .2, 1) forwards;
}
/* Başlık: ince turuncu bant; ad ve hafta oku aynı satırda, sağda çarpı (KN-06). */
.tk-kn__bas { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--tk-hero); color: #FFFFFF; }
.tk-kn__bas-ad { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.tk-kn__bas h3 { margin: 0; font-size: 17px; font-weight: 800; color: #FFFFFF; }
.tk-kn__hafta { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 2px; border-radius: 10px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); font-size: 12.5px; font-weight: 700; }
.tk-kn__hafta > span { padding: 0 6px; white-space: nowrap; }
.tk-kn__ok { appearance: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: #FFFFFF; font-size: 11px; cursor: pointer; }
.tk-kn__ok:hover { background: rgba(255, 255, 255, .2); }
.tk-kn__ok:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.tk-kn__x { appearance: none; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; }
.tk-kn__x:hover { background: rgba(255, 255, 255, .18); }
.tk-kn__x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.tk-kn__govde { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

/* —— Tablo —— */
.tk-kn__tablo-kab { overflow-x: auto; overscroll-behavior-inline: contain; }
.tk-kn__tablo { display: grid; grid-template-columns: 116px repeat(var(--n), minmax(0, 1fr)); min-width: 760px; }
.tk-kn__th { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-bottom: 1px solid #E6EAF0; font-size: 11.5px; font-weight: 700; color: #64748B; }
.tk-kn__th b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; font-size: 15px; font-weight: 800; color: var(--tk-ink); }
.tk-kn__th.is-gecti b { color: #94A3B8; }
.tk-kn__th.is-bugun { background: #FFF8F2; color: #C2410C; }
.tk-kn__th.is-bugun b { background: #EA580C; color: #FFFFFF; }
.tk-kn__th.is-secili b { box-shadow: inset 0 0 0 2px #FB923C; }
.tk-kn__kisi { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 16px; border-bottom: 1px solid #EEF1F5; font-size: 13px; font-weight: 800; }
.tk-kn__kisi b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-kn__kisi .tk-av { width: 26px; height: 26px; flex: 0 0 auto; }
.tk-kn__td { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 44px; padding: 5px; border-bottom: 1px solid #EEF1F5; border-left: 1px solid #F3F5F8; }
.tk-kn__td.is-bugun { background: #FFF8F2; }
.tk-kn__td.is-secili { box-shadow: inset 0 0 0 2px #FB923C; border-radius: 8px; }
/* Ekle: boş hücrede hücrenin tamamı, dolu hücrede altta küçük artı. Yalnız fare ya da klavye odağıyla
   görünür (KN-04); dokunmatikte soluk artı durur. */
.tk-kn__ekle { appearance: none; display: grid; place-items: center; height: 22px; padding: 0; border: 1.5px dashed #F2B88F; border-radius: 8px; background: transparent; color: #EA580C; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.tk-kn__td.is-bos .tk-kn__ekle { position: absolute; inset: 5px; height: auto; }
.tk-kn__td:hover .tk-kn__ekle, .tk-kn__ekle:focus-visible { opacity: 1; }
.tk-kn__ekle:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
@media (hover: none) {
    .tk-kn__ekle { opacity: .5; border-color: transparent; }
}

/* —— Çip: simge, tür adı, küçük satırda saat ve not (KN-02, KN-03) —— */
.tk-kn__cip { appearance: none; display: flex; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; padding: 5px 7px; box-sizing: border-box; border: 1px solid; border-radius: 9px; font: inherit; font-family: var(--tk-font); text-align: left; cursor: pointer; }
.tk-kn__cip:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kn__cip.is-secili { box-shadow: 0 0 0 2px #FB923C; }
.tk-kn__cip-ic { display: inline-grid; place-items: center; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.tk-kn__cip-ic svg { width: 13px; height: 13px; }
.tk-kn__cip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tk-kn__cip-t b { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-kn__cip-t small { font-size: 11px; font-weight: 600; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tk-kn__cip--up { background: #FBF0E9; border-color: #F1D3C1; color: #9A4A2A; }
.tk-kn__cip--up .tk-kn__cip-ic { color: #E0683A; }
.tk-kn__cip--out { background: #EEF1F5 repeating-linear-gradient(135deg, rgba(76, 95, 130, .07) 0 2px, transparent 2px 8px); border-color: #D9E0E8; color: #3F5070; }
.tk-kn__cip--out .tk-kn__cip-ic { color: #5B6E90; }
.tk-kn__cip--diger { background: #ECF7F9; border-color: #C2E2E9; color: #155E75; }
.tk-kn__cip--diger .tk-kn__cip-ic { color: #0E7490; }

/* —— Alt satır: yalnız yazabilene; kopyalama geri planda (KN-07), Kapat yok (KN-08) —— */
.tk-kn__alt { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid #EEF1F5; background: #FBFCFD; }
.tk-kn__kopya { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: #C2410C; font: inherit; font-family: var(--tk-font); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tk-kn__kopya:hover { background: #FFF4EC; }
.tk-kn__kopya:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kn__kopya[disabled] { opacity: .6; cursor: progress; }
.tk-kn__ipucu { margin-left: auto; font-size: 12px; font-weight: 600; color: #94A3B8; }

/* —— Kayıt kartı: masaüstünde hücrenin yanında (KN-09), yeni kayıtta gün ve kişi seçimi (KN-10) —— */
.tk-kn__govde > .tk-kn__duzen { position: absolute; z-index: 5; width: 430px; }
.tk-kn.is-tel .tk-kn__govde > .tk-kn__duzen { position: static; width: auto; margin: 12px; }
.tk-kn__duzen { display: grid; gap: 9px; padding: 12px 14px; box-sizing: border-box; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(30, 41, 59, .1), 0 22px 44px -16px rgba(30, 41, 59, .45); }
.tk-kn__duzen-bas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.tk-kn__duzen-bas b { font-size: 14px; font-weight: 800; }
.tk-kn__duzen-bas span { font-size: 11.5px; font-weight: 700; color: var(--tk-accent); }
.tk-kn__x--kucuk { width: 28px; height: 28px; margin-left: auto; color: #64748B; font-size: 20px; }
.tk-kn__x--kucuk:hover { background: #F1F5F9; }
.tk-kn__x--kucuk:focus-visible { outline: 2px solid var(--tk-accent); }
.tk-kn__satir { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.tk-kn__lbl { font-size: 11.5px; font-weight: 800; color: #64748B; }
.tk-kn__secim { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tk-kn__duzen .tk-kind__btn { height: 30px; padding: 0 10px; font-size: 12px; }
.tk-kn__saat { display: inline-flex; align-items: center; gap: 4px; color: var(--tk-ink-soft); font-weight: 600; }
.tk-kn__saat .tk-time { width: 58px; height: 30px; font-size: 12.5px; }
.tk-kn__not { width: 100%; height: 32px; padding: 0 12px; border: 1px solid #D3DEEC; border-radius: 10px; background: #FFFFFF; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); font-size: 12.5px; box-sizing: border-box; }
.tk-kn__not:focus { outline: none; border-color: var(--tk-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, .16); }
.tk-kn__tg, .tk-kn__kt { appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; border: 1px solid #D3DEEC; background: #FFFFFF; color: #475569; font: inherit; font-family: var(--tk-font); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.tk-kn__tg { justify-content: center; min-width: 38px; padding: 0 6px; border-radius: 8px; }
.tk-kn__kt { padding: 0 8px 0 2px; border-radius: 999px; }
.tk-kn__kt .tk-av { width: 22px; height: 22px; font-size: 9px; }
.tk-kn__tg.is-on, .tk-kn__kt.is-on { border-color: #FB923C; background: #FFF4EC; color: #C2410C; }
.tk-kn__tg:focus-visible, .tk-kn__kt:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kn__ozet { margin: 0; padding: 7px 9px; border-radius: 9px; background: #F8FAFC; font-size: 12px; font-weight: 600; color: #475569; }
.tk-kn__hata { margin: 0; font-size: var(--pys-fs-xs); font-weight: 700; color: #B91C1C; }
.tk-kn__hata[hidden] { display: none; }
.tk-kn__duzen-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tk-kn__duzen-alt .tk-btn i { margin-right: 6px; }
.tk-kn__bosluk { flex: 1 1 auto; }
/* Salt okuyan ya da kaydı değiştiremeyen kişi yalnız bilgiyi görür (KN-12). */
.tk-kn__duzen.is-bilgi { width: 320px; }
.tk-kn__bilgi-tur { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid; border-radius: 10px; font-size: 13px; }
.tk-kn__bilgi-tur b { font-weight: 800; }
.tk-kn__bilgi-tur > span:last-child { font-weight: 600; opacity: .85; }
.tk-kn__bilgi-not { margin: 0; font-size: 13px; font-weight: 600; color: var(--tk-ink); }
.tk-kn__bilgi { margin: 0; font-size: var(--pys-fs-xs); font-weight: 600; color: #64748B; }

/* —— Telefon: gün sekmeleri ve liste (KN-11) —— */
.tk-kn__gunler { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 8px; background: #FFFFFF; border-bottom: 1px solid #EEF1F5; }
.tk-kn__gun { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: #64748B; font: inherit; font-family: var(--tk-font); font-size: 11px; font-weight: 700; cursor: pointer; }
.tk-kn__gun b { font-size: 16px; font-weight: 800; color: var(--tk-ink); }
.tk-kn__gun small { font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.tk-kn__gun.is-bugun b { color: #EA580C; }
.tk-kn__gun.is-on { background: #FFF4EC; box-shadow: inset 0 0 0 1.5px #FB923C; color: #C2410C; }
.tk-kn__gun:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kn__liste { display: grid; gap: 14px; padding: 10px 10px 14px; }
.tk-kn__grup h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12.5px; font-weight: 800; }
.tk-kn__grup h4 small { margin-left: 2px; font-size: 11.5px; font-weight: 700; opacity: .7; }
.tk-kn__grup--up h4 { color: #9A4A2A; } .tk-kn__grup--up h4 .tk-kn__cip-ic { color: #E0683A; }
.tk-kn__grup--out h4 { color: #3F5070; } .tk-kn__grup--out h4 .tk-kn__cip-ic { color: #5B6E90; }
.tk-kn__grup--diger h4 { color: #155E75; } .tk-kn__grup--diger h4 .tk-kn__cip-ic { color: #0E7490; }
.tk-kn__grup--yok h4 { color: #94A3B8; }
.tk-kn__sat { appearance: none; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "av ad z" "av not not"; align-items: center; column-gap: 10px; row-gap: 2px; width: 100%; padding: 7px 10px; box-sizing: border-box; border: 0; border-radius: 11px; background: transparent; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); font-size: 13px; text-align: left; cursor: pointer; }
.tk-kn__grup .tk-kn__sat + .tk-kn__sat { margin-top: 4px; }
.tk-kn__grup--up .tk-kn__sat { background: #FBF0E9; }
.tk-kn__grup--out .tk-kn__sat { background: #EEF1F5; }
.tk-kn__grup--diger .tk-kn__sat { background: #ECF7F9; }
.tk-kn__sat:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kn__sat .tk-av { grid-area: av; width: 26px; height: 26px; }
.tk-kn__sat b { grid-area: ad; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-kn__sat-z { grid-area: z; font-size: 12.5px; font-weight: 700; }
.tk-kn__sat-not { grid-area: not; min-width: 0; font-size: 12.5px; font-weight: 600; color: #475569; overflow-wrap: anywhere; }
.tk-kn__sat.is-yok { grid-template-areas: "av ad z"; color: #94A3B8; cursor: default; }
.tk-kn__sat.is-yok .tk-av { opacity: .55; }
.tk-kn__sat.is-yok .tk-kn__sat-not { display: none; }
.tk-kn__sat-ekle { grid-area: z; appearance: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 0; border-radius: 8px; background: transparent; color: #C2410C; font: inherit; font-family: var(--tk-font); font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px #F6CDB2; cursor: pointer; }
.tk-kn__sat-ekle i { font-size: 10px; }
.tk-kn__sat-ekle:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
@media (max-width: 640px) {
    .tk-kn-back { padding: 12px; }
    .tk-kn { border-radius: 18px; max-height: calc(100vh - 24px); }
    .tk-kn__bas { padding: 10px 8px 10px 14px; }
    .tk-kn__satir { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .tk-kn__duzen.is-bilgi { width: auto; }
    .tk-kn__alt { padding: 10px 12px; }
}

/* Masaüstünde kaydırma çubuğu yok: tahta tam boyuyla sığar. Yalnız dar ekranda yana kayar. */
#calendar-scroll-wrap { overflow: visible; }
@media (max-width: 960px) {
    #calendar-scroll-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
        scroll-padding-left: calc(var(--tk-axis) + 10px); }
    /* Saat ekseni sola yapışık (Alperen, 1 Eki): yana kaydırınca saatler kayboluyordu. */
    #page-calendar .tk-axis, #page-calendar .tk-axis-head {
        position: sticky;
        left: 0;
        z-index: 6;
        background: #FFFFFF;
        box-shadow: 8px 0 10px -8px rgba(15, 23, 42, .12);
    }
}

/* —— Izgara: Haftalık Takvim revizyonu (Alperen'in tasarımı, 20 Eki 2026) ——————————————————
   Her gün tek kart: üstte 64 piksellik başlık (ortada gün adı ve Baloo 2 numara), altında saat sütunu.
   Öteki günler açık gri, bugün beyaz kart, turuncu degrade başlık ve sıcak gölge. Günler 10 piksel
   aralıklı, Cumartesi dar (sütun genişliklerini pys_takvim.js yazar). Saat çizgisi yalnız tam saatte.
   19 Eki'deki altı renkli gün kartı, renkli sütun zemini ve gün renginde çizgiler kalktı. */
.tk-grid {
    display: grid;
    grid-template-columns: var(--tk-axis) repeat(6, minmax(120px, 1fr));
    /* Beyaz Tahta (Alperen, 26 Eki 2026, A yönü): ayrı gün kartları yerine tek beyaz tahta, net tek ton
       çizgi (#E2E8F0). Köşe ızgaranın kendisinde; clip yapışkan başlığı bozmaz. */
    gap: 0;
    min-width: 940px;
    position: relative;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    overflow: clip;
}
/* Eksenin üstündeki köşe hücresi boş. */
.tk-axis-head { background: #FFFFFF; border-bottom: 1px solid #E2E8F0; }
.tk-dh {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0;
    background: #FFFFFF;
    color: #0F172A;
    font-family: var(--tk-font);
    text-align: center;
}
.tk-dh .tk-dn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.2; color: #64748B; }
/* Gün sayıları Baloo 2 (Alperen, 1 Ekim 2026); gün adları ve saatler Jakarta kalır. */
.tk-dh .tk-dd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; font-family: var(--pys-font-neseli, 'Baloo 2'), var(--tk-font); font-size: 22px; font-weight: 700; line-height: 1; color: inherit; font-variant-numeric: tabular-nums; }
/* Bugün: gün adı turuncu, numara turuncu dairede (Beyaz Tahta). Geçmiş günün numarası açık gri. */
.tk-dh.is-today { background: #FFFFFF; color: #0F172A; }
.tk-dh.is-today .tk-dn { color: #EA580C; }
.tk-dh.is-today .tk-dd { background: #EA580C; color: #FFFFFF; }
.tk-dh.is-past .tk-dd { color: #94A3B8; }
/* Saat ekseni: açık gri, eşit genişlikli rakam; ilk saat sütunun tepesine, son saat dibine oturur. */
.tk-axis { position: relative; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #64748B; background: transparent; }
.tk-axis span { position: absolute; right: 10px; transform: translateY(-50%); white-space: nowrap; }
.tk-axis span.is-ilk { transform: none; }
.tk-axis span.is-son { transform: translateY(-100%); }
.tk-axis span[hidden] { display: none; }
/* Gün sütunu: başlığın altında, aynı kartın gövdesi. */
.tk-col {
    position: relative;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid #E2E8F0;
    border-radius: 0;
    background: #FFFFFF;
    container-type: inline-size;
    container-name: tkcol;
}
.tk-col.is-today { background: #FFFFFF; }
.tk-grid.is-editable .tk-col { cursor: copy; }
.tk-grid.is-salt .tk-col { cursor: default; }
.tk-hl { position: absolute; left: 0; right: 0; border-top: 1px solid #E2E8F0; pointer-events: none; }

/* Sürükleyerek aralık seçimi: kesikli turuncu kutu, içinde başlangıç ve bitiş. */
.tk-drag {
    position: absolute;
    left: 6px;
    right: 6px;
    z-index: 5;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 2px dashed #EA580C;
    border-radius: 10px;
    background: rgba(255, 237, 220, .9);
    color: #9A3412;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    box-shadow: 0 12px 24px -12px rgba(234, 88, 12, .6);
}
.tk-drag[hidden] { display: none; }
.tk-grid.is-dragging { user-select: none; cursor: ns-resize; }
.tk-grid.is-dragging .tk-cue { display: none; }
/* Fare boş saatte gezerken: "+ 10:15 · yeni kayıt" kesikli turuncu şerit. */
.tk-cue {
    position: absolute;
    left: 6px;
    right: 6px;
    z-index: 3;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1.5px dashed rgba(234, 88, 12, .6);
    border-radius: 9px;
    background: rgba(255, 244, 234, .8);
    color: #9A3412;
    font-family: var(--tk-font);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}
.tk-cue i { font-size: 10px; }
.tk-cue[hidden] { display: none; }

/* —— Kim nerede zemini (revizyon, 20 Eki 2026) ————————————————————————————————————————
   Yukarıda: sıcak açık zemin, yukarıdan aşağı solan degrade, ince sıcak çerçeve, dizüstü simgesi.
   Dışarıda: gri-mavi zemin, çapraz çizgili, çanta simgesi. Zemin tıklanmaz (altındaki saate kayıt
   açılır); sağ üstteki beyaz çip yüzler, simge ve saatle bilgi kartını açar. Uzun zeminde sağ altta
   adlar yazar. Çizgiler kıpırdamaz (6 Eki, TK-06: ekranda sürekli kıpırdayan şey gözü çekiyordu). */
.tk-zn { position: absolute; z-index: 0; box-sizing: border-box; border-radius: 10px; pointer-events: none; }
/* Başkalarının zeminleri sakinleşti (Alperen, 20 Eki 2026: "iconlarla, şeffaf, göz yormayan"):
   dolgu neredeyse saydam, çizgi kesikli ama net, tür ortadaki soluk ikonla okunur. Renk kimliği
   aynı: Yukarıda turuncu, Dışarıda gri mavi. Soldurma değil, az boya + net çizgi. */
.tk-zn--up { background-color: rgba(224, 104, 58, .055); border: 1.5px dashed rgba(224, 104, 58, .38); --zn-fg: #9A4A2A; --zn-ic: #E0683A; }
.tk-zn--out { background-color: rgba(76, 95, 130, .045); background-image: repeating-linear-gradient(135deg, rgba(76, 95, 130, .06) 0 2px, transparent 2px 12px); border: 1.5px dashed rgba(76, 95, 130, .35); --zn-fg: #4C5F82; --zn-ic: #5B6E90; }
/* Diğer: petrol, noktalı çizgi; kesikli iki türden biçimiyle de ayrılır. */
.tk-zn--diger { background-color: rgba(14, 116, 144, .05); border: 2px dotted rgba(14, 116, 144, .42); --zn-fg: #155E75; --zn-ic: #0E7490; }
.tk-zn__su { position: absolute; inset: 0; display: grid; place-items: center; color: var(--zn-ic); opacity: .14; pointer-events: none; }
.tk-zn__su svg { width: 34px; height: 34px; }
.tk-zn__cip {
    appearance: none;
    position: absolute;
    top: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px 0 3px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .4), 0 0 0 1px rgba(15, 23, 42, .08);
    color: var(--zn-fg);
    font: inherit;
    font-family: var(--tk-font);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s ease;
}
.tk-zn__cip:hover { transform: translateY(-1px); }
.tk-zn__cip:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.tk-zn__cip.is-flash { animation: tk-flash 2s ease-out .3s; }
.tk-zn__yuz { display: flex; flex: 0 0 auto; }
.tk-zn__yuz .tk-av { width: 20px; height: 20px; border: 0; box-shadow: 0 0 0 1.5px #FFFFFF; font-size: 8px; }
.tk-zn__yuz .tk-av + .tk-av { margin-left: -6px; }
.tk-zn__ic { display: inline-grid; place-items: center; flex: 0 0 auto; margin-left: 2px; color: var(--zn-ic); }
.tk-zn__ic svg { width: 12px; height: 12px; }
.tk-zn__z { font-variant-numeric: tabular-nums; }
.tk-zn__ad { position: absolute; left: 10px; right: 10px; bottom: 8px; text-align: right; font-size: 11px; font-weight: 800; color: var(--zn-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* —— Kayıt kartı: Ekip kaydı (revizyon, 20 Eki 2026) ——————————————————————————————————————
   Her etkinlik arduvaz mavisi degrade kart, beyaz yazı: üst satırda saat ve katılan sayısı, altında
   kalın ad. Köşe 10, alttan yumuşak mavi gölge, üstüne gelince iki piksel kalkar. 19 Eki'deki turuncu
   ekip kartı, OBİG işareti ve beyaz kişiye özel kart bununla kalktı. */
.tk-ev {
    appearance: none;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #5B6E90 0%, #4C5F82 100%);
    color: #FFFFFF;
    font: inherit;
    font-family: var(--tk-font);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 20px -14px rgba(76, 95, 130, .8);
    transition: transform .18s ease, box-shadow .2s ease;
}
.tk-ev:hover { transform: translateY(-2px); z-index: 2; }
/* Aynı saatte iki kayıt yan yana düşünce kart dar kalır: katılan sayısı gizlenir, saat kesilmez. */
.tk-ev { container-type: inline-size; container-name: tkev; }
@container tkev (max-width: 130px) { .tk-ev .tk-ev__n { display: none; } }
.tk-ev:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; z-index: 2; }
.tk-ev > * { flex-shrink: 0; }
.tk-ev__ust { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tk-ev__saat { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .8); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-ev__n { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #F2D9CA; font-size: 10.5px; font-weight: 800; line-height: 1; }
.tk-ev__n i { font-size: 8.5px; }
/* Ad kalın, kartın boyuna sığdığı kadar satır (satır sayısını pys_takvim.js verir). */
.tk-ev__title { min-width: 0; max-width: 100%; font-size: 12.5px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-ev--tight { justify-content: center; }
.tk-ev--tight .tk-ev__title, .tk-ev--short .tk-ev__title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.tk-ev--short { flex-direction: row; align-items: center; gap: 6px; padding: 0 9px; }
.tk-ev--short .tk-ev__title { flex: 1 1 auto; font-size: 12px; }
.tk-ev.is-flash { animation: tk-flash 2s ease-out .3s; }
/* Geçmiş kayıt saydamlaşmaz (16 Eki, TK-31): degrade açılır, ad okunur kalır. */
.tk-col .tk-ev.is-over { background: linear-gradient(135deg, #8696B2 0%, #7787A4 100%); box-shadow: none; }
/* —— Beyaz Tahta kartı (Alperen, 26 Eki 2026, A yönü) ————————————————————————————————————
   Kart türünün açık renginde, ince aynı tonda çerçeve, koyu yazı; saatin önünde türün simgesi. Koyu
   arduvaz degrade ve mavi gölge kalktı. Geçmiş kayıt saydamlaşmaz, açık griye döner, ad okunur kalır. */
.tk-ev[class*="tk-tur--"] { padding: 4px 9px; gap: 1px; background: var(--t-bg); color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-br); }
.tk-ev[class*="tk-tur--"]:hover { box-shadow: inset 0 0 0 1px var(--t-br), 0 8px 16px -12px rgba(15, 23, 42, .45); }
.tk-ev[class*="tk-tur--"] .tk-ev__saat { color: var(--t-ink); opacity: .8; }
.tk-ev__tur { flex: 0 0 auto; margin-right: 1px; color: var(--t-ic); font-size: 10.5px; }
.tk-ev__yuz { display: inline-flex; margin-left: auto; flex: 0 0 auto; }
.tk-ev__yuz .tk-av { width: 18px; height: 18px; border: 0; font-size: 8px; box-shadow: 0 0 0 1.5px #FFFFFF; }
.tk-ev__yuz .tk-av + .tk-av { margin-left: -5px; }
@container tkev (max-width: 130px) { .tk-ev .tk-ev__yuz { display: none; } }
.tk-col .tk-ev.is-over[class*="tk-tur--"] { background: #F4F6F9; color: #64748B; box-shadow: inset 0 0 0 1px #E2E8F0; }
.tk-col .tk-ev.is-over .tk-ev__tur { color: #94A3B8; }
.tk-ev.is-moving { z-index: 6; box-shadow: 0 26px 50px rgba(34, 48, 58, .3); transition: none; cursor: grabbing; animation: none; opacity: .92; }
.tk-grid.is-moving { user-select: none; }
.tk-grid.is-editable .tk-ev { cursor: grab; }
.tk-ev-more {
    position: absolute;
    right: 8px;
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--tk-ink);
    color: #fff;
    font: inherit;
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}
.tk-av--leave { opacity: .55; outline: 2px dashed rgba(234, 88, 12, .8); outline-offset: -2px; }
.tk-ev__place { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ev__place svg { width: 12px; height: 12px; flex: 0 0 auto; }
.tk-ev__team { margin-top: 2px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #FFFFFF; font-size: var(--pys-fs-xs); font-weight: 700; white-space: nowrap; }
.tk-ev__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-ev__who-nm { min-width: 0; font-size: var(--pys-fs-xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ekibin yüzleri (Tüm Hafta şeridinde): iki yüz üst üste, kalanı "+N". */
.tk-ev__yuzler { display: flex; flex: 0 0 auto; }
.tk-ev__yuzler .tk-av { width: 22px; height: 22px; border: 0; box-shadow: 0 0 0 2px #FFFFFF; font-size: 9px; }
.tk-ev__yuzler .tk-av + .tk-av { margin-left: -6px; }
.tk-ev__yuzler .tk-av--more { background: #FFFFFF; color: #4C5F82; font-size: 9.5px; font-weight: 800; }
/* Saat kartta yazmıyorsa fare gelince kartın ÜSTÜNDE koyu bir balon çıkar (24 Eyl). */
.tk-tip {
    position: absolute;
    z-index: 30;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--tk-ink);
    color: #fff;
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(34, 48, 58, .28);
    transform: translate(-50%, -100%) translateY(-8px);
    opacity: 0;
    transition: opacity .12s ease;
}
.tk-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--tk-ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.tk-tip.is-in { opacity: 1; }
.tk-tip.has-ad { white-space: normal; max-width: 280px; width: max-content; line-height: 1.3; text-align: center; }
.tk-tip[hidden] { display: none; }

/* Tüm Hafta şeridi (Özge'nin isteği, Alperen kararı Yön B, 19 Eki 2026): gün başlıklarının üstünde ayrı
   satır; şerit kendi günlerinin sütunları boyunca uzanır. Revizyonla ekip kaydının arduvaz mavisinde. */
.tk-grid.has-hafta > .tk-axis-head, .tk-grid.has-hafta > .tk-dh { grid-row: 2; }
.tk-grid.has-hafta > .tk-axis, .tk-grid.has-hafta > .tk-col { grid-row: 3; }
.tk-hf-eksen { grid-row: 1; grid-column: 1; align-self: stretch; justify-self: stretch; display: grid; place-items: center; padding: 6px 2px; border-bottom: 1px solid #E2E8F0; font-size: 10.5px; font-weight: 800; line-height: 1.15; text-align: center; color: #64748B; }
.tk-hf { grid-row: 1; grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; padding-block: 6px; border-bottom: 1px solid #E2E8F0; }
.tk-hf__k { margin: 0 4px; }
.tk-hf__k {
    display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 12px 0 10px;
    border: 0; border-radius: 12px; font: inherit; text-align: left; cursor: pointer;
    color: #FFFFFF; background: linear-gradient(135deg, #5B6E90 0%, #4C5F82 100%); box-shadow: 0 10px 20px -14px rgba(76, 95, 130, .8);
}
.tk-hf__k:hover { box-shadow: 0 14px 24px -14px rgba(76, 95, 130, .9); }
/* Beyaz Tahta (Alperen, 26 Eki 2026, A yönü): şerit kartları da türünün açık renginde, hafif taralı. Tek
   günlük Gün Boyu kaydı iki satır: üstte ad, altta saat ya da "Tüm Gün"; yüzler yalnız haftalık kayıtta. */
.tk-hf__k[class*="tk-tur--"] { color: var(--t-ink); background: var(--t-bg) repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 9px); box-shadow: inset 0 0 0 1px var(--t-br); }
.tk-hf__k[class*="tk-tur--"]:hover { box-shadow: inset 0 0 0 1px var(--t-br), 0 8px 16px -12px rgba(15, 23, 42, .45); }
.tk-hf__k[class*="tk-tur--"] .tk-ev__ic { color: var(--t-ic); }
.tk-hf__k.is-over[class*="tk-tur--"] { background: #F4F6F9; color: #64748B; box-shadow: inset 0 0 0 1px #E2E8F0; }
.tk-hf__k.is-tek { height: auto; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.tk-hf__k.is-tek .tk-hf__ic { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.tk-hf__k.is-tek .tk-hf__ic .tk-ev__ic { grid-row: 1 / span 2; }
.tk-hf__k.is-tek .tk-hf__ad { grid-column: 2; line-height: 1.2; }
.tk-hf__k.is-tek .tk-hf__z { grid-column: 2; font-size: 11px; line-height: 1.2; }
.tk-hf__k.is-tek .tk-hf__son { display: none; }
/* Gün Boyu kaydının saatleri sütunda yalnız hafif taranır: o saatler dolu ama tahta açık kalır. */
.tk-gb-alan { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--t-br) 0 1.5px, transparent 1.5px 10px); opacity: .75; }
.tk-hf__k .tk-ev__ic { color: #F2D9CA; }
.tk-hf__k.is-over { background: linear-gradient(135deg, #8696B2 0%, #7787A4 100%); box-shadow: none; }
.tk-hf__k.is-flash { animation: tk-flash 2s ease-out .3s; }
.tk-hf__k:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
/* Ad ve günler telefonda tahta yana kayarken ekranın solunda kalır. */
.tk-hf__ic { position: sticky; left: 10px; display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tk-hf__ic .tk-ev__ic { flex: none; }
.tk-hf__ad { font-size: var(--pys-fs-sm); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.tk-hf__z { font-size: var(--pys-fs-xs); font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.tk-hf__z--kisa { display: none; }
.tk-hf__yer { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pys-fs-xs); font-weight: 500; opacity: .9; }
.tk-hf__yer svg { width: 12px; height: 12px; flex: none; }
.tk-hf__son { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.tk-hf__son .tk-ev__team, .tk-hf__son .tk-ev__who { margin-top: 0; }
.tk-hf__planim { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; color: #059669; font-size: 9px; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
@media (max-width: 640px) {
    .tk-hf__z--uzun, .tk-hf__yer { display: none; }
    .tk-hf__z--kisa { display: inline; }
}

.tk-avs { display: flex; flex: none; }
.tk-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: var(--pys-fi-xs);
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .92);
    background: linear-gradient(135deg, #60A5FA, #2563EB);
}
.tk-avs .tk-av + .tk-av { margin-left: -7px; }
/* Fotoğraf: yüze yakın kesim, baş harfin üstünü kapatır. */
.tk-av, .tk-chip__av { position: relative; overflow: hidden; }
.tk-av img, .tk-chip__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.25); }
.tk-av--more { background: rgba(30, 27, 75, .55); }
.tk-hue-0 { background: linear-gradient(135deg, #60A5FA, #2563EB) !important; }
.tk-hue-1 { background: linear-gradient(135deg, #F472B6, #BE185D) !important; }
.tk-hue-2 { background: linear-gradient(135deg, #34D399, #047857) !important; }
.tk-hue-3 { background: linear-gradient(135deg, #FBBF24, #D97706) !important; }
.tk-hue-4 { background: linear-gradient(135deg, #A78BFA, #6D28D9) !important; }
.tk-hue-5 { background: linear-gradient(135deg, #2DD4BF, #0F766E) !important; }

/* Şimdi: turuncu ince çizgi, başında nokta; eksende aynı hizada turuncu saat (revizyon, 20 Eki 2026).
   Kartların altından geçer (19 Eki, TK-46: üstte durunca o saatteki kartın yazısını kesiyordu). Nokta
   açılışta üç kez atar ve durur (6 Eki, TK-06). */
.tk-now { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: #EA580C; color: rgba(234, 88, 12, .6); z-index: 0; pointer-events: none; transform-origin: left center; }
.tk-now::before { content: ''; position: absolute; left: -2px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #EA580C; animation: tk-pulse 2s ease-out 3; }
.tk-axis .tk-now-lbl { right: 4px; z-index: 2; padding: 2px 6px; border-radius: 6px; background: #EA580C; color: #FFFFFF; font-size: 10.5px; font-weight: 800; line-height: 1.35; }

/* Boş hafta: tahtanın ortasında beyaz kart (revizyon). */
.tk-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px 24px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #DDE3EB, 0 14px 30px -16px rgba(15, 23, 42, .4);
    color: #5C6B85;
    font-size: 12px;
    text-align: center;
    pointer-events: none;
    z-index: 7;
}
.tk-empty i { font-size: 18px; color: #EA580C; margin-bottom: 4px; }
.tk-empty b { color: var(--tk-ink); font-size: 14px; }

/* Kişi takviminde o kişinin planı: Planım kartı (pys_takvim_raf.css .tk-pi), salt okunur. */
.tk-pi.tk-dg { cursor: default; }

/* Tekrar anahtarı */
.tk-repeat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--pys-fs-sm); font-weight: 600; color: var(--tk-ink); }
.tk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-switch__track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(34, 48, 58, .18); transition: background .15s ease; }
.tk-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.tk-switch input:checked + .tk-switch__track { background: var(--tk-accent); }
.tk-switch input:checked + .tk-switch__track::after { transform: translateX(16px); }
.tk-switch input:focus-visible + .tk-switch__track { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tk-repeat__n[hidden] { display: none; }
.tk-repeat__n select { appearance: none; padding: 6px 28px 6px 10px; border: 1px solid var(--tk-warm-line); border-radius: 9px; background: var(--tk-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B85' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; font: inherit; font-size: var(--pys-fs-sm); font-weight: 700; color: var(--tk-ink); }
.tk-pop__del { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-pop__del .tk-btn { padding: 7px 10px; font-size: var(--pys-fs-xs); }

/* Geçmiş tarih notu */

/* Katılım yanıtı: rozette küçük nokta, bilgi kartında iki düğme */
.tk-av--yes::after, .tk-av--no::after, .tk-chip__av.tk-av--yes::after, .tk-chip__av.tk-av--no::after {
    content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid #fff; background: #16A34A; z-index: 2;
}
.tk-av--no::after { background: #94A3B8; }
.tk-pop__rsvp { margin: 6px 2px 4px; font-size: var(--pys-fs-xs); line-height: 1.5; display: grid; gap: 2px; }
.tk-pop__rsvp-yes { color: #15803D; font-weight: 600; }
.tk-pop__rsvp-no { color: #64748B; font-weight: 600; }
.tk-pop__answer { display: flex; gap: 6px; margin: 8px 0 4px; }
.tk-ans {
    appearance: none; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border: 1px solid var(--tk-warm-line); border-radius: 10px; background: #fff;
    color: var(--tk-ink); font: inherit; font-size: var(--pys-fs-sm); font-weight: 700; cursor: pointer;
}
.tk-ans:hover { background: var(--tk-field-bg); }
.tk-ans.is-on { border-color: transparent; background: #16A34A; color: #fff; }
.tk-ans--no.is-on { background: #64748B; }

/* —— Bilgi kartı (revizyon, 20 Eki 2026) ——————————————————————————————————————————————
   Kartın yanında açılır, 320 piksel, köşe 16. Üst bölüm kaydın kendi renginde: etkinlik arduvaz mavisi
   degrade ve beyaz yazı, Yukarıda sıcak açık zemin, Dışarıda gri çizgili zemin. Altında ayrıntılar,
   katılım yanıtı, Planıma Ekle ve düğmeler. */
.tk-pop {
    position: absolute;
    width: 320px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 24px 50px -16px rgba(34, 48, 58, .45);
    color: var(--tk-ink);
    font-family: var(--tk-font);
    z-index: 20;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.tk-pop.is-in { opacity: 1; transform: none; }
.tk-pop[hidden] { display: none; }
.tk-pop__ust { padding: 14px 16px 13px; }
.tk-pop__ust--ev { background: linear-gradient(135deg, #5B6E90 0%, #4C5F82 100%); color: #FFFFFF; }
.tk-pop__ust--up { background-color: #FBF0E9; background-image: linear-gradient(180deg, #F6DECF 0%, rgba(246, 222, 207, 0) 90%); border-bottom: 1px solid #F1D3C1; color: #9A4A2A; }
.tk-pop__ust--out { background-color: #EEF1F5; background-image: repeating-linear-gradient(135deg, rgba(76, 95, 130, .16) 0 3px, transparent 3px 10px); border-bottom: 1px solid #D9E0E8; color: #4C5F82; }
.tk-pop__ust--diger { background-color: #ECF7F9; background-image: linear-gradient(180deg, #D5EEF3 0%, rgba(213, 238, 243, 0) 90%); border-bottom: 1px solid #C2E2E9; color: #155E75; }
.tk-pop__govde { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; }
.tk-pop__govde:empty { display: none; }
.tk-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-pop__tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #FFFFFF; color: #9A4A2A; font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); white-space: nowrap; }
.tk-pop__tag svg { width: 12px; height: 12px; color: #E0683A; }
.tk-pop__ust--ev .tk-pop__tag { background: rgba(255, 255, 255, .16); color: #F2D9CA; box-shadow: none; }
/* Bilgi kartının üstü kaydın tür renginde (26 Eki 2026, Beyaz Tahta). */
.tk-pop__ust--ev[class*="tk-tur--"] { background: var(--t-bg); color: var(--t-ink); border-bottom: 1px solid var(--t-br); }
.tk-pop__ust--ev[class*="tk-tur--"] .tk-pop__tag { background: #FFFFFF; color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-br); }
.tk-pop__ust--ev[class*="tk-tur--"] .tk-pop__tag i, .tk-pop__ust--ev[class*="tk-tur--"] .tk-pop__tag-ic { color: var(--t-ic); }
.tk-pop__ust--ev[class*="tk-tur--"] .tk-pop__x { background: rgba(255, 255, 255, .7); }
.tk-pop__ust--out .tk-pop__tag { color: #4C5F82; }
.tk-pop__ust--out .tk-pop__tag svg { color: #5B6E90; }
.tk-pop__ust--diger .tk-pop__tag { color: #155E75; }
.tk-pop__ust--diger .tk-pop__tag svg { color: #0E7490; }
.tk-pop__x { appearance: none; display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .75; font-size: 18px; line-height: 1; cursor: pointer; }
.tk-pop__x:hover { background: rgba(0, 0, 0, .06); opacity: 1; }
.tk-pop__ust--up .tk-pop__x, .tk-pop__ust--out .tk-pop__x, .tk-pop__ust--diger .tk-pop__x { background: rgba(255, 255, 255, .7); }
.tk-pop__title { margin: 9px 0 4px; font-size: 15.5px; font-weight: 800; line-height: 1.35; text-wrap: pretty; }
.tk-pop__meta { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; opacity: .85; }
.tk-pop__ust--up .tk-pop__meta, .tk-pop__ust--out .tk-pop__meta, .tk-pop__ust--diger .tk-pop__meta { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .82); opacity: 1; font-size: 13px; font-weight: 700; }
.tk-pop__ust--up .tk-pop__title + .tk-pop__meta, .tk-pop__ust--out .tk-pop__title + .tk-pop__meta, .tk-pop__ust--diger .tk-pop__title + .tk-pop__meta { margin-top: 2px; }
.tk-pop__row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tk-pop__row i { width: 14px; text-align: center; color: #5C6B85; font-size: 12px; }
.tk-pop__desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tk-ink); }
.tk-pop__owner { margin: 0; font-size: 12px; color: #5C6B85; }
.tk-pop__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tk-pop__foot .tk-btn { padding: 7px 12px; font-size: 12.5px; }
.tk-pop__sp { flex: 1; }
.tk-pop__govde .tk-pop__rsvp, .tk-pop__govde .tk-pop__answer, .tk-pop__govde .tk-pop__planim-btn, .tk-pop__govde .tk-pop__kat, .tk-pop__govde .tk-pop__planim { margin: 0; }
/* Kim nerede listesi: her kişi bir satır, basınca o kaydın kartı açılır (Düzenle ve Sil orada). */
.tk-pop__kisiler { display: flex; flex-direction: column; gap: 4px; }
.tk-pop__kisi { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink); font: inherit; font-family: var(--tk-font); text-align: left; cursor: pointer; }
.tk-pop__kisi:hover, .tk-pop__kisi:focus-visible { background: #F5F8FC; outline: none; }
.tk-pop__kisi .tk-av { width: 32px; height: 32px; border: 0; font-size: 11px; flex: 0 0 auto; }
.tk-pop__kisi span { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.tk-pop__kisi b { font-size: 13px; font-weight: 800; }
.tk-pop__kisi small { font-size: 12px; font-weight: 600; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pop__kisi > i { font-size: 10px; color: #A5AFBE; }
/* Planıma Ekle (19 Eki 2026, TK-36): takvimdeki Planım düğmesinin mavisi; eklenmişse yeşil. */
.tk-pop__planim-btn {
    appearance: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #CFE0F7;
    border-radius: 10px;
    background: #F5F9FF;
    color: #1E3A8A;
    font: inherit;
    font-family: var(--tk-font);
    font-size: var(--pys-fs-sm);
    font-weight: 800;
    cursor: pointer;
}
.tk-pop__planim-btn:hover { background: #EAF2FF; border-color: #A9C7F0; }
.tk-pop__planim-btn:focus-visible { outline: 2px solid #2F7CF6; outline-offset: 1px; }
.tk-pop__planim-btn[aria-expanded="true"] { background: #EAF2FF; border-color: #A9C7F0; }
.tk-pop__planim-btn i { color: #3B82F6; }
.tk-pop__kat { margin-top: 6px; }
.tk-pop__kat[hidden] { display: none; }
.tk-pop__kat p { margin: 0 2px 5px; font-size: var(--pys-fs-xs); font-weight: 800; color: #64748B; }
.tk-pop__kat-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 168px; overflow-y: auto; padding: 1px; }
.tk-pop__kat-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--tk-ink);
    font: inherit;
    font-family: var(--tk-font);
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.tk-pop__kat-btn i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tk-pop__kat-btn:hover { border-color: #A9C7F0; background: #F5F9FF; }
.tk-pop__kat-btn:focus-visible { outline: 2px solid #2F7CF6; outline-offset: 1px; }
.tk-pop__kat-btn[disabled] { opacity: .55; cursor: progress; }
.tk-pop__planim { display: flex; align-items: center; gap: 6px; margin: 8px 2px 2px; font-size: var(--pys-fs-xs); font-weight: 800; color: #065F46; }
.tk-pop__planim i { color: #059669; }
.tk-ev__planim { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; color: #059669; font-size: 9px; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
.tk-ev--short .tk-ev__planim { top: 50%; margin-top: -9px; }
.tk-ev.is-planim { padding-right: 30px; }

/* —— Boş hafta ve yükleniyor ————————————————————————————————————— */
.tk-state {
    padding: 40px 20px;
    text-align: center;
    border-radius: 18px;
    background: var(--tk-glass);
    color: var(--tk-ink-soft);
    font-size: var(--pys-fs-sm);
    font-weight: 600;
}
.tk-skeleton { display: grid; grid-template-columns: var(--tk-axis) repeat(6, minmax(120px, 1fr)); gap: 12px; min-width: 940px; }
.tk-skeleton__head { height: 64px; margin: 0; border-radius: 16px; }
.tk-skeleton__row, .tk-skeleton__head {
    background: linear-gradient(90deg, rgba(255, 255, 255, .45) 25%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .45) 75%);
    background-size: 200% 100%;
    animation: tk-shimmer 1.4s linear infinite;
}
.tk-skeleton__row { border-radius: 18px; }

/* —— Pencere ————————————————————————————————————————————————————————
   Yapı Google düzeni (22 Eylül), üç satırla açılır (23 Eylül). Rengi artık
   tahtayla aynı aile: indigo–pembe başlık, buzlu beyaz gövde, kart satırlar. */
/* Pencere üst kenarından sabit durur (Alperen, 1 Eki): ortalanınca tür değişip boy
   uzadığında yukarı zıplıyor, düğmeler imlecin altından kayıyordu. Boy artık aşağı uzar. */
.tk-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(16px, 7vh) var(--pys-space-16) var(--pys-space-16);
    background: rgba(34, 48, 58, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--tk-font);
}
.tk-modal-backdrop.hidden { display: none; }
/* Başlık ve alt düğmeler sabit, yalnız içerik kayar (CLAUDE.md pencere kuralı, 27 Eyl). */
.tk-modal {
    width: 100%;
    max-width: 470px;
    max-height: calc(100vh - max(16px, 7vh) - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(247, 249, 252, .96);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(34, 48, 58, .32);
    color: var(--tk-ink);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    animation: tk-rise .35s cubic-bezier(.2, .8, .2, 1) forwards;
}
.tk-modal__head {
    display: flex;
    align-items: flex-start;
    gap: var(--pys-space-12);
    padding: 14px 18px 16px;
    background: var(--tk-hero);
    border-radius: 22px 22px 0 0;
}
.tk-modal__over { margin: 0; font-size: var(--pys-fs-xs); font-weight: 700; color: rgba(255, 255, 255, .9); }
/* Başlık kutusunun görünür etiketi (24 Eki 2026, TK-60): silik yazı yazınca kayboluyordu. */
.tk-title-label { display: block; margin: 8px 0 0; font-size: var(--pys-fs-xs); font-weight: 600; color: rgba(255, 255, 255, .85); }
.tk-title-input {
    width: 100%;
    margin-top: 3px;
    padding: 3px 0 6px;
    border: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: 0;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-family: var(--tk-font);
    font-size: var(--pys-fs-lg);
    font-weight: 700;
}
.tk-title-input::placeholder { color: rgba(255, 255, 255, .8); font-weight: 600; }
.tk-title-input:focus { outline: none; border-bottom-color: #FFFFFF; }
.tk-title-input[disabled] { border-bottom-color: rgba(255, 255, 255, .35); background: transparent; }
.tk-modal__owner { margin: 5px 0 0; font-size: var(--pys-fs-xs); font-weight: 600; color: rgba(255, 255, 255, .85); }
.tk-modal__owner[hidden] { display: none; }
.tk-modal__close {
    margin-left: auto;
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #FFFFFF;
    font-size: var(--pys-fs-xl);
    line-height: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.tk-modal__close:hover { background: rgba(255, 255, 255, .2); }
.tk-modal__close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.tk-modal__head, .tk-modal__foot { flex: none; }
.tk-modal__body { padding: 12px 14px 6px; display: grid; align-content: start; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Satır = kart */
.tk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(30, 27, 75, .06), 0 4px 12px rgba(30, 27, 75, .06);
}
.tk-row--top { align-items: flex-start; }
.tk-row[hidden] { display: none; }
.tk-row__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--tk-accent-soft);
    color: var(--tk-accent-ink);
    font-size: var(--pys-fi-md);
}
.tk-row--top .tk-row__icon { margin-top: 2px; }
.tk-row__body { flex: 1 1 auto; min-width: 0; }
/* Satır başlıkları görünür (6 Eki, TK-21): yalnız ikon vardı, şekil ve göz ikonunun ne
   anlattığını kişi tahmin etmek zorundaydı. Küçük gri başlık satırın üstünde durur. */
.tk-row__label { display: block; margin: 0 0 6px; font-size: var(--pys-fs-xs); font-weight: 800; letter-spacing: .01em; color: var(--tk-ink-soft); white-space: nowrap; }
.tk-row__body > .tk-row__label { flex: 0 0 100%; }
.tk-kind > .tk-row__label, .tk-when > .tk-row__label { margin-bottom: 0; }
.tk-hint { margin: 0; font-size: var(--pys-fs-xs); font-weight: 500; color: var(--tk-ink-soft); }
.tk-hint--indent { margin: -2px 0 0 12px; }
.tk-hint[hidden] { display: none; }
.tk-more { display: grid; gap: 8px; }
.tk-more[hidden], .tk-more-btn[hidden] { display: none; }
.tk-more-btn {
    justify-self: start;
    margin-left: 4px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tk-accent-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.tk-more-btn:hover, .tk-more-btn:focus-visible { background: var(--tk-accent-soft); }

/* Gün ve saat */
.tk-when { display: flex; align-items: center; gap: var(--pys-space-8); flex-wrap: wrap; }
.tk-day-chip,
.tk-day-select {
    appearance: none;
    padding: 7px var(--pys-space-12);
    border: 1px solid var(--tk-warm-line);
    border-radius: 10px;
    background: var(--tk-field-bg);
    color: var(--tk-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
    font-weight: 700;
}
.tk-day-chip[disabled] { opacity: 1; cursor: default; }
.tk-day-select { background: #fff; cursor: pointer; }
.tk-day-select[hidden], .tk-day-chip[hidden] { display: none; }
.tk-time-wrap { position: relative; display: inline-block; }
.tk-time {
    width: 74px;
    padding: 7px var(--pys-space-8);
    border: 1px solid var(--tk-warm-line);
    border-radius: 10px;
    background: var(--tk-field-bg);
    color: var(--tk-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tk-time:focus { outline: none; border-color: var(--tk-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, .16); background: #fff; }
.tk-time[disabled] { color: var(--tk-ink-soft); }
.tk-time-dash { font-size: var(--pys-fs-sm); font-weight: 600; color: var(--tk-ink-soft); }
.tk-time-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    min-width: 96px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--tk-warm-line);
    box-shadow: 0 14px 34px rgba(30, 27, 75, .18);
}
.tk-time-list[hidden] { display: none; }
.tk-time-opt {
    appearance: none;
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tk-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
    text-align: left;
    cursor: pointer;
}
.tk-time-opt:hover { background: var(--tk-accent-soft); color: var(--tk-accent-ink); }

/* Kayıt türü */
.tk-kind { display: flex; gap: var(--pys-space-8); flex-wrap: wrap; }
.tk-kind__btn {
    appearance: none;
    padding: 7px 14px;
    border: 1px solid var(--tk-warm-line);
    border-radius: 999px;
    background: #fff;
    color: var(--tk-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tk-kind__btn:hover { background: var(--tk-field-bg); }
.tk-kind__btn[aria-pressed="true"] { border-color: transparent; background: var(--tk-hero); color: #fff; box-shadow: 0 8px 18px rgba(234, 88, 12, .3); }
.tk-kind__btn:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-kind__btn[disabled] { opacity: .6; cursor: not-allowed; }
/* Eğitim gelince (19 Eki 2026) dört etkinlik türü tek sıraya sığsın diye tür düğmelerinin
   yan boşluğu daraldı. Dışarıda ve Yukarıda bu satırdan kalktı, Kim Nerede penceresinde (TK-38). */
#tk-kind .tk-kind__btn { padding-left: 10px; padding-right: 10px; }

/* Ne Zaman: Tek Gün / Tüm Hafta ve gün düğmeleri (Özge'nin isteği, Alperen kararı Yön B, 19 Eki
   2026). Her biri kendi satırında; gün düğmeleri tür düğmeleriyle aynı hap, seçili gün turuncu. */
.tk-span, .tk-span-days { display: flex; flex: 0 0 100%; gap: 6px; flex-wrap: wrap; }
.tk-span[hidden], .tk-span-days[hidden] { display: none; }
.tk-span-days .tk-span-day { min-width: 46px; padding: 6px 10px; font-size: var(--pys-fs-xs); }

/* Kişi ekleme */
.tk-guest-wrap { position: relative; display: block; }
.tk-input,
.tk-line-input {
    width: 100%;
    padding: 9px var(--pys-space-12);
    border: 1px solid var(--tk-warm-line);
    border-radius: 10px;
    background: var(--tk-field-bg);
    color: var(--tk-ink);
    font: inherit;
    font-size: var(--pys-fs-sm);
}
.tk-line-input { padding: 7px 0; border: 0; border-bottom: 1px solid var(--tk-warm-line); border-radius: 0; background: transparent; }
.tk-textarea { min-height: 42px; resize: vertical; line-height: 1.45; }
.tk-input:focus { outline: none; background: #fff; border-color: var(--tk-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, .16); }
.tk-line-input:focus { outline: none; border-bottom-color: var(--tk-accent); box-shadow: none; }
.tk-input[disabled], .tk-line-input[disabled] { color: var(--tk-ink-soft); }
.tk-input[hidden] { display: none; }
.tk-guest-hits {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 6;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--tk-warm-line);
    box-shadow: 0 14px 34px rgba(30, 27, 75, .18);
}
.tk-guest-hits[hidden] { display: none; }
.tk-guest-hit {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.tk-guest-hit:hover { background: var(--tk-accent-soft); }
.tk-guest-hit__name { font-size: var(--pys-fs-sm); font-weight: 600; color: var(--tk-ink); }
.tk-guest-hit__role { margin-left: auto; font-size: var(--pys-fs-xs); color: var(--tk-ink-soft); }
.tk-guest-hits__empty { margin: 0; padding: var(--pys-space-10); font-size: var(--pys-fs-xs); color: var(--tk-ink-soft); text-align: center; }
.tk-guest-hit__leave { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #FDF6E7; color: #7A5410; font-size: var(--pys-fs-xs); font-weight: 700; }
.tk-guest-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--pys-space-8); }
.tk-guest-chips:empty { display: none; }
.tk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--tk-warm-line);
    border-radius: 999px;
    background: #fff;
    color: var(--tk-ink);
    font-size: var(--pys-fs-xs);
    font-weight: 600;
}
.tk-chip--all { background: var(--tk-accent-soft); border-color: var(--tk-accent-border); color: var(--tk-accent-ink); }
.tk-chip--leave { border-color: #E4C48A; background: #FDF6E7; color: #7A5410; }
.tk-chip__av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, #818CF8, #4F46E5);
    color: #fff;
    font-size: var(--pys-fi-xs);
    font-weight: 800;
}
.tk-chip--all .tk-chip__av { background: var(--tk-hero); }
.tk-chip__x { appearance: none; border: 0; background: transparent; color: var(--tk-ink-soft); font-size: var(--pys-fs-md); line-height: 1; padding: 0 2px; cursor: pointer; }
.tk-chip__x:hover { color: #B3202F; }
.tk-chip-add {
    appearance: none;
    padding: 5px 12px;
    border: 1px dashed var(--tk-accent-border);
    border-radius: 999px;
    background: transparent;
    color: var(--tk-accent-ink);
    font: inherit;
    font-size: var(--pys-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.tk-chip-add:hover { background: var(--tk-accent-soft); }
.tk-guest-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #E4C48A;
    border-radius: var(--pys-radius-sm);
    background: #FDF6E7;
    color: #7A5410;
    font-size: var(--pys-fs-xs);
    line-height: 1.45;
}
.tk-guest-warn[hidden] { display: none; }
.tk-guest-warn i { flex-shrink: 0; margin-top: 2px; color: #B57A16; }
.tk-error { margin: 0 4px; font-size: var(--pys-fs-xs); font-weight: 600; color: #B3202F; }
.tk-error[hidden] { display: none; }

/* Alt düğmeler */
.tk-modal__foot { display: flex; align-items: center; gap: var(--pys-space-8); padding: 8px 14px 14px; }
.tk-modal__foot-right { margin-left: auto; display: flex; gap: var(--pys-space-8); }
.tk-btn {
    appearance: none;
    padding: 9px var(--pys-space-16);
    border: 1px solid var(--tk-warm-line);
    border-radius: 12px;
    background: #fff;
    color: var(--tk-ink);
    font: inherit;
    font-family: var(--tk-font);
    font-size: var(--pys-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tk-btn:hover { background: var(--tk-field-bg); }
.tk-btn:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 1px; }
.tk-btn--primary { border-color: transparent; background: var(--tk-hero); color: #fff; box-shadow: 0 8px 18px rgba(234, 88, 12, .3); }
.tk-btn--primary:hover { background: var(--tk-hero); filter: saturate(1.08); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(234, 88, 12, .36); }
.tk-btn--danger { border-color: #F3C4C9; color: #B3202F; }
.tk-btn--danger:hover { background: #FFF5F5; }
.tk-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tk-btn[disabled]:hover { background: #fff; transform: none; }
.tk-btn[hidden] { display: none; }

/* —— Hareket ————————————————————————————————————————————————————————— */
@keyframes tk-rise { to { opacity: 1; transform: none; } }
@keyframes tk-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes tk-shimmer { to { background-position: -200% 0; } }

/* —— Yazdır: yalnız takvim paneli kâğıda gider, tek sayfa, hareket yok ————— */
@media print {
    body.tk-print * { visibility: hidden !important; }
    body.tk-print #page-calendar, body.tk-print #page-calendar * { visibility: visible !important; }
    body.tk-print #page-calendar { position: absolute !important; left: 0; top: 0; width: 100% !important; max-width: none !important; margin: 0 !important; }
    body.tk-print #main-app #page-calendar .glass-panel.pys-page-shell { animation: none !important; background: #fff !important; box-shadow: none !important; }
    body.tk-print .tk-col { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
    body.tk-print .tk-ev { animation: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.tk-print .tk-ev::before { content: attr(data-tk-time); display: block; font-size: 10px; font-weight: 600; opacity: .9; }
    body.tk-print .tk-tip { display: none !important; }
    body.tk-print .tk-gb { display: none !important; }
    body.tk-print .tk-now, body.tk-print .tk-cue, body.tk-print .tk-uhead__card, body.tk-print #tk-pop,
    body.tk-print .hcp-wk__arrow, body.tk-print .hcp-wk-today { display: none !important; }
    /* Kâğıt yatay ve tahta sığar (Alperen, 24 Eyl): gövde ekran boyuna kilitliydi
       (h-screen + overflow hidden), yazıcı ilk ekranı kesip kaydırma çubuğu basıyordu.
       Yazdırırken bütün kaplar serbest kalır, ızgara kâğıt genişliğine oturur. */
    body.tk-print, body.tk-print #main-app, body.tk-print #main-content, body.tk-print #content-area,
    body.tk-print #calendar-scroll-wrap, body.tk-print .tk-board, body.tk-print #page-calendar .glass-panel.pys-page-shell {
        height: auto !important; max-height: none !important; overflow: visible !important; position: static !important;
    }
    body.tk-print #page-calendar { position: static !important; width: 100% !important; }
    body.tk-print #content-area { padding: 0 !important; }
    /* Kenar çubuğu ve üst çubuk yalnız görünmez değil, yer de kaplamaz. */
    body.tk-print #sidebar-main, body.tk-print #sidebar-backdrop, body.tk-print #main-content > header,
    body.tk-print .hcp-bugreport-fab, body.tk-print #pys-a11y-widget { display: none !important; }
    body.tk-print #main-app { display: block !important; }
    body.tk-print .tk-grid { min-width: 0 !important; width: 100% !important; grid-template-columns: 44px repeat(6, minmax(0, 1fr)) !important; gap: 0 6px !important; }
    body.tk-print .tk-board { padding: 6px 8px 8px !important; }
    body.tk-print .tk-dh .tk-dd { font-size: 18px !important; }
    body.tk-print .tk-dh.is-today .tk-dd { min-width: 30px !important; height: 30px !important; font-size: 14px !important; }
    body.tk-print .tk-ev__title { font-size: 10.5px !important; }
    body.tk-print .tk-avs { display: none !important; }
    /* Kâğıtta saat kartın başına yazılır; uzun karttaki saat satırı ikinci kez basılmasın. */
    body.tk-print .tk-ev__time, body.tk-print .tk-ev__saat { display: none !important; }
    /* Gün kartı, sütun zemini ve saat hapı kâğıtta da renkli (1b, 19 Eki). */
    body.tk-print .tk-dh, body.tk-print .tk-col, body.tk-print .tk-pi, body.tk-print .tk-pi__saat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Geri Bildirimler'in yazdırma kuralı .hcp-uhead'i beyaza boyuyor; takvimin bandı turuncu kalır. */
    body.tk-print #page-calendar .tk-uhead { background: var(--tk-hero) !important; padding: 6px 12px !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.tk-print #page-calendar .tk-uhead .hcp-uhead__title { color: #fff !important; }
    body.tk-print #page-calendar .tk-uhead::before, body.tk-print #page-calendar .tk-uhead::after { display: none !important; }
    body.tk-print ::-webkit-scrollbar { display: none !important; }
}
/* Yazıcı sayfası: yatay A4, dar kenar. @page medya bloğu dışında da geçerlidir. */
@page { size: A4 landscape; margin: 8mm; }
@keyframes tk-flash { 0%, 60% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tk-accent), 0 12px 28px rgba(234, 88, 12, .35); } 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); } }
@keyframes tk-slide-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes tk-slide-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.tk-grid.tk-slide-in-right .tk-col, .tk-grid.tk-slide-in-right .tk-dh { animation: tk-slide-r .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.tk-grid.tk-slide-in-left .tk-col, .tk-grid.tk-slide-in-left .tk-dh { animation: tk-slide-l .45s cubic-bezier(.2, .8, .2, 1) backwards; }
/* Giriş hareketi (revizyon, Alperen'in tasarımı, 20 Eki 2026): takvim açılınca ve hafta değişince günler
   yukarıdan sırayla iner, kim nerede zeminleri belirir, kartlar aşağıdan yükselir, şimdi çizgisi soldan
   çizilir. Kayıt ekleyip taşıyınca tekrarlamaz (pys_takvim.js S.intro). Kartın gecikmesini satır içi
   animation-delay verir. */
@keyframes tk-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes tk-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tk-grid.is-intro:not(.tk-slide-in-right):not(.tk-slide-in-left) .tk-dh,
.tk-grid.is-intro:not(.tk-slide-in-right):not(.tk-slide-in-left) .tk-col { animation: tk-drop .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.tk-grid.is-intro .tk-zn { animation: tk-fade .7s ease backwards; animation-delay: calc(380ms + var(--i, 0) * 60ms); }
.tk-grid.is-intro .tk-ev, .tk-grid.is-intro .tk-pi { animation: tk-rise-in .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.tk-grid.is-intro .tk-now { animation: tk-draw .9s cubic-bezier(.65, 0, .35, 1) .55s backwards; }
.tk-grid.is-intro .tk-now-lbl { animation: tk-fade .4s ease .9s backwards; }
@media (prefers-reduced-motion: reduce) {
    .tk-grid .tk-col, .tk-grid .tk-dh, .tk-grid .tk-zn { animation: none !important; }
    .tk-ev, .tk-modal { animation: none; opacity: 1; transform: none; }
    .tk-grid .tk-ev, .tk-grid .tk-pi, .tk-grid .tk-now, .tk-grid .tk-now-lbl { animation: none !important; }
    .tk-now::before { animation: none; }
    .tk-pop { transition: none; }
}
body.tk-print .tk-lejant, body.tk-print .tk-sekmeler, body.tk-print .tk-zn__cip { display: none !important; }
body.tk-print .tk-zn, body.tk-print .tk-ev { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* —— Telefon ————————————————————————————————————————————————————————— */
@media (max-width: 640px) {
    /* Telefonda da ortada açılan pencere, kenarlardan boşluklu (CLAUDE.md, 27 Eyl). */
    .tk-modal { max-width: none; max-height: calc(100vh - 24px); border-radius: 20px; }
    .tk-modal-backdrop { padding: 12px; }
    .tk-when { gap: 6px; flex-wrap: wrap; }
    .tk-time { width: 66px; }
    .tk-board { padding: 0; border-radius: 14px; }
    #main-app #page-calendar .glass-panel .tk-board { margin: 8px 8px 0; }
    /* Altı gün yan yana sığmaz: tahta yana kayar, eksen sola yapışık kalır (1 Eki). */
    #calendar-scroll-wrap { scroll-snap-type: x proximity; padding-bottom: 6px; }
    .tk-col { scroll-snap-align: start; }
    /* Başlık telefonda sıkı: bant iki satıra iner, kapsam yazısı gizlenir, düğmeler yalnız simge. */
    #main-app #page-calendar .tk-uhead { padding: 8px 8px 10px; }
    #main-app #page-calendar .tk-uhead .hcp-uhead__band { flex-wrap: wrap; gap: 10px; }
    #main-app #page-calendar .tk-uhead .hcp-uhead__wkgrp { margin-left: 0; }
    .tk-sekmeler { gap: 4px 2px; margin-bottom: 8px; }
    .tk-sekme { gap: 6px; padding: 0 9px; font-size: 12.5px; }
    .tk-kapsam { display: none; }
    #main-app #page-calendar .tk-uhead__card { flex-wrap: nowrap; gap: 8px; padding: 8px; }
    #main-app #page-calendar .tk-uhead__info { flex: 1 1 auto; min-width: 0; }
    #main-app #page-calendar .tk-uhead__acts { flex-wrap: nowrap; gap: 6px; }
    #main-app #page-calendar #cal-print-btn { display: none; }
    #main-app #page-calendar .tk-share-btn span { display: none; }
    #main-app #page-calendar .tk-share-btn { width: 34px; padding: 0; justify-content: center; }
    #main-app #page-calendar .tk-kn-btn span { display: none; }
    #main-app #page-calendar .tk-kn-btn { width: 34px; padding: 0; justify-content: center; }
    #main-app #page-calendar #cal-add-event-btn { width: 34px; padding: 0; font-size: 0; gap: 0; }
    #main-app #page-calendar #cal-add-event-btn i { font-size: 14px; }
    #main-app #page-calendar .hcp-wk-today { width: 34px; padding: 0; justify-content: center; font-size: 0; }
    #main-app #page-calendar .hcp-wk-today i { font-size: 14px; margin: 0; }
    .tk-lj__ipucu { display: none; }
}

/* Gün başlığı yapışkan (Alperen, 16 Eki 2026, TK-30): aşağı inince hangi sütunun hangi gün olduğu
   görünsün. Başlık satırı içerik alanının üstüne yapışır. Telefonda tahta yana kaydığı için yok. */
@media (min-width: 961px) {
    /* #main-app ile güçlü: raf.css'teki "#page-calendar .tk-dh[data-tk-dayhead] { position: relative }"
       sonra yüklenip aynı güçte kazanıyordu. */
    #main-app #page-calendar .tk-grid > .tk-dh,
    #main-app #page-calendar .tk-grid > .tk-axis-head { position: sticky; top: 0; z-index: 7; }
}