/* ========== DESIGN TOKENS ========== */
:root {
--brand:        #2563eb;
--brand-dark:   #1d4ed8;
--brand-light:  #eff6ff;
--wa:           #22c55e;
--wa-dark:      #16a34a;
--accent:       #f59e0b;   /* sıcak vurgu — sertifika/garanti */
--bg:           #f6f8fc;   /* açık ana zemin */
--bg-soft:      #eef2f9;
--surface:      #ffffff;
--ink:          #0f172a;   /* güçlü başlık rengi */
--ink-soft:     #475569;   /* gövde metni */
--line:         #e2e8f0;
--radius:       16px;
--shadow-sm:    0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
--shadow-md:    0 8px 24px -8px rgba(15,23,42,.18);
--shadow-lg:    0 24px 48px -20px rgba(37,99,235,.35);
--maxw:         1120px;
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }
body {
margin: 0;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
color: var(--ink-soft);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
font-size: 16px;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, h5 {
font-family: 'Sora', 'Inter', sans-serif;
color: var(--ink);
line-height: 1.2;
letter-spacing: -.01em;
text-wrap: balance;
margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
p  { margin: 0 0 1rem; }
strong { color: var(--ink); font-weight: 600; }
svg { flex-shrink: 0; }

/* ========== LAYOUT WRAPPERS ========== */
main > section {
max-width: var(--maxw);
margin: 0 auto;
padding: clamp(2rem, 3vw, 5rem) 1.25rem;
scroll-margin-top: 90px;
}
section > header { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
section > header > p { color: var(--ink-soft); font-size: 1.075rem; }

/* ========== HEADER / NAV ========== */
#ana-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 150;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
transition: transform .32s ease, box-shadow .32s ease;
will-change: transform;
}
#ana-header.header-gizli {
transform: translateY(-110%);
box-shadow: none;
}
/* Fixed header kadar boşluk — JS ile main'e paddingTop set edilir */
#ana-header nav[aria-label="Ana Navigasyon"] {
max-width: var(--maxw); margin: 0 auto;
display: flex; align-items: center; gap: 1rem;
padding: .85rem 1.25rem; flex-wrap: nowrap;
}
#ana-header a[rel="home"] {
flex-shrink: 0;
}
#ana-header a[rel="home"] strong {
font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 800;
color: var(--brand); letter-spacing: -.02em; white-space: nowrap;
}
#ana-header ul {
list-style: none; display: flex; gap: .15rem; flex-wrap: nowrap;
margin: 0; padding: 0; flex: 1; min-width: 0;
}
#ana-header ul a {
color: var(--ink-soft); font-weight: 500; font-size: .88rem;
padding: .45rem .6rem; border-radius: 8px; white-space: nowrap;
}
#ana-header ul a:hover { background: var(--brand-light); color: var(--brand-dark); }
#ana-header nav > div { display: flex; gap: .6rem; flex-shrink: 0; }
#ana-header nav > div a {
display: inline-flex; align-items: center; font-weight: 600;
padding: .6rem 1rem; border-radius: 10px; font-size: .9rem; white-space: nowrap;
}
#ana-header nav > div a[href^="tel"] { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
#ana-header nav > div a[href^="tel"]:hover { background: var(--brand-dark); }
#ana-header nav > div a[href*="wa.me"] { background: var(--wa); color: #fff; }
#ana-header nav > div a[href*="wa.me"]:hover { background: var(--wa-dark); }

/* ========== HERO ========== */
#hero-giris {
position: relative;
max-width: none !important;
margin: 0;
padding: clamp(2.5rem, 5vw, 4rem) 1.25rem !important;
background:
    linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(29,78,216,.88) 100%),
    url('/images/izmir-boya-badana-ustasi-izmir-boya.webp') center/cover no-repeat;
color: var(--ink);
text-align: left;
}
#hero-ic {
display: grid;
grid-template-columns: 2fr 3fr;
gap: clamp(1.5rem, 3vw, 3rem);
max-width: var(--maxw);
margin: 0 auto;
}
#hero-resim {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4/5;
}
#hero-resim img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
#hero-rozet {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
padding: .45rem 1rem; border-radius: 999px; font-size: .83rem;
font-weight: 600; margin: 0 0 1rem; backdrop-filter: blur(4px);
}
#hero-icerik { display: flex; flex-direction: column; }
#hero-baslik { margin-bottom: .75rem; color: #fff; }
#hero-alt { color: #cbd5e1; font-size: 1.1rem; max-width: 600px; margin-bottom: 1.75rem; }
#hero-alt strong { color: #fff; }

