/* KITAP KÖPRÜSÜ --------------------------------------------------------------
   Site design, taken over unchanged from the supplied HTML/CSS/JS package
   (kitap-koprusu-html-css-js.zip). Differences from that file, all deliberate:
   - Element-level resets (button, a, img, headings, body size/colour) only apply
     under body.kk-home. Inner pages are styled with Tailwind utilities, and these
     unlayered rules would otherwise beat them (e.g. strip every bg-accent button).
     Tailwind's preflight gives the header and footer the same resets elsewhere.
   - .kk-container is .kk-container: Tailwind generates its own .kk-container utility
     (max-width per breakpoint) as soon as the class name appears in a template.
   - Font files are self-hosted (fonts.css); the additions at the end are marked.
   ------------------------------------------------------------------------ */
:root {
  --navy: #070d4b;
  --blue: #0574ff;
  --blue-deep: #0064f1;
  --text: #536ba9;
  --muted: #7185b4;
  --border: #e1edfb;
  --surface: #f3f9fe;
  --white: #fff;
  --green: #168879;
  --radius: 8px;
  --soft-shadow: 0 5px 18px rgba(37, 120, 192, .065);
  --font: 'Roboto Condensed', 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;
  --font-logo: 'Roboto', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 22px; }
body { font-family: var(--font); }
body.kk-home { margin: 0; color: var(--navy); background: #fff; font: 400 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
.kk-home button, .kk-home input, .kk-home select, .kk-home textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.kk-home button, .kk-home select, .site-header button, .site-footer button, .site-dialog button { cursor: pointer; }
.kk-home button { color: inherit; }
.kk-home button:disabled { cursor: not-allowed; opacity: .6; }
.kk-home button { border: 0; background: none; }
.kk-home a { color: inherit; text-decoration: none; }
.kk-home img, .kk-home svg { display: block; max-width: 100%; }
.kk-home img { height: auto; }
.kk-home h1, .kk-home h2, .kk-home h3, .kk-home p { margin: 0; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid #075bdb; outline-offset: 4px; }
::selection { color: #032652; background: #c9e2ff; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 1000; padding: 12px 18px; background: var(--navy); color: white; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.kk-container { width: min(calc(100% - 140px), 1210px); margin-inline: auto; }
.wide-container { width: min(calc(100% - 70px), 1280px); margin-inline: auto; }
.icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 8px 24px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: box-shadow .18s, background .18s, transform .18s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; border-color: #0877ff; background: linear-gradient(130deg, #1989ff, #0065fa); box-shadow: 0 3px 9px #0879ff22, inset 0 1px 1px #ffffff25; }
.button-primary:hover { background: linear-gradient(130deg, #0577ee, #005ce2); box-shadow: 0 4px 13px #0879ff36; }
.button-outline { color: var(--blue); border-color: #4b99ff; background: white; box-shadow: 0 2px 5px #377acc08; }
.button-outline:hover { background: #f1f7ff; }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 0; color: var(--blue); font-size: 12px; font-weight: 500; white-space: nowrap; }
.text-link .icon { width: 16px; height: 16px; }
.text-link:hover { color: #0053c3; text-decoration: underline; text-underline-offset: 3px; }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 6px; color: var(--blue); border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.icon-button:hover { background: var(--surface); }

/* Header ----------------------------------------------------------------- */
.site-header { height: 55px; border-bottom: 1px solid #eaf3fc; background: rgba(255,255,255,.98); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; }
.brand-symbol { width: 88px; height: 43px; object-fit: contain; }
.brand-name { font: 700 20px/1.05 var(--font-logo); letter-spacing: -.7px; }
.brand-name span { color: #bc452b; }
.brand-tagline { display: block; margin-top: 3px; color: #6276a7; font-size: 8.5px; letter-spacing: -.12px; }
.main-nav { display: flex; align-items: center; gap: 27px; height: 100%; margin-left: auto; margin-right: auto; }
.main-nav a, .nav-about { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0; color: #5068a3; font-size: 11.5px; white-space: nowrap; }
.main-nav a:hover, .nav-about:hover { color: var(--blue); }
.main-nav a[aria-current='page'] { color: var(--blue); font-weight: 700; }
.main-nav a[aria-current='page']::after { content: ''; position: absolute; bottom: 10px; left: 0; right: 0; height: 2px; background: var(--blue); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.login-button { min-height: 34px; padding: 7px 17px; color: #5870a9; border-color: #c5dcfb; font-size: 12px; }
.header-donate { min-height: 34px; padding: 7px 20px; font-size: 13px; }
.mobile-toggle { display: none; }

/* Hero: the graphic is an art layer, never an image of the page ------------ */
.hero { position: relative; isolation: isolate; max-width: 1480px; min-height: 337px; margin-inline: auto; padding-top: 25px; background: linear-gradient(180deg, #f5faff 0, #fff 42%, #fff 100%); }
.hero-content { position: relative; z-index: 2; width: 460px; max-width: 48%; }
.eyebrow { margin-bottom: 7px; color: #47609a; font-size: 10px; font-weight: 600; letter-spacing: 2.35px; line-height: 1.5; }
.hero h1 { font-family: var(--font); font-size: 44px; line-height: 1.01; font-weight: 800; letter-spacing: -1.25px; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-description { max-width: 445px; margin-top: 9px; color: #4f68a8; font-size: 15.5px; line-height: 1.27; }
.hero-actions { display: flex; gap: 13px; margin-top: 16px; }
.hero-actions .button { width: 187px; min-height: 40px; }
.hero-actions .icon { width: 22px; height: 22px; }
.hero-principles { position: relative; z-index: 3; display: grid; grid-template-columns: 194px 160px 257px; width: 611px; margin-top: 23px; }
.hero-principle { display: flex; align-items: flex-start; gap: 12px; padding-right: 11px; }
.hero-principle + .hero-principle { padding-left: 13px; border-left: 1px solid #e8f0fa; }
.hero-principle > .icon { width: 31px; height: 31px; color: #0066ff; stroke-width: 1.45; }
.hero-principle strong { display: block; margin: 0 0 2px; font-size: 11.5px; font-weight: 700; }
.hero-principle small { display: block; color: var(--muted); font-size: 10.6px; line-height: 1.27; }
.hero-art { position: absolute; z-index: 1; top: 4px; right: 10px; width: 54.4%; max-width: 752px; aspect-ratio: 610 / 322; }
.hero-art > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.art-note { position: absolute; color: #294d9d; font-family: 'Caveat', 'Segoe Print', 'URW Chancery L', cursive; font-size: clamp(14px,1.55vw,22px); font-weight: 500; font-style: italic; line-height: 1.02; text-align: center; }
.art-note-left { left: 14%; top: 10.8%; width: 15%; transform: rotate(-10deg); }
.art-note-right { right: 2.7%; top: 6.7%; width: 16%; transform: rotate(7deg); }
.art-note .icon { display: block; width: 21px; height: 21px; margin: 7px auto 0; stroke-width: 1.4; }
.art-poster { position: absolute; top: 35.5%; left: 81.4%; width: 13.4%; height: 24%; display: flex; justify-content: center; align-items: center; color: #3c5879; font-size: clamp(9px,1.05vw,14px); font-weight: 400; line-height: 1.52; text-align: center; }

/* Listing search --------------------------------------------------------- */
.explore { position: relative; padding: 12px 24px 17px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(155deg, #fff, #fefeff 65%, #fafdff); box-shadow: var(--soft-shadow); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.kk-home h2, .site-dialog h2 { font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.65px; }
.section-description { margin-top: 4px; color: var(--text); font-size: 13px; line-height: 1.35; }
.explore .section-heading { padding: 0 10px; min-height: 60px; }
.explore h2 { font-size: 27px; }
.explore .section-description { font-size: 14px; }
.tabs { display: inline-flex; align-items: stretch; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 33px; padding: 5px 19px; border: 1px solid transparent; border-radius: 5px; color: #0750bc; font-size: 12px; white-space: nowrap; }
.tab .icon { width: 19px; height: 19px; }
.tab[aria-selected='true'] { color: #fff; border-color: #107cfe; background: linear-gradient(120deg,#278eff,#0068ff); box-shadow: 0 2px 7px #0079ff26; }
.tab:not([aria-selected='true']):hover { background: #f2f8ff; }
.search-form { display: grid; grid-template-columns: 1.65fr .88fr 1fr 108px; gap: 8px; margin: 0 0 14px; }
.field-shell { position: relative; display: flex; align-items: center; min-width: 0; min-height: 38px; border: 1px solid #e0ecfc; border-radius: 5px; background: linear-gradient(#fff,#fdfeff); box-shadow: 0 2px 5px #3d82bd05; }
.field-shell:focus-within { border-color: #72adfd; box-shadow: 0 0 0 3px #0879ff12; }
.field-shell > .icon:first-child { position: absolute; left: 10px; width: 20px; height: 20px; color: #36559b; pointer-events: none; }
.field-shell input, .field-shell select { width: 100%; min-width: 0; height: 36px; padding: 7px 32px 7px 41px; border: 0; outline: none; background: transparent; color: #395695; font-size: 12px; }
.field-shell input::placeholder { color: #7284b0; opacity: 1; }
.field-shell select { appearance: none; }
.select-chevron { position: absolute; right: 12px; width: 12px; height: 12px; color: #395695; pointer-events: none; }
.search-submit { min-height: 38px; padding: 7px 20px; font-size: 14px; border-radius: 5px; }
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 2px 12px; color: var(--text); font-size: 12px; }
.listings { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.listing-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 9px; border: 1px solid var(--border); border-radius: 8px; background: white; box-shadow: 0 4px 12px #2486c908; transition: box-shadow .2s, border-color .2s; }
.listing-card:hover { border-color: #c5dcfb; box-shadow: 0 7px 18px #207dca14; }
.listing-card-main { position: relative; display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 15px; flex: 1; }
.listing-image { display: block; width: 94px; height: 134px; border-radius: 5px; object-fit: cover; }
.listing-body { min-width: 0; padding-top: 3px; }
.listing-title { padding-right: 18px; font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: -.24px; }
.listing-owner { margin-top: 3px; color: #657aad; font-size: 11.5px; }
.listing-location { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #6c82b0; font-size: 10.8px; }
.listing-location .icon { width: 12px; height: 14px; color: #4f69a0; }
.listing-description { margin-top: 13px; color: #6d82ad; font-size: 10.8px; line-height: 1.3; }
.save-button { position: absolute; top: 0; right: -4px; display: grid; place-items: center; width: 25px; height: 28px; padding: 5px; border: 1px solid #e6effc; border-radius: 5px; color: #3858a8; background: #fff; }
.save-button .icon { width: 15px; height: 17px; }
.save-button[aria-pressed='true'] { color: var(--blue); background: #ecf5ff; border-color: #b9d8ff; }
.save-button[aria-pressed='true'] .icon { fill: #0c78ff22; }
.listing-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.listing-footer .text-link { font-size: 11.5px; }
.listing-date { color: #899ac0; font-size: 10px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 30px 20px; background: #f8fbff; border: 1px dashed #c9dff9; border-radius: 8px; }
.empty-state > .icon { width: 28px; height: 28px; color: var(--blue); margin-bottom: 9px; }
.empty-state p { color: var(--text); margin: 8px 0 12px; }

/* Four-step workflow ----------------------------------------------------- */
.how-section { margin-top: 20px; }
.how-section .section-heading { margin-bottom: 8px; }
.steps-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-left: -9px; margin-right: -9px; }
.step-card { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; min-height: 145px; padding: 12px 11px 12px; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--soft-shadow); }
.step-number { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #ddf0ff; color: #0870f5; font-size: 22px; font-weight: 700; }
.step-card:nth-child(3) .step-number { background: #e0f1ec; color: #168779; }
.step-content > .icon { width: 34px; height: 34px; color: var(--blue); margin: 2px 0 9px; stroke-width: 1.7; }
.step-content h3 { margin: 0 0 5px; font-size: 13.7px; font-weight: 700; line-height: 1.23; letter-spacing: -.22px; }
.step-content p { color: #6b7fb0; font-size: 11.5px; line-height: 1.35; }
.step-card:last-child .step-content h3 { font-size: 12.6px; letter-spacing: -.48px; }

/* City map: vector geography + native, focusable city buttons ------------- */
.cities-section { margin-top: 20px; }
.cities-section .section-description { font-size: 12.5px; }
.city-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: center; gap: 22px; margin-top: 0; }
.map-shell { position: relative; aspect-ratio: 556/216; min-width: 0; }
.map-drawing { position: absolute; inset: 7px 0 0; width: 100%; height: calc(100% - 7px); }
.map-drawing svg { width: 100%; height: 100%; overflow: visible; }
.map-marker { --dot-size: 10px; position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 0; transform: translate(-5px,-50%); color: #163877; font-size: 10.2px; font-weight: 500; white-space: nowrap; text-align: left; }
.map-dot { position: relative; display: block; width: var(--dot-size); height: var(--dot-size); flex-shrink: 0; border: 2px solid white; border-radius: 50%; background: #087aff; box-shadow: 0 0 0 3px #70bbff48; }
.map-marker.major { --dot-size: 13px; }
.map-marker.major .map-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.map-marker[aria-pressed='true'] { z-index: 3; }
.map-marker[aria-pressed='true'] .map-dot { width: 17px; height: 17px; box-shadow: 0 0 0 5px #7bb8ff66, 0 0 0 9px #b9ddff44; }
.map-marker[aria-pressed='true'] .map-dot::after { inset: 4px; }
.map-marker[aria-pressed='true'] .map-label { position: relative; top: -7px; padding: 6px 10px; border: 1px solid #e2eefb; border-radius: 5px; background: #fff; box-shadow: 0 3px 8px #226dba0e; }
.map-marker:hover .map-label { color: var(--blue); }
.map-marker:hover .map-dot { background: #0054c6; }
.map-spark { position: absolute; width: 6px; height: 6px; background: #0783ff; border: 1.5px solid #fff; border-radius: 50%; }
.city-panel { min-width: 0; min-height: 202px; padding: 7px 8px 8px; border: 1px solid var(--border); border-radius: 8px; background: white; box-shadow: var(--soft-shadow); }
.city-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
.city-thumb { width: 76px; height: 35px; object-fit: cover; border-radius: 4px; background: #e9f4ff; flex: 0 0 auto; }
.city-thumb-placeholder { display: grid; place-items: center; color: #6a9ac7; }
.city-panel-title { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 700; }
.city-panel-title .icon { width: 18px; height: 21px; color: var(--blue); }
.city-panel-header > .text-link { margin-left: auto; font-size: 11px; }
.city-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.city-stat { display: flex; align-items: center; gap: 11px; min-height: 41px; padding: 5px 10px; border: 1px solid #edf3fc; border-radius: 5px; background: linear-gradient(145deg,#fff,#fcfdff); }
.city-stat > .icon { color: var(--blue); width: 24px; height: 24px; }
.city-stat strong { display: block; font-size: 13px; line-height: 1.2; }
.city-stat small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; }
.districts-label { font-size: 10.5px; font-weight: 500; margin: 7px 0 4px; }
.districts-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 10px; }
.district-button { position: relative; padding: 6px 20px 5px 9px; min-height: 43px; border: 1px solid #e8f1fc; border-radius: 6px; background: #fff; text-align: left; }
.district-button:hover { border-color: #b5d8ff; background: #f7fbff; }
.district-name { display: flex; align-items: center; gap: 5px; font-size: 10.8px; font-weight: 700; }
.district-name::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.district-meta { display: block; margin: 2px 0 0 13px; color: #6e83b4; font-size: 10.5px; }
.district-meta i { display: inline-block; height: 10px; border-left: 1px solid #dbe6f7; margin: 0 7px; vertical-align: -1px; }
.district-button > .icon { position: absolute; right: 6px; top: 14px; color: var(--blue); width: 13px; height: 13px; }
.city-empty { padding: 15px 9px 10px; color: var(--text); font-size: 12px; line-height: 1.5; }

/* Rules and footer ------------------------------------------------------- */
.rules-strip { display: grid; grid-template-columns: 1fr 1.05fr 1.18fr .85fr; gap: 0; padding: 16px 23px; margin-top: 20px; border-radius: 13px; background: linear-gradient(110deg,#f1f9ff,#f5faff); }
.rule { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 15px; }
.rule:first-child { padding-left: 0; }
.rule + .rule { border-left: 1px solid #e8f0f8; }
.rule-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #def0ff; color: #0573fe; }
.rule-icon .icon { width: 27px; height: 27px; stroke-width: 1.7; }
.rule-icon.red { background: #f4eaf0; color: #b94653; }
.rule-icon.green { background: #e3f0f0; color: #2b5268; }
.rule strong { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.rule p { margin-top: 4px; color: #7387b1; font-size: 10.4px; line-height: 1.25; }
.site-footer { margin-top: 10px; border-top: 1px solid #e5effc; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 65px; }
.site-footer .brand-symbol { width: 74px; height: 38px; }
.site-footer .brand-name { font-size: 18px; }
.site-footer .brand-tagline { font-size: 8px; }
.footer-nav { display: flex; gap: 25px; align-items: center; margin-left: auto; }
.footer-nav a, .footer-nav button { padding: 5px 0; color: #6377a9; font-size: 10.5px; white-space: nowrap; }
.footer-nav a:hover, .footer-nav button:hover { color: var(--blue); }
.socials { display: flex; gap: 15px; align-items: center; }
.socials button { padding: 0; color: #081252; }
.socials .icon { width: 17px; height: 17px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 29px; border-top: 1px solid #edf3fb; font-size: 9px; color: #7b8db8; }
.footer-motto { display: inline-flex; align-items: center; gap: 10px; font-style: italic; }
.footer-motto .icon { width: 13px; height: 13px; color: #4573ce; }
.demo-note { font-size: 8px; color: #8394b6; }

/* Interactive views: native modal dialog, form and saved listings ---------- */
.site-dialog { width: min(620px,calc(100% - 32px)); max-height: min(88dvh,900px); margin: auto; padding: 0; border: 1px solid #dce9fa; border-radius: 15px; color: var(--navy); background: white; box-shadow: 0 25px 100px #0821493d; overflow: auto; overscroll-behavior: contain; }
.site-dialog::backdrop { background: #081d3e70; backdrop-filter: blur(4px); }
.dialog-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 15px; padding: 19px 24px 15px; border-bottom: 1px solid var(--border); background: #fff; }
.dialog-header h2 { flex: 1; font-size: 23px; }
.dialog-header .icon-button { width: 31px; height: 31px; color: #5f72a1; }
.dialog-body { padding: 23px 24px 26px; }
.dialog-intro { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 17px; }
.notice { padding: 11px 13px; border: 1px solid #dfebf9; border-radius: 7px; background: #f5f9fe; color: #586f9a; font-size: 12px; line-height: 1.5; }
.notice strong { color: #294b78; }
.notice + .form-grid { margin-top: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #233e71; font-size: 13px; font-weight: 500; }
.form-field.full, .form-grid > .full { grid-column: 1/-1; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dbe7f7; border-radius: 6px; background: #fff; color: #284576; font-size: 14px; font-weight: 400; }
.form-field textarea { min-height: 95px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid #add3ff; outline-offset: 1px; }
.form-hint { color: #7b8ba9; font-size: 11.5px; font-weight: 400; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-error { color: #b03242; font-size: 13px; margin-top: 12px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; color: #506793; font-size: 12px; line-height: 1.5; }
.check-row input { margin-top: 4px; accent-color: var(--blue); }
.compose-tabs { margin-bottom: 16px; }
.compose-tabs .tab { flex: 1; }
.compose-tabs.tabs { display: flex; }
.detail-summary { display: grid; grid-template-columns: 108px 1fr; gap: 20px; margin-bottom: 18px; }
.detail-summary img { width: 108px; height: 150px; border-radius: 8px; object-fit: cover; }
.detail-summary h3 { font-size: 22px; line-height: 1.18; margin-bottom: 8px; }
.detail-summary p { color: var(--text); font-size: 13px; margin-top: 6px; }
.pill { display: inline-flex; gap: 5px; align-items: center; border-radius: 50px; padding: 4px 9px; background: #edf6ff; color: #245da9; font-size: 11px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.detail-meta > div { padding: 10px 13px; background: #f8fbff; border: 1px solid #e5effa; border-radius: 6px; }
.detail-meta dt { font-size: 11px; color: #7a8caa; }
.detail-meta dd { margin: 4px 0 0; font-size: 13px; color: #2e4976; }
.detail-description { color: #506892; line-height: 1.7; font-size: 14px; }
.dialog-section { margin: 20px 0; }
.dialog-section h3 { font-size: 16px; margin-bottom: 7px; }
.dialog-section p { color: var(--text); font-size: 14px; line-height: 1.65; }
.all-cities-search { width: 100%; margin-bottom: 14px; padding: 10px 12px; border: 1px solid #d8e6f6; border-radius: 6px; color: #284575; }
.all-cities-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.city-picker { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; border: 1px solid #e2ecf8; border-radius: 5px; text-align: left; color: #3b5888; font-size: 12px; }
.city-picker:hover { background: #f0f7ff; border-color: #b6d8ff; }
.city-picker .icon { width: 12px; height: 12px; color: var(--blue); }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf2fa; }
.account-row > div { min-width: 0; }
.account-row strong { font-size: 14px; }
.account-row p { color: var(--text); font-size: 12px; margin-top: 3px; }
.upload-preview { max-height: 110px; width: auto; border-radius: 7px; object-fit: cover; }
.toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 13px 18px; border: 1px solid #ccdfed; border-radius: 9px; box-shadow: 0 8px 30px #0c2c582b; color: #284d77; background: #fff; font-size: 13px; transform: translateX(-50%); }
.toast .icon { width: 18px; height: 18px; color: #198a73; }
noscript { display: block; padding: 20px; text-align: center; color: #755316; background: #fffae7; }

/* Breakpoints preserve the desktop composition; they do not scale an image. */
@media (min-width:1280px) {
  .site-header { height: 64px; }
  .main-nav { gap: 32px; }
  .main-nav a, .nav-about { font-size: 13px; }
  .hero { min-height: 396px; padding-top: 32px; }
  .hero-content { width: 540px; }
  .hero h1 { font-size: 51px; }
  .hero-description { font-size: 17px; max-width: 515px; }
  .hero-actions { margin-top: 23px; }
  .hero-actions .button { min-height: 44px; width: 200px; }
  .hero-principles { margin-top: 27px; }
  .hero-art { top: 10px; }
  .explore { padding-top: 17px; padding-bottom: 21px; }
  .explore .section-heading { min-height: 66px; }
  .listing-card-main { grid-template-columns: 107px 1fr; gap: 16px; }
  .listing-image { width: 107px; height: 150px; }
  .listing-title { font-size: 15px; }
  .listing-owner { font-size: 13px; }
  .listing-description, .listing-location { font-size: 12px; }
  .how-section, .cities-section { margin-top: 26px; }
  .step-card { min-height: 158px; }
  .step-content h3, .step-card:last-child .step-content h3 { font-size: 15px; }
  .step-content p { font-size: 13px; }
  .city-panel { min-height: 222px; padding: 10px; }
  .city-stats { margin-top: 10px; }
  .districts-label { margin-top: 10px; }
  .district-button { min-height: 47px; }
  .city-panel-header > .text-link, .district-name, .district-meta { font-size: 12px; }
  .map-marker { font-size: 12px; }
  .rules-strip { margin-top: 24px; padding-block: 20px; }
  .rule strong { font-size: 13px; }
  .rule p { font-size: 11.5px; }
  .footer-top { min-height: 76px; }
}
@media (max-width:1050px) {
  .kk-container { width: calc(100% - 72px); }
  .wide-container { width: calc(100% - 40px); }
  .header-inner { gap: 15px; }
  .main-nav { gap: 20px; }
  .brand-symbol { width: 72px; }
  .brand-name { font-size: 18px; }
  .brand-tagline { font-size: 7.5px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.15px; }
  .hero-description { font-size: 14px; }
  .hero-art { top: 14px; }
  .hero-principles { grid-template-columns: 178px 149px 229px; width: 556px; }
  .hero-principle { gap: 8px; }
  .hero-principle + .hero-principle { padding-left: 10px; }
  .hero-principle strong { font-size: 10.8px; }
  .hero-principle small { font-size: 10px; }
  .hero-principle > .icon { width: 28px; height: 28px; }
  .listing-card-main { grid-template-columns: 83px 1fr; gap: 11px; }
  .listing-image { width: 83px; height: 134px; }
  .listing-title { font-size: 12.5px; }
  .step-card { gap: 8px; grid-template-columns: 43px 1fr; }
  .step-number { width: 39px; height: 39px; }
  .city-layout { gap: 16px; }
  .city-stat { gap: 5px; padding-inline: 5px; }
  .city-stat small { font-size: 9px; }
  .city-panel-header { gap: 8px; }
  .city-thumb { width: 64px; }
  .city-panel-header > .text-link { font-size: 10px; }
  .footer-nav { gap: 18px; }
  .socials { gap: 11px; }
  .rule { gap: 8px; padding-inline: 9px; }
  .rule-icon { width: 38px; height: 38px; }
}
@media (max-width:880px) {
  .kk-container { width: calc(100% - 48px); }
  .wide-container { width: calc(100% - 32px); }
  .site-header { height: 62px; }
  .header-inner { gap: 10px; }
  .main-nav { gap: 16px; }
  .main-nav a, .nav-about { font-size: 11px; }
  .main-nav a:nth-child(1), .nav-about { display: none; }
  .header-donate { padding-inline: 13px; }
  .login-button { padding-inline: 12px; }
  .hero { min-height: 335px; padding-top: 25px; }
  .hero-content { max-width: 49%; }
  .hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hero-description { font-size: 13px; line-height: 1.35; }
  .hero-actions { gap: 8px; margin-top: 15px; }
  .hero-actions .button { width: auto; min-height: 39px; padding-inline: 15px; font-size: 13px; }
  .hero-art { width: 53%; top: 20px; right: 3px; }
  .hero-principles { margin-top: 26px; grid-template-columns: 160px 139px 230px; }
  .explore { padding: 17px 18px; }
  .explore .section-heading { padding: 0; gap: 12px; }
  .explore h2 { font-size: 25px; }
  .explore .section-description { font-size: 12px; }
  .tab { padding-inline: 11px; font-size: 11px; }
  .search-form { grid-template-columns: 1.3fr .9fr .9fr 70px; }
  .field-shell input, .field-shell select { padding-left: 33px; padding-right: 22px; font-size: 11px; }
  .field-shell > .icon:first-child { width: 17px; height: 17px; left: 9px; }
  .listings { gap: 9px; }
  .listing-card { padding: 10px; }
  .listing-card-main { display: flex; flex-direction: column; gap: 10px; }
  .listing-image { width: 100%; height: 124px; object-position: center 45%; }
  .listing-body { padding-top: 0; }
  .listing-title { font-size: 14px; padding-right: 0; }
  .listing-owner { font-size: 12px; }
  .listing-description { font-size: 11.5px; margin-top: 10px; }
  .listing-location { font-size: 11px; margin-top: 6px; }
  .save-button { right: 6px; top: 6px; }
  .steps-grid { margin: 0; gap: 8px; }
  .step-card { display: flex; flex-direction: column; padding: 13px; gap: 7px; }
  .step-number { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; font-size: 17px; }
  .step-content > .icon { margin: 1px 0 14px 40px; width: 30px; height: 30px; }
  .step-content p { font-size: 12px; }
  .step-content h3, .step-card:last-child .step-content h3 { font-size: 13px; letter-spacing: -.2px; }
  .city-layout { grid-template-columns: 1.15fr 1fr; gap: 15px; align-items: stretch; margin-top: 10px; }
  .map-shell { align-self: center; }
  .map-marker { font-size: 8px; gap: 4px; }
  .city-thumb { width: 45px; height: 30px; }
  .city-panel-title { font-size: 12px; }
  .city-panel-header > .text-link { font-size: 9px; }
  .city-stats { gap: 5px; }
  .city-stat { gap: 5px; }
  .city-stat > .icon { width: 18px; height: 18px; }
  .city-stat small { font-size: 8px; }
  .districts-grid { gap: 5px; }
  .district-meta { margin-left: 0; font-size: 9px; }
  .district-meta i { margin-inline: 3px; }
  .rules-strip { grid-template-columns: 1fr 1fr; gap: 20px 10px; padding: 20px; }
  .rule { padding: 0 12px; }
  .rule:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rule strong { font-size: 12px; }
  .rule p { font-size: 11px; }
  .footer-top { flex-wrap: wrap; padding-block: 15px; gap: 16px; }
  .footer-nav { order: 3; width: 100%; justify-content: center; margin: 0; }
  .footer-nav a, .footer-nav button { font-size: 12px; }
  .socials { gap: 18px; }
}
@media (max-width:640px) {
  html { scroll-padding-top: 15px; }
  body.kk-home { font-size: 15px; }
  .kk-container { width: calc(100% - 40px); }
  .wide-container { width: calc(100% - 24px); }
  .site-header { height: 65px; position: relative; z-index: 5; }
  .brand-symbol { width: 60px; height: 36px; }
  .brand-name { font-size: 17px; }
  .brand-tagline { font-size: 7px; }
  .header-actions { margin-left: auto; gap: 7px; }
  .header-donate { min-height: 35px; font-size: 12px; padding: 7px 12px; }
  .login-button { display: none; }
  .mobile-toggle { display: grid; place-items: center; width: 34px; height: 36px; padding: 6px; }
  .main-nav { position: absolute; top: 64px; left: 0; right: 0; display: none; flex-direction: column; gap: 0; height: auto; padding: 10px 20px 16px; border-bottom: 1px solid var(--border); box-shadow: 0 12px 20px #2a679613; background: white; }
  .main-nav.is-open { display: flex; }
  .main-nav a, .main-nav a:nth-child(1), .nav-about { display: flex; align-items: center; width: 100%; min-height: 42px; font-size: 14px; }
  .main-nav a[aria-current='page']::after { display: none; }
  .mobile-login { display: flex !important; }
  .hero { padding-top: 25px; min-height: 0; padding-bottom: 0; overflow: hidden; }
  .hero-content { max-width: none; width: 100%; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 9px; }
  .hero h1 { font-size: clamp(32px,8.7vw,49px); line-height: 1.03; letter-spacing: -1.05px; }
  .hero-description { max-width: 520px; margin-top: 12px; font-size: 15px; line-height: 1.45; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; gap: 10px; }
  .hero-actions .button { min-height: 44px; font-size: 15px; padding-inline: 12px; width: 100%; }
  .hero-art { position: relative; inset: auto; width: 100%; max-width: 570px; margin: 8px auto 0; }
  .art-note { font-size: clamp(13px,2.9vw,19px); }
  .art-poster { font-size: clamp(9px,2.05vw,13px); }
  .hero-principles { width: 100%; grid-template-columns: 1fr .87fr 1.2fr; margin-top: 22px; gap: 0; }
  .hero-principle { gap: 6px; padding-right: 8px; }
  .hero-principle + .hero-principle { padding-left: 8px; }
  .hero-principle > .icon { width: 23px; height: 23px; }
  .hero-principle strong { font-size: 10.5px; line-height: 1.25; }
  .hero-principle small { margin-top: 3px; font-size: 9.5px; line-height: 1.3; }
  .explore { padding: 18px 15px 16px; margin-top: 15px; border-radius: 12px; }
  .explore .section-heading { display: block; }
  .kk-home h2, .explore h2 { font-size: 25px; letter-spacing: -.6px; }
  .section-description, .explore .section-description { font-size: 13px; line-height: 1.45; }
  .tabs { display: flex; margin: 16px 0 13px; }
  .tab { flex: 1; min-height: 38px; font-size: 12px; padding-inline: 9px; }
  .search-form { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
  .search-field { grid-column: 1/-1; }
  .field-shell, .field-shell input, .field-shell select { min-height: 42px; height: 42px; }
  .field-shell input, .field-shell select { padding-left: 34px; font-size: 12px; }
  .search-submit { grid-column: 1/-1; min-height: 41px; }
  .listings { grid-template-columns: 1fr; gap: 11px; }
  .listing-card { padding: 13px; }
  .listing-card-main { display: grid; grid-template-columns: 93px minmax(0,1fr); gap: 14px; }
  .listing-image { width: 93px; height: 134px; }
  .listing-body { padding-top: 1px; }
  .listing-title { font-size: 14px; padding-right: 20px; line-height: 1.35; }
  .listing-owner { font-size: 12px; }
  .listing-location { font-size: 11.5px; margin-top: 7px; }
  .listing-description { font-size: 12px; line-height: 1.4; margin-top: 10px; }
  .save-button { top: 0; right: -3px; width: 27px; height: 29px; }
  .listing-footer { margin-top: 10px; }
  .listing-footer .text-link { font-size: 13px; min-height: 30px; }
  .listing-date { font-size: 11px; }
  .how-section, .cities-section { margin-top: 26px; }
  .section-heading { gap: 10px; }
  .section-heading > .text-link { font-size: 11px; }
  .how-section .section-heading { margin-bottom: 13px; }
  .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .step-card { min-height: 161px; padding: 15px; }
  .step-number { top: 14px; left: 14px; }
  .step-content > .icon { margin-left: 43px; }
  .step-content h3, .step-card:last-child .step-content h3 { font-size: 14px; line-height: 1.3; }
  .step-content p { font-size: 12px; line-height: 1.45; }
  .city-layout { grid-template-columns: 1fr; gap: 15px; margin-top: 13px; }
  .map-shell { width: 100%; }
  .map-marker { font-size: 9px; }
  .city-panel { padding: 11px; }
  .city-thumb { width: 65px; height: 34px; }
  .city-panel-title { font-size: 15px; }
  .city-panel-header { gap: 9px; margin-bottom: 9px; }
  .city-panel-header > .text-link { font-size: 11px; }
  .city-stats { gap: 7px; }
  .city-stat { padding: 7px 6px; gap: 7px; }
  .city-stat > .icon { width: 22px; height: 22px; }
  .city-stat strong { font-size: 14px; }
  .city-stat small { font-size: 9px; }
  .districts-label { margin-top: 10px; font-size: 12px; }
  .districts-grid { gap: 7px; }
  .district-button { min-height: 49px; padding: 7px 20px 7px 9px; }
  .district-name { font-size: 12px; }
  .district-meta { font-size: 11px; margin-left: 11px; }
  .district-button > .icon { top: 17px; }
  .rules-strip { grid-template-columns: 1fr; padding: 8px 18px; margin-top: 23px; gap: 0; border-radius: 12px; }
  .rule, .rule:nth-child(odd) { padding: 14px 0; gap: 13px; }
  .rule + .rule { border-left: 0; border-top: 1px solid #e3edf7; }
  .rule-icon { width: 40px; height: 40px; }
  .rule strong { font-size: 13px; }
  .rule p { font-size: 12px; max-width: 330px; }
  .site-footer { margin-top: 23px; }
  .footer-top { gap: 20px 10px; padding-block: 17px; }
  .site-footer .brand-symbol { width: 60px; }
  .site-footer .brand-name { font-size: 16px; }
  .site-footer .brand-tagline { font-size: 7px; }
  .socials { gap: 12px; }
  .socials .icon { width: 15px; height: 15px; }
  .footer-nav { justify-content: flex-start; flex-wrap: wrap; gap: 8px 20px; }
  .footer-nav a, .footer-nav button { font-size: 12px; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; padding-block: 12px; gap: 9px; font-size: 10px; }
  .demo-note { width: 100%; order: 3; font-size: 9px; }
  .form-grid { grid-template-columns: 1fr; }
  .dialog-header { padding: 16px 18px; }
  .dialog-body { padding: 19px 18px 22px; }
  .dialog-header h2 { font-size: 22px; }
  .form-footer { flex-wrap: wrap; }
  .form-footer .button { flex: 1; font-size: 14px; }
  .all-cities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:374px) {
  .kk-container { width: calc(100% - 30px); }
  .header-donate { font-size: 11px; padding-inline: 8px; }
  .brand-symbol { width: 48px; }
  .brand-name { font-size: 15px; }
  .brand-tagline { font-size: 6.5px; }
  .hero h1 { font-size: 29px; }
  .hero-principle > .icon { display: none; }
  .hero-principle strong { font-size: 11px; }
  .hero-actions .button { font-size: 13px; }
  .listing-card-main { grid-template-columns: 78px 1fr; gap: 11px; }
  .listing-image { width: 78px; height: 134px; }
  .listing-title { font-size: 13px; }
  .listing-description { font-size: 11px; }
  .section-heading > .text-link { font-size: 10px; }
  .detail-summary { grid-template-columns: 80px 1fr; gap: 13px; }
  .detail-summary img { width: 80px; height: 118px; }
  .detail-summary h3 { font-size: 19px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .hero-actions, .search-form, .save-button, .socials, .toast, dialog { display:none !important; }
  .kk-container,.wide-container { width:100%; }
  body.kk-home { font-size: 12pt; }
  .explore,.step-card,.city-panel { box-shadow:none; break-inside:avoid; }
}

/* Reset native buttons used around individual image and title elements. */
.card-image-button { display: block; padding: 0; border: 0; text-align: left; align-self: start; }
.listing-title-button { padding: 0; border: 0; font: inherit; text-align: left; line-height: inherit; }
.listing-title-button:hover { color: var(--blue); }
/* Optical alignment to the supplied raster reference. */
.hero h1 { font-family: var(--font-logo); font-size: 43px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.03; }
.explore h2 { font-family: var(--font-logo); font-size: 26px; font-weight: 700; letter-spacing: -.8px; }
.art-note { font-family: 'Caveat', 'Segoe Print', 'Z003', cursive; white-space: nowrap; }
.art-note-left { width: 17%; left: 12.8%; }
.art-note-right { right: 3.4%; }
.art-poster { font-size: 12px; line-height: 1.48; }
.listing-title, .listing-owner, .listing-description, .detail-description, .detail-summary h3, .account-row strong { overflow-wrap: anywhere; }
.listing-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tab[aria-pressed='true'] { color:#fff; border-color:#107cfe; background:linear-gradient(120deg,#278eff,#0068ff); box-shadow:0 2px 7px #0079ff26; }
@media (min-width:881px) and (max-width:1279px) {
  .explore { padding-top:15px; }
  .how-section, .cities-section { margin-top:18px; }
  .how-section .section-heading { margin-bottom:6px; }
  .how-section .section-description { font-size:12px; line-height:1.3; }
  .rules-strip { margin-top:16px; padding-block:12px; }
  .footer-top { min-height:54px; }
  .footer-bottom { min-height:25px; }
}
@media (min-width:1280px) { .hero h1 { font-size:50px; } .explore h2 { font-size:28px; } .art-poster { font-size:14px; } }
@media (max-width:1050px) { .hero h1 { font-size:39px; } }
@media (max-width:880px) { .hero h1 { font-size:32px; letter-spacing:-1.2px; } .explore h2 { font-size:24px; } .art-poster { font-size:10px; } }
@media (max-width:640px) { .hero h1 { font-size:clamp(28px,8.3vw,47px); letter-spacing:-1.5px; } .explore h2 { font-family:var(--font); font-size:25px; letter-spacing:-.5px; } .art-poster { font-size:clamp(8px,1.85vw,12px); } }
@media (max-width:374px) { .hero h1 { font-size:28px; letter-spacing:-1.4px; } }

/* Additions for the live site ------------------------------------------------ */
/* Headings the prototype left at the browser's bold default (Tailwind preflight resets it). */
.empty-state h3, .dialog-section h3 { font-weight: 700; }
.empty-state h3 { font-size: 15px; }
.empty-state .button + .button { margin-left: 6px; }
/* Links that took over the prototype's buttons keep the button geometry. */
a.district-button, a.city-picker { display: block; color: inherit; }
a.city-picker { display: flex; }
/* The live footer carries two more links and the legal notice line. */
.footer-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--blue); text-decoration: underline; }
.site-flash { padding-top: 12px; }
.header-actions form { display: contents; }
@media (max-width:880px) { .footer-nav { justify-content: center; } }
@media (max-width:640px) { .footer-nav { justify-content: flex-start; } .footer-legal { width: 100%; order: 3; } }
.notice a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }