/* Page layout; global typography, colors and themes live in design.css. */
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}.topbar{background:#003da0;color:white;padding:18px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 4px 18px #003da02b}.identity,.header-right,.form-row,.monitor-heading,.status-stack,.section-title{display:flex;align-items:center;gap:16px}.identity strong{display:block;font-size:1.2rem;letter-spacing:.12em}.identity small{display:block;font-size:.74rem;letter-spacing:.08em;opacity:.8}.mark{display:grid;place-items:center;width:44px;height:44px;border:2px solid #ffffffa0;border-radius:12px;font-size:1.8rem;font-weight:900;color:#72d69d}.header-right{font-variant-numeric:tabular-nums}#clock{font-size:1.35rem;font-weight:700}.status{display:inline-flex;align-items:center;border-radius:100px;padding:8px 13px;font-size:.82rem;font-weight:700;white-space:nowrap}.status-offline{background:#fce9e7;color:#a32e28}.topbar .status-offline{background:#ffffff26;color:white}.status-online{background:#ddf4e8;color:#156840}.status-muted{background:#e8edf2;color:#4d606c}.status-stale{background:#fff0d3;color:#815600}main{flex:1;width:min(1500px,100%);margin:auto;padding:clamp(18px,3vw,42px)}.panel{background:white;border:1px solid #dbe4e7;border-radius:20px;box-shadow:0 8px 28px #23485e0c}.hidden{display:none!important}.activation{width:min(580px,100%);margin:10vh auto;padding:clamp(28px,5vw,48px)}h1,h2,p{margin-top:0}.activation h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:12px}.eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.18em;font-weight:800;color:#1e9956;margin-bottom:12px}.muted{color:#637780;line-height:1.5}.activation form{margin-top:34px}.activation label{display:block;font-weight:700;margin-bottom:9px}.form-row{align-items:stretch}.form-row input{min-width:0;flex:1;border:1px solid #b7c8ce;border-radius:11px;padding:15px 16px;font:inherit}.form-row input:focus{outline:3px solid #86c5ff;border-color:#003da0}.form-row button{border:0;background:#1e9956;color:white;font:inherit;font-weight:800;border-radius:11px;padding:0 23px;cursor:pointer}.form-row button:hover{background:#147644}.form-row button:disabled{opacity:.6;cursor:wait}.error{min-height:1.3em;color:#b22d2d;margin:16px 0 0}.monitor-heading{justify-content:space-between;align-items:flex-end;margin:4px 0 24px}.monitor-heading h1{font-size:clamp(1.7rem,3vw,2.7rem);margin:0}.status-stack{align-items:flex-end;flex-direction:column;gap:7px}.event-panel{min-height:290px;display:flex;align-items:center;gap:clamp(25px,5vw,75px);padding:clamp(28px,4vw,58px);margin-bottom:24px;border-left:12px solid #1e9956}.event-panel.denied{border-color:#d9443e}.event-panel.unknown{border-color:#827554}.event-symbol{width:130px;height:130px;flex:none;border-radius:50%;display:grid;place-items:center;background:#ddf4e8;color:#16884b;font-size:5rem;font-weight:800}.denied .event-symbol{background:#fde7e5;color:#cb3934}.unknown .event-symbol{background:#f0ede6;color:#827554}.event-result{text-transform:uppercase;letter-spacing:.12em;font-size:.92rem;font-weight:800;color:#1e9956;margin-bottom:12px}.denied .event-result{color:#c53630}.event-copy h2{font-size:clamp(2rem,4.5vw,4.8rem);line-height:1.04;margin-bottom:12px}.event-message{font-size:clamp(1.1rem,2vw,1.6rem);color:#4a5c65}.amounts{display:flex;gap:clamp(16px,3vw,48px);flex-wrap:wrap;margin-top:30px}.amounts span{display:block;font-size:.8rem;color:#667880;margin-bottom:6px}.amounts strong{font-size:1.35rem;font-variant-numeric:tabular-nums}.waiting{text-align:center;padding:50px 24px 42px;margin-bottom:24px}.waiting h2{font-size:clamp(1.5rem,3vw,2.8rem);margin-bottom:8px}.scan-symbol{width:110px;height:110px;border:7px solid #1e9956;border-radius:28px;margin:0 auto 26px;display:grid;place-items:center;transform:rotate(-8deg)}.scan-symbol span{width:42px;height:42px;border:5px solid #003da0;border-radius:9px}.details-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:24px}.details{padding:26px;min-height:230px}.section-title{justify-content:space-between;align-items:baseline;margin-bottom:22px}.section-title h2{font-size:1.25rem;margin:0}.section-title span{font-size:.75rem;color:#827554;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}th,td{padding:11px 9px;border-bottom:1px solid #e5ecee}th{font-size:.77rem;color:#596d75;white-space:nowrap}td:not(:first-child),th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}tbody tr:last-child td{border:0}#recent-list{padding:0;margin:0;list-style:none}#recent-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e5ecee}#recent-list li:last-child{border:0}#recent-list strong{font-size:.9rem}#recent-list time{font-size:.8rem;color:#687b82;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:15px;padding:14px clamp(20px,4vw,64px);font-size:.75rem;color:#667880} @media(max-width:850px){.details-grid{grid-template-columns:1fr}.monitor-heading{align-items:flex-start;flex-direction:column}.status-stack{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.event-symbol{width:85px;height:85px;font-size:3.3rem}.event-panel{min-height:230px}}@media(max-width:550px){.topbar{align-items:flex-start}.header-right{align-items:flex-end;flex-direction:column;gap:5px}.event-panel{align-items:flex-start;flex-direction:column;gap:12px}.event-copy h2{font-size:2.2rem}.form-row{flex-direction:column}.form-row button{min-height:48px}.amounts{gap:16px}.details{padding:18px}}
.event-photo{width:130px;height:130px;flex:none;border-radius:18px;object-fit:cover;background:#e8edf2}.event-card{color:#596d75;font-size:.95rem;font-variant-numeric:tabular-nums;margin:8px 0 0}@media(max-width:850px){.event-photo{width:85px;height:85px}}
.identity{min-width:0}.brand-logo{display:block;width:270px;max-width:100%;height:auto}

.topbar{background:#eef3f5;color:#21323a;border-bottom:3px solid #003da0;box-shadow:0 4px 18px #003da019}.topbar .status-offline{background:#fce9e7;color:#a32e28}.topbar .brand-logo{max-width:min(100%,48vw)}@media(max-width:550px){.topbar{flex-direction:column;align-items:stretch}.header-right{align-items:center;flex-direction:row;justify-content:space-between}.topbar .brand-logo{max-width:min(100%,270px)}}

/* Canlı kiosk: olay ve bekleme aynı ekran alanını kullanır; sayfa kaydırma gerektirmez. */
body.kiosk-live{height:100dvh;min-height:0;overflow:hidden}
.kiosk-live .topbar{flex:none;padding-block:clamp(6px,1vh,18px)}
.kiosk-live .topbar .brand-logo{max-width:min(48vw,37vh)}
.kiosk-live main{display:flex;flex:1;min-height:0;margin:0 auto;padding:clamp(8px,1.4vh,24px) clamp(12px,2.5vw,42px)}
.kiosk-live .monitor{display:grid;flex:1;min-height:0;grid-template-rows:auto minmax(0,.55fr) minmax(0,.45fr);gap:clamp(8px,1.2vh,18px)}
.kiosk-live .monitor-heading{grid-row:1;min-width:0;margin:0}
.kiosk-live .monitor-heading h1{font-size:clamp(1.4rem,2.8vh,2.7rem)}
.kiosk-live .event-panel{grid-row:2/4;min-height:0;margin:0;align-self:stretch;justify-content:center}
.kiosk-live .waiting{grid-row:2;min-height:0;margin:0;padding:clamp(8px,1.6vh,28px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.kiosk-live .scan-symbol{width:clamp(56px,12vh,140px);height:clamp(56px,12vh,140px);border-width:5px;margin:0 auto clamp(6px,.9vh,18px)}
.kiosk-live .scan-symbol span{width:40%;height:40%;border-width:4px}
.kiosk-live .waiting .eyebrow{margin-bottom:clamp(3px,.7vh,11px)}
.kiosk-live .waiting h2{font-size:clamp(1.05rem,2.6vh,2.8rem);margin-bottom:clamp(3px,.7vh,8px)}
.kiosk-live .waiting .muted{margin:0;font-size:clamp(.75rem,1.6vh,1rem)}
.kiosk-live .details-grid{grid-row:3;min-height:0;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(8px,1.2vw,24px)}
.kiosk-live .details{min-height:0;padding:clamp(9px,1.5vh,26px);overflow:hidden}
.kiosk-live .section-title{margin-bottom:clamp(5px,.9vh,18px)}
.kiosk-live .section-title h2{font-size:clamp(.85rem,1.8vh,1.25rem)}
.kiosk-live .section-title span{font-size:clamp(.6rem,1.2vh,.75rem)}
.kiosk-live table{font-size:clamp(.68rem,1.5vh,.9rem)}
.kiosk-live th,.kiosk-live td{padding:clamp(2px,.55vh,9px) 4px}
.kiosk-live #recent-list li{padding:clamp(2px,.55vh,10px) 0}
.kiosk-live footer{flex:none;padding-block:clamp(6px,1vh,14px)}
@media(max-width:550px){.kiosk-live .topbar .brand-logo{max-width:min(100%,37vh)}.kiosk-live .monitor{grid-template-rows:auto minmax(0,.36fr) minmax(0,.64fr)}.kiosk-live .details-grid{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}.kiosk-live .waiting h2{font-size:clamp(.95rem,2.2vh,1.7rem)}}
@media(orientation:portrait) and (min-width:551px){.kiosk-live .monitor{grid-template-rows:auto minmax(0,.42fr) minmax(0,.58fr)}.kiosk-live .details-grid{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}.kiosk-live .scan-symbol{width:clamp(90px,14vh,180px);height:clamp(90px,14vh,180px)}.kiosk-live .waiting h2{font-size:clamp(1.5rem,3vh,2.6rem)}}

/* Sade kiosk görünümü: sabit çerçeve, tek satır başlık ve sessiz durum ikonları. */
.topbar{border-bottom:1px solid #dce6e9;box-shadow:none;background:#f8fafb}
.panel{border-color:#e0e8ea;border-radius:24px;box-shadow:0 12px 36px #16324408}
.kiosk-live .topbar{padding:clamp(8px,1.4vh,17px) clamp(14px,2.5vw,42px)}
.kiosk-live .topbar .brand-logo{max-width:min(42vw,34vh)}
.kiosk-live .header-right{gap:clamp(9px,1.2vw,18px)}
.kiosk-live #clock{font-size:clamp(.9rem,1.8vh,1.18rem);font-weight:600;letter-spacing:.02em;color:#52646d}
.signal-indicator{width:clamp(34px,4.5vh,44px);height:clamp(34px,4.5vh,44px);padding:0;display:inline-grid;place-items:center;flex:none;border:1px solid currentColor;border-radius:12px}
.signal-indicator svg{width:55%;height:55%;display:block}
.signal-indicator.status-online{color:#168356;background:#eaf6ef;border-color:#cce9d8}
.signal-indicator.status-offline{color:#b44640;background:#fff0ee;border-color:#f2d5d2}
.signal-indicator.status-muted{color:#60747d;background:#eef2f4;border-color:#dce5e8}
.signal-indicator.status-stale{color:#9b690e;background:#fff5df;border-color:#efdfb8}
.topbar .signal-indicator.status-offline{color:#b44640;background:#fff0ee;border-color:#f2d5d2}
.kiosk-live main{padding:clamp(10px,1.5vh,24px) clamp(12px,2.5vw,42px)}
.kiosk-live .monitor{gap:clamp(10px,1.35vh,18px)}
.kiosk-live .monitor-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:clamp(36px,5vh,52px)}
.kiosk-live .monitor-heading h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(1.35rem,3vh,2.7rem);font-weight:650;letter-spacing:-.035em;line-height:1.08}
.kiosk-live .status-stack{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:8px}
.kiosk-live footer{display:none}
.kiosk-live .waiting{display:flex;align-items:center;justify-content:center;text-align:left;padding:clamp(12px,2.3vh,34px) clamp(18px,3.4vw,54px)}
.waiting-inner{width:min(100%,760px);display:grid;grid-template-columns:minmax(90px,32%) minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,52px)}
.waiting-visual{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.waiting-visual svg{display:block;width:min(100%,200px);height:min(100%,176px);max-height:100%}
.waiting-copy{min-width:0}
.kiosk-live .waiting .eyebrow{margin:0 0 clamp(3px,.6vh,10px);font-size:clamp(.62rem,1.2vh,.78rem);letter-spacing:.13em}
.kiosk-live .waiting h2{max-width:20ch;margin:0 0 clamp(4px,.7vh,12px);font-size:clamp(1.18rem,3.1vh,2.8rem);font-weight:650;letter-spacing:-.045em;line-height:1.12}
.kiosk-live .waiting .muted{font-size:clamp(.78rem,1.6vh,1rem);line-height:1.35}
.kiosk-live .event-panel{gap:clamp(14px,4vw,62px);padding:clamp(18px,4vw,56px);border:1px solid #d9ebe0;background:linear-gradient(125deg,#f8fcfa 0%,#fff 55%)}
.kiosk-live .event-panel.denied{border-color:#f1d5d2;background:linear-gradient(125deg,#fff9f8 0%,#fff 55%)}
.kiosk-live .event-panel.unknown{border-color:#e9e3d8;background:linear-gradient(125deg,#fcfaf7 0%,#fff 55%)}
.kiosk-live .event-symbol{width:clamp(72px,17vh,150px);height:clamp(72px,17vh,150px);font-size:inherit;background:#e6f5ec;color:#138051}
.kiosk-live .event-photo{width:clamp(72px,17vh,150px);height:clamp(72px,17vh,150px);border-radius:22px}
.event-icon{display:none;width:58%;height:58%}
.event-symbol[data-result="approved"] .event-icon-approved,.event-symbol[data-result="denied"] .event-icon-denied,.event-symbol[data-result="unknown"] .event-icon-unknown{display:block}
.kiosk-live .event-copy{min-width:0}
.kiosk-live .event-copy h2{font-weight:650;letter-spacing:-.05em;overflow-wrap:anywhere}
.kiosk-live .event-result{letter-spacing:.13em}
.kiosk-live .details{overflow:hidden}
.kiosk-live .section-title{align-items:center}
.kiosk-live .section-title h2{font-weight:650;letter-spacing:-.025em}
.kiosk-live .section-title span{color:#86969c;letter-spacing:.08em}
@media(max-width:550px){
  .kiosk-live .topbar{flex-direction:row;align-items:center}
  .kiosk-live .header-right{flex-direction:row;align-items:center;justify-content:flex-end}
  .kiosk-live .topbar .brand-logo{max-width:min(43vw,30vh)}
  .kiosk-live .monitor-heading{flex-direction:row}
  .kiosk-live .monitor-heading h1{font-size:clamp(1.2rem,2.7vh,1.7rem)}
  .kiosk-live .signal-indicator{width:34px;height:34px;border-radius:10px}
  .kiosk-live .waiting{padding:12px 16px}
  .waiting-inner{grid-template-columns:minmax(75px,32%) minmax(0,1fr);gap:12px}
  .kiosk-live .waiting h2{font-size:clamp(1.05rem,2.5vh,1.55rem)}
  .kiosk-live .event-panel{flex-direction:row;align-items:center}
  .kiosk-live .event-copy h2{font-size:clamp(1.5rem,4vh,2.2rem)}
}
@media(max-height:500px){
  .kiosk-live .waiting{padding-block:8px}
  .kiosk-live .waiting .eyebrow{display:none}
  .kiosk-live .event-symbol,.kiosk-live .event-photo{width:70px;height:70px}
}
.activation-navigation { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; font-size: 14px; }
.activation-navigation a { color: #244777; text-decoration: none; }
#activation .form-row { flex-wrap: wrap; }
#activation .form-row input { min-width: 150px; }