/* ============================================================
 * Public Lowongan — stylesheet
 * Digunakan oleh: public_lowongan.php
 * ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#2C6E7A;--teal-dark:#1e4f59;--teal-light:#e8f4f6;
  --alice:#D8E7EC;--steel:#79A1AD;
  --ink:#1A2B30;--ink-soft:#3d5a62;
  --radius:14px;--shadow:0 2px 16px rgba(44,110,122,.10);
  --green:#27ae60;--orange:#e67e22;--red:#e74c3c;
}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f0f6f8;color:var(--ink)}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);padding:48px 0 40px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40px;right:-60px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero::after{content:'';position:absolute;bottom:-60px;left:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04)}
.hero-inner{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.hero h1{font-size:32px;font-weight:800;color:white;margin-bottom:8px;line-height:1.2}
.hero p{font-size:15px;color:rgba(255,255,255,.8);margin-bottom:28px;max-width:520px;line-height:1.6}
.hero-stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hstat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:10px;padding:10px 18px;backdrop-filter:blur(4px)}
.hstat-num{font-size:22px;font-weight:800;color:white}
.hstat-lbl{font-size:11px;color:rgba(255,255,255,.75);line-height:1.3}
.btn-kirim-hero{display:inline-flex;align-items:center;gap:7px;background:white;color:var(--teal);padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-family:inherit}
.btn-kirim-hero:hover{background:var(--alice);transform:translateY(-1px)}

/* ── Tab navigasi publik ── */
.pub-tabs-wrap{background:linear-gradient(135deg,var(--teal),var(--teal-dark));padding-bottom:0}
.pub-tabs{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;gap:6px;padding-top:20px}
.pub-tab{padding:10px 20px;border-radius:10px 10px 0 0;font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-soft);background:#e4eef1;border:none;cursor:pointer;transition:all .2s}
.pub-tab.active{background:white;color:var(--teal);box-shadow:0 -2px 8px rgba(44,110,122,.08)}
.pub-tab:hover:not(.active){background:#d4e6eb;color:var(--teal)}

/* ── Layout ── */
.page-wrap{max-width:1100px;margin:0 auto;padding:32px 24px}
.page-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}

