/* LOGIN STYLES */
.whp-login-bg { background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center;}
.whp-login-box { background: #fff; box-shadow: 0 8px 32px #1976d265; border-radius: 18px; padding: 38px 30px; width: 95%; max-width: 370px; display: flex; flex-direction: column; align-items: center;}
.whp-login-title { font-size: 2em; font-weight: 700; color: #1976d2; margin-bottom: 8px; text-align: center;}
.whp-login-desc { color: #1976d2bb; font-size: 1.07em; margin-bottom: 24px; text-align: center;}
.whp-login-input { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid #1976d2; font-size: 1.04em; margin-bottom: 16px; outline: none; transition: border .2s;}
.whp-login-input:focus { border-color: #42a5f5; }
.whp-login-btn { width: 100%; padding: 14px; background: #1976d2; color: #fff; font-size: 1.13em; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 5px #1976d233; transition: background .2s;}
.whp-login-btn:hover { background: #125ea8; }
.whp-login-error { color: #b71c1c; background: #ffd6d6; border-radius: 6px; padding: 8px 0; margin-bottom: 14px; width: 100%; text-align: center; font-size: 1.01em;}
@media (max-width: 600px) { .whp-login-box { padding: 24px 7vw; } }

/* DASHBOARD STYLES */
.whp-dash-wrap { max-width: 900px; margin: 36px auto 24px auto; }
.whp-barcode-box { background: #fffbe7; border:1.5px solid #ffe082; border-radius:13px; box-shadow:0 1px 8px #ffe08244; margin-bottom:22px; padding:16px 12px 17px 12px; }
.whp-barcode-title { color: #1976d2; font-size:1.14em; font-weight:600; margin-bottom:9px; }
.whp-barcode-btn { display:inline-flex; align-items:center; background: #1976d2; color: #fff; font-weight: 600; border: none; border-radius: 7px; font-size: 1.11em; padding: 11px 23px; margin:0 0 8px 0; gap:7px; cursor:pointer; box-shadow:0 1px 7px #1976d233; }
.whp-barcode-btn svg { width:1.3em; height:1.3em; fill:#fff;}
.whp-barcode-cam { width:100%; max-width:370px; margin:13px auto 0 auto; display:none; border-radius:11px; overflow:hidden; background:#f4f8fc;}
.whp-barcode-manual-form { margin-top:12px; }
.whp-barcode-manual-form input { font-size:1.17em; border-radius:5px; border:1px solid #1976d2; padding:7px 12px; text-align:center; width:130px;}
.whp-barcode-manual-form button { margin-left:9px; background:#1976d2; color:#fff; border:none; border-radius:5px; font-size:1em; padding:7px 17px; font-weight:600;}
.whp-barcode-sonuc { text-align:center; font-size:1.13em; color:#388e3c; margin-top:11px;}
.whp-dash-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;}
.whp-dash-title { font-size: 1.5em; font-weight: 700; color: #1976d2;}
.whp-dash-right { display:flex; flex-direction: column; gap:7px; align-items: flex-end;}
.whp-dash-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.whp-dash-filter select, .whp-dash-filter a { padding: 7px 17px; border-radius: 8px; border: 1.2px solid #42a5f5; font-size: 1em; background: #f8fbff; color: #1976d2; margin: 0; text-decoration: none; font-weight: 500;}
.whp-dash-filter a.active, .whp-dash-filter a:hover { background: #1976d2; color: #fff; border-color: #1976d2; }
.whp-searchbox { padding: 7px 15px; border-radius: 8px; border: 1.2px solid #b7d5f7; font-size: 1em; width: 240px;}
.whp-order-list { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit,minmax(288px,1fr)); }
.whp-order-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 14px #1976d23d; padding: 15px 15px 9px 15px; cursor: pointer; transition: box-shadow .18s, transform .18s; border: 1px solid #e3eaf3; display: flex; flex-direction: column; min-height: 85px; position:relative;}
.whp-order-card:hover { box-shadow: 0 5px 22px #1976d269; transform: translateY(-2px) scale(1.013);}
.whp-order-id { font-weight: 700; color: #1976d2; font-size: 1.09em;}
.whp-order-customer { color: #333; font-size: 1.05em; margin: 2px 0 4px 0;}
.whp-order-date { color: #999; font-size: .98em;}
.whp-order-status { position: absolute; top: 11px; right: 17px; background: #e3f0fe; color: #0d47a1; border-radius: 12px; padding: 3px 13px; font-size: .96em; font-weight: 500;}
.whp-photo-label { margin-top: 7px; font-size: 0.95em;}
.whp-photo-ok { color: #388e3c;}
.whp-photo-no { color: #b71c1c;}
.whp-pagination { margin: 27px 0 0 0; display: flex; justify-content: center; align-items: center; gap:6px; flex-wrap:wrap;}
.whp-pagination a, .whp-pagination span { padding: 6px 14px; border-radius: 6px; border: 1px solid #1976d2; background: #fff; color: #1976d2; font-weight: 500; text-decoration: none; transition: background .17s, color .17s;}
.whp-pagination .current, .whp-pagination a.active { background: #1976d2; color: #fff;}
.whp-logout-btn { margin: 35px auto 0 auto; display: block; background: #b71c1c; color: #fff; border: none; border-radius: 7px; padding: 12px 32px; font-size: 1.07em; font-weight: 600; text-align: center; box-shadow: 0 1px 7px #b71c1c22; letter-spacing: 1px; transition: background .17s;}
.whp-logout-btn:hover { background: #7a1010; }
@media (max-width: 700px) {
  .whp-dash-head { flex-direction: column; align-items: flex-start; gap: 10px;}
  .whp-order-list { grid-template-columns: 1fr; }
  .whp-dash-right { align-items:stretch;}
  .whp-searchbox { width:100%;}
  .whp-barcode-cam { max-width:100vw;}
}

/* DETAIL STYLES (shortened for brevity; copy from previous messages or your original) */
/* ... */
/* ORDER DETAIL PAGE STYLES */
.whp-detail-wrap { max-width:430px; margin:34px auto 22px auto; background:#fff; border-radius:14px; box-shadow:0 2px 13px #1976d238; padding:22px 13px 17px 13px;}
.whp-detail-back {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 18px;
    display: inline-block;
    background: #1976d2;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}
.whp-detail-back:hover { background: #1565c0; }
.whp-detail-title { text-align:center; font-size:1.37em; font-weight:700; color:#1976d2; margin-bottom:10px;}
.whp-detail-row { margin-bottom: 11px;}
.whp-detail-row label { font-weight: 600; color: #1976d2;}
.whp-detail-status { background:#e3f0fe; color:#1976d2; border-radius:9px; padding:3px 11px; font-size:.95em; margin-left:6px;}
.whp-products-list { margin-left:12px; margin-top:3px;}
.whp-detail-form input[type="text"] { width: 100%; max-width: 320px; padding: 9px 10px; border-radius: 6px; border: 1px solid #aaa; margin-top: 4px; font-size:1em;}
.whp-detail-form button { background: #1976d2; color: #fff; border: none; border-radius: 6px; padding: 9px 19px; font-size: 1em; font-weight: 600; margin-top: 9px; letter-spacing: 1px; cursor: pointer; transition: background .17s;}
.whp-detail-form button:hover { background: #125ea8;}
.whp-photo-upload-btn { width: 100%; background: #1976d2; color: #fff; border: none; border-radius: 6px; padding: 11px; font-size: 1.03em; font-weight: 600; margin-top: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;}
.whp-photo-upload-btn svg { width: 1.13em; height: 1.13em; fill: #fff; }
.whp-photo-preview { margin-top: 10px; }
.whp-photo-preview img { max-width: 100px; border-radius: 6px; box-shadow: 0 1px 6px #1976d233; margin:2px;}
.whp-detail-meta { background: #f4f8fc; border-radius: 6px; padding: 8px 10px; margin-top: 13px; color: #1976d2; font-size: 1em;}
.whp-detail-success { color: #388e3c; margin-bottom: 8px;}
.whp-detail-error { color: #b71c1c; margin-bottom: 8px;}
.whp-mail-success { color: #388e3c; margin-bottom: 8px;}
.whp-mail-error { color: #b71c1c; margin-bottom: 8px;}
.whp-note-block { background:#fffde7; border:1px solid #ffe082; border-radius:7px; margin-top:20px; padding:12px 13px 10px 13px; color:#997900;}
.whp-wa-mail-btns { display: flex; flex-wrap:wrap; align-items: center; gap:13px; margin: 22px 0 0 0; justify-content: center; }
.whp-wa-btn, .whp-mail-btn { display: inline-flex; align-items: center; gap: 7px; background: #25D366; color: #fff; font-weight: 600; padding: 11px 22px; border: none; border-radius: 7px; font-size: 1.1em; box-shadow: 0 1px 8px #2cc76ad3; cursor: pointer; transition: background .18s; text-decoration: none;}
.whp-wa-btn:hover { background: #1fab55; color: #fff;}
.whp-mail-btn { background: #1976d2; box-shadow: 0 1px 8px #1976d2ad;}
.whp-mail-btn:hover { background: #125ea8; color: #fff;}
.whp-wa-btn svg, .whp-mail-btn svg { width: 1.33em; height: 1.33em; fill: #fff;}
.whp-loading-txt { margin: 13px 0 0 0; color: #1976d2; font-size:1.13em; text-align:center; display:none;}
@media (max-width: 520px) { 
  .whp-detail-wrap { padding: 6vw 3vw; } 
  .whp-wa-mail-btns { flex-direction:column; gap:11px; } 
}