/* Hami Hozur UI refresh — simpler navigation, readable type, accessible controls. */
:root {
  --bg: #f5f7fb;
  --c: #ffffff;
  --card: #ffffff;
  --t: #1b2735;
  --text: #1b2735;
  --m: #536273;
  --muted: #536273;
  --p: #155eaa;
  --p2: #2d7dc2;
  --brand: #155eaa;
  --b: #dbe3ec;
  --border: #dbe3ec;
  --g: #18794e;
  --o: #a15c00;
  --r: #b42318;
  color-scheme: light;
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--bg); color: var(--t); line-height: 1.8; font-size: 15px; }
body::before { display: none !important; }
button, input, select, textarea { font: inherit; }
button, .btn, .button {
  min-height: 44px; border-radius: 10px; padding: 10px 16px; font-size: 15px;
  font-weight: 700; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease;
}
button, .btn { background: var(--p); color: #fff; border: 1px solid var(--p); text-decoration: none; }
button:hover, .btn:hover, .button:hover { transform: none !important; filter: brightness(.97); }
button.s, button.d { box-shadow: none !important; }
button.s { background: #fff; color: var(--t); border: 1px solid #cbd5e1; }
button.d { background: var(--r); border-color: var(--r); }
button:disabled { cursor: not-allowed; opacity: .65; }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #f0b429; outline-offset: 2px;
}
input, select, textarea { min-height: 44px; border: 1px solid #cbd5e1; background: #fff; color: var(--t); border-radius: 10px; }
label { color: #3f4d5d; line-height: 1.6; }
header.top { background: #fff; border-bottom: 1px solid var(--b); backdrop-filter: none; -webkit-backdrop-filter: none; }
header.top .w { min-height: 66px; gap: 16px; }
.logo, .brand { color: var(--p); text-decoration: none; white-space: nowrap; }
.logo img { object-fit: contain; }
#nav { min-width: 0; }
.nav-public { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.nav-links, .nav-actions, .nav-session { display:flex; align-items:center; gap:8px; }
.nav-links a, .site-nav a { color:#354254; text-decoration:none; font-weight:600; font-size:14px; padding:8px 7px; border-radius:8px; }
.nav-links a:hover, .site-nav a:hover { color:var(--p); background:#f0f5fa; }
.nav-actions .nav-button, .nav-session .nav-button { min-width:68px; min-height:40px; padding:7px 13px; font-size:14px; }
.nav-session { flex-wrap:wrap; justify-content:flex-end; }
.role-pill { color:#344054; background:#f2f4f7; border:1px solid var(--b); border-radius:99px; padding:5px 11px; font-size:13px; white-space:nowrap; }
.nav-logout { background:#fff; border:1px solid #cbd5e1; color:#344054; }
.mobile-nav { display:none; position:relative; margin:0; padding:0; border:0; background:transparent; }
.mobile-nav summary { list-style:none; border:1px solid #cbd5e1; border-radius:10px; padding:8px 12px; min-height:40px; background:#fff; color:var(--t); }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav-panel { position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:min(260px, 85vw); padding:8px; border:1px solid var(--b); border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.13); z-index:20; display:grid; gap:4px; }
.mobile-nav-panel a { display:block; color:var(--t); text-decoration:none; padding:10px 12px; border-radius:8px; }
.mobile-nav-panel a:hover { background:#f0f5fa; }
.hero { padding: 44px 0 26px; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); gap:24px; }
.hero h1 { font-size:clamp(28px,4.3vw,43px); line-height:1.45; letter-spacing:0; margin:8px 0 12px; }
.hero p { color:var(--m); font-size:16px; line-height:1.9; }
.hero h1 span { color:var(--p); background:none; -webkit-text-fill-color:currentColor; }
.hero .bg, .bg { background:#eaf2fb; color:#124e87; font-size:13px; padding:4px 12px; }
.bt { gap:8px; align-items:center; }
.big { font-size:16px; padding:10px 18px; min-height:46px; }
button.pulse, .pulse { animation:none !important; }
.preview-panel { max-width:390px; width:100%; margin:auto; background:#fff; border:1px solid var(--b); border-radius:16px; padding:20px; box-shadow:0 5px 18px rgba(16,24,40,.05); }
.preview-head, .preview-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.preview-head { font-weight:700; padding-bottom:12px; border-bottom:1px solid #edf0f4; }
.preview-label { background:#f2f4f7; color:#536273; border-radius:99px; padding:2px 9px; font-size:12px; }
.preview-time { font-weight:800; font-size:42px; line-height:1.5; color:var(--p); text-align:center; margin-top:10px; }
.preview-panel > .mut { text-align:center; margin:0 0 14px; }
.preview-row { border-top:1px solid #edf0f4; padding:11px 0; font-size:14px; }
.preview-row strong { color:#18794e; font-weight:700; }
.preview-foot { border-top:1px solid #edf0f4; padding-top:10px; color:var(--m); font-size:12px; margin:0; }
.strip { background:#fff; color:var(--t); border:1px solid var(--b); border-radius:14px; padding:14px; box-shadow:none; }
.strip b { color:var(--p); font-size:21px; }
.strip span { color:var(--m); opacity:1; }
.simple-strip { margin:8px 0 16px; }
section.sec { padding:30px 0; }
section.sec > h2, .sec h2 { color:var(--t); text-align:center; font-size:clamp(23px,3vw,31px); line-height:1.55; margin:0 0 8px; }
.eb { margin-bottom:3px; }
.sub { color:var(--m); line-height:1.85; margin:0 auto 20px; }
.grid { gap:12px; }
.card, .tile, .panel { background:#fff; border:1px solid var(--b); border-radius:13px; box-shadow:none; padding:17px; }
.card h3, .tile h3 { font-size:16px; line-height:1.6; color:var(--t); }
.card p, .tile p { font-size:14px; line-height:1.8; color:var(--m); }
.feature-grid { grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); }
.feature-symbol { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#edf4fb; font-size:21px; margin-bottom:8px; }
.extra-features, .faq-list details, .guide-section > details, .footer-guides { margin-top:12px; background:#fff; border:1px solid var(--b); border-radius:12px; padding:13px 16px; }
.extra-features summary, .faq-list summary, .guide-summary, .footer-guides summary { min-height:32px; display:flex; align-items:center; color:#253346; font-weight:700; }
.extra-features[open] > summary, .footer-guides[open] > summary { margin-bottom:12px; }
.extra-features .grid { padding-top:4px; }
.faq-list { max-width:760px; margin:0 auto; }
.faq-list details p { margin-top:8px; color:var(--m); }
.guide-content { padding-top:14px; }
.guide-card { display:block; text-decoration:none; color:inherit; }
.guide-card:hover { border-color:#9bb8d7; }
.trust-note { max-width:820px; margin:0 auto; padding:18px 20px; background:#fff; border:1px solid var(--b); border-radius:13px; }
.trust-note h2 { margin-top:0 !important; }
.trust-note p { color:var(--m); }
.cta { background:#164e83; border-radius:14px; text-align:center; padding:28px 18px; margin:22px 0; }
.cta h2 { color:#fff !important; font-size:clamp(23px,3vw,30px); }
.cta p { color:#eef5fd; }
.cta .bt { justify-content:center; }
.cta button { background:#fff; color:#124e87; border-color:#fff; }
.cta button.s { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.inst { background:#fff; grid-template-columns:1fr 1fr; box-shadow:none; }
.phone, .mock { display:none !important; }
.chips span { background:#fff; color:#425466; border:1px solid var(--b); }
footer.ft { display:block; margin-top:26px; padding:22px 0 26px; }
.footer-primary { display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; padding-bottom:8px; }
.ft a { margin:0; color:var(--m); padding:5px 2px; }
.footer-guides { max-width:820px; margin:10px auto; text-align:right; }
.footer-guides nav { display:flex; flex-wrap:wrap; gap:7px 14px; padding-top:8px; }
.copyright { text-align:center; color:var(--m); font-size:13px; padding-top:12px; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px 8px; font-size:14px; }
.site-nav .button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:var(--p); color:#fff; border-radius:10px; padding:8px 13px; }
header:not(.top) { background:#fff; border-bottom:1px solid var(--b); backdrop-filter:none; }
header:not(.top) .wrap, header:not(.top) .w { min-height:64px; }
.stat { gap:10px; }
.stat .card { min-width:0; }
.tabs { gap:7px; padding:12px 0; scrollbar-width:thin; }
.tabs button { min-height:44px; padding:8px 13px; border-radius:9px; box-shadow:none; }
.card.tw, .tw { max-width:100%; overflow-x:auto; }
table { background:#fff; }
th, td { padding:10px 12px; }
.msg { max-width:min(92vw,520px); line-height:1.65; }
.lg img { object-fit:contain; }
.auth-note { background:#f8fafc; }
.big, .btn, .button { text-align:center; }
@media (max-width: 850px) {
  .hero { grid-template-columns:1fr; padding:34px 0 22px; }
  .preview-panel { max-width:540px; }
  .inst { grid-template-columns:1fr; }
  .nav-public { gap:8px; }
  .nav-links { display:none; }
  .mobile-nav { display:block; }
  .nav-actions { gap:6px; }
  .nav-actions .nav-button { min-width:56px; padding:7px 10px; }
  header.top .w { min-height:62px; }
}
@media (max-width: 520px) {
  .w { padding-inline:14px; }
  .hero { text-align:right; }
  .hero .bt { justify-content:flex-start; }
  .hero .bt > * { flex:1 1 100%; }
  .chips { justify-content:flex-start; }
  .strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-grid, .uc, .steps { grid-template-columns:1fr; }
  .nav-session { gap:5px; }
  .role-pill { display:none; }
  .nav-session .nav-button { min-width:48px; padding-inline:8px; font-size:13px; }
  header.top .w { gap:8px; }
  .logo { font-size:17px; }
  .logo img { width:25px; height:34px; }
  .mobile-nav-panel { position:fixed; inset-inline:14px; top:68px; width:auto; }
  .big { width:auto; }
  .box { margin:20px auto; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10151d; --c:#171e28; --card:#171e28; --t:#edf2f7; --text:#edf2f7; --m:#b0bdcb; --muted:#b0bdcb; --p:#69b7ff; --p2:#8cc8ff; --brand:#69b7ff; --b:#303b49; --border:#303b49; color-scheme:dark; }
  body, header.top, header:not(.top), .mobile-nav summary, .mobile-nav-panel, .role-pill, .preview-panel, .card, .tile, .panel, .strip, .extra-features, .faq-list details, .guide-section > details, .footer-guides, .trust-note, .inst, input, select, textarea, table { background:#171e28; color:var(--t); }
  button.s, .nav-logout { background:#171e28; color:var(--t); border-color:var(--b); }
  .nav-links a, .site-nav a, .mobile-nav-panel a { color:#d8e4f0; }
  .nav-links a:hover, .site-nav a:hover, .mobile-nav-panel a:hover { background:#202b39; }
  .preview-row, .preview-head, .preview-foot { border-color:#303b49; }
  .preview-label, .auth-note { background:#202b39; color:#d8e4f0; }
  .extra-features summary, .faq-list summary, .guide-summary, .footer-guides summary, .card h3, .tile h3 { color:var(--t); }
  .feature-symbol { background:#20354a; }
  .cta { background:#103e68; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.01ms !important; }
}

.site-nav-links, .site-nav-actions { display:flex; align-items:center; gap:6px; }
.site-login { color:var(--t) !important; text-decoration:none; border:1px solid var(--b); border-radius:10px; padding:8px 13px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.site-mobile-nav { display:none; position:relative; margin:0; border:0; padding:0; background:transparent; }
.site-mobile-nav > summary { list-style:none; border:1px solid var(--b); border-radius:10px; padding:8px 12px; min-height:44px; display:flex; align-items:center; background:var(--c); color:var(--t); }
.site-mobile-nav > summary::-webkit-details-marker { display:none; }
.site-mobile-panel { position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:30; width:min(260px,86vw); padding:8px; display:grid; gap:4px; background:var(--c); border:1px solid var(--b); border-radius:12px; box-shadow:0 10px 28px rgba(16,24,40,.13); }
.site-mobile-panel a { display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--t); }
.site-mobile-panel a:hover { background:var(--bg); }
@media(max-width:780px) {
  .site-nav-links { display:none; }
  .site-mobile-nav { display:block; }
  .site-nav { gap:6px; }
  .site-nav-actions { gap:6px; }
  .site-nav .button, .site-login { padding-inline:10px; min-height:42px; }
  .site-mobile-panel { position:fixed; top:74px; inset-inline:14px; width:auto; }
}

/* Final usability refinements */
#nav { flex: 1 1 auto; }
.nav-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border-radius:10px; text-decoration:none; font-weight:700; }
.nav-actions > a.nav-button:not(.s) { background:var(--p); color:#fff; border:1px solid var(--p); }
.nav-actions > a.nav-button.s { background:#fff; color:var(--t); border:1px solid var(--b); }
.nav-public { min-width:0; flex-wrap:wrap; }
main#app { min-height:60vh; }
.feature-grid .card, .uc .card, .steps .card { min-width:0; }
input:disabled, select:disabled, textarea:disabled { opacity:.7; cursor:not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #f0b429; outline-offset:3px; }
@media(max-width:520px) { .nav-public { gap:6px; } .nav-actions { gap:5px; } .nav-actions .nav-button { padding-inline:10px; min-width:44px; } }

/* Fallback header and touch targets */
.nav-public .nav-actions { flex-wrap:wrap; }
.nav-public .nav-button { display:inline-flex; align-items:center; justify-content:center; }
.nav-public .mobile-nav summary { display:flex; align-items:center; justify-content:center; }
@media(max-width:850px) { .nav-public .nav-links { display:none; } .nav-public .mobile-nav { display:block; } }