/* =========================================================================
   Kara İnşaat — paylaşılan sayfa stili (Faz 1)
   index.html ile aynı marka token'ları (renk/font/spacing). Bu dosya
   /kadikoy-kentsel-donusum/ gibi iç sayfalar için — anasayfa kendi inline
   <style>'ini korur.
   ========================================================================= */

:root{
  /* ---- brand tokens (index.html ile birebir) ---- */
  --ink:#15122b;
  --navy:#241f4a;
  --navy-2:#332a63;
  --navy-3:#1a1735;
  --navy-deep:#0f0d21;
  --bone:#f4efe4;
  --bone-2:#eae2d0;
  --bone-3:#ddd2b8;
  --silver:#c7cbdf;
  --silver-2:#9296b8;
  --bronze:#cf8f52;
  --bronze-2:#e4ae7c;
  --bronze-dark:#a06c39;
  --shadow-c: 15,12,30;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Karla', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bone);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
ul,ol{ list-style:none; }
section{ position:relative; }
.container{ max-width:1240px; margin:0 auto; padding:0 var(--space-lg); }
.prose-wrap{ max-width:820px; }

::selection{ background:var(--bronze); color:var(--navy-deep); }
:focus-visible{ outline:2.5px solid var(--bronze); outline-offset:3px; border-radius:2px; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy); font-weight:600; letter-spacing:-0.02em; text-wrap:balance; }
p{ margin:0 0 var(--space-md); }
strong{ color:var(--navy); font-weight:700; }
mark{ background:rgba(207,143,82,0.24); color:var(--navy); padding:0.05em 0.3em; border-radius:2px; font-weight:600; box-decoration-break:clone; }

.eyebrow{
  font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--bronze-dark); display:flex; align-items:center; gap:var(--space-sm);
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--bronze); display:inline-block; }
.eyebrow.on-dark{ color:var(--bronze-2); }

.noise::after{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none; mix-blend-mode:overlay;
}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px; letter-spacing:0.03em;
  border-radius:3px; cursor:pointer;
  transition:transform .45s var(--ease-spring), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .35s var(--ease-spring); }
.btn-primary{
  background:var(--bronze); color:var(--navy-deep);
  box-shadow:0 1px 2px rgba(var(--shadow-c),0.12), 0 6px 14px rgba(207,143,82,0.28), 0 16px 32px rgba(207,143,82,0.16);
}
.btn-primary:hover{ background:var(--bronze-2); transform:translateY(-3px); box-shadow:0 1px 2px rgba(var(--shadow-c),0.14), 0 10px 20px rgba(207,143,82,0.34), 0 22px 40px rgba(207,143,82,0.2); }
.btn-primary:active{ transform:translateY(-1px) scale(.98); }
.btn-primary:hover svg{ transform:translateX(4px); }

.btn-ghost{ background:transparent; color:var(--bone); border:1.5px solid rgba(244,239,228,0.35); }
.btn-ghost:hover{ border-color:var(--bone); background:rgba(244,239,228,0.08); transform:translateY(-3px); }
.btn-ghost:active{ transform:translateY(-1px) scale(.98); }

.btn-outline-navy{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:var(--bone); transform:translateY(-3px); box-shadow:0 14px 28px rgba(36,31,74,0.22); }
.btn-outline-navy:active{ transform:translateY(-1px) scale(.98); }

/* ============ reveal animation ============ */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].in-view{ opacity:1; transform:translateY(0); }
.js [data-reveal="left"]{ transform:translateX(-36px); }
.js [data-reveal="left"].in-view{ transform:translateX(0); }
.js [data-reveal="right"]{ transform:translateX(36px); }
.js [data-reveal="right"].in-view{ transform:translateX(0); }

/* ================= NAV (index.html ile aynı) ================= */
header#site-header{
  position:fixed; top:0; left:0; right:0; z-index:200; padding:22px 0;
  transition:padding .4s var(--ease-out), background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