/* ── Sayısal kanıtlar ── */
#hero-kanit-sayilari {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
margin: 0 0 1.75rem;
}
#hero-kanit-sayilari > div {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
border-radius: 12px; padding: 1rem 1.25rem; backdrop-filter: blur(4px);
text-align: center;
}
#hero-kanit-sayilari strong { display: block; font-family: 'Sora',sans-serif; font-size: 1.7rem; color: #fff; font-weight: 800; }
#hero-kanit-sayilari span { font-size: .8rem; color: #bfdbfe; }

#hero-cta-grubu {
display: flex; gap: .85rem; flex-wrap: wrap;
margin: 0 0 1.25rem;
}
#hero-cta-grubu a {
display: inline-flex; align-items: center; gap: .65rem; text-align: left;
padding: .9rem 1.35rem; border-radius: 12px; font-weight: 700; color: #fff;
box-shadow: var(--shadow-md); transition: transform .18s ease, box-shadow .18s ease;
}
#hero-cta-grubu a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
#hero-cta-grubu a span { display: flex; flex-direction: column; line-height: 1.25; }
#hero-cta-grubu a small { font-weight: 400; font-size: .76rem; opacity: .9; }
#cta-whatsapp { background: var(--wa); }
#cta-telefon {
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
padding: 1rem 1.5rem;
}
#cta-telefon:hover { background: rgba(255,255,255,.28); }
#cta-telefon span { font-size: 1.15rem; letter-spacing: .01em; }
#cta-telefon small { font-size: .78rem; opacity: .8; letter-spacing: 0; }

#hero-avantajlar {
display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
margin-top: 0;
}
#hero-avantajlar > div {
display: flex; flex-direction: column; align-items: center;
gap: .6rem; text-align: center;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radius); padding: 1.25rem 1rem; backdrop-filter: blur(4px);
}
#hero-avantajlar svg { color: #93c5fd; width: 36px; height: 36px; flex-shrink: 0; }
#hero-avantajlar h3 { font-size: .95rem; margin-bottom: 0; color: #fff; }
#hero-avantajlar p { font-size: .84rem; margin: 0; color: #bfdbfe; }

@media (max-width: 860px) {
/* Resim zaten arka planda var — img kart'ı gizle */

#hero-ic {
    grid-template-columns: 1fr;
}
#hero-icerik {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
#hero-giris {
    text-align: center;
    padding: 2.5rem 1.25rem 2rem !important;
}
#hero-rozet { margin: 0 auto 1rem; }
#hero-alt { margin: 0 auto 1.75rem; font-size: 1rem; }

/* Sayısal kanıt mobilde gizli */
#hero-kanit-sayilari { display: none; }

/* CTA butonlar tam genişlik */
#hero-cta-grubu {
    flex-direction: column;
    gap: .65rem;
    margin: 0 0 1.25rem;
}
#hero-cta-grubu a { width: 100%; justify-content: center; }
#cta-telefon span { font-size: 1.25rem; }

/* Avantajlar: 2 kolon, ikon büyük ortalı — p görünür kalır */
#hero-avantajlar {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
#hero-avantajlar > div { padding: 1rem .75rem; gap: .5rem; }
#hero-avantajlar svg { width: 32px; height: 32px; }
#hero-avantajlar h3 { font-size: .85rem; }
#hero-avantajlar p { display: none; }
}

@media (max-width: 480px) {
#hero-baslik { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ========== CARDS / ARTICLES ========== */
article {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-sm);
padding: 1.75rem; margin-bottom: 1.5rem;
}

/* ===== USTALAR ===== */
#kadro-ozet-sorular {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
max-width: var(--maxw); margin: 2rem auto 3rem; text-align: left;
}
#kadro-ozet-sorular > div {
background: var(--brand-light); border-left: 6px solid var(--brand);
border-radius: 4px; padding: 1.1rem 1.25rem;
}
#kadro-ozet-sorular dt { font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
#kadro-ozet-sorular dd { margin: 0; font-size: .92rem; }