/* ── Sidebar filter ── */
.sidebar-filter{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:sticky;top:76px}
.sf-title{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:14px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.fg input,.fg select{width:100%;padding:8px 11px;border:1.5px solid #dde8ec;border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:#f7fbfc;outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus{border-color:var(--teal);background:white}
.filter-chips{display:flex;gap:5px;flex-wrap:wrap}
.fchip{padding:4px 11px;border-radius:99px;font-size:11px;font-weight:700;text-decoration:none;color:var(--ink-soft);background:white;border:1.5px solid #dde8ec;transition:all .15s}
.fchip:hover,.fchip.on{background:var(--teal);color:white;border-color:var(--teal)}
.btn-filter{width:100%;padding:9px;background:var(--teal);color:white;border:none;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s;margin-top:4px}
.btn-filter:hover{background:var(--teal-dark)}
.btn-reset{width:100%;padding:8px;background:#f0f6f8;color:var(--ink-soft);border:1.5px solid #dde8ec;border-radius:9px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:6px;text-decoration:none;display:block;text-align:center}
.btn-reset:hover{border-color:var(--steel);color:var(--ink)}

/* ── Sort bar ── */
.sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.results-info{font-size:13px;color:var(--ink-soft)}
.results-info strong{color:var(--ink)}
.sort-tabs{display:flex;gap:6px}
.sort-tab{padding:6px 14px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none;color:var(--ink-soft);background:white;border:1.5px solid #dde8ec;transition:all .15s}
.sort-tab:hover{border-color:var(--steel)}
.sort-tab.on{background:var(--teal);color:white;border-color:var(--teal)}

/* ── Card Lowongan ── */
.low-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.low-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1.5px solid transparent;display:flex;flex-direction:column}
.low-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(44,110,122,.15);border-color:var(--alice)}
.card-cover{height:140px;overflow:hidden;position:relative;background:var(--teal-light);flex-shrink:0}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.low-card:hover .card-cover img{transform:scale(1.04)}
.cover-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--teal-light),#d0e8ee)}
.cp-icon{font-size:32px;opacity:.55}
.cp-judul{font-size:11px;font-weight:700;color:var(--teal);text-align:center;padding:0 14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-cover-badges{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.card-cover-deadline{position:absolute;bottom:8px;right:8px}
.badge-tipe{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800}
.badge-tipe.kerja{background:#fff3e0;color:var(--orange)}
.badge-tipe.magang{background:#e8f5e9;color:var(--green)}
.badge-mode{padding:3px 8px;border-radius:99px;font-size:10px;font-weight:700;background:rgba(255,255,255,.88);color:var(--ink-soft)}
.badge-tp{padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;background:rgba(44,110,122,.12);color:var(--teal)}
.deadline{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800}
.deadline.ok{background:rgba(255,255,255,.88);color:var(--teal)}
.deadline.soon{background:#fff3e0;color:var(--orange)}
.deadline.today,.deadline.expired{background:#fdecea;color:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.deadline.today{animation:pulse 1.5s infinite}
.card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.card-institusi{font-size:11px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.card-judul{font-size:14px;font-weight:800;color:var(--ink);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;font-size:11px;color:var(--ink-soft)}
.card-gaji{font-size:12px;font-weight:700;color:var(--green);margin-top:auto;padding-top:8px;border-top:1px solid #f0f6f8}

/* ── Card Mahasiswa (pengajuan magang) ── */
.pm-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .15s;display:flex;flex-direction:column}
.pm-card:hover{box-shadow:0 6px 24px rgba(44,110,122,.15);transform:translateY(-2px)}
.pm-card-head{background:linear-gradient(135deg,#2C6E7A,#1e4f59);padding:16px;display:flex;align-items:center;gap:12px}
.pm-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.pm-card-name{font-size:14px;font-weight:800;color:white;line-height:1.3}
.pm-card-sub{font-size:11px;color:rgba(255,255,255,.75);margin-top:2px}
.pm-card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:8px}
.pm-badges{display:flex;flex-wrap:wrap;gap:5px}
.pm-minat{display:flex;flex-wrap:wrap;gap:4px}
.pm-minat-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:#e8f4f6;color:var(--teal)}
.pm-meta{font-size:11px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:8px}
.pm-actions{padding:12px 16px;border-top:1px solid #f0f6f8;display:flex;gap:8px;flex-wrap:wrap}
.btn-detail-pm{flex:1;padding:9px;background:var(--teal);color:white;border:none;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
.btn-detail-pm:hover{background:var(--teal-dark)}
.btn-cv-pm{padding:9px 14px;background:#f0f6f8;color:var(--ink-soft);border:1.5px solid #dde8ec;border-radius:9px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:4px}
.btn-cv-pm:hover{border-color:var(--teal);color:var(--teal)}
.btn-cv-locked{padding:9px 14px;background:#f5f5f5;color:#bbb;border:1.5px solid #e0e0e0;border-radius:9px;font-size:12px;font-weight:700;cursor:not-allowed;display:inline-flex;align-items:center;gap:4px}

/* ── Filter Mahasiswa ── */
.pm-filter-bar{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pm-filter-bar .fg{margin:0;min-width:160px;flex:1}
.pm-filter-bar label{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:block}
.pm-filter-bar input,.pm-filter-bar select{width:100%;padding:8px 11px;border:1.5px solid #dde8ec;border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:#f7fbfc;outline:none;transition:border-color .2s}
.pm-filter-bar input:focus,.pm-filter-bar select:focus{border-color:var(--teal);background:white}

/* ── Empty state ── */
.empty-state{background:white;border-radius:var(--radius);padding:64px 24px;text-align:center;box-shadow:var(--shadow)}
.empty-state .ei{font-size:52px;margin-bottom:12px}
.empty-state h3{font-size:17px;font-weight:800;margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--steel)}

/* ── Pagination ── */
.pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.page-btn{padding:7px 14px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-soft);background:white;border:1.5px solid #dde8ec;transition:all .15s}
.page-btn:hover{border-color:var(--teal);color:var(--teal)}
.page-btn.active{background:var(--teal);color:white;border-color:var(--teal)}

/* ── Flash ── */
.flash{border-radius:10px;padding:11px 16px;font-size:13px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.flash.ok{background:#f0faf4;border:1.5px solid #a8ddb5;color:var(--green)}
.flash.err{background:#fdf2f2;border:1.5px solid #f5c6c6;color:var(--red)}

/* ── Login gate ── */
.login-gate{background:#fff8e1;border:1.5px solid #ffe082;border-radius:10px;padding:12px 16px;font-size:13px;color:#795548;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.login-gate a{color:var(--teal);font-weight:700;text-decoration:none}
.login-gate a:hover{text-decoration:underline}

/* ── Modal ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(26,43,48,.55);z-index:200;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.modal-bg.open{display:flex}
.modal{background:white;border-radius:18px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.2)}
.modal-head{padding:20px 22px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:0;background:white;border-bottom:1px solid #f0f6f8;z-index:1}
.modal-title{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:3px}
.modal-institusi{font-size:13px;font-weight:700;color:var(--teal)}
.modal-close{width:34px;height:34px;border-radius:50%;background:#f0f6f8;border:none;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-soft);transition:background .2s}
.modal-close:hover{background:var(--alice)}
.modal-body{padding:20px 22px 24px}
.modal-cover{width:100%;border-radius:10px;overflow:hidden;margin-bottom:16px;background:var(--teal-light)}
.modal-cover img{width:100%;height:auto;max-height:480px;object-fit:contain;display:block;background:#f0f6f8}
.modal-cover-ph{height:90px;display:flex;align-items:center;justify-content:center;font-size:36px;opacity:.45}
.modal-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.detail-section{margin-bottom:16px}
.detail-section h4{font-size:11px;font-weight:800;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.detail-section p{font-size:13px;color:var(--ink);line-height:1.7}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.dg-item{background:#f7fbfc;border-radius:9px;padding:10px 13px}
.dg-lbl{font-size:10px;font-weight:800;color:var(--steel);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.dg-val{font-size:13px;font-weight:700;color:var(--ink)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid #f0f6f8}
.btn-apply{flex:1;padding:11px;background:var(--teal);color:white;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s;min-width:140px}
.btn-apply:hover{background:var(--teal-dark)}
.btn-report-modal{padding:11px 16px;background:#fdf2f2;color:var(--red);border:1.5px solid #f5c6c6;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.btn-report-modal:hover{background:var(--red);color:white;border-color:var(--red)}

/* ── Modal form (kirim lowongan & laporan) ── */
.mf-title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px}
.mf-sub{font-size:13px;color:var(--ink-soft);line-height:1.5}
.mfg{margin-bottom:13px}
.mfg label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.mfg label .req{color:var(--red)}
.mfg input,.mfg select,.mfg textarea{width:100%;padding:9px 12px;border:1.5px solid #dde8ec;border-radius:9px;font-family:inherit;font-size:13px;color:var(--ink);background:#f7fbfc;outline:none;transition:border-color .2s}
.mfg input:focus,.mfg select:focus,.mfg textarea:focus{border-color:var(--teal);background:white}
.mfg textarea{resize:vertical;min-height:80px}
.mfg .hint{font-size:11px;color:var(--steel);margin-top:4px}
.section-sep{height:1px;background:#f0f6f8;margin:16px 0}
.section-head{font-size:11px;font-weight:800;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.two-col-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.magang-fields{display:none}
.magang-fields.show{display:block}
.btn-submit-modal{width:100%;padding:11px;background:var(--teal);color:white;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;margin-top:4px}
.btn-submit-modal:hover{background:var(--teal-dark)}
.btn-cancel-modal{width:100%;padding:10px;background:#f0f6f8;color:var(--ink-soft);border:1.5px solid #dde8ec;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:6px}
.btn-cancel-modal:hover{border-color:var(--steel);color:var(--ink)}

/* ── Modal pengajuan magang ── */
.pm-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.pm-info-item{background:#f7fbfc;border-radius:9px;padding:10px 13px}
.pm-info-lbl{font-size:10px;font-weight:800;color:var(--steel);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.pm-info-val{font-size:13px;font-weight:700;color:var(--ink)}
.pm-chip-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pm-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;background:#e8f4f6;color:var(--teal)}

/* ── Responsive ── */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .sidebar-filter{position:static}
  .low-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero h1{font-size:22px}
  .detail-grid,.two-col-form,.pm-info-grid{grid-template-columns:1fr}
  .modal{max-height:95vh}
}

/* ============================================================
 * Form Kirim Lowongan Tamu — identik visual dengan hub form
 * ============================================================ */
.fk-section-title{font-size:13px;font-weight:800;color:var(--teal);margin:20px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--alice)}
.fk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.fk-group{display:flex;flex-direction:column;gap:5px}
.fk-group.fk-full{grid-column:1/-1}
.fk-group label{font-size:12px;font-weight:700;color:var(--ink)}
.fk-req{color:#e74c3c}
.fk-group input,.fk-group select,.fk-group textarea{padding:9px 12px;border:1.5px solid #d0e4ea;border-radius:9px;font-size:13px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .2s;background:#f7fbfc;width:100%}
.fk-group input:focus,.fk-group select:focus,.fk-group textarea:focus{border-color:var(--teal);background:white}
.fk-group textarea{resize:vertical;min-height:90px}
.fk-group small{font-size:11px;color:var(--ink-soft)}
.fk-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.fk-btn-submit{flex:1;padding:11px;background:var(--teal);color:white;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;min-width:140px}
.fk-btn-submit:hover{background:var(--teal-dark)}
.fk-btn-cancel{padding:11px 20px;background:#f0f6f8;color:var(--ink-soft);border:1.5px solid #dde8ec;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.fk-btn-cancel:hover{border-color:var(--steel);color:var(--ink)}
@media(max-width:600px){.fk-grid{grid-template-columns:1fr}.fk-group.fk-full{grid-column:1}}