header#site-header.scrolled{
  padding:12px 0; background:rgba(21,18,43,0.92); backdrop-filter:blur(14px); box-shadow:0 8px 30px rgba(15,12,30,0.25);
}
/* alt sayfalarda arka plan koyu (navy) olmayan bir hero altında başlıyor, o yüzden header baştan itibaren koyu zeminde okunur */
header#site-header{ background:var(--navy-deep); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); }
.logo{ display:flex; align-items:center; gap:12px; }
.logo svg{ width:38px; height:38px; flex-shrink:0; }
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text i{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:12px; letter-spacing:0.06em; color:var(--bronze-2); margin-bottom:1px; }
.logo-text b{ font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:0.01em; color:var(--bone); }
.logo-text span{ font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze-2); }

.nav-links{ display:flex; align-items:center; gap:var(--space-xl); }
.nav-links a{ font-size:14px; font-weight:600; color:rgba(244,239,228,0.82); position:relative; padding:4px 0; transition:color .25s var(--ease-out); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1.5px; background:var(--bronze-2); transition:width .35s var(--ease-spring); }
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:var(--bronze-2); }

.nav-cta{ display:flex; align-items:center; gap:var(--space-md); }
.nav-cta .btn-primary{ padding:12px 22px; font-size:13px; }

.burger{ display:none; width:42px; height:42px; position:relative; z-index:210; }
.burger span{ position:absolute; left:9px; right:9px; height:2px; background:var(--bone); transition:transform .35s var(--ease-spring), opacity .25s ease, top .35s var(--ease-spring); }
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:0; z-index:195; background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:clamp(16px, 3.6vh, 24px);
  padding:calc(104px + env(safe-area-inset-top)) var(--space-lg) calc(32px + env(safe-area-inset-bottom));
  overflow-y:auto; transform:translateY(-100%); transition:transform .5s var(--ease-out);
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel a:not(.btn){ font-family:var(--font-display); font-size:clamp(22px, 6.4vw, 30px); color:var(--bone); font-weight:500; line-height:1.1; }
.mobile-panel .btn{ font-family:var(--font-body); font-size:14.5px; font-weight:700; width:100%; justify-content:center; box-sizing:border-box; margin-top:var(--space-sm); white-space:normal; }

@media (max-width:768px){
  .nav-links, .nav-cta .btn-primary{ display:none; }
  .burger{ display:block; }
}

/* ================= BREADCRUMB ================= */
.crumbs{
  background:var(--navy-deep); padding:calc(104px + var(--space-md)) 0 var(--space-md);
}
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; font-family:var(--font-body); }
.crumbs a{ color:rgba(244,239,228,0.55); transition:color .2s var(--ease-out); }
.crumbs a:hover{ color:var(--bronze-2); }
.crumbs li[aria-current]{ color:rgba(244,239,228,0.85); font-weight:600; }
.crumbs .sep{ color:rgba(244,239,228,0.3); }

/* ================= SUB-HERO (iç sayfa başlığı) ================= */
.subhero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 90% -10%, rgba(228,174,124,0.16), transparent 60%),
    radial-gradient(ellipse 700px 600px at -5% 110%, rgba(146,150,184,0.13), transparent 55%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%);
  padding:var(--space-xl) 0 var(--space-2xl);
}
.subhero::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(199,203,223,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199,203,223,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%, transparent 92%);
          mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%, transparent 92%);
}
.subhero .inner{ position:relative; z-index:2; max-width:760px; }
.subhero h1{ color:var(--bone); font-size:clamp(34px,5vw,56px); line-height:1.04; letter-spacing:-0.03em; margin:var(--space-md) 0 var(--space-md); }
.subhero p.lede{ color:rgba(244,239,228,0.78); font-size:18px; max-width:620px; line-height:1.7; margin-bottom:var(--space-lg); }
.subhero .byline{ display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(244,239,228,0.6); margin-bottom:var(--space-lg); }
.subhero .byline b{ color:var(--bronze-2); font-weight:700; }
.subhero .actions{ display:flex; flex-wrap:wrap; gap:var(--space-md); }