#ustalarimiz-kadromuz > article {
display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; align-items: start;
}
#ustalarimiz-kadromuz figure { margin: 0; }
#ustalarimiz-kadromuz figure img {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
box-shadow: var(--shadow-md);
}
#ustalarimiz-kadromuz figcaption {
margin-top: .6rem; font-weight: 600; color: var(--brand-dark);
font-size: .9rem; text-align: center;
}
article h3 small { font-weight: 500; color: var(--ink-soft); font-size: .85rem; }
article ul { list-style: none; padding: 0; margin: 1rem 0; }
article ul li { padding: .3rem 0; font-size: .93rem; }
blockquote {
margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--bg-soft);
border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0;
font-style: italic; color: var(--ink);
}
blockquote p { margin: 0; }
details {
border: 1px solid var(--line); border-radius: 12px; padding: .5rem 1rem;
margin-top: 1rem; background: var(--bg-soft);
}
summary {
cursor: pointer; font-weight: 600; color: var(--ink);
display: flex; align-items: center; gap: .6rem; padding: .5rem 0;
}
summary svg { color: var(--brand); }

/* ===== YASAL GÜVENCELER ===== */
#yasal-guvenceler {
background: #22396f; color: #cbd5e1; border-radius: var(--radius);
padding: 2rem; margin-top: 2rem;
}
#yasal-guvenceler h3 { color: #fff; }
#yasal-guvenceler > ul {
list-style: none; padding: 0; margin: 1.5rem 0 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
#yasal-guvenceler li { display: flex; gap: .85rem; }
#yasal-guvenceler svg { color: var(--accent); }
#yasal-guvenceler h4 { color: #fff; font-size: .98rem; }
#yasal-guvenceler p { font-size: .86rem; color: #94a3b8; margin: 0; }

/* ===== TABLES ===== */
.tablo-kap {
width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
border-radius: var(--radius); box-shadow: var(--shadow-sm);
margin: 1.5rem 0;
}
table {
width: 100%; border-collapse: collapse; min-width: 520px;
background: var(--surface); font-size: .92rem;
}
caption {
caption-side: top; text-align: left; font-weight: 600; color: var(--ink);
padding: 0 0 .75rem; font-family: 'Sora', sans-serif;
}
thead { background: var(--brand); color: #fff; }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }
tbody tr:nth-child(even) { background: var(--bg-soft); }
tbody tr:hover { background: var(--brand-light); }

/* ===== PROJE ===== */
#tamamlanan-projelerimiz article > header h3 { color: var(--brand-dark); }
#tamamlanan-projelerimiz ol { padding-left: 1.25rem; }
#tamamlanan-projelerimiz ol li { margin-bottom: .75rem; }
#tamamlanan-projelerimiz figure { margin: 1.5rem 0 0; }
#tamamlanan-projelerimiz figure img {
width: 100%; border-radius: 14px; box-shadow: var(--shadow-md);
aspect-ratio: 16/9; object-fit: cover;
}
figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .6rem; }

/* ===== HİZMETLER ===== */
#detayli-hizmetlerimiz article > header,
#tamamlanan-projelerimiz article > header { text-align: left; margin: 0 0 1rem; max-width: none; }
#detayli-hizmetlerimiz article > header {
display: flex; align-items: center; gap: .85rem;
}
#detayli-hizmetlerimiz article > header svg {
color: #fff; background: var(--brand); border-radius: 12px;
padding: 10px; width: 48px; height: 48px;
}
#detayli-hizmetlerimiz article > header h3 { margin: 0; }
#detayli-hizmetlerimiz article ul li { display: flex; gap: .75rem; align-items: flex-start; }
#detayli-hizmetlerimiz article ul svg { color: var(--brand); margin-top: 3px; }
#detayli-hizmetlerimiz footer a,
#tamamlanan-projelerimiz footer a,
#hizmet-bolgelerimiz-silosu footer a,
#boyaci-fiyatlari-rehberi footer a {
display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
color: var(--brand); margin-top: .75rem;
}
#detayli-hizmetlerimiz footer a:hover svg { transform: translateX(3px); }
#detayli-hizmetlerimiz footer a svg { transition: transform .18s ease; }

