/* GENERATED by tools/build-app-brochure.js from Kırmızı-Broşür-Ext/brochure.css. Do not edit. */

#page {
  --red: #d0121b;
  --yellow: #F3B942;   /* emlaktoolbox sand yellow (phone icon) */
  --dark: #1e1f22;
  --dark-2: #2a2b2f;
  --ink: #2b2d31;
  --muted: #5f6368;
  --gray-box: #efefef;
}
:where(#page) *, :where(#page) { box-sizing: border-box; margin: 0; padding: 0; }
#page { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: 'Barlow', 'Segoe UI', Arial, sans-serif; color: var(--ink); }
/* ── Floating tip: "Metni değiştir" on hover, "Kaydedildi ✓" after an edit ── */
.edit-tip {
  position: fixed; z-index: 20; pointer-events: none;
  background: rgba(0, 0, 0, 0.78); color: #fff;
  font: 600 12px/1 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  transform: translateY(-100%);
}
.edit-tip::after {
  content: ''; position: absolute; left: 12px; bottom: -5px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(0, 0, 0, 0.78);
}
.edit-tip.saved { background: #2F6B25; }
.edit-tip.saved::after { border-top-color: #2F6B25; }
.edit-tip.wide { white-space: normal; max-width: 250px; line-height: 1.4; }

/* Print preview: the sheet floats on the desk with room around it (fitPreview keeps 32 px a side). */
@media screen { body > .page { margin-top: 32px; } }
/* While building / restoring edits: dimmed and not editable. */
body.loading > .page { pointer-events: none; opacity: 0.55; }
body.loading .toolbar::after {
  content: 'Broşür hazırlanıyor…';
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  background: #232427; color: #fff; font: 700 12px 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}

.empty { max-width: 520px; margin: 80px auto; text-align: center; font-size: 16px; color: #C9C6BC; }

/* ── Confirm dialog (Güncelle) ─────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(20, 21, 24, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
.modal-card { background: #FFFDF6; color: #232427; border-radius: 18px; padding: 24px 24px 20px; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.modal-card h2 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.modal-card p { font-size: 14px; line-height: 1.5; color: #4A463C; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.modal-btn { border: none; border-radius: 999px; padding: 10px 18px; font: 700 14px 'Plus Jakarta Sans', 'Segoe UI', sans-serif; cursor: pointer; background: #EFE7D2; color: #232427; }
.modal-btn-primary { background: #A92B31; color: #fff; }


/* ── Page ──────────────────────────────────────────────────────────────── */
.page {
  width: 210mm; height: 297mm;
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 136mm 52mm 56mm 53mm;
  /* thin light edge so the dark footer still reads as the sheet's border */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.35), 0 22px 50px rgba(0,0,0,0.45);
}
/* Frames are fixed: whatever the listing text or photo size, no section may grow into the next. */
.page > * { min-height: 0; overflow: hidden; }
.hero, .strip { grid-template-rows: 100%; }
.hero-photo, .strip-photo { height: 100%; min-height: 0; }
.hero-panel { min-height: 0; overflow: hidden; }

[contenteditable]:hover { outline: 1px dashed rgba(208,18,27,0.5); outline-offset: 1mm; }
[contenteditable]:focus { outline: 1px solid var(--red); outline-offset: 1mm; }

.photo-slot {
  background: #cfd2d6;
  cursor: default;
  overflow: hidden;
}
.photo-slot { position: relative; }
/* Framing (Kadraj): scroll to zoom, drag to pan; the percentage transform keeps
   the photo covering the slot, so panning/zooming out never shows a gap. */
.photo-slot.framing { cursor: grab; }
.photo-slot.framing.panning { cursor: grabbing; }
.photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Hover tools: Değiştir · Kadraj · Temizle. Kadraj/Temizle end with Kaydet/İptal
   at the bottom-right. Screen only. */
.photo-ui { position: absolute; inset: 0; pointer-events: none; }
.photo-ui > * { pointer-events: auto; }
.photo-tools, .photo-confirm { position: absolute; display: flex; gap: 1.6mm; }
/* Three tools stacked, dead centre of the photo. */
.photo-tools { left: 50%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; opacity: 0; transition: opacity 0.15s; }
.photo-slot:hover:not(.framing):not(.busy):not(.confirming) .photo-tools { opacity: 1; }
.photo-ui.no-change [data-act="change"] { display: none; }
.photo-confirm { right: 2.8mm; bottom: 2.8mm; display: none; }
.photo-slot.confirming:not(.framing) .photo-confirm { display: flex; }
/* Kadraj (Zoom): a small animated mouse hint, with Vazgeç/Kaydet below it. */
.photo-frame { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 3.2mm; pointer-events: none; }
.photo-slot.framing .photo-frame { display: flex; }
.photo-frame-actions { display: flex; gap: 1.6mm; pointer-events: auto; }
.mouse { box-sizing: border-box; width: 7mm; height: 11mm; border: 0.5mm solid rgba(255,255,255,0.9); border-radius: 4mm; background: rgba(0,0,0,0.35); position: relative; }
.mouse i { position: absolute; left: 50%; top: 1.7mm; width: 1mm; height: 2.4mm; margin-left: -0.5mm; border-radius: 1mm; background: #fff; animation: mouse-wheel 1.5s ease-in-out infinite; }
@keyframes mouse-wheel { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(4mm); } }
.photo-status { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; color: #fff; font: 700 3.4mm/1.35 'Barlow', sans-serif; text-shadow: 0 0.5mm 2.4mm rgba(0,0,0,0.75); }
.photo-slot.busy .photo-status { display: block; }
.photo-ui button {
  border: 0.3mm solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font: 700 2.9mm/1 'Barlow', sans-serif;
  padding: 1.9mm 3.6mm; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.photo-ui button:hover { background: rgba(0, 0, 0, 0.82); }
/* The big (hero) photo's tools and its label are twice the small photos'. */
.hero-photo .photo-tools { gap: 3.2mm; }
.hero-photo .photo-tools button { font-size: 5.8mm; padding: 3.8mm 7.2mm; }
.hero-photo .photo-tag { font-size: 4.35mm; padding: 1.8mm 3.6mm; }
.photo-ui.no-ai [data-act="clean"] { display: none; }
/* Photo source label — one format everywhere: bottom centre, 2px corners, 80%
   opacity, font 3/4 of the Düzenle button. Purple = listing photo,
   yellow = uploaded, green = cleaned. */
.photo-tag {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; white-space: nowrap; pointer-events: none;
  background: rgba(92, 74, 122, 0.8); color: #fff;
  font: 700 2.2mm/1 'Barlow', sans-serif; padding: 1.2mm 2.6mm; border-radius: 2.2mm 2.2mm 0 0;
  opacity: 0; transition: opacity 0.15s;
}
.photo-tag.cleaned { background: rgba(47, 138, 58, 0.8); }
.photo-tag.uploaded { background: rgba(243, 185, 66, 0.8); color: var(--ink); }
.photo-slot:hover:not(.framing):not(.confirming) .photo-tag { opacity: 1; }
/* After a cleanup: a centered yellow "Temizlendi ✓" for a moment (no Kaydet). */
.photo-done {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  background: var(--yellow); color: var(--ink);
  font: 700 3.2mm/1 'Barlow', sans-serif; padding: 2.4mm 4.8mm; border-radius: 999px;
  box-shadow: 0 1.5mm 5mm rgba(0, 0, 0, 0.4);
}
.photo-done[hidden] { display: none; }

/* ── Photo lightbox: the full photo (original proportions) with the tools ─── */
.photo-lb { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: rgba(15, 16, 19, 0.86); }
.photo-lb[hidden] { display: none; }
.photo-lb-close { position: absolute; top: 16px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: #fff; font: 700 18px/1 'Barlow', sans-serif; cursor: pointer; }
.photo-lb-close:hover { background: rgba(255, 255, 255, 0.26); }
.photo-lb-stage { position: relative; display: inline-block; }
.photo-lb-img { display: block; max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.photo-lb-ba { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; }
.photo-lb-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* The same split clips the cleaned image and both label layers (the curtain
   covers them, like the app's before/after). */
.photo-lb-after { clip-path: inset(0 0 0 var(--lb-split, 50%)); }
.photo-lb-tags { position: absolute; inset: 0; pointer-events: none; }
.photo-lb-tags-l { clip-path: inset(0 calc(100% - var(--lb-split, 50%)) 0 0); }
.photo-lb-tags-r { clip-path: inset(0 0 0 var(--lb-split, 50%)); }
.photo-lb-split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; cursor: ew-resize; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.photo-lb-split span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font: 700 16px/1 'Barlow', sans-serif; }
/* Before/after labels: same format, clipped by the split (left purple = the
   listing photo, right green = the cleaned one). */
.photo-lb-lbl { position: absolute; top: 0; background: rgba(92, 74, 122, 0.8); color: #fff; font: 700 clamp(13px, 1.7vw, 30px)/1 'Barlow', sans-serif; padding: 0.45em 0.95em; border-radius: 8px 8px 0 0; }
.photo-lb-tags-r .photo-lb-lbl { background: rgba(47, 138, 58, 0.8); }
.photo-lb-tags-l .photo-lb-lbl { left: 0; }
.photo-lb-tags-r .photo-lb-lbl { right: 0; }
/* Solid yellow pill with our cycling words while a cleanup runs. */
.photo-lb-progress { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--yellow); color: var(--ink); font: 700 3.4mm/1 'Barlow', sans-serif; padding: 2.6mm 5mm; border-radius: 999px; box-shadow: 0 2mm 6mm rgba(0, 0, 0, 0.4); pointer-events: none; white-space: nowrap; }
.photo-lb-progress[hidden] { display: none; }
.photo-lb-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.photo-lb-center > * { pointer-events: auto; }
.photo-lb-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Both tools: black on white, hover turns them yellow/black. */
.photo-lb-actions button { border: 0.3mm solid transparent; background: #14151A; color: #fff; font: 700 3mm/1 'Barlow', sans-serif; padding: 2.4mm 4.6mm; border-radius: 999px; cursor: pointer; }
.photo-lb-actions button:hover { background: var(--yellow); color: var(--ink); }
/* Source label: same format as the sheet (bottom centre, 2px corners, 80%). */
.photo-lb-tag { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: max-content; background: rgba(92, 74, 122, 0.8); color: #fff; font: 700 clamp(13px, 1.7vw, 30px)/1 'Barlow', sans-serif; padding: 0.45em 0.95em; border-radius: 8px 8px 0 0; }
.photo-lb-tag.cleaned { background: rgba(47, 138, 58, 0.8); }
.photo-lb-tag.uploaded { background: rgba(243, 185, 66, 0.8); color: var(--ink); }
.photo-lb-center[hidden], .photo-lb-ba[hidden], .photo-lb-tag[hidden] { display: none; }
.print-job .photo-ui { display: none; }

/* Side arrows cycle the photos on hover (no "Değiştir" button). */
.photo-ui.no-change .photo-arrow { display: none; }
.photo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 13mm; height: 13mm; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 0.4mm solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
}
.photo-arrow::before {
  content: ''; display: block; width: 3.8mm; height: 3.8mm;
  border-left: 0.75mm solid #fff; border-bottom: 0.75mm solid #fff;
}
.photo-prev { left: 3mm; }
.photo-next { right: 3mm; }
.photo-prev::before { transform: rotate(45deg); }
.photo-next::before { transform: rotate(-135deg); }
.photo-slot:hover:not(.framing):not(.busy):not(.confirming) .photo-arrow { opacity: 1; }
.photo-arrow:hover { background: rgba(0, 0, 0, 0.85); }
/* Kadraj: the photo can't be swapped or cleaned while framing — the arrows and
   tools stop reacting (only Vazgeç/Kaydet do). */
.photo-slot.framing .photo-arrow, .photo-slot.framing .photo-tools { opacity: 0; pointer-events: none; }

/* AI cleanup: the "1 kredi" confirm modal and the "Temizleme X/40" counter. */
.photo-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(20, 21, 24, 0.55); }
.photo-modal[hidden] { display: none; }
.photo-modal-card { background: var(--yellow); color: var(--ink); border-radius: 4mm; padding: 6mm 7mm; max-width: 72mm; text-align: center; box-shadow: 0 6mm 18mm rgba(0, 0, 0, 0.35); }
.photo-modal-text { font: 700 3.4mm/1.5 'Barlow', sans-serif; margin-bottom: 4mm; white-space: pre-line; }
.photo-modal-linkline { margin: -2mm 0 4mm; }
.photo-modal-link { display: inline-block; max-width: 100%; color: var(--ink); font: 600 2.9mm/1.4 'Barlow', sans-serif; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.photo-modal-link:hover { opacity: 0.7; }
.photo-modal-actions { display: flex; gap: 2mm; justify-content: center; }
.photo-modal-actions button { border: 0.3mm solid rgba(35, 36, 39, 0.25); background: #fff; color: var(--ink); font: 700 3mm/1 'Barlow', sans-serif; padding: 2.2mm 4mm; border-radius: 999px; cursor: pointer; }
/* Cancel = black on white text; actions = white on ink (no green). */
.photo-modal-actions button[data-act="accept"] { background: #fff; color: var(--ink); border-color: var(--ink); }
.photo-modal-actions button[data-act="accept"]:hover { background: var(--yellow-soft, #F7E7C0); }
.photo-modal-actions button[data-act="cancel"] { background: #14151A; color: #fff; border-color: #14151A; }
.photo-modal-actions button[data-act="cancel"]:hover { background: #000; }
.photo-modal-actions button[data-tone="clean"] { background: #fff; color: var(--ink); border-color: var(--ink); }
.photo-modal-actions button[data-tone="clean"]:hover { background: var(--yellow-soft, #F7E7C0); }
.ai-counter { margin: 2mm auto 3mm; width: max-content; background: rgba(35, 36, 39, 0.85); color: var(--yellow); font: 700 2.9mm/1 'Barlow', sans-serif; padding: 1.8mm 3.8mm; border-radius: 999px; }
.print-job .ai-counter, .print-job .photo-modal, .print-job .photo-lb { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 141mm 69mm; }
.hero-panel {
  background: linear-gradient(160deg, var(--dark-2), var(--dark) 55%);
  color: #fff;
  padding: 8mm 7mm 5mm 8mm;
  display: flex; flex-direction: column;
  min-width: 0;
}
.deal {
  font-size: 3.6mm; font-weight: 500; letter-spacing: 0.22em;
  display: inline-block; align-self: flex-start;
  padding-bottom: 1.6mm; margin-bottom: 4mm;
  border-bottom: 0.8mm solid var(--red);
}
.big-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700; font-size: 13mm; line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 3mm;
  white-space: nowrap;
}
.district { font-size: 5.2mm; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1mm; white-space: nowrap; }
.locality { font-size: 4.2mm; font-weight: 400; line-height: 1.28; color: #e6e6e6; margin-bottom: 4mm; }
.price {
  background: var(--red);
  border-radius: 1.4mm;
  font-weight: 700; font-size: 8.4mm; line-height: 1;
  text-align: center;
  padding: 3mm 2mm;
  margin-bottom: 4.5mm;
  white-space: nowrap;
}

.stats {
  display: grid; grid-template-columns: 1fr;   /* single column list */
  row-gap: 2.2mm;
  margin-bottom: 4mm;
}

.listing-link {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 3mm;
  background: var(--red);
  border-radius: 1.4mm;
  padding: 2.6mm 3mm;
  color: #fff; text-decoration: none;
  font-size: 5.6mm; font-weight: 600;
}
.listing-link[hidden] { display: none; }
.listing-link svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ll-icon { width: 6mm; height: 6mm; }
.ll-chevron { width: 4.2mm; height: 4.2mm; margin-left: auto; }
.listing-link span { margin-right: auto; }
.stat { display: flex; align-items: center; gap: 1.8mm; min-width: 0; }
/* Bullet instead of the old icon; only shown when the row has content. */
.stat-dot { width: 1.5mm; height: 1.5mm; border-radius: 50%; background: #fff; flex-shrink: 0; }
.stat:not(.has-value) .stat-dot { visibility: hidden; }
.stat-text { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 2mm; }
.stat-value { font-size: 3.2mm; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.stat-label { font-size: 2.3mm; color: #d8d8d8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Photo strip ───────────────────────────────────────────────────────── */
.strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.8mm;
  padding: 3mm 5.5mm;
}
.strip-photo { border-radius: 0.8mm; box-shadow: 0 0.4mm 1.4mm rgba(0,0,0,0.15); }

/* ── Description + highlights ─────────────────────────────────────────── */
.mid { display: grid; grid-template-columns: 1fr 76mm; }
.about { padding: 6mm 6mm 4mm 6.5mm; min-width: 0; overflow: hidden; }
.kicker {
  font-size: 4.2mm; font-weight: 500; letter-spacing: 0.16em;
  color: var(--ink);
  display: flex; align-items: center; gap: 3mm;
  margin-bottom: 3.6mm;
}
.kicker::before { content: ''; width: 6mm; height: 0.7mm; background: var(--red); flex-shrink: 0; }
.kicker-sm { font-size: 3.1mm; letter-spacing: 0.14em; margin-bottom: 3mm; }
.about-text { font-size: 3.9mm; line-height: 1.55; color: #3c3f44; }

.highlights {
  background: var(--gray-box);
  margin-top: 2.4mm;
  padding: 4.2mm 5mm 2mm 7mm;
  overflow: hidden;
}
.checks { list-style: none; }
.checks li {
  position: relative;
  padding-left: 7mm;
  font-size: 3.3mm; line-height: 1.25;
  margin-bottom: 1.45mm;
}
.checks li::before {
  content: '';
  position: absolute; left: 0; top: 0.5mm;
  width: 4mm; height: 3mm;
  background: var(--red);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path d="M1.5 6.5 6 10.5 14.5 1.5" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path d="M1.5 6.5 6 10.5 14.5 1.5" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

/* ── Agent footer ──────────────────────────────────────────────────────── */
.agent {
  background: linear-gradient(160deg, var(--dark-2), var(--dark) 60%);
  color: #fff;
  display: flex; align-items: center;
  padding: 5mm 6mm 5mm 8mm;
  gap: 5mm;
}
.agent-photo {
  width: 42mm; height: 43mm; flex-shrink: 0;
  border-radius: 2.4mm;
  background: #3a3b40 center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 3mm; color: #9aa0a6;
  cursor: default;   /* read-only: the identity card is edited in Kimlik Kartım */
}
.agent-photo.has-img span { display: none; }
.agent-info { flex: 1; min-width: 0; }
.agent-role {
  font-size: 2.8mm; letter-spacing: 0.22em; color: #d8d8d8;
  display: flex; align-items: center; gap: 2.4mm;
  margin-bottom: 2.6mm;
}
.agent-role::before { content: ''; width: 7mm; height: 0.6mm; background: var(--red); }
.agent-name { font-size: 10mm; font-weight: 700; line-height: 1.1; margin-bottom: 1.4mm; white-space: nowrap; }
.agent-office { font-size: 4.2mm; color: #e6e6e6; margin-bottom: 3mm; white-space: nowrap; }
.agent-office:empty { display: none; }
.agent-phone { display: flex; align-items: center; gap: 3mm; font-size: 6.4mm; font-weight: 700; white-space: nowrap; margin-top: 2mm; }
.phone-icon { width: 6mm; height: 6mm; flex-shrink: 0; fill: var(--yellow); }

.agent-divider { width: 0.25mm; align-self: stretch; margin: 4mm 0; background: rgba(255,255,255,0.22); }

.qr { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-left: 3mm; }
.qr-code { width: 40mm; height: 40mm; background: #fff; border-radius: 2mm; padding: 2.4mm; }
.qr-code svg { display: block; width: 100%; height: 100%; }

/* No QR (no profile URL): photo | office, role, name | phone, a thin line between. */
.agent.no-qr .agent-info {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "office phone" "role phone" "name phone";
  align-content: center; column-gap: 7mm;
}
.agent.no-qr .agent-office { grid-area: office; margin: 0 0 2.4mm; }
.agent.no-qr .agent-role { grid-area: role; margin: 0 0 1.6mm; }
.agent.no-qr .agent-name { grid-area: name; margin: 0; }
.agent.no-qr .agent-phone {
  grid-area: phone; margin: 0; align-self: stretch;
  border-left: 0.25mm solid rgba(255,255,255,0.22); padding: 3mm 0 3mm 7mm;
}

/* İlan Linki off Dubleks: faded on screen (tip explains), left out of the PDF. */
.link-locked .listing-link { opacity: 0.55; }
@media print { .page.link-locked .listing-link { display: none !important; } }
[hidden] { display: none !important; }

/* Studio (free) branding band at the foot of the sheet. #page.branded makes room
   by trimming the agent row (53 → 45 mm) and adding the 8 mm band; Dubleks has
   neither the band nor the extra row (white-label). */
.made-band { display: none; }
#page.branded { grid-template-rows: 136mm 52mm 56mm 45mm 8mm; }
#page.branded .made-band {
  display: flex; align-items: center; justify-content: center; gap: 2.4mm;
  background: #2A2B2F; color: #fff; text-decoration: none;
  padding: 0 8mm; font-size: 3.1mm; font-weight: 600;
}
.made-logo { display: inline-flex; align-items: center; gap: 1.4mm; }
.made-band b { color: #F2C12E; font-weight: 800; }
.made-icon { width: 5mm; height: 5mm; flex-shrink: 0; display: block; }