/* ================= FACT STRIP (özet nitelik şeridi) ================= */
.fact-strip{ background:var(--bronze); }
.fact-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); padding:var(--space-lg) var(--space-lg); }
.fact-item{ padding:0 var(--space-lg); border-left:1px solid rgba(21,18,43,0.18); }
.fact-item:first-child{ border-left:none; padding-left:0; }
.fact-item b{ display:block; font-family:var(--font-display); font-size:clamp(24px,2.6vw,32px); color:var(--navy-deep); font-weight:700; letter-spacing:-0.02em; }
.fact-item span{ display:block; font-size:12.5px; font-weight:600; color:rgba(21,18,43,0.72); margin-top:4px; }
@media (max-width:768px){ .fact-strip .container{ grid-template-columns:1fr 1fr; row-gap:var(--space-lg); } .fact-item:nth-child(3){ border-left:none; padding-left:0; } }

/* ================= CONTENT SECTIONS (EAV attribute bloğu) ================= */
.section-pad{ padding:var(--space-2xl) 0; }
.section-pad.tight{ padding:var(--space-xl) 0; }
.section-head{ max-width:660px; margin-bottom:var(--space-xl); }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.1; margin-top:var(--space-sm); }
.section-head p{ font-size:16px; color:#5c5773; margin-top:var(--space-sm); max-width:560px; }

.attr-list{ display:flex; flex-direction:column; }
.attr{ padding:var(--space-xl) 0; border-top:1px solid rgba(36,31,74,0.14); }
.attr:last-child{ border-bottom:1px solid rgba(36,31,74,0.14); }
.attr h3{ font-size:clamp(19px,2.2vw,24px); font-weight:600; margin-bottom:10px; }
.attr p{ color:#3f3b56; font-size:15.5px; max-width:760px; }
.attr p:last-child{ margin-bottom:0; }
.attr ul{ margin:var(--space-sm) 0 0; padding-left:0; max-width:760px; }
.attr ul li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:#3f3b56; padding:6px 0; }
.attr ul li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--bronze); margin-top:8px; flex-shrink:0; }

/* ================= COMPARE TABLE ================= */
.table-wrap{ overflow-x:auto; border-radius:6px; border:1px solid rgba(36,31,74,0.14); margin-top:var(--space-md); }
table.compare{ border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; }
table.compare th, table.compare td{ text-align:left; padding:14px 18px; border-bottom:1px solid rgba(36,31,74,0.12); vertical-align:top; }
table.compare thead th{ background:var(--navy); color:var(--bone); font-family:var(--font-display); font-weight:600; font-size:15px; }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare tbody tr:nth-child(even){ background:rgba(207,143,82,0.05); }
table.compare td strong{ color:var(--navy); }

/* ================= MAHALLE KARTLARI ================= */
.mahalle-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-lg); margin-top:var(--space-lg); }
.mahalle-card{
  background:#fffdf8; border:1px solid rgba(36,31,74,0.1); border-radius:6px; padding:var(--space-lg);
  box-shadow:0 1px 2px rgba(var(--shadow-c),0.04), 0 6px 16px rgba(var(--shadow-c),0.05);
  transition:transform .4s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.mahalle-card:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(var(--shadow-c),0.07), 0 18px 34px rgba(var(--shadow-c),0.1); }
.mahalle-card h4{ font-size:17px; margin-bottom:8px; }
.mahalle-card p{ font-size:14px; color:#5c5773; margin:0; }

/* ================= PROJE KARTLARI ================= */
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-lg); margin-top:var(--space-lg); }
.proj-card{ border-radius:8px; overflow:hidden; background:var(--navy-deep); position:relative; box-shadow:0 2px 6px rgba(var(--shadow-c),0.12), 0 16px 34px rgba(var(--shadow-c),0.22); }
.proj-card figure{ margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; }
.proj-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.proj-card:hover img{ transform:scale(1.06); }
.proj-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,12,30,0.82) 0%, rgba(15,12,30,0.25) 45%, transparent 70%); pointer-events:none; }
.proj-card figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--space-md) var(--space-lg);
  color:var(--bone); font-size:14px;
}
.proj-card figcaption b{ display:block; font-family:var(--font-display); font-size:17px; color:var(--bone); margin-bottom:2px; }
.proj-card figcaption span{ color:rgba(244,239,228,0.72); font-size:12.5px; }

