/* =====================================================================
   BARKOL Sera Personel İş ve Konum Takip Sistemi
   Ana stil dosyası - dokunmatik tablet öncelikli, harici bağımlılık yok
   ===================================================================== */

:root {
    /* Kurumsal renkler */
    --yesil-koyu:   #14532d;
    --yesil:        #166534;
    --yesil-acik:   #22c55e;
    --toprak:       #78350f;

    /* Yüzeyler */
    --zemin:        #f1f5f4;
    --yuzey:        #ffffff;
    --yuzey-alt:    #f8fafc;
    --cizgi:        #d7dedb;

    /* Metin */
    --metin:        #1f2937;
    --metin-soluk:  #6b7280;
    --metin-ters:   #ffffff;

    /* Durum renkleri */
    --durum-devam:  #16a34a;
    --durum-mola:   #ea580c;
    --durum-yarim:  #dc2626;
    --durum-tamam:  #2563eb;
    --durum-iptal:  #6b7280;
    --durum-bekle:  #64748b;

    /* Ölçüler - dokunmatik */
    --dokunma-yukseklik: 56px;
    --dokunma-buyuk:     72px;
    --kose:              10px;
    --golge:             0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--zemin);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .6em; }

/* =====================================================================
   ÜST ÇUBUK
   ===================================================================== */

.ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--yesil-koyu);
    color: var(--metin-ters);
    box-shadow: var(--golge);
}

.menu-dugmesi {
    display: none;
    min-width: 48px;
    min-height: 48px;
    font-size: 24px;
    line-height: 1;
    color: var(--metin-ters);
    background: transparent;
    border: 0;
    border-radius: var(--kose);
    cursor: pointer;
}

.marka {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.marka-logo {
    height: 40px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    padding: 3px 6px;
}

.marka-yazi { display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi strong { font-size: 1.05rem; }
.marka-yazi small  { font-size: .78rem; opacity: .85; }

.ust-cubuk-sag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.kullanici-bilgi { display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
.kullanici-bilgi strong { font-size: .92rem; }
.kullanici-bilgi small  { font-size: .76rem; opacity: .85; }

/* =====================================================================
   GÖVDE VE YAN MENÜ
   ===================================================================== */

.govde { display: flex; min-height: calc(100vh - 64px); }

.yan-menu {
    flex: 0 0 236px;
    padding: 12px 10px;
    background: var(--yuzey);
    border-right: 1px solid var(--cizgi);
}

.menu-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dokunma-yukseklik);
    padding: 0 14px;
    margin-bottom: 6px;
    color: var(--metin);
    text-decoration: none;
    border-radius: var(--kose);
    font-weight: 600;
}

.menu-satiri:hover  { background: var(--yuzey-alt); }
.menu-satiri.etkin  { background: var(--yesil-koyu); color: var(--metin-ters); }
.menu-simge         { font-size: 1.2rem; width: 22px; text-align: center; }

.icerik {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.sayfa-baslik { margin-bottom: 16px; }
.sayfa-aciklama { color: var(--metin-soluk); margin: 0; }

/* =====================================================================
   KART VE ÖZET KUTULARI
   ===================================================================== */

.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--golge);
}

.kart-baslik { margin-bottom: 12px; }

.ozet-kutulari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ozet-kutu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 14px 16px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 6px solid var(--durum-bekle);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.ozet-sayi   { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.ozet-etiket { font-size: .9rem; color: var(--metin-soluk); }

.ozet-satir { display: flex; flex-wrap: wrap; gap: 18px; font-size: 1.05rem; }

/* Durum renkleri (renk tek başına anlam taşımaz, metin etiketi her zaman vardır) */
.durum-devam    { border-left-color: var(--durum-devam); }
.durum-mola     { border-left-color: var(--durum-mola); }
.durum-yarim    { border-left-color: var(--durum-yarim); }
.durum-tamam    { border-left-color: var(--durum-tamam); }
.durum-iptal    { border-left-color: var(--durum-iptal); }
.durum-bekliyor { border-left-color: var(--durum-bekle); }

.rozet {
    display: inline-block;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--yuzey-alt);
    color: var(--metin-soluk);
    border: 1px solid var(--cizgi);
}

