/* =====================================================================
   PLANO maket kiti — tanıtım sitesi (ikinci tur)
   ---------------------------------------------------------------------
   Ürün ekranları EKRAN GÖRÜNTÜSÜ olarak konmaz. Tam ekrana göre tasarlanmış
   bir ekranı 500 px'lik kutuya küçültmek yazıyı okunmaz yapıyordu
   (kullanıcı geri bildirimi 2026-10-03). Bunun yerine ürünün kendisi
   sadeleştirilerek HTML/CSS ile yeniden çizilir:
     · her çözünürlükte keskin (metin gerçek metin),
     · telefonda kendi düzenine geçer (container query), yazı 12 px altına inmez,
     · görünüm üründen alınır: lacivert bant, durum renkleri (firma
       kataloğunun varsayılanları), baş harfli kişi yuvaları.
   Maket "mış gibi"dir ama yalnız üründe gerçekten olan şeyi çizer.

   Bölüm haritası (sınıf önekine göre)
     §1  değişkenler ............ .mk
     §2  pencere · bant · başlık  .mk-pencere · .mk-bant · .mk-bas · .mk-ikon
     §3  kişi ................... .mk-av · .mk-kisi · .mk-av-yigin
     §4  durum · tarih · etiket . .mk-durum · .mk-degis · .mk-tarih · .mk-etiket · .mk-oncelik
     §5  görev satırı ........... .mk-liste · .mk-satir
     §6  bildirim · onay ........ .mk-bildirim · .mk-dugme · .mk-onay
     §7  toplantı ............... .mk-toplanti
     §8  arama · belge · konu · grup  .mk-arama · .mk-belge · .mk-konu · .mk-grup
     §9  telefon ................ .mk-telefon
     §10 imleç · sahne .......... .mk-imlec · .mk-sahne
     §11 dar kap (container query)
   ===================================================================== */

/* §1 — değişkenler ------------------------------------------------------ */
.mk {
    --mk-zemin: #ffffff;
    --mk-yuzey: #f8fafc;
    --mk-yuzey-2: #f1f5f9;
    --mk-cizgi: #e2e8f0;
    --mk-cizgi-ince: #edf1f6;
    --mk-metin: #0f172a;
    --mk-ikincil: #475569;
    --mk-soluk: #8492a6;
    --mk-lacivert: #24447F;
    --mk-turuncu: #F96E38;
    --mk-radius: 16px;
    --mk-golge: 0 1px 2px rgb(15 23 42 / .06), 0 24px 48px -24px rgb(15 23 42 / .28);
    --mk-golge-yuzen: 0 1px 2px rgb(15 23 42 / .08), 0 18px 40px -14px rgb(15 23 42 / .32);

    /* Modül renkleri (ürünün tür kimliği) */
    --mk-gorev: #2563eb;
    --mk-grup: #7c3aed;
    --mk-belge: #d97706;
    --mk-toplanti: #059669;
    --mk-forum: #db2777;

    font-size: 14px;
    line-height: 1.45;
    color: var(--mk-metin);
    text-align: left;
    letter-spacing: normal;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk p, .mk h4, .mk h5, .mk ul { margin: 0; }
.mk ul { list-style: none; padding: 0; }

/* §2 — pencere · bant · başlık ------------------------------------------ */
.mk-pencere {
    position: relative;
    background: var(--mk-zemin);
    border: 1px solid var(--mk-cizgi);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-golge);
    overflow: hidden;
    container-type: inline-size;
    container-name: pencere;
}

/* Ürünün lacivert üst bandı — tek bakışta "bu PLANO" dedirten imza */
.mk-bant {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 44px;
    padding: 0 16px;
    background: var(--mk-lacivert);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}
.mk-bant img { width: 22px; height: 22px; flex: none; }
.mk-bant-menu { display: flex; gap: 18px; min-width: 0; }
.mk-bant-menu span {
    position: relative;
    font-size: 12.5px;
    color: rgb(255 255 255 / .72);
}
.mk-bant-menu span.on { color: #fff; font-weight: 500; }
.mk-bant-menu span.on::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -14px;
    height: 2px;
    border-radius: 2px;
    background: var(--mk-turuncu);
}
.mk-bant-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mk-zil { position: relative; font-size: 15px; color: rgb(255 255 255 / .85); }
.mk-zil b {
    position: absolute;
    top: -6px; right: -9px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mk-turuncu);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--mk-lacivert);
}

