:root{
  --paper:#F3F0FF;
  --paper-card:#FFFFFF;
  --ink:#241C3D;
  --ink-soft:#6E6690;
  --line: #E1D9FA;
  --rent:#0EA98E;
  --rent-soft:#D6F5EE;
  --sale:#FF6250;
  --sale-soft:#FFE1DC;
  --focus:#6C4CF1;
  --grad-a:#6C4CF1;
  --grad-b:#FF6250;
  --grad-c:#0EA98E;
  /* Real visible viewport height. JS keeps this in sync with window.innerHeight
     as a fallback for browsers without dvh support (see below and app.js in each page). */
  --app-height: 100vh;
}
@supports (height: 100dvh){
  :root{ --app-height: 100dvh; }
}
*{box-sizing:border-box;}
html,body{ margin:0; min-height:100%; width:100%; background:var(--paper); color:var(--ink); font-family:'Poppins', sans-serif; }
body.app-shell{ min-height: var(--app-height); }
::selection{ background: var(--rent-soft); }
h1,h2,h3,.display{ font-family:'Poppins', sans-serif; font-weight:700; letter-spacing:-0.01em; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
a{ color: var(--focus); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.hidden{ display:none !important; }

/* ---------- Topbar ---------- */
.topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c)) 1;
  background: var(--paper); flex-shrink:0; z-index: 20;
  position: sticky; top: 0;
}
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); }
.brand .display{ font-size:20px; }
.brand .tag{ font-size:12px; color:var(--ink-soft); }
.topbar-actions{ display:flex; gap:10px; align-items:center; }
.link-btn{ background:none; border:none; color:var(--ink-soft); font-size:12.5px; text-decoration:underline; padding:4px; cursor:pointer; }
.link-btn:hover{ color: var(--focus); }
.count-pill{ font-size:12px; font-weight:600; color:#fff; padding: 5px 12px; border:none; border-radius:999px; background: linear-gradient(135deg, var(--grad-a), var(--grad-c)); }

.btn{
  display:inline-block; border:1px solid var(--focus); background: linear-gradient(135deg, var(--grad-a), #8A6CF5); color: #fff;
  padding: 9px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; text-decoration:none;
  transition: transform .12s ease, box-shadow .15s ease;
}
.btn:hover{ box-shadow: 0 4px 14px rgba(108,76,241,.35); }
.btn:active{ transform: scale(0.97); }
.btn.ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover{ background: var(--paper-card); border-color: var(--focus); color:var(--focus); }
.btn.danger{ background: transparent; color: var(--sale); border-color: var(--sale); }
.btn.danger:hover{ background: var(--sale-soft); }
.btn.success{ background: linear-gradient(135deg, var(--rent), #16D9B7); border-color: var(--rent); }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn.small{ padding:6px 11px; font-size:12px; border-radius:6px; }

/* ---------- Map page layout ---------- */
#mapPage{ position:fixed; inset:0; display:flex; flex-direction:column; }
.map-wrap-full{ position:relative; flex:1; min-height:0; }
.map-wrap-full #map{ position:absolute; inset:0; width:100%; height:100%; background: #E4E0FA; }
.app{ display:grid; grid-template-columns: 340px 1fr; align-items:start; }

.sidebar{ border-right: 1px solid var(--line); background: var(--paper); }
.filters{ padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.filter-row{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background: var(--paper-card); color: var(--ink-soft); padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space:nowrap; }
.chip.active{ color: #fff; border-color: var(--focus); background: var(--focus); }
.chip.rent-active{ background:var(--rent); border-color:var(--rent); color:#fff; }
.chip.sale-active{ background:var(--sale); border-color:var(--sale); color:#fff; }
.search-box{ width:100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-card); font-size: 13px; color: var(--ink); }
.search-box::placeholder{ color: #a89fcf; }

.listing-list{ max-height: 65vh; overflow-y:auto; padding: 8px 10px 24px; }
.empty-state{ padding: 40px 18px; text-align:center; color: var(--ink-soft); }
.empty-state .display{ font-size:17px; margin-bottom:6px; color:var(--ink); }
.empty-state p{ font-size:13px; line-height:1.5; margin:0; }

.listing-card{ background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor:pointer; display:flex; gap:10px; transition: border-color .12s ease, box-shadow .12s ease; }
.listing-card:hover{ border-color: var(--focus); }
.listing-card.selected{ border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.listing-card .thumb{ width:46px; height:46px; border-radius:6px; object-fit:cover; flex-shrink:0; background: var(--line); }
.listing-card .body{ min-width:0; flex:1; }
.lc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.lc-title{ font-size: 13.5px; font-weight:600; line-height:1.3; }
.lc-badge{ font-size: 10px; font-weight:700; padding: 2px 7px; border-radius: 999px; white-space:nowrap; }
.lc-badge.kiralik{ background: var(--rent-soft); color: var(--rent); }
.lc-badge.satilik{ background: var(--sale-soft); color: var(--sale); }
.lc-meta{ font-size:11.5px; color: var(--ink-soft); margin-top:3px; }
.lc-price{ font-size: 12.5px; font-weight:600; margin-top:5px; color:var(--focus); }
.lc-edit-row{ display:flex; gap:6px; margin-top:8px; }

.map-wrap{ position:relative; min-height:0; }
#map, #adminMap{ height:100%; width:100%; background: #E4E0FA; }
.map-wrap #adminMap{ position:absolute; inset:0; width:100%; height:100%; }
.map-hint{ position:absolute; top:14px; left:14px; z-index:410; background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-soft); max-width: 260px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.map-hint strong{ color: var(--ink); }
.legend{ position:absolute; bottom:18px; left:14px; z-index:410; background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--ink-soft); display:flex; gap:14px; }
.legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; }

.pin{ width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid var(--paper-card); box-shadow: 0 1px 4px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.pin.kiralik{ background: linear-gradient(135deg, var(--rent), #16D9B7); }
.pin.satilik{ background: linear-gradient(135deg, var(--sale), #FF8A3D); }
.pin-label{ transform: rotate(45deg); color:#fff; font-size:11px; font-weight:700; }

.leaflet-popup-content-wrapper{ background: var(--paper-card); border-radius: 10px; border:1px solid var(--line); }
.leaflet-popup-content{ margin: 12px 14px; width: 230px !important; }
.leaflet-popup-content p{ margin: 0; }
.leaflet-popup-tip{ background: var(--paper-card); border:1px solid var(--line); }
.pop-photo{ width:100%; height:110px; object-fit:cover; border-radius:6px; margin-bottom:8px; background:var(--line); }
.pop-badge{ font-size: 10.5px; font-weight:700; padding: 2px 7px; border-radius: 999px; display:inline-block; margin-bottom:6px; }
.pop-badge.kiralik{ background: var(--rent-soft); color: var(--rent); }
.pop-badge.satilik{ background: var(--sale-soft); color: var(--sale); }
.pop-title{ font-weight:700; font-size:15px; margin: 0 0 3px; }
.pop-price{ font-size:13px; font-weight:600; color:var(--focus); margin: 0 0 6px; }
.pop-note{ font-size:12px; color:var(--ink-soft); margin:0 0 10px; line-height:1.4; }
.pop-actions{ display:flex; gap:6px; }
.pop-actions .btn{ padding: 6px 10px; font-size:12px; flex:1; text-align:center; color:#fff; }

@media (max-width: 760px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ border-right:none; border-bottom: 1px solid var(--line); }
  .listing-list{ max-height: 40vh; }
  .map-wrap, #map{ min-height: 60vh; }
  .brand .tag{ display:none; }

  /* Keep the marker popup compact so it doesn't dominate the small map area */
  .leaflet-popup-content{ width: 180px !important; margin: 10px 12px; }
  .pop-photo{ height: 70px; margin-bottom:6px; }
  .pop-badge{ font-size: 9.5px; padding: 2px 6px; margin-bottom:4px; }
  .pop-title{ font-size: 13px; margin: 0 0 2px; }
  .pop-price{ font-size: 11.5px; margin: 0 0 4px; }
  .pop-note{ font-size: 10.5px; margin: 0 0 7px; line-height:1.3; }
  .pop-actions .btn{ padding: 5px 8px; font-size: 11px; }
}

/* ---------- Form page (İlan Gönder) ---------- */
.page-scroll{ height:100%; overflow-y:auto; }
.form-shell{ max-width: 520px; margin: 0 auto; padding: 28px 20px 60px; }
.form-shell h1{ font-size:24px; margin: 6px 0 4px; }
.form-shell .sub{ font-size:13.5px; color:var(--ink-soft); margin: 0 0 24px; line-height:1.5; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); text-decoration:none; background:none; border:none; padding:0; margin-bottom:18px; cursor:pointer; }
.back-link:hover{ color:var(--focus); }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{ width:100%; padding: 10px 12px; border:1px solid var(--line); border-radius:8px; background: #fff; font-size: 14px; color: var(--ink); }
.field textarea{ resize:vertical; min-height:70px; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; padding: 10px; border:1px solid var(--line); background:#fff; border-radius:8px; font-size:13.5px; color: var(--ink-soft); font-weight:600; }
.seg button.on{ border-color: var(--focus); color: var(--focus); background: #EFEAFF; }
.photo-input-wrap{ border: 2px dashed var(--line); border-radius: 10px; padding: 16px; text-align:center; background: #fff; }
.photo-input-wrap input[type=file]{ display:none; }
.photo-pick-btn{ display:inline-block; }
.photo-hint{ font-size:11.5px; color: var(--ink-soft); margin-top:8px; }
.photo-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.photo-thumb{ position:relative; width:70px; height:70px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb .rm{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background: rgba(36,28,61,.75); color:#fff; border:none; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
.form-actions{ margin-top: 22px; }
.form-actions .btn{ width:100%; padding: 12px; font-size:14.5px; text-align:center; border:1px solid var(--focus); }
.success-box{ text-align:center; padding: 40px 20px; }
.success-box .emoji{ font-size:40px; margin-bottom:10px; }
.success-box h2{ font-size:20px; margin: 0 0 8px; }
.success-box p{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin:0 0 22px; }
.field-error{ font-size:12px; color: var(--sale); margin-top:5px; }

/* ---------- Admin ---------- */
#adminPage{ position:fixed; inset:0; display:flex; flex-direction:column; }
.login-shell{ flex:1; display:flex; align-items:center; justify-content:center; }
.login-card{ background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 30px; width:320px; max-width: calc(100vw - 32px); box-shadow: 0 12px 40px rgba(108,76,241,.12); }
.login-card h2{ font-size:19px; margin:0 0 4px; }
.login-card .sub{ font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; }
.login-card .field{ margin-bottom:14px; }

.admin-body{ flex:1; min-height:0; display:grid; grid-template-columns: 380px 1fr; }
.admin-tabs{ display:flex; gap:4px; padding: 14px 16px 0; border-bottom: 1px solid var(--line); }
.tab-btn{ background:none; border:none; padding: 10px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); border-bottom: 2px solid transparent; }
.tab-btn.active{ color: var(--focus); border-bottom-color: var(--focus); }
.tab-panel{ flex:1; min-height:0; overflow-y:auto; padding: 12px 16px 30px; }
.admin-left{ border-right:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; min-height:0; }

.submission-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; }
.sub-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.sub-name{ font-weight:700; font-size:14px; }
.sub-meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
.sub-photos{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.sub-photos img{ width:52px; height:52px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; }
.sub-actions{ display:flex; gap:6px; margin-top:10px; }
.sub-actions .btn{ flex:1; text-align:center; }

.lightbox{ position:fixed; inset:0; background:rgba(36,28,61,.8); display:flex; align-items:center; justify-content:center; z-index:2100; }
.lightbox img{ max-width:90vw; max-height:90vh; border-radius:8px; }

.overlay{ position:fixed; inset:0; background: rgba(36,28,61,0.35); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal{ background: var(--paper-card); border:1px solid var(--line); border-radius: 12px; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y:auto; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal h2{ font-size:19px; margin:0 0 4px; }
.modal .sub{ font-size:12.5px; color:var(--ink-soft); margin:0 0 16px; }
.coord-note{ font-size:11.5px; color: var(--ink-soft); margin-top:-8px; margin-bottom:14px; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; }
.modal-actions .btn{ flex:1; text-align:center; }

.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-size:13px; opacity:0; transition: opacity .2s ease, transform .2s ease; z-index: 2500; pointer-events:none; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px){
  .admin-body{ grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .admin-left{ border-right:none; border-bottom:1px solid var(--line); }

  .leaflet-popup-content{ width: 180px !important; margin: 10px 12px; }
  .pop-photo{ height: 70px; margin-bottom:6px; }
  .pop-badge{ font-size: 9.5px; padding: 2px 6px; margin-bottom:4px; }
  .pop-title{ font-size: 13px; margin: 0 0 2px; }
  .pop-price{ font-size: 11.5px; margin: 0 0 4px; }
  .pop-actions .btn{ padding: 5px 8px; font-size: 11px; }
}