.rozet-pasif { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.rozet-aktif { background: #dcfce7; border-color: #bbf7d0; color: #14532d; }

/* =====================================================================
   DÜĞMELER - dokunmatik ölçüler
   ===================================================================== */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--dokunma-yukseklik);
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    color: var(--metin);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.dugme:active   { transform: translateY(1px); }
.dugme:disabled { opacity: .45; cursor: not-allowed; }

.dugme-ana     { background: var(--yesil-koyu); border-color: var(--yesil-koyu); color: var(--metin-ters); }
.dugme-ikincil { background: var(--yuzey-alt); }
.dugme-tehlike { background: #dc2626; border-color: #dc2626; color: #fff; }
.dugme-sade    { background: transparent; border-color: transparent; }
.dugme-genis   { width: 100%; }
.dugme-kucuk   { min-height: 44px; padding: 0 14px; font-size: .9rem; }
.dugme-buyuk   { min-height: var(--dokunma-buyuk); font-size: 1.1rem; }

.dugme-grup   { display: flex; gap: 8px; }
.dugme-izgara { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================
   FORM ALANLARI
   ===================================================================== */

.alan-grup   { margin-bottom: 14px; }
.alan-etiket { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; }

.alan {
    width: 100%;
    min-height: var(--dokunma-yukseklik);
    padding: 10px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--metin);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
}

.alan:focus {
    outline: 3px solid rgba(22, 101, 52, .25);
    border-color: var(--yesil);
}

textarea.alan { min-height: 84px; resize: vertical; }

.ikili-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.anahtar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--dokunma-yukseklik);
    font-weight: 600;
    cursor: pointer;
}

.anahtar input { width: 24px; height: 24px; }

/* =====================================================================
   BİLDİRİMLER
   ===================================================================== */

.bildirim {
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: var(--kose);
    border-left: 6px solid var(--durum-bekle);
    background: var(--yuzey);
    font-weight: 600;
}

.bildirim-basarili { border-left-color: var(--durum-devam); background: #f0fdf4; }
.bildirim-hata     { border-left-color: var(--durum-yarim); background: #fef2f2; }
.bildirim-uyari    { border-left-color: var(--durum-mola);  background: #fff7ed; }
.bildirim-bilgi    { border-left-color: var(--durum-tamam); background: #eff6ff; }

/* =====================================================================
   GİRİŞ EKRANI
   ===================================================================== */

.giris-sayfasi {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(160deg, var(--yesil-koyu) 0%, #0b3d20 100%);
}

.giris-kutusu {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 20px;
    background: var(--yuzey);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    text-align: center;
}

.giris-logo   { max-width: 190px; height: auto; margin-bottom: 14px; }
.giris-baslik { font-size: 1.05rem; color: var(--metin-soluk); font-weight: 600; margin-bottom: 20px; }
.giris-kutusu form { text-align: left; }
.giris-kutusu .dugme-ana { margin-top: 10px; }
.giris-alt { margin-top: 18px; font-size: .8rem; color: var(--metin-soluk); }

/* =====================================================================
   SERA HİYERARŞİSİ EKRANI
   ===================================================================== */

.hiyerarsi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.sutun {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    box-shadow: var(--golge);
    overflow: hidden;
}

.sutun-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--yuzey-alt);
    border-bottom: 1px solid var(--cizgi);
}

.sutun-baslik h2 { margin: 0; font-size: 1rem; flex: 1 1 auto; }
.sutun-baslik .dugme-grup { flex: 0 0 auto; }

.sutun-yol {
    margin: 0;
    padding: 8px 14px;
    font-size: .82rem;
    color: var(--metin-soluk);
    background: var(--yuzey);
    border-bottom: 1px solid var(--cizgi);
}

.sutun-govde { padding: 10px; max-height: 62vh; overflow-y: auto; }

.sutun-govde.izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    align-content: start;
}

.bos-mesaj { padding: 14px 4px; color: var(--metin-soluk); font-size: .9rem; }

/* Liste satırı (sera / bölüm) */
.oge {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: var(--dokunma-yukseklik);
    padding: 8px 12px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--metin);
    background: var(--yuzey);
    border: 2px solid var(--cizgi);
    border-radius: var(--kose);
    cursor: pointer;
    touch-action: manipulation;
}

.oge:hover  { border-color: var(--yesil-acik); }
.oge.secili { border-color: var(--yesil-koyu); background: #f0fdf4; }
.oge.pasif  { opacity: .6; border-style: dashed; }

.oge-metin  { flex: 1 1 auto; min-width: 0; }
.oge-ad     { display: block; overflow-wrap: anywhere; }
.oge-alt    { display: block; font-size: .78rem; font-weight: 500; color: var(--metin-soluk); }

.oge-islem {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--metin-soluk);
}

.oge-islem:hover { background: var(--yuzey-alt); color: var(--metin); }

/* Kare kutu (alt bölüm / sıra) */
.kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--dokunma-buyuk);
    padding: 6px;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--metin);
    background: var(--yuzey);
    border: 2px solid var(--cizgi);
    border-radius: var(--kose);
    cursor: pointer;
    touch-action: manipulation;
}