.mk-bas {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mk-cizgi-ince);
    min-width: 0;
}
.mk-bas h5 {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-bas small { font-size: 12.5px; color: var(--mk-soluk); white-space: nowrap; }
.mk-bas .mk-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.mk-sayi {
    display: inline-grid;
    place-items: center;
    min-width: 22px; height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--mk-yuzey-2);
    color: var(--mk-ikincil);
    font-size: 11.5px;
    font-weight: 600;
}

/* Modül ikon kutusu: renk = ürünün tür kimliği */
.mk-ikon {
    --ik: var(--mk-gorev);
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ik) 12%, #fff);
    color: var(--ik);
    font-size: 15px;
}
.mk-ikon--grup { --ik: var(--mk-grup); }
.mk-ikon--belge { --ik: var(--mk-belge); }
.mk-ikon--toplanti { --ik: var(--mk-toplanti); }
.mk-ikon--forum { --ik: var(--mk-forum); }
.mk-ikon--kucuk { width: 24px; height: 24px; border-radius: 7px; font-size: 12.5px; }

/* §3 — kişi ------------------------------------------------------------- */
.mk-av {
    --av: #64748b;
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--av);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
}
.mk-av--z { --av: #8B5CF6; }   /* Zeynep Arslan */
.mk-av--m { --av: #2563EB; }   /* Mehmet Kaya */
.mk-av--s { --av: #DB2777; }   /* Selin Koç */
.mk-av--b { --av: #EA580C; }   /* Burak Çelik */
.mk-av--d { --av: #0D9488; }   /* Deniz Aydın */
.mk-av--a { --av: #16A34A; }   /* Ayşe Demir */
.mk-av--siz { --av: var(--mk-lacivert); }
.mk-av--ben { --av: var(--mk-turuncu); font-size: 13px; }   /* sitenin okuru: "siz" */
.mk-av--ben.mk-av--kucuk { font-size: 11px; }
.mk-av--kucuk { width: 22px; height: 22px; font-size: 9.5px; }
.mk-av--buyuk { width: 38px; height: 38px; font-size: 13.5px; }

.mk-av-yigin { display: inline-flex; padding-left: 4px; }
.mk-av-yigin .mk-av { margin-left: -4px; box-shadow: 0 0 0 2px #fff; }

.mk-kisi { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mk-kisi b {
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-kisi small { display: block; font-size: 11.5px; color: var(--mk-soluk); }

/* §4 — durum · tarih · etiket · öncelik --------------------------------- */
/* Durum renkleri firmanın varsayılan durum kataloğundan (GorevDurumKatalog).
   Maket okunurluk için hap biçiminde çizer. */
.mk-durum {
    --d-zemin: #F1F5F9; --d-yazi: #475569; --d-ikon: #5B6F8A;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    background: var(--d-zemin);
    color: var(--d-yazi);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    justify-self: start;
}
.mk-durum i { font-size: 13px; color: var(--d-ikon); }
.mk-durum--yapiliyor { --d-zemin: #E0F2FE; --d-yazi: #0369A1; --d-ikon: #0EA5E9; }
.mk-durum--kabul     { --d-zemin: #FEF3C7; --d-yazi: #B45309; --d-ikon: #F59E0B; }
.mk-durum--onay      { --d-zemin: #CCFBF1; --d-yazi: #0F766E; --d-ikon: #0F766E; }
.mk-durum--tamam     { --d-zemin: #DCFCE7; --d-yazi: #15803D; --d-ikon: #22C55E; }
.mk-durum--beklemede { --d-zemin: #EDE9FE; --d-yazi: #6D28D9; --d-ikon: #8B5CF6; }
.mk-durum--red       { --d-zemin: #FEE2E2; --d-yazi: #B91C1C; --d-ikon: #E85D3F; }

/* Değişen değer: eski ve yeni üst üste durur, sahne adımı yeniyi açar.
   Genişlik ikisinin büyüğüdür; satır zıplamaz. */
.mk-degis { display: inline-grid; justify-self: start; justify-items: start; align-items: center; }
.mk-degis > * {
    grid-area: 1 / 1;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.mk-degis > .mk-yeni, .mk-degis > .d-ara, .mk-degis > .d-yeni { opacity: 0; transform: translateY(6px); }

.mk-tarih {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mk-ikincil);
    white-space: nowrap;
}
.mk-tarih i { color: var(--mk-soluk); font-size: 13px; }
.mk-tarih--yakin { color: #B45309; }
.mk-tarih--yakin i { color: #F59E0B; }
.mk-tarih--gecti { color: #B91C1C; }
.mk-tarih--gecti i { color: #EF4444; }

.mk-etiket {
    --et: var(--mk-ikincil);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 9px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--et) 9%, #fff);
    color: color-mix(in srgb, var(--et) 88%, #000);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.mk-etiket i { font-size: 12px; }
.mk-etiket--grup { --et: var(--mk-grup); }
.mk-etiket--toplanti { --et: var(--mk-toplanti); }
.mk-etiket--belge { --et: var(--mk-belge); }
.mk-etiket--forum { --et: var(--mk-forum); }
.mk-etiket--gorev { --et: var(--mk-gorev); }
.mk-etiket--sira { --et: #d97706; }

.mk-oncelik { font-size: 14px; color: #EA580C; line-height: 1; }
.mk-oncelik--acil { color: #DC2626; }

/* §5 — görev satırı ----------------------------------------------------- */
.mk-liste { padding: 2px 0; }
.mk-satir {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr) 150px 92px;
    grid-template-areas: "durum baslik kisi tarih";
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--mk-cizgi-ince);
    background: var(--mk-zemin);
    transition: background-color .4s;
}
.mk-satir:last-child { border-bottom: 0; }
.mk-satir > .mk-durum, .mk-satir > .mk-degis { grid-area: durum; }
.mk-satir > .mk-satir-baslik { grid-area: baslik; }
.mk-satir > .mk-kisi { grid-area: kisi; }
.mk-satir > .mk-tarih { grid-area: tarih; justify-self: end; }
.mk-satir-baslik { min-width: 0; }
.mk-satir-baslik b {
    display: block;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-satir-baslik small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--mk-soluk);
    white-space: nowrap;
    overflow: hidden;
}
.mk-satir--vurgu { background: #F0F9FF; }
.mk-satir--bitti .mk-satir-baslik b { color: var(--mk-soluk); text-decoration: line-through; text-decoration-color: #cbd5e1; }

/* §6 — bildirim · düğme · kapsül · onay kartı --------------------------- */
.mk-yuzen {
    background: #fff;
    border: 1px solid var(--mk-cizgi);
    border-radius: 14px;
    box-shadow: var(--mk-golge-yuzen);
}
.mk-bildirim {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    width: 300px;
    max-width: 100%;
    padding: 14px 16px;
}
.mk-bildirim p { font-size: 13.5px; line-height: 1.4; }
.mk-bildirim b { font-weight: 600; }
.mk-bildirim .mk-alt { margin-top: 2px; font-size: 12.5px; color: var(--mk-ikincil); }
.mk-zaman { font-size: 12px; color: var(--mk-soluk); white-space: nowrap; }

.mk-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mk-dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--mk-cizgi);
    border-radius: 8px;
    background: #fff;
    color: var(--mk-metin);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .25s, border-color .25s, color .25s, transform .15s;
}
.mk-dugme--yesil { background: #15803D; border-color: #15803D; color: #fff; }
.mk-dugme--mavi { background: var(--mk-gorev); border-color: var(--mk-gorev); color: #fff; }

/* Kısa haber kapsülü: "Mehmet görevi kabul etti" */
.mk-kapsul {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 7px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.mk-kapsul > i { font-size: 15px; color: #16A34A; }

/* Onay kartı: tamamlanan iş onaya düşer */
.mk-onay { padding: 18px 20px; }
.mk-onay-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0F766E;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
}
.mk-onay-ust i { font-size: 14px; }
.mk-onay h5 { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.mk-onay-kim { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--mk-ikincil); }
.mk-onay-kim b { font-weight: 500; color: var(--mk-metin); }
.mk-onay-gelisme {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mk-yuzey);
    color: var(--mk-ikincil);
    font-size: 13px;
}
.mk-onay-gelisme span { display: block; margin-bottom: 2px; color: var(--mk-soluk); font-size: 12px; font-weight: 600; }
.mk-onay .mk-dugmeler { margin-top: 14px; }
.mk-sonuc-serit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #DCFCE7;
    color: #15803D;
    font-size: 13.5px;
    font-weight: 500;
}
.mk-sonuc-serit i { font-size: 16px; }
.mk-sonuc-serit--revize { background: #FEF3C7; color: #92400E; }

/* §7 — toplantı ---------------------------------------------------------- */
.mk-toplanti-bas {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mk-cizgi-ince);
    min-width: 0;
}
.mk-toplanti-bas h5 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-toplanti-bas small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mk-soluk); }
.mk-toplanti-bas > div { min-width: 0; }
.mk-toplanti-bas .mk-av-yigin { margin-left: auto; flex: none; }
.mk-toplanti-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.mk-notlar { padding: 16px 18px; border-right: 1px solid var(--mk-cizgi-ince); background: #FCFDFE; }
.mk-notlar h6 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--mk-metin); }
.mk-notlar ul { display: grid; gap: 5px; margin-bottom: 14px; }
.mk-notlar ul:last-child { margin-bottom: 0; }
.mk-notlar li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mk-ikincil);
}
.mk-notlar li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #94a3b8;
}
.mk-tgorevler { padding: 12px 0 4px; }
.mk-tgorevler-bas { display: flex; align-items: center; gap: 8px; padding: 2px 18px 10px; font-size: 13px; font-weight: 600; }
.mk-tsatir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--mk-cizgi-ince);
    transition: background-color .5s;
}
.mk-tsatir b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tsatir small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--mk-soluk); white-space: nowrap; }
.mk-kaynak { display: inline-flex; align-items: center; gap: 4px; color: var(--mk-toplanti); font-weight: 500; }

/* §8 — arama · belge · konu · grup --------------------------------------- */
.mk-arama-kutu {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mk-cizgi-ince);
    font-size: 15px;
}
.mk-arama-kutu > i { color: var(--mk-soluk); font-size: 16px; }
.mk-yazi { color: var(--mk-metin); font-weight: 500; }
.mk-yazi::after {
    content: "";
    display: inline-block;
    width: 1.5px; height: 1.1em;
    margin-left: 2px;
    vertical-align: -.18em;
    background: var(--mk-gorev);
    animation: mk-yanip 1s steps(1) infinite;
}
.mk-tus {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--mk-cizgi);
    border-radius: 6px;
    color: var(--mk-soluk);
    font-size: 11px;
    white-space: nowrap;
}
.mk-arama-grup { padding: 10px 8px 4px; }
.mk-arama-grup + .mk-arama-grup { border-top: 1px solid var(--mk-cizgi-ince); }
.mk-arama-grup h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 4px;
    color: var(--mk-soluk);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
}
.mk-sonuc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    min-width: 0;
}
.mk-sonuc b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sonuc mark { background: #FEF08A; color: inherit; border-radius: 3px; padding: 0 1px; }
.mk-sonuc small { flex: none; color: var(--mk-soluk); font-size: 12px; white-space: nowrap; }
.mk-sonuc--on { background: #EFF6FF; }

.mk-belge { padding: 16px 18px; }
.mk-belge-bas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-belge-bas b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-belge-bas small { display: block; font-size: 12px; color: var(--mk-soluk); }
.mk-belge p { margin-top: 10px; font-size: 13px; color: var(--mk-ikincil); line-height: 1.5; }

.mk-konu { padding: 16px 18px; }
.mk-konu-bas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-konu-bas b { display: block; font-size: 14px; font-weight: 600; }
.mk-konu-bas small { display: block; font-size: 12px; color: var(--mk-soluk); }
.mk-konu-sonuc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    background: #F0FDF4;
    color: #166534;
    font-size: 13px;
    line-height: 1.45;
}
.mk-konu-sonuc i { margin-top: 1px; }
.mk-mesaj { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 10px; font-size: 13px; color: var(--mk-ikincil); }
.mk-mesaj b { color: var(--mk-metin); font-weight: 500; }

.mk-grup-bas { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; min-width: 0; }
.mk-grup-bas h5 { font-size: 16px; font-weight: 600; }
.mk-grup-bas small { display: block; font-size: 12.5px; color: var(--mk-soluk); }
.mk-grup-bas .mk-av-yigin { margin-left: auto; flex: none; }
.mk-bolumler { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; }
.mk-bolum {
    --bl: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--mk-cizgi);
    border-radius: 999px;
    background: #fff;
    color: var(--mk-ikincil);
    font-size: 12.5px;
    white-space: nowrap;
}
.mk-bolum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bl); }

/* §9 — telefon ----------------------------------------------------------- */
.mk-telefon {
    position: relative;
    width: 280px;
    max-width: 100%;
    padding: 10px;
    border-radius: 44px;
    background: #0f172a;
    box-shadow: inset 0 0 0 1.5px #334155, 0 40px 80px -36px rgb(15 23 42 / .6);
}
.mk-telefon-ekran {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 9 / 19.2;
    border-radius: 35px;
    overflow: hidden;
    background: #f4f6fa;
    container-type: inline-size;
}
.mk-telefon-ekran::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    width: 84px; height: 24px;
    margin-left: -42px;
    border-radius: 999px;
    background: #0f172a;
    z-index: 3;
}
.mk-tel-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 42px;
    padding: 6px 26px 0;
    background: var(--mk-lacivert);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.mk-tel-ust span:last-child { display: flex; gap: 5px; font-size: 11px; }
.mk-tel-bant {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    height: 46px;
    padding: 0 16px;
    background: var(--mk-lacivert);
    color: #fff;
}
.mk-tel-bant > i { font-size: 20px; }
.mk-tel-bant b { font-size: 15px; font-weight: 600; }
.mk-tel-bant .mk-zil { margin-left: auto; }
.mk-tel-govde { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.mk-tel-baslik { display: flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--mk-ikincil); font-size: 12px; font-weight: 600; }
.mk-tel-kart {
    padding: 12px;
    border: 1px solid var(--mk-cizgi);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04);
}
.mk-tel-kart b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.mk-tel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.mk-tel-kart .mk-dugmeler { margin-top: 10px; gap: 6px; }
.mk-tel-kart .mk-dugme { padding: 0 10px; }

/* §10 — imleç · sahne ---------------------------------------------------- */
/* Sahne: ortak/site.js adım adım a1, a2 … sınıflarını ekler; maketin hangi
   adımda ne göstereceği sayfanın kendi CSS'inde yazılır. İmleç hedef
   öğenin ORTASINA gider (konum JS ile ölçülür, düzen ne olursa olsun tutar). */
.mk-sahne { position: relative; }
.mk-imlec {
    position: absolute;
    left: 0; top: 0;
    z-index: 30;
    width: 24px; height: 24px;
    pointer-events: none;
    opacity: 0;
    transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .35s ease;
    will-change: transform;
}
.mk-imlec svg { width: 24px; height: 24px; filter: drop-shadow(0 3px 4px rgb(15 23 42 / .28)); }
.mk-imlec.gorunur { opacity: 1; }
.mk-imlec::before {
    content: "";
    position: absolute;
    left: -10px; top: -10px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgb(37 99 235 / .32);
    opacity: 0;
    transform: scale(0);
}
.mk-imlec.tik::before { animation: mk-tik .55s ease-out; }

/* Tıklanan öğe bir an içeri basar; döngü başında perdeli öğeler solar.
   Perdeli öğenin kendi geçişi varsa opacity'yi de içermelidir. */
.mk-sahne .basildi { transform: scale(.95); transition: transform .12s ease; }
.mk-sahne [data-perde] { transition: opacity .35s ease; }
.mk-sahne .perde, .mk-sahne.perde { opacity: 0 !important; transition: opacity .35s ease !important; }

@keyframes mk-tik {
    0% { opacity: .95; transform: scale(.3); }
    100% { opacity: 0; transform: scale(2); }
}
@keyframes mk-yanip { 50% { opacity: 0; } }

/* §11 — dar kap ---------------------------------------------------------- */
/* Maket ekranı sıkıştırmaz, kendi telefon düzenine geçer: sütunlar alt
   alta iner, kişi adı yerine yalnız baş harfi kalır, yazı küçülmez. */
@container pencere (max-width: 640px) {
    /* İki satırlı kart: üstte iş + sahibi, altta durum + tarih */
    .mk-satir {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "baslik kisi" "durum tarih";
        row-gap: 8px;
        padding: 12px 16px;
    }
    .mk-satir > .mk-kisi { justify-self: end; }
    .mk-bant { gap: 14px; padding: 0 14px; }
    .mk-bant-menu {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
        mask-image: linear-gradient(90deg, #000 80%, transparent);
    }
    .mk-bas, .mk-toplanti-bas, .mk-grup-bas { padding-inline: 14px; }
    .mk-toplanti-govde { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
    .mk-notlar { padding-inline: 14px; }
    .mk-tsatir { padding-inline: 14px; }
    .mk-tgorevler-bas { padding-inline: 14px; }
    .mk-bolumler { padding-inline: 14px; }
}
@container pencere (max-width: 500px) {
    /* Toplantı: notlar üstte, görevler altta */
    .mk-toplanti-govde { grid-template-columns: minmax(0, 1fr); }
    .mk-notlar { border-right: 0; border-bottom: 1px solid var(--mk-cizgi-ince); }
}
@container pencere (max-width: 460px) {
    /* Çok dar kap: kişi adı yerine yalnız baş harfi; bantta yalnız açık sayfa */
    .mk-satir > .mk-kisi b { display: none; }
    .mk-bant-menu span:not(.on) { display: none; }
    .mk-sonuc small { display: none; }
    .mk-sonuc .mk-durum { gap: 0; padding: 0 7px; font-size: 0; }
    .mk-sonuc .mk-durum i { font-size: 13px; }
}
@container pencere (max-width: 380px) {
    .mk-toplanti-bas .mk-av-yigin { display: none; }
    .mk-bas small { display: none; }
}