/* ===== FİYATLAR ===== */
#boyaci-fiyatlari-rehberi > div { margin-top: 2rem; }
#boyaci-fiyatlari-rehberi dl {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.5rem 0 0;
}
#boyaci-fiyatlari-rehberi dl > div {
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 1.25rem; box-shadow: var(--shadow-sm);
}
#boyaci-fiyatlari-rehberi dl svg { color: var(--brand); margin-bottom: .5rem; }
#boyaci-fiyatlari-rehberi dt { margin-bottom: .35rem; }
#boyaci-fiyatlari-rehberi dd { margin: 0; font-size: .9rem; }
#boyaci-fiyatlari-rehberi > footer {
background: var(--brand-light); border: 1px solid #bfdbfe; border-radius: var(--radius);
padding: 1.75rem; margin-top: 2rem; text-align: center; max-width: none;
}
#boyaci-fiyatlari-rehberi > footer a {
display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem;
background: var(--brand); color: #fff; padding: .8rem 1.4rem; border-radius: 10px;
font-weight: 700;
}
#boyaci-fiyatlari-rehberi > footer a:hover { background: var(--brand-dark); }

/* ===== BÖLGELER ===== */
#hizmet-bolgelerimiz-silosu { display: block; }
#hizmet-bolgelerimiz-silosu > article > header {
display: flex; align-items: center; gap: .75rem; text-align: left; margin: 0 0 .75rem; max-width: none;
}
#hizmet-bolgelerimiz-silosu > article > header svg { color: var(--brand); }
#hizmet-bolgelerimiz-silosu > article > header h3 { margin: 0; }
#hizmet-bolgelerimiz-silosu h5 { color: var(--ink); margin: 1rem 0 .5rem; }

/* ===== SÜREÇ ===== */
#calismaidir-surecimiz ol {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 1.25rem;
}
#calismaidir-surecimiz ol > li article {
display: flex; gap: 1.25rem; align-items: flex-start; margin: 0;
}
#calismaidir-surecimiz svg {
color: #fff; background: var(--brand); border-radius: 50%;
padding: 12px; width: 52px; height: 52px;
}
#calismaidir-surecimiz em { color: var(--brand-dark); font-weight: 500; }

/* ===== KURUMSAL KÜLTÜR ===== */
#kurumsal-kultur-standartlari > ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
#kurumsal-kultur-standartlari li {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.5rem; box-shadow: var(--shadow-sm);
}
#kurumsal-kultur-standartlari svg {
color: var(--wa); background: #dcfce7; border-radius: 12px; padding: 10px;
width: 48px; height: 48px; margin-bottom: .75rem;
}

/* ===== SSS ===== */
#detayli-sss-alani details { background: var(--surface); box-shadow: var(--shadow-sm); }
#detayli-sss-alani summary svg { color: var(--brand); }
#detayli-sss-alani p { padding: 0 0 .5rem; color: var(--ink-soft); }

/* ===== FORM ===== */
#iletisim-talep-formu {
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
#iletisim-talep-formu > header { grid-column: 1 / -1; }
#iletisim-talep-formu form {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.75rem; box-shadow: var(--shadow-md);
}
fieldset { border: none; margin: 0; padding: 0; }
legend { font-family: 'Sora',sans-serif; font-weight: 700; color: var(--ink); font-size: 1.1rem; margin-bottom: 1rem; }
label { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; font-size: .9rem; }
label svg { color: var(--brand); }
input, select, textarea {
width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
font: inherit; color: var(--ink); background: #fff; margin-bottom: .25rem;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
button[type="submit"] {
display: inline-flex; align-items: center; gap: .5rem; width: 100%; justify-content: center;
background: var(--wa); color: #fff; border: none; border-radius: 10px;
padding: .9rem; font: inherit; font-weight: 700; cursor: pointer; margin-top: .5rem;
transition: background .18s ease;
}
button[type="submit"]:hover { background: var(--wa-dark); }
address {
font-style: normal; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm);
}
address h3 { display: flex; align-items: center; gap: .5rem; }
address h3 svg, address p svg { color: var(--brand); }
address p { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
#harita-yerlesimi { grid-column: 1 / -1; margin: 0; }
#harita-yerlesimi iframe { width: 100%; height: 380px; border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* ===== GALERİ ===== */
#proje-galerisi { text-align: center; }
#proje-galerisi .galeri-izgara {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
#proje-galerisi figure {
margin: 0; position: relative; border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-md);
}
#proje-galerisi figure img {
width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease;
}
#proje-galerisi figure:hover img { transform: scale(1.06); }
#proje-galerisi figcaption {
position: absolute; inset: auto 0 0 0; margin: 0;
background: linear-gradient(180deg, transparent, rgba(15,23,42,.85));
color: #fff; padding: 1.5rem .9rem .8rem; font-size: .85rem; font-weight: 600; text-align: left;
}