/* ================= SSS (native details/summary, faq görünümünde) ================= */
.faq-wrap{ display:flex; flex-direction:column; gap:10px; max-width:820px; margin-top:var(--space-lg); }
details.faq2{
  background:#fffdf8; border:1px solid rgba(36,31,74,0.12); border-radius:6px; overflow:hidden;
}
details.faq2 summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:18px 22px; font-family:var(--font-body); font-weight:700; font-size:15.5px; color:var(--navy);
}
details.faq2 summary::-webkit-details-marker{ display:none; }
details.faq2 summary .plus{ position:relative; width:16px; height:16px; flex-shrink:0; }
details.faq2 summary .plus::before, details.faq2 summary .plus::after{
  content:''; position:absolute; background:var(--bronze-dark); transition:transform .3s var(--ease-out);
}
details.faq2 summary .plus::before{ left:0; top:7px; width:16px; height:2px; }
details.faq2 summary .plus::after{ left:7px; top:0; width:2px; height:16px; }
details.faq2[open] summary .plus::after{ transform:rotate(90deg); opacity:0; }
details.faq2 .faq2-a{ padding:0 22px 20px; color:#3f3b56; font-size:15px; max-width:720px; }

/* ================= CTA BAND ================= */
.cta-band{
  background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
  position:relative; overflow:hidden; padding:var(--space-2xl) 0;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 500px at 15% 0%, rgba(228,174,124,0.14), transparent 60%);
}
.cta-band .inner{ position:relative; z-index:2; max-width:640px; }
.cta-band h2{ color:var(--bone); font-size:clamp(28px,3.6vw,42px); margin:var(--space-sm) 0 var(--space-md); }
.cta-band p{ color:rgba(244,239,228,0.75); font-size:16.5px; margin-bottom:var(--space-lg); }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:var(--space-md); }

/* ================= İÇ LİNK BLOKLARI ================= */
.related{ background:var(--bone-2); }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-md); margin-top:var(--space-lg); }
.related-link{
  display:block; background:#fffdf8; border:1px solid rgba(36,31,74,0.1); border-radius:6px; padding:var(--space-md) var(--space-lg);
  font-weight:700; font-size:14.5px; color:var(--navy); transition:transform .35s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.related-link span{ display:block; font-weight:400; font-size:13px; color:#6a6480; margin-top:4px; }
.related-link:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(var(--shadow-c),0.1); }

/* ================= FOOTER (index.html ile aynı) ================= */
footer#site-footer{ background:var(--navy-deep); color:var(--bone); padding:var(--space-2xl) 0 var(--space-lg); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--space-xl); padding-bottom:var(--space-xl); }
.footer-brand p{ color:rgba(244,239,228,0.62); font-size:14px; margin:var(--space-md) 0 var(--space-lg); max-width:280px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(199,203,223,0.25); display:flex; align-items:center; justify-content:center; transition:background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .3s var(--ease-spring); }
.footer-social svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--bronze); border-color:var(--bronze); transform:translateY(-3px); }
.footer-col h4{ color:var(--bone); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; margin-bottom:var(--space-md); }
.footer-col a{ display:block; color:rgba(244,239,228,0.62); font-size:14.5px; padding:6px 0; transition:color .2s var(--ease-out); }
.footer-col a:hover{ color:var(--bronze-2); }
.contact-line{ display:flex; gap:10px; align-items:flex-start; margin-bottom:var(--space-md); }
.contact-line svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--bronze-2); }
.contact-line span{ font-size:14px; color:rgba(244,239,228,0.68); line-height:1.55; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding-top:var(--space-lg); border-top:1px solid rgba(199,203,223,0.14); font-size:13px; color:rgba(244,239,228,0.5); }
.footer-bottom .legal{ display:flex; gap:var(--space-lg); }
.footer-bottom a{ color:rgba(244,239,228,0.5); }
.footer-bottom a:hover{ color:var(--bronze-2); }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:180; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.2), 0 12px 28px rgba(37,211,102,0.32);
  transition:transform .35s var(--ease-spring);
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ transform:scale(1.08); }

@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-xl) var(--space-lg); }
}
@media (max-width:768px){
  .subhero{ padding-top:var(--space-lg); }
  .crumbs{ padding-top:calc(88px + var(--space-sm)); }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:var(--space-sm); }
  .section-pad{ padding:var(--space-xl) 0; }
}