/* Extra features (compare, WhatsApp button, print) + four alternative visual designs.
   Design is chosen with <html data-design="0..4">; 0 is the default minimal look from style.css. */

/* ---------- compare, filters, floating buttons ---------- */
.filters-r { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters-r select { width: auto; min-width: 150px; padding-block: 10px; }

.card-main { display: flex; flex-direction: column; flex: 1; }
.cmp { display: flex; align-items: center; gap: 10px; padding: 13px 22px; border: 0; border-top: 1px solid var(--line); background: none; font-size: 14px; color: var(--muted); text-align: start; transition: color 0.2s, background 0.2s; }
.cmp:hover { color: var(--ink); background: var(--surface-2); }
.cmp .box { width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 4px; display: inline-grid; place-items: center; flex: none; }
.cmp.on { color: var(--ink); }
.cmp.on .box { background: var(--accent); border-color: var(--accent); }
.cmp.on .box::after { content: "✓"; font-size: 11px; font-weight: 800; color: var(--accent-ink); line-height: 1; }

#bars { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; pointer-events: none; }
#bars > * { pointer-events: auto; }
.wa-fab {
  position: fixed; inset-inline-end: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
.cmp-bar {
  position: fixed; inset-inline: 0; margin-inline: auto; bottom: 20px; width: fit-content; max-width: calc(100% - 100px);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 10px 10px 20px; border-radius: 999px;
  background: var(--ink); color: var(--bg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.cmp-bar .btn { padding: 9px 18px; }
.cmp-bar .clr { background: none; border: 0; color: inherit; opacity: 0.7; font-size: 14px; padding: 6px 8px; }
.cmp-bar .clr:hover { opacity: 1; }
.cmp-bar .warn { color: var(--accent); font-size: 14px; }
.design-bar {
  position: fixed; inset-inline: 0; margin-inline: auto; top: calc(var(--header-h) + 10px); width: fit-content; max-width: calc(100% - 24px);
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; z-index: 70;
}
.design-bar span { padding: 0 10px; color: var(--muted); }
.design-bar button { border: 0; background: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; color: var(--muted); }
.design-bar button:hover { color: var(--ink); }
.design-bar button.on { background: var(--ink); color: var(--bg); }
.design-bar .x { padding: 7px 10px; }

.cmp-wrap { overflow-x: auto; margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { vertical-align: bottom; position: relative; }
.cmp-table thead img { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); margin-bottom: 10px; }
.cmp-table tbody th { color: var(--muted); font-weight: 500; width: 200px; }
.cmp-table td { font-weight: 600; }
.cmp-table tr:last-child > * { border-bottom: 0; }
.cmp-x { position: absolute; inset-inline-end: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }

.actions-row { display: flex; gap: 12px; flex-wrap: wrap; }

@media print {
  .header, .footer, #bars, #header, #footer, .crumbs, .no-print, .thumbs, .cta-band { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding: 16px 0 !important; }
  .detail { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   DESIGN 1 — Endüstriyel: concrete / black, hazard stripes, square, condensed caps
   ============================================================ */
:root[data-design="1"] {
  --bg: #e8e7e3; --surface: #f6f5f2; --surface-2: #dcdbd6; --ink: #0c0c0c; --muted: #5d5c58; --line: rgba(12, 12, 12, 0.22);
  --accent: #ffc20e; --accent-ink: #0c0c0c; --radius: 2px;
  --font: "Bahnschrift", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}
:root[data-design="1"][data-theme="dark"] {
  --bg: #0a0a0a; --surface: #151515; --surface-2: #202020; --ink: #f4f3ef; --muted: #9b9a95; --line: rgba(255, 255, 255, 0.2);
}
[data-design="1"] h1, [data-design="1"] h2, [data-design="1"] h3, [data-design="1"] .logo { text-transform: uppercase; letter-spacing: 0.01em; font-weight: 700; }
[data-design="1"] .hero h1 { letter-spacing: -0.01em; line-height: 1; }
[data-design="1"] .btn, [data-design="1"] .pill, [data-design="1"] .nav a, [data-design="1"] .icon-btn, [data-design="1"] .lang-btn, [data-design="1"] .cmp-bar, [data-design="1"] .design-bar { border-radius: 2px; }
[data-design="1"] .btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
[data-design="1"] .hero-visual, [data-design="1"] .gallery-main, [data-design="1"] .about-img, [data-design="1"] .review-form, [data-design="1"] .cta-band, [data-design="1"] .cmp-table thead img { border-radius: 2px; }
[data-design="1"] .hero::after, [data-design="1"] .footer::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 12px;
  background: repeating-linear-gradient(-45deg, #ffc20e 0 16px, #0c0c0c 16px 32px);
}
[data-design="1"] .footer { position: relative; }
[data-design="1"] .footer::before { top: 0; bottom: auto; }
[data-design="1"] .card, [data-design="1"] .review, [data-design="1"] .value { border-width: 1px; border-top: 4px solid var(--accent); }
[data-design="1"] .card-cat, [data-design="1"] .label { color: var(--ink); }
[data-design="1"] .stat b { font-weight: 700; }

/* ============================================================
   DESIGN 2 — Kurumsal: navy & white, trustworthy, centered hero
   ============================================================ */
:root[data-design="2"] {
  --bg: #f3f6fa; --surface: #ffffff; --surface-2: #e6ecf4; --ink: #0b1f3a; --muted: #55667f; --line: rgba(11, 31, 58, 0.14);
  --accent: #0b5fff; --accent-ink: #ffffff; --radius: 10px;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px rgba(11, 31, 58, 0.08);
}
:root[data-design="2"][data-theme="dark"] {
  --bg: #08121f; --surface: #0e1c2f; --surface-2: #162842; --ink: #e8eef7; --muted: #8fa1ba; --line: rgba(232, 238, 247, 0.14);
  --accent: #4c8dff; --accent-ink: #06101d;
}
[data-design="2"] .btn { border-radius: 8px; }
[data-design="2"] .pill, [data-design="2"] .nav a, [data-design="2"] .cmp-bar, [data-design="2"] .design-bar { border-radius: 8px; }
[data-design="2"] .btn-primary:hover { box-shadow: 0 8px 24px rgba(11, 95, 255, 0.35); }
[data-design="2"] .hero .container { grid-template-columns: 1fr; text-align: center; gap: 48px; }
[data-design="2"] .hero p.sub { margin-inline: auto; }
[data-design="2"] .hero .actions { justify-content: center; }
[data-design="2"] .hero h1 { font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; margin-inline: auto; }
[data-design="2"] .hero-visual { max-width: 640px; margin-inline: auto; width: 100%; }
[data-design="2"] .hero::before { -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 60%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 50% 60%, #000, transparent 75%); }
[data-design="2"] .label::before { border-radius: 50%; }
[data-design="2"] .stats { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 8px; }
[data-design="2"] .stat b { color: var(--accent); }
[data-design="2"] .cta-band { background: linear-gradient(135deg, #0b2a5c, #0b5fff); color: #fff; }
[data-design="2"] .cta-band::after { background: rgba(255, 255, 255, 0.12); }
[data-design="2"] .cta-band .btn-primary { background: #fff; color: #0b2a5c; }
[data-design="2"] .logo-mark::after { background: #fff; }

/* ============================================================
   DESIGN 3 — Editoryal: warm paper, serif display, generous, soft
   ============================================================ */
:root[data-design="3"] {
  --bg: #f3ede4; --surface: #fbf7f0; --surface-2: #e9dfd0; --ink: #2a2118; --muted: #7b6c5b; --line: rgba(42, 33, 24, 0.16);
  --accent: #c4512b; --accent-ink: #ffffff; --radius: 22px;
  --font: "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --shadow: 0 2px 4px rgba(42, 33, 24, 0.04), 0 18px 40px rgba(42, 33, 24, 0.08);
}
:root[data-design="3"][data-theme="dark"] {
  --bg: #17120d; --surface: #211a13; --surface-2: #2c231a; --ink: #f0e6d8; --muted: #a89983; --line: rgba(240, 230, 216, 0.16);
  --accent: #e0714a; --accent-ink: #1a0f08;
}
[data-design="3"] h1, [data-design="3"] h2, [data-design="3"] h3, [data-design="3"] .lead, [data-design="3"] .stat b, [data-design="3"] .logo { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; }
[data-design="3"] .logo { letter-spacing: 0.02em; text-transform: none; font-size: 22px; }
[data-design="3"] .hero h1 { font-size: clamp(44px, 7.2vw, 104px); line-height: 0.98; font-weight: 400; letter-spacing: -0.035em; }
[data-design="3"] .hero h1::first-line { font-style: italic; }
[data-design="3"] .label { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0.01em; font-size: 15px; }
[data-design="3"] .label::before { width: 6px; height: 6px; border-radius: 50%; }
[data-design="3"] .btn { border-radius: 999px; }
[data-design="3"] .card { border: 0; box-shadow: var(--shadow); }
[data-design="3"] .card-img { margin: 10px 10px 0; border-radius: calc(var(--radius) - 8px); }
[data-design="3"] .card h3 { font-size: 25px; }
[data-design="3"] .review, [data-design="3"] .value { border: 0; box-shadow: var(--shadow); }
[data-design="3"] .section { padding-block: 128px; }
[data-design="3"] .section.alt { background: var(--surface-2); border: 0; }
[data-design="3"] .hero-visual { border-radius: 200px 200px var(--radius) var(--radius); }
[data-design="3"] .stats { border: 0; }
[data-design="3"] .stat { border-inline-end: 0; }
[data-design="3"] .cta-band { background: var(--accent); color: var(--accent-ink); border-radius: 40px; }
[data-design="3"] .cta-band::after { background: rgba(255, 255, 255, 0.2); }
[data-design="3"] .cta-band .btn-primary { background: var(--accent-ink); color: var(--accent); }
[data-design="3"] .logo-mark { border-radius: 50%; }
[data-design="3"] .logo-mark::after { border-radius: 50%; inset: 7px; }
@media (max-width: 700px) { [data-design="3"] .section { padding-block: 80px; } [data-design="3"] .hero-visual { border-radius: 120px 120px var(--radius) var(--radius); } }

/* ============================================================
   DESIGN 4 — Brütal: thick black borders, offset shadows, lime, mono
   ============================================================ */
:root[data-design="4"] {
  --bg: #f6f4ec; --surface: #ffffff; --surface-2: #ece9dd; --ink: #000000; --muted: #3e3e3a; --line: #000000;
  --accent: #c6ff00; --accent-ink: #000000; --radius: 0px;
  --font: "Segoe UI", system-ui, sans-serif;
  --shadow: 6px 6px 0 #000;
}
:root[data-design="4"][data-theme="dark"] {
  --bg: #000000; --surface: #101010; --surface-2: #1c1c1c; --ink: #ffffff; --muted: #c9c9c4; --line: #ffffff;
  --shadow: 6px 6px 0 #c6ff00;
}
[data-design="4"] h1, [data-design="4"] h2, [data-design="4"] h3, [data-design="4"] .logo, [data-design="4"] .stat b { font-family: var(--mono); text-transform: uppercase; font-weight: 800; letter-spacing: -0.03em; }
[data-design="4"] .hero h1 { font-size: clamp(38px, 6.2vw, 92px); line-height: 0.98; }
[data-design="4"] .hero h1 .mark, [data-design="4"] h1 { background: none; }
[data-design="4"] .header { background: var(--bg); backdrop-filter: none; border-bottom: 3px solid var(--ink); }
[data-design="4"] .btn, [data-design="4"] .pill, [data-design="4"] .nav a, [data-design="4"] .icon-btn, [data-design="4"] .lang-btn, [data-design="4"] .cmp-bar, [data-design="4"] .design-bar, [data-design="4"] .avatar { border-radius: 0; }
[data-design="4"] .btn { border: 3px solid var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 4px 4px 0 var(--ink); }
[data-design="4"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
[data-design="4"] .btn-primary { background: var(--accent); color: var(--accent-ink); }
[data-design="4"] :root[data-theme="dark"] .btn, :root[data-theme="dark"][data-design="4"] .btn { box-shadow: 4px 4px 0 var(--accent); }
[data-design="4"] .btn-dark { background: var(--ink); color: var(--bg); }
[data-design="4"] .nav a.active { background: var(--accent); color: var(--accent-ink); }
[data-design="4"] .pill, [data-design="4"] .icon-btn, [data-design="4"] input, [data-design="4"] select, [data-design="4"] textarea { border: 2px solid var(--ink); }
[data-design="4"] .pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); }
[data-design="4"] .card, [data-design="4"] .review, [data-design="4"] .value, [data-design="4"] .hero-visual, [data-design="4"] .gallery-main, [data-design="4"] .review-form, [data-design="4"] .about-img, [data-design="4"] .cmp-wrap, [data-design="4"] .stats {
  border: 3px solid var(--ink); border-radius: 0; box-shadow: var(--shadow);
}
[data-design="4"] .card:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--ink); }
:root[data-theme="dark"][data-design="4"] .card:hover { box-shadow: 10px 10px 0 var(--accent); }
[data-design="4"] .card-img, [data-design="4"] .card-specs, [data-design="4"] .cmp { border-color: var(--ink); }
[data-design="4"] .card-img { border-bottom: 3px solid var(--ink); }
[data-design="4"] .stat { border-inline-end: 3px solid var(--ink); }
[data-design="4"] .stats { box-shadow: none; border-inline: 0; }
[data-design="4"] .label { font-weight: 800; color: var(--ink); }
[data-design="4"] .label::before { width: 12px; height: 12px; border-radius: 0; border: 2px solid var(--ink); }
[data-design="4"] .hero::before { opacity: 0.5; background-size: 48px 48px; }
[data-design="4"] .section.alt { background: var(--accent); border-block: 3px solid var(--ink); }
[data-design="4"] .section.alt .sec-head p, [data-design="4"] .section.alt .label { color: #000; }
[data-design="4"] .section.alt .card, [data-design="4"] .section.alt .review { color: var(--ink); }
:root[data-theme="dark"][data-design="4"] .section.alt { color: #000; }
[data-design="4"] .cta-band { background: var(--accent); color: #000; border: 3px solid var(--ink); border-radius: 0; box-shadow: var(--shadow); }
[data-design="4"] .cta-band::after { display: none; }
[data-design="4"] .cta-band .btn-primary { background: #000; color: var(--accent); }
[data-design="4"] .footer { border-top: 3px solid var(--ink); }
[data-design="4"] .logo-mark { border-radius: 0; border: 2px solid var(--ink); }
[data-design="4"] .rate label { color: var(--muted); }
[data-design="4"] .review .stars .off { color: rgba(127, 127, 127, 0.4); }