/* ===== FOOTER ===== */
#ana-footer { background: var(--ink); color: #94a3b8; margin-top: 3rem; }
#ana-footer nav {
max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.25rem 2rem;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
#ana-footer h3 { color: #fff; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
#ana-footer h3 svg { color: var(--brand); }
#ana-footer ul { list-style: none; padding: 0; margin: 0; }
#ana-footer li { margin: .4rem 0; }
#ana-footer a { color: #94a3b8; font-size: .92rem; }
#ana-footer a:hover { color: #fff; }
#ana-footer > div {
border-top: 1px solid #1e293b; text-align: center; padding: 1.5rem 1.25rem;
font-size: .82rem; color: #64748b;
}
#ana-footer > div p { margin: .25rem 0; }

/* ========== MOBİL STICKY FOOTER CTA ========== */
#mobil-sticky-cta {
display: none;
}
@media (max-width: 860px) {
#mobil-sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(15,23,42,.15);
    /* Başlangıçta gizli — JS ile .visible eklenince göster */
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
#mobil-sticky-cta.visible {
    transform: translateY(0);
}
#mobil-sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .95rem .5rem;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: opacity .15s ease;
}
#mobil-sticky-cta a:active { opacity: .85; }
#mobil-sticky-cta .mcta-wa  { background: var(--wa); }
#mobil-sticky-cta .mcta-tel { background: var(--brand); }
/* Sayfanın altı sticky bar tarafından örtülmesin */
body { padding-bottom: 62px; }
}

/* ========== HAMBURGEr BUTTON ========== */
#hamburger-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px; height: 42px;
padding: 0;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
margin-left: auto;
flex-shrink: 0;
transition: background .18s ease;
z-index: 201;
position: relative;
}
#hamburger-btn:hover { background: var(--brand-light); }
#hamburger-btn span {
display: block;
width: 20px; height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
#hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== MOBİL DRAWER ========== */
#drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15,23,42,.55);
z-index: 198;
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity .3s ease;
}
#drawer-overlay.acik { display: block; opacity: 1; }

#nav-drawer {
position: fixed;
top: 0; right: 0;
width: min(320px, 88vw);
height: 100%;
background: #fff;
z-index: 199;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
box-shadow: -8px 0 40px rgba(15,23,42,.18);
overflow-y: auto;
}
#nav-drawer.acik { transform: translateX(0); }

#drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
#drawer-header strong {
font-family: 'Sora', sans-serif;
font-size: 1.3rem;
font-weight: 800;
color: var(--brand);
letter-spacing: -.02em;
}
#drawer-close-btn {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-soft);
border: none; border-radius: 8px;
cursor: pointer;
color: var(--ink);
transition: background .18s ease;
flex-shrink: 0;
}
#drawer-close-btn:hover { background: var(--line); }

#drawer-nav-links {
list-style: none;
margin: 0; padding: .75rem .75rem;
flex: 1;
}
#drawer-nav-links li { margin: 0; }
#drawer-nav-links a {
display: flex; align-items: center; gap: .65rem;
padding: .8rem .85rem;
border-radius: 10px;
font-size: 1rem; font-weight: 500;
color: var(--ink-soft);
transition: background .15s ease, color .15s ease;
text-decoration: none;
}
#drawer-nav-links a svg { color: var(--brand); flex-shrink: 0; }
#drawer-nav-links a:hover { background: var(--brand-light); color: var(--brand-dark); }

#drawer-cta-grubu {
display: flex; flex-direction: column; gap: .65rem;
padding: 1rem 1.25rem 1.5rem;
border-top: 1px solid var(--line);
flex-shrink: 0;
}
#drawer-cta-grubu a {
display: flex; align-items: center; justify-content: center; gap: .6rem;
padding: .85rem 1rem; border-radius: 12px;
font-weight: 700; font-size: 1rem; color: #fff;
text-decoration: none;
transition: opacity .15s ease;
}
#drawer-cta-grubu a:active { opacity: .85; }
#drawer-cta-grubu .dcta-tel  { background: var(--brand); }
#drawer-cta-grubu .dcta-wa   { background: var(--wa); }

