/* The Private Office — makam kartları, şube seçimi ve kullanıcı girişi.
   office.css üzerine eklenir; renkler, yazı tipleri ve hareket eğrisi oradaki değişkenlerden gelir. */

/* ---------- sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda; diğerlerinde giriş animasyonu yeterlidir) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hlpoSeatOut .16s ease both}
::view-transition-new(root){animation:hlpoSeatIn .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes hlpoSeatOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes hlpoSeatIn{from{opacity:0;transform:translateY(12px)}}
@keyframes hlpoSeatNudge{0%{opacity:0;transform:translateX(-7px)}55%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}

/* ---------- makam kartları (oturum açılmadan önce) */
.hlpo-seats{padding-top:clamp(24px,5vh,52px)}
.hlpo-seat-emblem{margin-bottom:18px;border-color:var(--gold2);color:var(--gold2);background:rgba(0,0,0,.18);box-shadow:0 0 0 4px rgba(212,178,122,.1),0 0 30px rgba(212,178,122,.14)}
.hlpo-seats .hlpo-seat-msg{max-width:560px;margin:0 auto 24px!important;animation:hlpoIn .3s var(--ease) both}
.hlpo-seat-card{text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hlpo a.hlpo-card-principal{color:var(--beige)}
.hlpo a.hlpo-card-officer{color:var(--ink2)}
.hlpo-seat-card:focus-visible{outline-offset:5px;transform:translateY(-4px)}
.hlpo-seat-card:active{transform:translateY(-1px) scale(.995);transition-duration:.12s}
.hlpo-seat-card:hover .hlpo-btn::after,.hlpo-seat-card:focus-visible .hlpo-btn::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.hlpo-seat-card:hover .hlpo-btn-gold,.hlpo-seat-card:focus-visible .hlpo-btn-gold{box-shadow:inset 0 1px 0 rgba(255,246,222,.7),0 10px 24px rgba(0,0,0,.3)}
.hlpo-seat-card:hover .hlpo-btn-bronze,.hlpo-seat-card:focus-visible .hlpo-btn-bronze{background:var(--e5);border-color:var(--e5);color:var(--cream)!important}
.hlpo-seat-card:hover .hlpo-card-ico,.hlpo-seat-card:focus-visible .hlpo-card-ico{transform:translateY(-2px)}
.hlpo-seat-card .hlpo-card-ico{transition:transform .35s var(--ease)}

/* alt gezinme: Private Access · geri dön · ilk kurulum */
.hlpo-seat-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 30px;margin-top:24px!important;font-family:var(--d);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;animation:hlpoFade .5s ease .12s both}
.hlpo-seat-nav a{padding:8px 2px;border-bottom:1px solid transparent;color:var(--gold2)!important;text-decoration:none;transition:border-color .2s,color .2s}
.hlpo-seat-nav a:hover{border-bottom-color:var(--gold2);color:var(--gold3)!important}
.hlpo-seat-nav a.hlpo-seat-back{display:inline-flex;align-items:baseline;justify-content:center;gap:10px;min-height:46px;padding:12px 26px;border:1px solid rgba(212,178,122,.55);color:var(--beige)!important;font-weight:600;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.hlpo-seat-nav a.hlpo-seat-back:hover,.hlpo-seat-nav a.hlpo-seat-back:focus-visible{background:var(--gold2);border-color:var(--gold2);color:var(--e8)!important}
.hlpo-seat-nav small{font-family:var(--s);font-style:italic;font-size:15.5px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.85}

/* ---------- şube kartları */
.hlpo-brs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:980px;margin:0 auto}
.hlpo-br{position:relative;display:flex;overflow:hidden;text-align:center;text-decoration:none!important;cursor:pointer;background:linear-gradient(180deg,#f8f1e2 0%,#efe4ce 100%);border:1px solid var(--bronze);color:var(--ink2)!important;box-shadow:0 20px 46px rgba(0,0,0,.4);animation:hlpoIn .42s var(--ease) both;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.hlpo-br:nth-child(2){animation-delay:.06s}
.hlpo-br:nth-child(3){animation-delay:.12s}
.hlpo-br::before{content:"";position:absolute;inset:7px;border:1px solid rgba(184,146,90,.5);pointer-events:none;transition:border-color .3s var(--ease)}
.hlpo-br::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,244,214,.55) 50%,transparent 58%);transform:translateX(-110%);pointer-events:none}
.hlpo-br:hover,.hlpo-br:focus-visible{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(212,178,122,.16)}
.hlpo-br:hover::before,.hlpo-br:focus-visible::before{border-color:rgba(184,146,90,.9)}
.hlpo-br:hover::after,.hlpo-br:focus-visible::after{transform:translateX(110%);transition:transform .8s var(--ease)}
.hlpo-br:focus-visible{outline-offset:5px}
.hlpo-br:active{transform:translateY(-1px) scale(.99);transition-duration:.12s}
.hlpo-br-in{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:36px 22px 30px}
.hlpo-br-no{font-family:var(--d);font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--bronze)}
.hlpo-br-no span{display:inline-block;padding:5px 14px;border-top:1px solid rgba(140,106,69,.55);border-bottom:1px solid rgba(140,106,69,.55)}
.hlpo-br-ico{display:flex;flex:none;align-items:center;justify-content:center;width:86px;height:86px;margin:20px 0 16px;padding:18px;border:1px solid var(--bronze2);border-radius:50%;color:var(--bronze);background:rgba(255,255,255,.45);box-shadow:0 0 0 5px rgba(184,146,90,.12);transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.hlpo-br:hover .hlpo-br-ico,.hlpo-br:focus-visible .hlpo-br-ico{color:var(--goldd);border-color:var(--gold);box-shadow:0 0 0 5px rgba(184,146,90,.2),0 0 26px rgba(184,146,90,.3);transform:translateY(-2px)}
.hlpo-br-t{font-family:var(--d);font-weight:600;font-size:clamp(16px,1.9vw,20px);line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--e5);overflow-wrap:anywhere}
.hlpo-br-t small{display:block;margin-bottom:6px;font-size:10px;font-weight:500;letter-spacing:.3em;color:var(--muted)}
.hlpo-br .hlpo-rule{margin:14px 0 18px;color:var(--bronze2)}
.hlpo-br-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding:11px 20px;border:1px solid var(--bronze);color:var(--e5);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.hlpo-br-go b{font-family:var(--d);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.hlpo-br-go i{flex:none;width:18px;height:18px;transition:transform .25s var(--ease)}
.hlpo-br:hover .hlpo-br-go,.hlpo-br:focus-visible .hlpo-br-go{background:var(--e5);border-color:var(--e5);color:var(--cream)}
.hlpo-br:hover .hlpo-br-go i,.hlpo-br:focus-visible .hlpo-br-go i{transform:translateX(4px)}

/* ---------- kullanıcı girişi */
.hlpo-seat-gate .hlpo-plaque .hlpo-rule{margin-bottom:20px}
.hlpo-seat-gate .hlpo-msg{animation:hlpoIn .3s var(--ease) both}
.hlpo-seat-gate .hlpo-msg.is-bad{animation:hlpoSeatNudge .38s var(--ease) both}
.hlpo-field>span.hlpo-pw{position:relative;display:block;margin:0;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.hlpo-pw input{padding-right:56px}
.hlpo-pw-t{position:absolute;top:1px;right:1px;bottom:1px;display:flex;align-items:center;justify-content:center;width:48px;padding:0;border:0;border-left:1px solid var(--line2);border-radius:0;background:transparent;color:var(--goldd)!important;cursor:pointer;-webkit-appearance:none;appearance:none;transition:color .2s,background .2s}
.hlpo-pw-t:hover{background:rgba(184,146,90,.12);color:var(--e5)!important}
.hlpo-pw-t:focus-visible{outline-offset:-3px}
.hlpo-pw-t span{display:block;width:24px;height:24px}
.hlpo-pw-t svg{stroke-width:2}
.hlpo-pw-t .hlpo-pw-off,.hlpo-pw.is-shown .hlpo-pw-on{display:none}
.hlpo-pw.is-shown .hlpo-pw-off{display:block}
.hlpo-field-fixed input[readonly]{background:rgba(255,255,255,.5);border-style:dashed;color:var(--ink2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.02em;cursor:default}
.hlpo-field-fixed input[readonly]:focus{border-color:rgba(184,146,90,.7);box-shadow:none}
.hlpo-seat-backbtn{min-height:46px;margin-top:12px}
.hlpo-seat-backbtn b{font-size:11px}
.hlpo-seat-links{justify-content:center}

/* ---------- ilk kurulum */
.hlpo-setup{align-items:flex-start}
.hlpo-setup .hlpo-plaque{max-width:560px}
.hlpo-set{display:grid;gap:12px;min-width:0;margin:0;padding:14px 16px 18px;border:1px solid var(--line);background:rgba(255,255,255,.42)}
.hlpo-set.is-done{background:rgba(255,255,255,.2)}
.hlpo-set legend{padding:0 10px;font-family:var(--d);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--e5)}
.hlpo-set-user{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.hlpo-set-user small{font-family:var(--d);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hlpo-set-user b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;color:var(--e5);overflow-wrap:anywhere}
.hlpo-set-state{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.45;color:var(--ok)}
.hlpo-set-state i{flex:none;width:18px;height:18px}
.hlpo-set-state.is-warn{color:var(--warn)}
.hlpo-set-note,.hlpo-set-rule{font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------- duyarlı düzen */
@media (max-width:820px){
.hlpo-brs{grid-template-columns:1fr;gap:14px;max-width:520px}
.hlpo-br-in{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"ico no go" "ico t go";column-gap:16px;row-gap:5px;align-items:center;padding:22px 22px;text-align:left}
.hlpo-br-ico{grid-area:ico;width:64px;height:64px;margin:0;padding:13px}
.hlpo-br-no{grid-area:no;align-self:end;font-size:9.5px;letter-spacing:.3em}
.hlpo-br-no span{padding:0;border:0}
.hlpo-br-t{grid-area:t;align-self:start;font-size:16px;letter-spacing:.14em}
.hlpo-br-t small{margin-bottom:3px;font-size:9.5px;letter-spacing:.22em}
.hlpo-br .hlpo-rule{display:none}
.hlpo-br-go{grid-area:go;margin:0;padding:11px}
.hlpo-br-go b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hlpo-br:hover,.hlpo-br:focus-visible{transform:translateY(-2px)}
}
@media (max-width:640px){
.hlpo-seat-nav{gap:8px 22px}
.hlpo-seat-nav a.hlpo-seat-back{width:100%;max-width:520px}
.hlpo-set{padding:12px 12px 16px}
}
@media (max-width:380px){
.hlpo-br-in{grid-template-columns:52px minmax(0,1fr) auto;column-gap:12px;padding:18px 16px}
.hlpo-br-ico{width:52px;height:52px;padding:10px}
.hlpo-br-t{font-size:14.5px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* kayıtlı kullanıcılar ve "Beni hatırla" (12.10.2026) — seats.js oluşturur */
.hlpo-saved{margin:0 0 16px}
.hlpo-saved[hidden],.hlpo-remember[hidden]{display:none}
.hlpo-saved-h{display:block;margin:0 0 8px;font-family:var(--d);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hlpo-saved-l{display:flex;flex-wrap:wrap;gap:8px}
.hlpo-saved-c{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:rgba(255,255,255,.55);transition:border-color .2s,background .2s}
.hlpo-saved-c.is-on{border-color:var(--gold);background:rgba(212,178,122,.2);box-shadow:inset 0 0 0 1px rgba(184,146,90,.35)}
.hlpo-saved-u{border:0;background:none;padding:9px 12px;font-family:var(--u);font-size:14px;font-weight:500;color:var(--e5);cursor:pointer;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlpo-saved-u:hover{background:rgba(184,146,90,.1)}
.hlpo-saved-x{border:0;border-left:1px solid var(--line2);background:none;width:34px;padding:0;font-size:17px;line-height:1;color:var(--muted);cursor:pointer}
.hlpo-saved-x:hover{color:var(--bad);background:var(--badbg)}
.hlpo-saved-n{border:1px dashed var(--line);background:none;padding:9px 12px;font-family:var(--u);font-size:13px;color:var(--muted);cursor:pointer}
.hlpo-saved-n:hover{color:var(--e5);border-color:var(--gold)}
.hlpo-remember{display:flex;align-items:flex-start;gap:10px;margin:-4px 0 18px;cursor:pointer;font-family:var(--u);font-size:14px;line-height:1.35;color:var(--ink2);animation:hlpoIn .25s var(--ease) both}
.hlpo-remember input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--e5);cursor:pointer}
.hlpo-remember small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}