:root { --pg: #0c8048; --pg-d: #13402a; --ink: #24312a; --line: #e2e8e4; }
* { box-sizing: border-box; }
body.portal { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: #eef3ef; color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

.portal-top { background: var(--pg-d); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.portal-top__brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.portal-top__brand img { height: 60px; background: #fff; border-radius: 11px; padding: 6px 11px; }
.portal-top__brand span { font-size: 16px; text-align: center; line-height: 1.15; }
.portal-top__right { display: flex; align-items: center; gap: 14px; }
.portal-nav { display: flex; align-items: center; gap: 14px; }
.portal-nav form { display: inline; margin: 0; }
.portal-burger { display: none; background: rgba(255,255,255,.14); border: none; color: #fff; width: 40px; height: 40px; border-radius: 9px; font-size: 18px; cursor: pointer; }
.portal-burger:hover { background: rgba(255,255,255,.24); }
.portal-scrim { display: none; }
.portal-lang { display: flex; gap: 4px; }
.portal-lang a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.portal-lang a.is-active { background: rgba(255,255,255,.18); color: #fff; }
.portal-top__link { color: #fff; text-decoration: none; font-size: 13.5px; }
.portal-top__logout { background: rgba(255,255,255,.14); border: none; color: #fff; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }

.portal-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 26px 14px; }
.portal-foot { text-align: center; color: #8a938c; font-size: 12px; padding: 14px; }

.portal-card { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 26px 24px; width: 100%; max-width: 440px; }
.portal-card--wide { max-width: 680px; }
.portal-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.portal-card__head h1 { margin: 0; font-size: 20px; }

.portal-hello { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.portal-hello__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--pg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.portal-hello h1 { margin: 0; font-size: 19px; }
.portal-hello p { margin: 2px 0 0; color: #7c857e; font-size: 13px; }

.portal-alert { background: #e8f6ec; color: #146c38; border: 1px solid #bce3c8; border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 16px; }
.portal-alert--err { background: #fdeceb; color: #97231c; border-color: #f3c7c3; }

.portal-clock { text-align: center; margin: 10px 0 22px; }
.portal-clock__date { color: #7c857e; font-size: 14px; }
.portal-clock__time { font-size: 46px; font-weight: 800; color: var(--pg-d); letter-spacing: 1px; line-height: 1.1; }
.portal-clock__tz { color: #9aa39c; font-size: 12px; }

.portal-action { margin: 6px 0; }
.portal-btn { border: none; border-radius: 12px; padding: 16px 20px; font-size: 17px; font-weight: 700; color: #fff; cursor: pointer; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.portal-btn--in { background: var(--pg); }
.portal-btn--in:hover { background: #0a6e3e; }
.portal-btn--out { background: #d97706; }
.portal-btn--out:hover { background: #b96305; }
.portal-btn--sm { width: auto; padding: 8px 14px; font-size: 14px; background: var(--pg); }
.portal-hint { text-align: center; color: #9aa39c; font-size: 13px; margin: 10px 0 0; }

.portal-status { background: #f4f8f5; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.portal-status__item { display: flex; justify-content: space-between; align-items: center; }
.portal-status__item span { color: #7c857e; }
.portal-status__item strong { font-size: 22px; color: var(--pg-d); }
.portal-status__late { color: #b45309; font-size: 13px; margin-top: 6px; }

.portal-summary { background: #f4f8f5; border-radius: 12px; padding: 8px 18px; margin-bottom: 14px; }
.portal-summary__row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #e6ede8; }
.portal-summary__row:last-child { border-bottom: none; }
.portal-summary__row span { color: #7c857e; }
.portal-done { text-align: center; color: var(--pg); font-weight: 600; margin: 6px 0 0; }
.portal-done i { margin-right: 6px; }

.portal-history-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; color: var(--pg); text-decoration: none; font-weight: 600; font-size: 14px; }

.portal-monthfilter { display: flex; gap: 8px; }
.portal-monthfilter input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.portal-table-wrap { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th, .portal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef2ef; font-size: 14px; }
.portal-table th { color: #7c857e; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.portal-empty { text-align: center; color: #9aa39c; padding: 30px 0; }

.att-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.att--present { background: #e8f6ec; color: #146c38; }
.att--late { background: #fef3e2; color: #b45309; }
.att--absent { background: #fdeceb; color: #97231c; }
.att--leave { background: #e9f0fb; color: #2358a8; }
.att--half { background: #f3eefb; color: #6b3bb0; }
.att--other { background: #eef1ee; color: #5f6b62; }

/* Giriş ekranı */
.portal-login { width: 100%; display: flex; justify-content: center; }
.portal-login__box { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 34px 28px; width: 100%; max-width: 380px; text-align: center; }
.portal-login__logo { height: 54px; margin-bottom: 14px; }
.portal-login__box h1 { font-size: 21px; margin: 0 0 4px; }
.portal-login__sub { color: #7c857e; font-size: 14px; margin: 0 0 20px; }
.portal-field { text-align: left; margin-bottom: 14px; }
.portal-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.portal-field input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 15px; }
.portal-field input:focus { outline: none; border-color: var(--pg); box-shadow: 0 0 0 3px rgba(12,128,72,.12); }
.portal-remember { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #5f6b62; margin: 0 0 18px; text-align: left; }

/* ---- Koordinatör proje yönetimi ---- */
.portal-proj-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; }
.portal-proj { display: block; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; background: #fff; color: inherit; transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease; }
.portal-proj:hover { box-shadow: 0 6px 18px rgba(16,64,42,.09); transform: translateY(-1px); border-color: #d4e2d9; }
.portal-proj__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.portal-proj__head strong { font-size: 15.5px; color: var(--ink); }
.portal-proj__badge { flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.portal-proj__badge--0 { background: #eef1ee; color: #5f6b62; }   /* Başlamadı */
.portal-proj__badge--1 { background: #e9f0fb; color: #2358a8; }   /* Devam */
.portal-proj__badge--2 { background: #e8f6ec; color: #146c38; }   /* Tamamlandı */
.portal-proj__badge--3 { background: #fdeceb; color: #97231c; }   /* Gecikti */
.portal-proj__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #6b7a70; }
.portal-proj__meta i { color: #9aa39c; margin-right: 3px; }
.portal-proj__report { margin-top: 9px; }
.portal-proj__rep { font-size: 12.5px; font-weight: 600; }
.portal-proj__rep--ok { color: #146c38; }
.portal-proj__rep--pending { color: #b45309; }

.portal-proj-info { background: #f7faf8; border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; margin: 4px 0 18px; }
.portal-proj-info__row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #e6ede8; font-size: 14px; }
.portal-proj-info__row:last-child { border-bottom: none; }
.portal-proj-info__row span { color: #7c857e; }

.portal-form { text-align: left; }
.portal-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.portal-field select, .portal-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 15px; font-family: inherit; box-sizing: border-box; }
.portal-field textarea { resize: vertical; }
.portal-field select:focus, .portal-field textarea:focus { outline: none; border-color: var(--pg); box-shadow: 0 0 0 3px rgba(12,128,72,.12); }
.portal-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .portal-field-grid { grid-template-columns: 1fr; } }

/* ---- Drive (portal salt-okunur) ---- */
.portal-card--wide { max-width: 820px; }
/* Büyük ekranda kart daha geniş → daha çok/daha büyük görsel */
@media (min-width: 1200px) { .portal-card--wide { max-width: 1080px; } }
.portal-drive-list { display:flex; flex-direction:column; gap:8px; margin: 6px 0 18px; }
.portal-drive-row { display:grid; grid-template-columns: 40px 1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:inherit; text-align:left; }
.portal-drive-row:hover { background:#f7faf8; border-color:#d4e2d9; }
.portal-drive-row__name { font-size:14.5px; color:var(--ink); word-break:break-word; }
.portal-drive-row__meta { font-size:12.5px; color:#7c857e; text-align:right; }
.portal-btn--sm { width:auto; padding:6px 12px; font-size:12.5px; background:var(--pg); font-weight:600; }
.drive-crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:#7c857e; }
.drive-crumbs a { color:var(--pg); font-weight:600; }
.drive-crumbs__sep { color:#c8d2ca; }
.drive-search { display:flex; gap:6px; align-items:center; }
.drive-search input { flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:14px; }

/* ---- Portal mobil ---- */
@media (max-width: 720px) {
    /* Nav linkleri hamburger menüye taşınır */
    .portal-burger { display: inline-flex; align-items: center; justify-content: center; }
    .portal-scrim { display: block; position: fixed; inset: 0; background: rgba(10,25,16,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 40; }
    body.pnav-open .portal-scrim { opacity: 1; visibility: visible; }

    .portal-nav {
        position: absolute; top: 100%; right: 10px; z-index: 50;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--pg-d); border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px; padding: 8px; min-width: 200px;
        box-shadow: 0 12px 30px rgba(0,0,0,.35);
        transform-origin: top right; transform: scale(.96); opacity: 0; visibility: hidden;
        transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    }
    body.pnav-open .portal-nav { opacity: 1; visibility: visible; transform: scale(1); }
    .portal-top { position: relative; }
    .portal-nav .portal-top__link { padding: 11px 12px; border-radius: 8px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
    .portal-nav .portal-top__link:hover { background: rgba(255,255,255,.08); }
    .portal-nav form { display: block; }
    .portal-nav .portal-top__logout { width: 100%; justify-content: center; padding: 11px 12px; font-size: 14.5px; margin-top: 2px; }
}
@media (max-width: 600px) {
    .portal-top { padding: 10px 13px; }
    .portal-top__brand span { font-size: 14px; }
    .portal-top__brand img { height: 60px; padding: 6px 9px; }
    .portal-main { padding: 18px 12px; }
    .portal-card { padding: 22px 16px; }
    .portal-drive-row { grid-template-columns: 34px 1fr; }
    .portal-drive-row > div:last-child { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
    .portal-proj__meta { gap: 8px 12px; }
}
@media (max-width: 400px) {
    /* Çok darsa metni 2 satıra sar (gizleme) */
    .portal-top__brand span { max-width: 96px; font-size: 13px; }
}

/* ---- Drive: liste / büyük görsel (kılavuz) ---- */
.dview-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.dview-toggle button { background: #fff; border: none; padding: 8px 12px; cursor: pointer; color: #7c857e; font-size: 15px; }
.dview-toggle button.is-active { background: var(--pg); color: #fff; }

.dfile { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.dfile__thumb { text-decoration: none; }
.dfile--folder .dfile__thumb i { color: #f9c74f; }
.dfile__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--pg); color: #fff; font-size: 13px; cursor: pointer; text-decoration: none; }
.dfile__btn:hover { background: #0a6e3e; }
.dfile__btn--danger { background: #e63946; }

/* Kılavuz (büyük görsel) */
.dgrid--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 6px 0 18px; }
.dgrid--grid .dfile { flex-direction: column; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.dgrid--grid .dfile:hover { box-shadow: 0 6px 16px rgba(16,40,26,.10); border-color: #d4e2d9; }
.dgrid--grid .dfile__thumb { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #eef2ef; overflow: hidden; }
.dgrid--grid .dfile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dgrid--grid .dfile__thumb i { font-size: 46px; }
.dgrid--grid .dfile__name { padding: 8px 10px 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgrid--grid .dfile__size { padding: 2px 10px 0; font-size: 11px; color: #8a948c; }
.dgrid--grid .dfile__actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 8px 10px; margin-top: auto; }

/* Liste */
.dgrid--list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 18px; }
.dgrid--list .dfile { flex-direction: row; align-items: center; gap: 12px; padding: 9px 12px; }
.dgrid--list .dfile__thumb { flex-shrink: 0; width: 46px; height: 46px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #eef2ef; overflow: hidden; }
.dgrid--list .dfile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dgrid--list .dfile__thumb i { font-size: 22px; }
.dgrid--list .dfile__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgrid--list .dfile__size { flex-shrink: 0; font-size: 12px; color: #8a948c; }
.dgrid--list .dfile__actions { flex-shrink: 0; display: flex; gap: 6px; }
@media (max-width: 400px) { .dgrid--grid { grid-template-columns: 1fr 1fr; } }

/* Video kapağı üstünde oynat rozeti */
.dfile__thumb { position: relative; }
.dfile__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dfile__play i { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.dgrid--list .dfile__play i { width: 26px; height: 26px; font-size: 11px; padding-left: 2px; }

/* Drive kılavuz: mobilde aksiyon butonları tek satır */
@media (max-width: 600px) {
    .dgrid--grid .dfile__actions { flex-wrap: nowrap; gap: 5px; padding: 7px 7px 9px; }
    .dgrid--grid .dfile__btn { width: 30px; height: 30px; }
}

/* ---- Portal menü (ana ekran) ---- */
.portal-menu { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.portal-menu__item { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease; }
.portal-menu__item:hover { box-shadow: 0 6px 18px rgba(16,64,42,.09); transform: translateY(-1px); border-color: #d4e2d9; }
.portal-menu__icon { width: 48px; height: 48px; border-radius: 12px; background: #eef7f1; color: var(--pg); display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.portal-menu__body { flex: 1; min-width: 0; }
.portal-menu__body strong { display: block; font-size: 16px; color: var(--ink); }
.portal-menu__body span { display: block; font-size: 13px; color: #7c857e; margin-top: 2px; }
.portal-menu__arrow { color: #c2ccc5; font-size: 15px; flex-shrink: 0; }
.portal-menu__item--in .portal-menu__icon { background: #fef3e2; color: #b45309; }
.portal-menu__item--done .portal-menu__icon { background: #e8f6ec; color: #146c38; }

/* ---- Portal proje: bölüm başlığı + konum ---- */
.portal-form__section { font-size: 15px; font-weight: 800; color: var(--pg-d); margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.portal-btn--light { background: #eef3ef; color: var(--pg-d); }
.portal-loc { background: #f4f8f5; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.portal-loc__here { width: 100%; }
.portal-loc__paste { display: flex; gap: 8px; align-items: center; }
.portal-loc__paste input { flex: 1; min-width: 0; }
.portal-loc__paste .portal-btn { width: auto; padding: 10px 14px; flex-shrink: 0; }
.portal-loc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-loc__status { font-size: 13px; font-weight: 600; }
.portal-history-link.is-disabled { opacity: .5; pointer-events: none; }

/* ---- Konum harita önizleme (portal) ---- */
.portal-loc__map { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); height: 240px; }
.portal-loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.portal-loc__map.is-empty { display: none; }

.is-hidden { display: none !important; }

/* ---- Aylık rapor indirme ---- */
.portal-export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f4f8f5; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; }
.portal-export__lbl { font-size: 13px; font-weight: 600; color: #5f6b62; }
.portal-export input[type=month] { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.portal-export__btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--pg-d); cursor: pointer; }
.portal-export__btn:hover { background: #eef3ef; }
.portal-export__btn i { color: var(--pg); }

/* ---- Sayfalama ---- */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0 4px; }
.pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 11px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; border: 1px solid var(--line); text-decoration: none; }
.pager__btn:hover { background: #eef3ef; }
.pager__btn.is-active { background: var(--pg); color: #fff; border-color: var(--pg); }
.pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.pager__gap { display: inline-flex; align-items: center; padding: 0 4px; color: #9aa39c; }

/* ---- Projeye bağlı Drive dosyaları ---- */
.portal-proj-files { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.portal-proj-files li { display: flex; align-items: center; gap: 9px; background: #f4f8f5; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.portal-proj-files a { color: var(--pg); font-weight: 600; word-break: break-word; }
.portal-proj-files i { color: #7c857e; flex-shrink: 0; }