/* ========== FOOTER CTA ========== */
#footer-iletisim-cta {
max-width: var(--maxw);
margin: 0 auto;
padding: 2rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
border-bottom: 1px solid #1e293b;
}
#footer-iletisim-cta p {
margin: 0;
color: #cbd5e1;
font-size: 1.05rem;
font-weight: 500;
}
#footer-iletisim-cta p strong { color: #fff; }
#footer-cta-butonlar {
display: flex; gap: .75rem; flex-wrap: wrap; flex-shrink: 0;
}
#footer-cta-butonlar a {
display: inline-flex; align-items: center; gap: .5rem;
padding: .75rem 1.25rem; border-radius: 10px;
font-weight: 700; font-size: .95rem; color: #fff;
text-decoration: none;
transition: opacity .15s ease;
}
#footer-cta-butonlar a:hover { opacity: .88; }
#footer-cta-butonlar .fcta-tel { background: var(--brand); }
#footer-cta-butonlar .fcta-wa  { background: var(--wa); }

/* ========== RESPONSIVE ========== */
@media (max-width: 860px) {
#hamburger-btn { display: flex; }
/* Masaüstü nav ul ve CTA butonlarını gizle */
#ana-header ul,
#ana-header nav > div { display: none; }
#footer-iletisim-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
#footer-cta-butonlar { width: 100%; }
#footer-cta-butonlar a { flex: 1; justify-content: center; }
#hero-kanit-sayilari, #hero-avantajlar,
#kadro-ozet-sorular, #yasal-guvenceler > ul,
#boyaci-fiyatlari-rehberi dl,
#kurumsal-kultur-standartlari > ul,
#proje-galerisi .galeri-izgara { grid-template-columns: 1fr 1fr; }
#ustalarimiz-kadromuz > article { grid-template-columns: 1fr; }
#ustalarimiz-kadromuz figure img { max-width: 220px; margin: 0 auto; }
#iletisim-talep-formu,
#ana-footer nav { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#kadro-ozet-sorular, #yasal-guvenceler > ul,
#boyaci-fiyatlari-rehberi dl,
#kurumsal-kultur-standartlari > ul,
#proje-galerisi .galeri-izgara { grid-template-columns: 1fr; }
#detayli-hizmetlerimiz article > header { flex-direction: column; align-items: flex-start; }
}

/* ==================================================================
   İÇ SAYFA BİLEŞENLERİ (hizmet / ilçe / proje sayfaları için ortak)
   ================================================================== */