.kutu:hover  { border-color: var(--yesil-acik); }
.kutu.secili { border-color: var(--yesil-koyu); background: #f0fdf4; }
.kutu.pasif  { opacity: .55; border-style: dashed; }
.kutu small  { font-size: .68rem; font-weight: 600; color: var(--metin-soluk); }

/* =====================================================================
   MODAL
   ===================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}

/* hidden özniteliği taşıyan öğeler her koşulda gizlenir.
   (display:flex tanımı tarayıcının varsayılan [hidden] kuralını ezdiği için gereklidir.) */
[hidden] { display: none !important; }

.modal-kutu {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: var(--yuzey);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.modal-baslik    { margin-bottom: 14px; }
.modal-aciklama  { color: var(--metin-soluk); font-size: .9rem; }
.modal-dugmeler  { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.perde {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(15, 23, 42, .45);
}

/* Yüzen bildirim */
.yuzen-bildirim {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 80;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 14px 20px;
    font-weight: 700;
    color: #fff;
    background: var(--yesil-koyu);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.yuzen-bildirim.hata { background: var(--durum-yarim); }

/* =====================================================================
   FAZ 3 - PERSONEL VE ALAN ATAMALARI
   ===================================================================== */

/* Araç çubuğu: arama + filtre + eylem */
.arac-satiri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.arama-kutusu  { flex: 1 1 260px; min-width: 0; }
.filtre-kutusu { flex: 0 0 auto; }

.sonuc-bilgi {
    margin: 12px 0 0;
    font-size: .88rem;
    color: var(--metin-soluk);
}

.zorunlu { color: var(--durum-yarim); }

/* Segment (Hepsi / Aktif / Pasif) */
.segment {
    display: inline-flex;
    background: var(--yuzey-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    overflow: hidden;
}

.segment-dugme {
    min-height: var(--dokunma-yukseklik);
    padding: 0 18px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--metin);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--cizgi);
    cursor: pointer;
    touch-action: manipulation;
}

.segment-dugme:last-child { border-right: 0; }
.segment-dugme.etkin      { background: var(--yesil-koyu); color: var(--metin-ters); }

/* Personel kart ızgarası */
.kart-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.personel-kart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 6px solid var(--durum-devam);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.personel-kart.pasif {
    border-left-color: var(--durum-iptal);
    background: var(--yuzey-alt);
}

.personel-baslik {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.personel-kimlik { display: flex; flex-direction: column; min-width: 0; }
.personel-ad     { font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.personel-kod    { font-size: .82rem; color: var(--metin-soluk); font-weight: 600; }

.personel-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: .88rem;
    color: var(--metin-soluk);
}

.personel-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

/* Sayfalama */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sayfa-bilgi { font-weight: 700; min-width: 70px; text-align: center; }

/* Atama listesi */
.kart-baslik-satiri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kart-baslik-satiri .kart-baslik { margin: 0; }

.atama-satiri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 6px solid var(--yesil);
    border-radius: var(--kose);
}

.atama-satiri.pasif {
    border-left-color: var(--durum-iptal);
    background: var(--yuzey-alt);
    opacity: .75;
}

.atama-bilgi   { flex: 1 1 260px; min-width: 0; }
.atama-konum   { display: block; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.atama-alt     { display: block; margin-top: 5px; font-size: .84rem; color: var(--metin-soluk); }
.atama-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }

.kapsam-onizleme {
    padding: 12px 14px;
    margin: 6px 0 16px;
    font-weight: 700;
    font-size: .92rem;
    color: var(--yesil-koyu);
    background: #f0fdf4;
    border-left: 6px solid var(--yesil);
    border-radius: var(--kose);
    overflow-wrap: anywhere;
}

.modal-genis { max-width: 560px; }

/* =====================================================================
   FAZ 4 - İŞ TÜRLERİ
   ===================================================================== */

.alan-ipucu {
    margin: -2px 0 8px;
    font-size: .82rem;
    color: var(--metin-soluk);
}

/* İş türü satırı */
.is-turu-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 8px solid var(--renk, var(--yesil));
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.is-turu-satiri.pasif {
    border-left-color: var(--durum-iptal);
    background: var(--yuzey-alt);
    opacity: .75;
}

.is-turu-numara {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--metin-soluk);
    background: var(--yuzey-alt);
    border: 1px solid var(--cizgi);
    border-radius: 50%;
}

.is-turu-bilgi { flex: 1 1 200px; min-width: 0; }
.is-turu-ad    { display: block; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }

.is-turu-alt {
    display: block;
    margin-top: 4px;
    font-size: .85rem;
    color: var(--metin-soluk);
    overflow-wrap: anywhere;
}

.is-turu-dugmeler {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sıralama düğmeleri */
.tasima-grubu {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tasima-dugmesi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    font-size: .8rem;
    line-height: 1;
    color: var(--metin);
    background: var(--yuzey-alt);
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    cursor: pointer;
    touch-action: manipulation;
}

.tasima-dugmesi:hover:not(:disabled) {
    background: var(--yesil-koyu);
    border-color: var(--yesil-koyu);
    color: var(--metin-ters);
}

.tasima-dugmesi:disabled { opacity: .3; cursor: not-allowed; }

/* Renk seçimi */
.renk-secimi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.renk-kutu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 4px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: var(--renk);
    border: 3px solid transparent;
    border-radius: var(--kose);
    cursor: pointer;
    touch-action: manipulation;
}

.renk-kutu.secili {
    border-color: var(--metin);
    box-shadow: 0 0 0 2px var(--yuzey) inset;
}

.renk-ad { pointer-events: none; }

/* =====================================================================
   FAZ 5 - TABLET SAHA EKRANI
   ===================================================================== */

:root { --durum-bosta-renk: #94a3b8; }

.durum-bosta { border-left-color: var(--durum-bosta-renk); }

.alan-buyuk { min-height: var(--dokunma-buyuk); font-size: 1.05rem; }

/* Özet kutuları saha ekranında filtre düğmesidir */
.saha-ozet .ozet-kutu {
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.saha-ozet .ozet-kutu.secili {
    outline: 3px solid var(--yesil-koyu);
    outline-offset: -3px;
}

.saha-araclar { margin-bottom: 16px; }

/* --- Personel kartı (doküman §19) --------------------------------- */

.saha-kart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 8px solid var(--durum-bosta-renk);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.saha-kart.durum-devam { border-left-color: var(--durum-devam); }
.saha-kart.durum-mola  { border-left-color: var(--durum-mola); }
.saha-kart.durum-yarim { border-left-color: var(--durum-yarim); }
.saha-kart.durum-bosta { border-left-color: var(--durum-bosta-renk); background: var(--yuzey-alt); }

.saha-kart-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.saha-kimlik { display: flex; flex-direction: column; min-width: 0; }
.saha-ad     { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.saha-kod    { font-size: .82rem; font-weight: 600; color: var(--metin-soluk); }

/* Durum etiketi: renk tek başına anlam taşımaz, metin her zaman vardır */
.durum-etiket {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--metin-ters);
    background: var(--durum-bosta-renk);
    border-radius: 999px;
    white-space: nowrap;
}

.durum-etiket.durum-devam { background: var(--durum-devam); }
.durum-etiket.durum-mola  { background: var(--durum-mola); }
.durum-etiket.durum-yarim { background: var(--durum-yarim); }
.durum-etiket.durum-tamam { background: var(--durum-tamam); }
.durum-etiket.durum-iptal { background: var(--durum-iptal); }

.saha-kart-govde { font-size: .95rem; }
.saha-kart-govde.bos { color: var(--metin-soluk); font-style: italic; }

.saha-is {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.02rem;
}

.is-nokta {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.saha-konum { margin-top: 3px; overflow-wrap: anywhere; }
.saha-zaman { margin-top: 3px; font-size: .85rem; color: var(--metin-soluk); }

.saha-kart-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

/* Düğmeler eşit paylaşmak yerine satıra sığdığı kadar sığar, taşan alt satıra iner.
   Böylece "Devam Ettir" gibi etiketler iki satıra bölünmez. */
.saha-kart-dugmeler .dugme {
    flex: 1 1 auto;
    min-width: 128px;
    min-height: var(--dokunma-yukseklik);
    white-space: nowrap;
}

/* --- Seçim akışı --------------------------------------------------- */

.akis-ust {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin-bottom: 12px;
    background: var(--zemin);
}

.akis-baslik { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.akis-baslik strong { font-size: 1.15rem; }
.akis-yol { font-size: .86rem; color: var(--metin-soluk); overflow-wrap: anywhere; }

/* Adım göstergesi */
.adim-gostergesi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.adim-gostergesi li {
    flex: 1 1 auto;
    padding: 8px 10px;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    color: var(--metin-soluk);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
}

.adim-gostergesi li.tamam {
    color: var(--yesil-koyu);
    background: #f0fdf4;
    border-color: var(--yesil-acik);
}

.adim-gostergesi li.etkin {
    color: var(--metin-ters);
    background: var(--yesil-koyu);
    border-color: var(--yesil-koyu);
}

.akis-soru { font-size: 1.35rem; margin-bottom: 16px; }

/* Büyük dokunmatik seçim düğmeleri (doküman §17) */
.secim-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.secim-satiri {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: left;
    color: var(--metin);
    background: var(--yuzey);
    border: 2px solid var(--cizgi);
    border-left: 8px solid var(--renk, var(--yesil));
    border-radius: var(--kose);
    box-shadow: var(--golge);
    cursor: pointer;
    touch-action: manipulation;
    overflow-wrap: anywhere;
}

.secim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.secim-kutu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 10px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    color: var(--metin);
    background: var(--yuzey);
    border: 2px solid var(--cizgi);
    border-radius: var(--kose);
    box-shadow: var(--golge);
    cursor: pointer;
    touch-action: manipulation;
    overflow-wrap: anywhere;
}

/* İş türü kutuları tanımlı renkleriyle ayrışır (renk tek başına anlam taşımaz,
   etiket metni her zaman kutunun içindedir). */
.secim-kutu.renkli {
    border-top-width: 10px;
    border-top-color: var(--renk);
}

.secim-satiri:active,
.secim-kutu:active { transform: translateY(1px); }

.secim-satiri:hover,
.secim-kutu:hover { border-color: var(--yesil-acik); background: #f0fdf4; }

.akis-alt { margin-top: 20px; }
.akis-alt-ikili { display: flex; gap: 12px; }
.akis-alt-ikili .dugme { flex: 1 1 0; }
.akis-alt-ikili .dugme-ana { flex: 2 1 0; }

/* --- Onay adımı ---------------------------------------------------- */

.onay-kutu {
    padding: 18px;
    margin-bottom: 18px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 8px solid var(--yesil);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.onay-satiri {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cizgi);
}

.onay-satiri:last-of-type { border-bottom: 0; }
.onay-etiket { flex: 0 0 110px; font-weight: 600; color: var(--metin-soluk); }
.onay-deger  { flex: 1 1 200px; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }

.onay-not {
    margin: 12px 0 0;
    font-size: .88rem;
    color: var(--metin-soluk);
}

/* --- Uyarı ekranı (yarım kalan iş / alan yok) ---------------------- */

.uyari-kutu {
    padding: 20px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 8px solid var(--durum-yarim);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.uyari-baslik { color: var(--durum-yarim); font-size: 1.25rem; margin-bottom: 14px; }
.uyari-aciklama { color: var(--metin-soluk); margin: 14px 0 0; }
.uyari-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Görev özeti kutusu */
.gorev-ozet {
    padding: 16px;
    background: var(--yuzey-alt);
    border-left: 6px solid var(--durum-bosta-renk);
    border-radius: var(--kose);
}

.gorev-ozet.durum-devam { border-left-color: var(--durum-devam); }
.gorev-ozet.durum-mola  { border-left-color: var(--durum-mola); }
.gorev-ozet.durum-yarim { border-left-color: var(--durum-yarim); }

.gorev-is    { margin-top: 10px; font-size: 1.15rem; font-weight: 700; }
.gorev-konum { margin-top: 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.gorev-zaman { margin-top: 6px; font-size: .88rem; color: var(--metin-soluk); }

/* Hareket geçmişi */
.alt-baslik { margin: 20px 0 10px; font-size: 1rem; }

.hareket-listesi { list-style: none; padding: 0; margin: 0; }

.hareket-listesi li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: .9rem;
}

.hareket-listesi li:last-child { border-bottom: 0; }
.hareket-zaman { flex: 0 0 130px; color: var(--metin-soluk); }
.hareket-ad    { font-weight: 700; }
.hareket-kisi  { color: var(--metin-soluk); }
.hareket-not   { flex: 1 1 100%; color: var(--metin-soluk); overflow-wrap: anywhere; }

.bilgi-notu {
    margin-top: 16px;
    padding: 10px 14px;
    font-size: .85rem;
    color: var(--metin-soluk);
    background: var(--yuzey-alt);
    border-radius: var(--kose);
}

/* =====================================================================
   FAZ 6 - İŞ AKIŞI DÜĞMELERİ VE MOLA GÖSTERİMİ
   ===================================================================== */

/* İşlem düğmeleri: renk + metin birlikte anlam taşır */
.dugme-mola {
    background: var(--durum-mola);
    border-color: var(--durum-mola);
    color: var(--metin-ters);
}

.dugme-tamam {
    background: var(--durum-tamam);
    border-color: var(--durum-tamam);
    color: var(--metin-ters);
}

/* Molada bilgisi personel kartında öne çıkar */
.saha-mola {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: .88rem;
    font-weight: 700;
    color: #7c2d12;
    background: #fff7ed;
    border-left: 4px solid var(--durum-mola);
    border-radius: 6px;
}

/* Modal içindeki iş akışı düğmeleri */
.modal-islemler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 4px;
}

.modal-islemler .dugme { flex: 1 1 140px; }

/* Uyarı ekranındaki eylem düğmeleri */
.uyari-dugmeler .dugme { flex: 1 1 160px; }

/* Mola listesi */
.mola-listesi { list-style: none; padding: 0; margin: 0; }

.mola-listesi li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: .92rem;
}

.mola-listesi li:last-child { border-bottom: 0; }

.mola-araligi { flex: 0 0 160px; font-weight: 600; }

.mola-sure {
    padding: 2px 10px;
    font-weight: 700;
    color: #7c2d12;
    background: #fff7ed;
    border-radius: 999px;
}

.mola-not { flex: 1 1 100%; color: var(--metin-soluk); overflow-wrap: anywhere; }

/* =====================================================================
   TABLET VE TELEFON
   ===================================================================== */

@media (max-width: 1100px) {
    .hiyerarsi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sutun-govde { max-height: 46vh; }
}

@media (max-width: 900px) {
    .menu-dugmesi { display: inline-flex; align-items: center; justify-content: center; }

    .yan-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        width: 264px;
        height: 100%;
        padding-top: calc(16px + env(safe-area-inset-top));
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
    }

    .yan-menu.acik { transform: translateX(0); }

    .kullanici-bilgi { display: none; }
    .icerik { padding: 14px; }
}

@media (max-width: 620px) {
    .hiyerarsi  { grid-template-columns: 1fr; }
    .ikili-alan { grid-template-columns: 1fr; }
    .marka-yazi small { display: none; }

    .arac-satiri   { flex-direction: column; align-items: stretch; }
    .filtre-kutusu { width: 100%; }
    .segment       { width: 100%; }
    .segment-dugme { flex: 1 1 0; padding: 0 8px; }
    .kart-izgara   { grid-template-columns: 1fr; }

    .atama-satiri   { flex-direction: column; align-items: stretch; }
    .atama-dugmeler .dugme { flex: 1 1 0; }

    .is-turu-satiri { flex-wrap: wrap; }
    .is-turu-bilgi  { flex: 1 1 100%; order: -1; }
    .is-turu-dugmeler { flex: 1 1 100%; }
    .is-turu-dugmeler .dugme { flex: 1 1 0; }

    .modal-islemler .dugme,
    .uyari-dugmeler .dugme { flex: 1 1 100%; }
    .mola-araligi   { flex: 1 1 100%; }

    .secim-listesi  { grid-template-columns: 1fr; }
    .secim-izgara   { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .akis-alt-ikili { flex-direction: column; }
    .adim-gostergesi li { font-size: .74rem; padding: 7px 6px; }
    .onay-etiket    { flex: 1 1 100%; }
    .hareket-zaman  { flex: 1 1 100%; }
}

/* Dokunmatik cihazlarda daha büyük hedefler */
@media (pointer: coarse) {
    .dugme { min-height: 60px; }
    .oge   { min-height: 60px; }
    .kutu  { min-height: 80px; }
}

@media print {
    .ust-cubuk, .yan-menu, .modal, .perde { display: none !important; }
    .icerik { padding: 0; }
}