/* Yepyeni — inşaat sonrası temizlik teması: taş kömürü + kiremit, Bricolage Grotesque, kolaj ve şerit bant */
:root {
    --ink: #1c1917; --text: #44403c; --muted: #78716c;
    --bg: #fff; --bg-alt: #f7f3ee; --line: #e7e0d8; --card: #fff;
    --r: 14px; --r-sm: 8px; --r-lg: 22px; --btn-r: 999px;
    --shadow: 0 10px 28px rgba(28, 25, 23, .07); --shadow-lg: 0 28px 64px rgba(28, 25, 23, .16);
    --head: 'Bricolage Grotesque', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --head-w: 800; --header: 82px;
    --clay-d: #c2410c;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1; letter-spacing: -.035em; }
h2, .h2 { letter-spacing: -.03em; }
h3 { letter-spacing: -.015em; }
.kicker { color: var(--accent); letter-spacing: .1em; font-weight: 700; }
.btn { font-weight: 700; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--clay-d); }
.btn-outline { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-soft { background: var(--bg-alt); color: var(--ink); }
.btn-soft:hover { background: var(--ink); color: #fff; }

/* Üst çubuk: uyarı bandı çizgisi */
.topbar { background: var(--ink); color: rgba(255, 255, 255, .72); position: relative; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--ink) 12px 24px); }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.brand-mark { background: var(--accent); color: #fff; border-radius: 12px; }
.brand-text strong { font-family: var(--head); font-weight: 800; letter-spacing: -.04em; font-size: 1.6rem; }
.brand-text small { color: var(--muted); letter-spacing: .08em; }
.nav-list > li > a { font-weight: 600; font-size: .93rem; border-radius: 999px; }
.nav-list > li > a.on { background: var(--ink); color: #fff; }
.nav-list > li > a:hover { background: var(--bg-alt); }
.nav-list > li > a.on:hover { background: var(--ink); color: #fff; }
.nav-cta { background: var(--accent); color: #fff; }
.nav-cta:hover { background: var(--clay-d); color: #fff; }

/* Hero: metin + üçlü kolaj + şerit bant */
.hero { position: relative; padding: 60px 0 90px; background: var(--bg-alt); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(28, 25, 23, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 25, 23, .04) 1px, transparent 1px); background-size: 40px 40px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .84rem; margin-bottom: 22px; box-shadow: var(--shadow); }
.hero-eyebrow .ic { color: var(--accent); }
.hero .lead { font-size: 1.1rem; max-width: 540px; }
.hero-prices { display: flex; flex-wrap: wrap; gap: 0; margin: 34px 0 0; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; width: fit-content; max-width: 100%; }
.hero-prices div { padding: 14px 22px; border-right: 1px solid var(--line); }
.hero-prices div:last-child { border-right: 0; }
.hero-prices dt { font-size: .78rem; font-weight: 600; color: var(--muted); }
.hero-prices dd { margin: 0; font-family: var(--head); font-weight: 800; font-size: 1.35rem; color: var(--ink); letter-spacing: -.02em; }
.collage { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.cl { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.cl img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cl-1 { grid-row: 1 / 3; }
.cl-2 { margin-top: 40px; }
.cl-3 { margin-bottom: 40px; }
.cl figcaption { white-space: nowrap; z-index: 1; position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .8rem; }
.cl-1 figcaption { background: var(--accent); color: #fff; }
.tape { position: absolute; left: -12%; right: -12%; bottom: 46%; z-index: 2; padding: 9px 0; background: repeating-linear-gradient(-45deg, #facc15 0 18px, #1c1917 18px 36px); color: transparent; transform: rotate(-8deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); white-space: nowrap; overflow: hidden; font-size: 0; height: 26px; opacity: .92; }

/* Kartlar */
.card { border: 1px solid var(--line); box-shadow: none; border-radius: var(--r-lg); }
.card:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.c-media { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.c-ic { background: var(--accent); color: #fff; border-radius: 12px; }
.svc-card.has-img .c-ic { background: var(--accent); color: #fff; border-radius: 12px; }
.c-meta { background: var(--bg-alt); color: var(--ink); border-radius: 999px; }
.c-price { color: var(--clay-d); }
.c-more { color: var(--ink); }
.c-more:hover { color: var(--accent); }

/* Kaba / ince karşılaştırma */
.phase-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.phase-grid .link-more { margin-top: 10px; }
.phase-table { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.pt-row { display: grid; grid-template-columns: 1fr 130px 150px; align-items: center; border-bottom: 1px solid var(--line); }
.pt-row:last-child { border-bottom: 0; }
.pt-row > span { padding: 14px 18px; font-size: .93rem; color: var(--ink); font-weight: 500; }
.pt-row > span + span { text-align: center; border-left: 1px solid var(--line); }
.pt-row > span:last-child { background: #fff7f3; }
.pt-head > span { font-family: var(--head); font-weight: 800; background: var(--ink) !important; color: #fff; }
.pt-head > span:last-child { background: var(--accent) !important; }
.yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.no { color: #a8a29e; font-weight: 700; }
.txt { font-size: .84rem; font-weight: 600; color: var(--muted); }

.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.st-no { color: var(--accent); font-family: var(--head); }
.st-ic { background: var(--ink); color: #fff; border-radius: 12px; }
.stats-band.yy-stats { background: var(--ink); position: relative; }
.stats-band.yy-stats::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--ink) 12px 24px); }
.yy-stats .stat-item strong { font-family: var(--head); color: #fff; }
.yy-stats .stat-item span { color: #d6d3d1; }
.g-item { border-radius: var(--r-lg); }
.about-media img { border-radius: var(--r-lg); }
.about-badge { background: var(--accent); color: #fff; border-radius: var(--r); }
.tick-list li > span { background: var(--accent); color: #fff; }
.quote-card { border: 1px solid var(--line); box-shadow: none; border-radius: var(--r-lg); }
.q-ic { color: var(--accent); }
.q-stars { color: #f59e0b; }
.faq { border-radius: var(--r); }
.faq[open] summary i { background: var(--accent); color: #fff; }
.form-card { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.page-hero { background: var(--bg-alt); }
.ph-deco { color: rgba(228, 87, 46, .12); }
.prose th { background: var(--ink); color: #fff; }
.cta-band { background: var(--ink); }
.cta-band.has-img::before { background: linear-gradient(90deg, rgba(28, 25, 23, .95), rgba(28, 25, 23, .65)); }
.site-footer { background: var(--ink); }
.float-bar .fb-main { background: var(--accent); }

@media (max-width: 1100px) {
    .collage { height: 480px; }
}
@media (max-width: 960px) {
    .hero { padding: 40px 0 64px; }
    .hero-grid, .phase-grid { grid-template-columns: 1fr; gap: 40px; }
    .collage { height: 440px; }
}
@media (max-width: 640px) {
    .hero-prices { width: 100%; }
    .hero-prices div { flex: 1 1 33%; padding: 12px 12px; }
    .hero-prices dd { font-size: 1.05rem; }
    .collage { height: 360px; gap: 10px; }
    .cl-2 { margin-top: 20px; }
    .cl-3 { margin-bottom: 20px; }
    .cl figcaption { left: 10px; bottom: 10px; font-size: .7rem; padding: 5px 10px; }
    .pt-row { grid-template-columns: 1fr 64px 84px; }
    .pt-row > span { padding: 12px 10px; font-size: .86rem; }
    .txt { font-size: .74rem; }
}