/* ----- Breadcrumb ----- */
.brek { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 1.25rem 0; }
.brek ol {
list-style: none; display: flex; flex-wrap: wrap; align-items: center;
gap: .45rem; margin: 0; padding: 0; font-size: .85rem;
}
.brek li { display: flex; align-items: center; gap: .45rem; color: var(--ink-soft); }
.brek li:not(:last-child)::after { content: "\203A"; color: #94a3b8; }
.brek a { color: var(--brand); font-weight: 500; }
.brek [aria-current="page"] { color: var(--ink-soft); }

/* ----- Ortak iç sayfa CTA butonları ----- */
.btn-wa, .btn-tel {
display: inline-flex; align-items: center; gap: .6rem; justify-content: center;
padding: .9rem 1.4rem; border-radius: 12px; font-weight: 700; color: #fff;
box-shadow: var(--shadow-md);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-wa { background: var(--wa); }
.btn-wa:hover { background: var(--wa-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-tel { background: var(--brand); }
.btn-tel:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-wa span, .btn-tel span { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.btn-wa small, .btn-tel small { font-weight: 400; font-size: .76rem; opacity: .9; }

/* ----- İç sayfa hero ----- */
.ic-hero {
background:
    linear-gradient(135deg, rgba(15,23,42,.95) 0%, rgba(29,78,216,.9) 100%),
    url('/images/hero-bg.webp') center/cover no-repeat;
color: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
padding: clamp(1.75rem, 4vw, 3rem);
}
.ic-hero .ic-rozet {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
color: #fff; padding: .4rem 1rem; border-radius: 999px;
font-size: .83rem; font-weight: 600; margin: 0 0 1rem;
}
.ic-hero h1 { color: #fff; margin-bottom: .75rem; }
.ic-hero p { color: #dbeafe; font-size: 1.08rem; max-width: 640px; }
.ic-hero p strong { color: #fff; }
.ic-hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ----- Bölüm başlığı (ortalı) ----- */
.blok-baslik { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.blok-baslik p { color: var(--ink-soft); font-size: 1.05rem; }

/* ----- Hızlı bilgi kutuları ----- */
.hizli-tablo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; }
.hizli-tablo > div {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.25rem; box-shadow: var(--shadow-sm); text-align: center;
}
.hizli-tablo svg { color: var(--brand); margin-bottom: .5rem; }
.hizli-tablo dt { font-size: .82rem; color: var(--ink-soft); }
.hizli-tablo dd { margin: .25rem 0 0; font-family: 'Sora', sans-serif; font-weight: 700; color: var(--ink); font-size: 1.05rem; }

/* ----- Risk azaltıcı kutular ----- */
.risk-kutulari { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
.risk-kutulari li {
background: var(--brand-light); border: 1px solid #bfdbfe; border-radius: 12px;
padding: 1rem .85rem; display: flex; flex-direction: column; gap: .5rem;
font-size: .88rem; color: var(--ink-soft);
}
.risk-kutulari svg { color: var(--wa-dark); }
.risk-kutulari strong { display: block; color: var(--ink); }

/* ----- Süreç adımları ----- */
.surec-adimlar { list-style: none; counter-reset: adim; padding: 0; margin: 0; display: grid; gap: 1rem; }
.surec-adimlar li {
display: flex; gap: 1.1rem; align-items: flex-start; margin: 0;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm);
}
.surec-adimlar li::before {
counter-increment: adim; content: counter(adim);
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--brand); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.surec-adimlar h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.surec-adimlar p { margin: 0; font-size: .92rem; }

/* ----- Kapsam kartları ----- */
.kapsam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kapsam-grid article { margin: 0; }
.kapsam-grid h3 { color: var(--brand-dark); }
.kapsam-grid ul { list-style: none; padding: 0; margin: .75rem 0 0; }
.kapsam-grid ul li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; font-size: .92rem; }
.kapsam-grid ul svg { color: var(--brand); margin-top: 3px; }

/* ----- Fiyat yönlendirme bandı ----- */
.fiyat-band {
background: var(--brand-light); border: 1px solid #bfdbfe; border-radius: var(--radius);
padding: 1.75rem; text-align: center;
}
.fiyat-band .not { font-size: .85rem; color: var(--ink-soft); margin: 1rem 0 0; }
.fiyat-band .btn-wa, .fiyat-band .btn-tel { margin-top: .75rem; }

/* ----- İlçe iç link grid ----- */
.ilce-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.ilce-grid a {
display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ilce-grid a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.ilce-grid svg { color: var(--brand); }

/* ----- İlgili içerik linkleri ----- */
.ilgili-linkler { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ilgili-linkler a {
display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm);
}
.ilgili-linkler a:hover { border-color: var(--brand); color: var(--brand-dark); }
.ilgili-linkler svg { color: var(--brand); }

/* ----- Alt CTA bandı ----- */
.hizmet-alt-cta { background: #22396f; color: #dbeafe; border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; }
.hizmet-alt-cta h2 { color: #fff; }
.hizmet-alt-cta p { color: #cbd5e1; max-width: 620px; margin: 0 auto; }
.hizmet-alt-cta .cta-butonlar { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }

/* ----- İç sayfa responsive ----- */
@media (max-width: 860px) {
.hizli-tablo { grid-template-columns: 1fr 1fr; }
.risk-kutulari { grid-template-columns: 1fr 1fr; }
.kapsam-grid { grid-template-columns: 1fr; }
.ilce-grid { grid-template-columns: 1fr 1fr; }
.ilgili-linkler { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.risk-kutulari { grid-template-columns: 1fr; }
.ic-hero-cta { flex-direction: column; }
.ic-hero-cta .btn-wa, .ic-hero-cta .btn-tel { width: 100%; }
.hizmet-alt-cta .cta-butonlar .btn-wa, .hizmet-alt-cta .cta-butonlar .btn-tel { width: 100%; }
}