/* Sandžak Ključ — paylaşılan tasarım tokens + utility */
:root{
  --cream-50:#FDFBF7; --cream-100:#FAF7F2; --cream-200:#F3EDE2; --cream-300:#E8DEC9;
  --emerald-50:#EEF6F1; --emerald-700:#155A3A; --emerald-800:#0F5132; --emerald-900:#0A3A24;
  --gold-400:#D4A24C; --gold-500:#C28F36; --gold-600:#A8762A;
  --ink-900:#1B1A17; --ink-700:#3A3833; --ink-500:#6E6A60; --ink-400:#8E8A7E;
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:#FAF7F2;color:#1B1A17;}
.font-serif{font-family:'Playfair Display',Georgia,serif;letter-spacing:-0.01em;}

/* Ornament — geometrik Osmanlı/Bosnak motif ayraç */
.ornament{
  height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'><g fill='none' stroke='%23C28F36' stroke-width='1' stroke-linecap='round'><path d='M0 7 H10'/><path d='M38 7 H48'/><path d='M16 7 L24 1 L32 7 L24 13 Z'/><circle cx='24' cy='7' r='1.5' fill='%23C28F36' stroke='none'/><path d='M12 7 L16 7'/><path d='M32 7 L36 7'/></g></svg>");
  background-repeat:repeat-x;background-position:center;opacity:.85;
}

/* Header */
header.site-header{transition:background-color .35s ease, box-shadow .35s ease, border-color .35s ease;}
header.site-header.is-solid{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);box-shadow:0 1px 0 rgba(15,81,50,.08);border-color:transparent;}
header.site-header.is-top{background:transparent;}
header.site-header.is-top .nav-link, header.site-header.is-top .nav-auth{color:#FDFBF7;}
header.site-header.is-top .logo-text{color:#FDFBF7;}
header.site-header.is-top .logo-key{color:var(--gold-400);}

/* Always-solid header (alt sayfalarda hero arkası yoksa) */
header.site-header.always-solid{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);box-shadow:0 1px 0 rgba(15,81,50,.08);}

/* Buttons */
.btn-gold{background:linear-gradient(180deg,#D4A24C 0%,#C28F36 100%);color:#1B1A17;font-weight:700;border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 18px -8px rgba(196,143,54,.6);
  transition:transform .15s ease, box-shadow .2s ease;}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 22px -10px rgba(196,143,54,.7);}
.btn-emerald{background:#0F5132;color:#FDFBF7;font-weight:600;border-radius:10px;transition:background .2s ease, transform .15s ease;}
.btn-emerald:hover{background:#155A3A;transform:translateY(-1px);}
.btn-outline{background:#fff;color:#0F5132;border:1px solid #E8DEC9;font-weight:600;border-radius:10px;transition:border-color .2s ease;}
.btn-outline:hover{border-color:#0F5132;}
.btn-ghost{background:transparent;color:#3A3833;font-weight:600;border-radius:10px;transition:background .2s ease;}
.btn-ghost:hover{background:#F3EDE2;}

/* Form fields */
.field{background:#fff;border:1px solid #E8DEC9;border-radius:10px;padding:12px 14px;font-size:14px;color:#1B1A17;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;width:100%;}
.field:focus{outline:none;border-color:#0F5132;box-shadow:0 0 0 4px rgba(15,81,50,.10);}
.field-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6E6A60;font-weight:600;margin-bottom:6px;display:block;}
textarea.field{min-height:120px;resize:vertical;}

/* Required-field asterisk — distinct from gold accent text */
.field-label .req,
.field-label[data-required]::after,
label.field-label > span.req{
  color:#DC2626;font-weight:700;margin-left:3px;font-size:13px;
}

/* Form invalid / error state.
 * Activates on:
 *   - native :invalid (after first user interaction → :user-invalid)
 *   - aria-invalid="true" set by JS form handler
 *   - .has-error helper class for compound containers (e.g., wrapper around 2 inputs)
 * Avoid raw :invalid because it fires on initial render of empty required fields. */
.field:user-invalid,
.field[aria-invalid="true"],
.has-error .field{
  border-color:#DC2626;
  background:#FEF2F2;
  box-shadow:0 0 0 4px rgba(220,38,38,.08);
}
.field:user-invalid:focus,
.field[aria-invalid="true"]:focus,
.has-error .field:focus{
  border-color:#DC2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.18);
}
/* Inline error text below a field. Pair with role="alert" for screen readers. */
.field-error{
  display:none;
  margin-top:6px;font-size:12px;color:#B91C1C;line-height:1.4;
  display:flex;align-items:flex-start;gap:6px;
}
.field-error::before{
  content:"⚠";flex-shrink:0;
}
/* Show error text when paired field is invalid (sibling selector for adjacent .field-error) */
.field:user-invalid + .field-error,
.field[aria-invalid="true"] + .field-error,
.has-error > .field-error{
  display:flex;
}
/* Success / valid state — subtle green border once user has typed and field passes */
.field:user-valid:not(:placeholder-shown){
  border-color:rgba(15,81,50,.35);
}

/* WhatsApp btn */
.wa{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;font-weight:600;
  padding:8px 12px;border-radius:8px;font-size:13px;transition:background .2s ease, transform .15s ease;}
.wa:hover{background:#1FB855;transform:translateY(-1px);}
.wa-lg{padding:14px 22px;font-size:15px;border-radius:10px;}

/* Badges — three variants, consistent size + spacing.
 *   .badge        : solid emerald (property type, deal: prodaja/izdavanje)
 *   .badge-new    : solid gold (recently published, premium)  → use with .badge
 *   .badge-soft   : light emerald, low-emphasis (status, ID, count, neighbourhood)
 *
 * Default size: 11px text + 5/10 padding. Use .badge-lg for 12px / 6/12 padding.
 * Inline-block so they sit nicely in flex rows alongside text.
 */
.badge,
.badge-soft{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:5px 10px;border-radius:999px;line-height:1.2;
  white-space:nowrap;
}
.badge-lg{font-size:12px;padding:6px 12px;letter-spacing:.05em;}
.badge{
  backdrop-filter:blur(6px);
  background:rgba(15,81,50,.92);color:#FDFBF7;
}
.badge-new{background:rgba(196,143,54,.95);}
.badge-soft{
  background:#EEF6F1;color:#0F5132;border:1px solid rgba(15,81,50,.12);
  text-transform:none;letter-spacing:0;font-weight:500;
}

/* Listing card */
.listing-card{transition:transform .25s ease, box-shadow .25s ease;}
.listing-card:hover{transform:translateY(-3px);}
.listing-card .img-wrap img{transition:transform .6s ease;}
.listing-card:hover .img-wrap img{transform:scale(1.05);}

.fav-btn.is-fav svg{fill:#DC2626;stroke:#DC2626;}

/* Shadows */
.sh-card{box-shadow:0 1px 2px rgba(15,81,50,.04), 0 8px 24px -12px rgba(15,81,50,.18);}
.sh-cardh:hover{box-shadow:0 2px 4px rgba(15,81,50,.05), 0 18px 40px -16px rgba(15,81,50,.28);}
.sh-soft{box-shadow:0 1px 2px rgba(27,26,23,.04), 0 6px 18px -10px rgba(27,26,23,.18);}

/* Tabs — pill with shadow ring on active so users skimming can spot it instantly */
.tab-pill{
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  position:relative;
}
.tab-pill[aria-selected="true"]{
  background:#0F5132;color:#FDFBF7;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 4px 12px -4px rgba(15,81,50,.45);
}
/* For tab pills inside a search filter (radio-style) — uses peer-checked instead of aria-selected.
   Works on pretraga.html prodaja/izdavanje toggle. */
input.peer:checked + span.peer-checked\:bg-emerald-800{
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 4px 12px -4px rgba(15,81,50,.45);
}

/* Page hero (small, for sub-pages) */
.page-hero{background:linear-gradient(180deg,#0F5132 0%,#0A3A24 100%);color:#FDFBF7;position:relative;overflow:hidden;}
.page-hero .corner-motif{position:absolute;width:140px;height:140px;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23D4A24C' stroke-width='1'><path d='M70 6 L88 24 L70 42 L52 24 Z'/><path d='M70 42 L88 60 L70 78 L52 60 Z'/><path d='M70 78 L88 96 L70 114 L52 96 Z'/><path d='M34 24 L52 24'/><path d='M88 24 L106 24'/><circle cx='70' cy='24' r='2.5' fill='%23D4A24C'/><circle cx='70' cy='60' r='2.5' fill='%23D4A24C'/><circle cx='70' cy='96' r='2.5' fill='%23D4A24C'/></svg>");}

/* Crumbs */
.crumbs{font-size:13px;color:rgba(253,251,247,.75);}
.crumbs a:hover{color:#D4A24C;}
.crumbs .sep{margin:0 8px;color:rgba(253,251,247,.4);}

/* Animations */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1;transform:none;}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}

/* Range slider */
input[type="range"].range{
  -webkit-appearance:none;appearance:none;background:transparent;width:100%;height:24px;
}
input[type="range"].range::-webkit-slider-runnable-track{height:4px;background:#E8DEC9;border-radius:999px;}
input[type="range"].range::-moz-range-track{height:4px;background:#E8DEC9;border-radius:999px;}
input[type="range"].range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0F5132;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);margin-top:-7px;cursor:pointer;}
input[type="range"].range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0F5132;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;}

/* Checkbox custom */
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#3A3833;cursor:pointer;user-select:none;}
.chk input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid #E8DEC9;border-radius:5px;background:#fff;position:relative;cursor:pointer;transition:background .15s ease, border-color .15s ease;}
.chk input:checked{background:#0F5132;border-color:#0F5132;}
.chk input:checked::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* Step indicator */
.step{display:flex;align-items:center;gap:10px;}
.step-circle{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #E8DEC9;color:#8E8A7E;font-size:13px;font-weight:700;}
.step.is-active .step-circle{background:#0F5132;border-color:#0F5132;color:#FDFBF7;}
.step.is-done .step-circle{background:#C28F36;border-color:#C28F36;color:#1B1A17;}
.step-line{flex:1;height:1.5px;background:#E8DEC9;}
.step.is-done + .step .step-line, .step.is-done .step-line{background:#C28F36;}

/* Util */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Readable measure for body copy. Apply to long-form prose containers
   (legal pages, FAQ answers, listing descriptions, agency 'O nama' blocks).
   ~65ch ≈ 600px at body size — Robert Bringhurst's Elements of Typographic Style sweet spot. */
.prose,
article.prose,
[data-prose] p,
[data-prose] li{
  max-width:65ch;
}
/* When a heading is full-width but its prose paragraph below is constrained */
.prose-narrow > p,
.prose-narrow > ul,
.prose-narrow > ol,
.prose-narrow > h2,
.prose-narrow > h3{
  max-width:65ch;
}