/* Shared brand tokens: muted warm red accents, charcoal text, warm off-white surfaces. */
:root {
  --brand-50:#fbf7f3;
  --brand-100:#f3e5df;
  --brand-200:#e7c8bf;
  --brand-300:#dca399;
  --brand-400:#d28176;
  --brand-500:#c15b52;
  --brand-600:#b34740;
  --brand-700:#963b36;
  --brand-800:#7d332f;
  --brand-900:#652e2b;
  --brand-950:#3b1d1b;
  --ink:#292929;
  --paper:#fdfbf9;
}
html { scroll-behavior:smooth; scrollbar-gutter:stable; border-top:4px solid var(--brand-500); }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand-100); color: var(--brand-900); }
.grid-glow { background-image: radial-gradient(circle at 75% 20%, rgba(179,71,64,.06), transparent 32%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: auto, 40px 40px, 40px 40px; }
.field { width:100%; border:1px solid #e5e5e5; border-radius:.75rem; background:#fff; padding:.8rem .95rem; color:var(--ink); outline:none; transition:.2s; }
.field:focus { border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(179,71,64,.08); }
.field-label { display:block; margin-bottom:.45rem; font-size:.8rem; font-weight:600; color:#404040; }
details summary::-webkit-details-marker { display:none; }
details[open] .faq-plus { transform:rotate(45deg); }
header nav > a:first-child { width:230px; flex-shrink:0; }
header nav > a:first-child strong { display:block; font-size:1rem; line-height:1.25; color:var(--ink); }
header nav > a:first-child strong span { display:block !important; margin-top:0; white-space:nowrap; font-size:11px; line-height:1.25; font-weight:500; letter-spacing:.025em; color:#525252; text-transform:uppercase; }
header nav > a:first-child > span { white-space:nowrap; }
header nav > a:first-child img[src="/assets/images/logo.webp"] + span,
header nav > a:first-child img[src="/assets/images/logo.webp"] + strong { display:none; }
header { border-top:0; }
.glass { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
header nav { position:relative; height:72px; padding-top:0 !important; padding-bottom:0 !important; }
header nav > a:not(:first-child):not([data-mobile-call]):not([data-mobile-quote]) { display:none !important; width:154px; height:42px; align-items:center; justify-content:center; border:0 !important; border-radius:12px; background:var(--brand-600); padding:0 18px !important; color:transparent !important; font-size:0 !important; line-height:1 !important; text-align:center; box-shadow:0 8px 18px -12px rgba(70,48,44,.22) !important; }
header nav > a:not(:first-child):not([data-mobile-call]):not([data-mobile-quote])::after { content:"Ücretsiz Teklif"; display:block; color:#fff; font-size:13px; font-weight:700; line-height:1; white-space:nowrap; }
header nav > a:not(:first-child):not([data-mobile-call]):not([data-mobile-quote]):hover { background:var(--brand-700); }
header nav > div > a { position:relative; transition:color .2s ease; }
header nav > div > a:hover { color:var(--brand-600) !important; }
.header-phone-button { display:flex; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; border:2px solid #e5e5e5; border-radius:999px; background:#fff; color:var(--brand-600); transition:border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; }
.header-phone-button:hover { border-color:var(--brand-200); background:var(--brand-50); color:var(--brand-700); transform:translateY(-1px); }
.mobile-quote-button { display:none !important; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; border-radius:999px; background:var(--brand-600); color:#fff; transition:background-color .2s ease, transform .2s ease; }
.mobile-quote-button:hover { background:var(--brand-700); transform:translateY(-1px); }
[data-menu-button] { width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; padding:0 !important; border-radius:12px !important; }
@media (max-width:767px) { [data-menu-button] { display:flex !important; } }
.home-hero { background:var(--brand-50) !important; }
.home-hero a.bg-ink { color:#fff !important; }
.home-hero #teklif { position:static !important; transform:none !important; }
.grid-glow { background:var(--brand-50) !important; background-image:none !important; color:var(--ink) !important; }
.grid-glow .text-white { color:var(--ink) !important; }
.grid-glow .text-slate-300 { color:#525252 !important; }
.shadow-soft { box-shadow:0 12px 32px -24px rgba(41,41,41,.28) !important; }
.service-card-actions { display:grid; gap:1rem; margin-top:auto; padding-top:1.5rem; }
.service-card-actions > a { margin-top:0 !important; margin-bottom:0 !important; }

/* Eski JS önbellekte kalsa bile kart bağlantılarını aynı hizada tutar. */
:is(#sehir-ici, #sehirlerarasi, #ofis, #depolama, #asansorlu, #parca-esya) {
  display:flex;
  flex-direction:column !important;
}
:is(#sehir-ici, #sehirlerarasi, #ofis, #depolama, #asansorlu, #parca-esya) > div:last-child > a:not([href*="wa.me"]) {
  margin-top:auto !important;
  margin-bottom:1rem !important;
}
:is(#sehir-ici, #sehirlerarasi, #ofis, #depolama, #asansorlu, #parca-esya) > div:last-child > a[href*="wa.me"] {
  margin-top:0 !important;
}
@media (min-width:768px) {
  header nav { display:grid !important; grid-template-columns:230px minmax(0,1fr) 230px; }
  header nav > div { justify-self:center; }
  header nav > a:not(:first-child):not([data-mobile-call]):not([data-mobile-quote]) { display:flex !important; justify-self:end; }
  .header-phone-button { position:absolute; top:50%; right:calc(166px + 1.25rem); transform:translateY(-50%); }
  .header-phone-button:hover { transform:translateY(calc(-50% - 1px)); }
  header nav > button { grid-column:3; }
}
@media (min-width:1024px) {
  .header-phone-button { right:calc(166px + 2rem); }
}
@media (min-width:1280px) {
  .home-hero > div { grid-template-columns:minmax(520px,1fr) 460px !important; }
  .home-hero > div > div:last-child { display:block; min-height:0 !important; padding-bottom:0 !important; }
  .home-hero #teklif { width:410px !important; margin:0 0 0 auto !important; }
}
@media (min-width:1024px) {
  footer address { width:max-content; max-width:none; justify-self:end; white-space:nowrap; text-align:right !important; }
  .site-footer address { width:auto; max-width:100%; justify-self:auto; white-space:normal; text-align:left !important; }
}
.mobile-sticky-cta { display:none !important; }
@media (max-width:767px) {
  body { padding-top:72px; padding-bottom:76px; }
  .mobile-sticky-cta { display:grid !important; }
  header { position:fixed !important; top:0; left:0; right:0; z-index:1000; box-shadow:inset 0 4px var(--brand-500); }
  .mobile-quote-button { display:flex !important; margin-left:auto; margin-right:8px; }
  .header-phone-button { margin-left:0; margin-right:8px; }
  header nav > a:first-child { width:min(180px, calc(100% - 142px)); }
  header nav > a:first-child img { width:min(170px, 100%) !important; height:auto; }
  header > [data-mobile-menu] { position:absolute; top:100%; left:0; right:0; z-index:60; margin:0; padding:12px 20px 16px; border-width:1px 0 !important; border-color:#e5e5e5 !important; border-radius:0; background:#fff; box-shadow:none; }
  header > [data-mobile-menu] > div { gap:0; }
  header > [data-mobile-menu] > div::before { content:none; }
  header > [data-mobile-menu] a { display:block; padding:12px 0; border-radius:0; background:transparent; color:#525252; font-size:15px; font-weight:600; transition:color .2s ease; }
  header > [data-mobile-menu] a::after { content:none; }
  header > [data-mobile-menu] a:hover,
  header > [data-mobile-menu] a.is-current { background:transparent; color:var(--brand-600); }
}
@keyframes reference-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.reference-marquee-track {
  display: flex;
  width: max-content;
  animation: reference-marquee 28s linear infinite;
  will-change: transform;
}

.reference-marquee:hover .reference-marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .reference-marquee-track {
    animation: none;
    transform: none;
  }
}

:where(a, button, summary):focus-visible { outline:3px solid var(--brand-600); outline-offset:4px; }
header nav > div { gap:1.75rem; align-items:center; }
header nav > div > a { white-space:nowrap; }
header a[aria-current="page"] { color:var(--brand-700); }
a.bg-brand-600:hover, button.bg-brand-600:hover { background-color:var(--brand-700); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* 81 il rehberi: masaüstünde sol menü, mobilde kompakt şehir seçici. */
.city-guide-layout { display:grid; gap:2rem; }
.city-sidebar { display:none; }
.city-content[hidden] { display:none !important; }
.city-content { scroll-margin-top:7rem; }
.city-nav { max-height:calc(100vh - 230px); overflow-y:auto; padding-right:.25rem; scrollbar-width:thin; }
.city-button { display:block; border-radius:.65rem; padding:.58rem .75rem; color:#525252; font-size:.875rem; font-weight:600; line-height:1.25rem; transition:background-color .18s ease,color .18s ease; }
.city-button:hover { background:var(--brand-50); color:var(--brand-700); }
.city-button.active { background:var(--brand-600); color:#fff; }
.city-info-card { display:flex; flex-direction:column; gap:.2rem; border:1px solid #e5e7eb; border-radius:1rem; background:#fafafa; padding:1rem; }
.city-info-card strong { color:var(--ink); }
.city-info-card span { color:#64748b; }
.route-price-panel { margin-top:2.25rem; padding:2rem 0; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; background:transparent; }
.article-body .route-price-panel { padding-bottom:2rem; border-bottom:1px solid #d8d8d8; }
.route-price-heading { display:block; padding:0; background:transparent; }
.route-price-heading h2 { margin:0; padding:0; color:var(--ink); font-size:1.35rem; line-height:1.4; font-weight:800; }
.route-price-heading h2::before { content:none; }
.article-body .route-price-heading h2 { position:relative; padding-left:1rem; }
.article-body .route-price-heading h2::before { content:""; position:absolute; top:.12em; bottom:.12em; left:0; width:4px; border-radius:999px; background:var(--brand-500); }
.route-price-kicker { margin:0 0 .35rem !important; color:var(--brand-700); font-size:.72rem; line-height:1.2; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.route-price-list { display:grid; gap:0; margin-top:1.4rem; }
.route-price-list li { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr); align-items:baseline; gap:1.5rem; padding:.85rem 0; }
.route-price-list strong { color:var(--ink); font-weight:750; }
.route-price-list span { color:#525252; font-weight:500; }
.route-price-note { margin:1.25rem 0 0 !important; padding:0; color:#64748b; font-size:.82rem !important; line-height:1.65 !important; }
@media (max-width:639px) {
  .route-price-panel { padding:1.5rem 0; }
  .route-price-heading h2,.article-body .route-price-heading h2 { font-size:1.15rem; }
  .route-price-list li { grid-template-columns:1fr; gap:.2rem; padding:.7rem 0; }
  .route-price-list span { font-size:.95rem; }
}
.city-step { display:flex; gap:.85rem; border:1px solid #e5e7eb; border-radius:1rem; padding:1rem; }
.city-step > span { display:flex; width:2rem; height:2rem; flex:0 0 2rem; align-items:center; justify-content:center; border-radius:999px; background:var(--brand-100); color:var(--brand-800); font-weight:800; }
.city-step strong { color:var(--ink); }
.city-step p { margin-top:.25rem; font-size:.875rem; line-height:1.5rem; }
@media (min-width:1024px) {
  .city-guide-layout { grid-template-columns:260px minmax(0,1fr); align-items:start; }
  .city-sidebar { position:sticky; top:6.5rem; display:block; }
}
.blog-card[hidden] { display:none !important; }
.blog-card { min-width:0; transition:transform .2s ease,box-shadow .2s ease; }
.blog-card > a { flex:0 0 auto; }
.blog-card > div { min-height:250px; }
#blog-grid { align-items:stretch; }
#blog-search { scroll-margin-top:7.5rem; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 18px 38px -26px rgba(41,41,41,.42) !important; }
.article-body section { border-bottom:1px solid #d7dce2; padding-bottom:2.25rem; }
.article-body h2 { position:relative; scroll-margin-top:6rem; padding-left:1rem; color:var(--ink); font-size:1.55rem; line-height:1.35; font-weight:800; letter-spacing:-.02em; }
.article-body h2::before { content:""; position:absolute; top:.15em; bottom:.15em; left:0; width:4px; border-radius:999px; background:var(--brand-500); }
.article-body section > p { margin-top:1rem; }
.article-feature-list { display:grid; gap:1rem; margin-top:1.25rem; }
.article-feature-list > div { border-left:3px solid var(--brand-300); padding:.2rem 0 .2rem 1rem; }
.article-feature-list strong,.article-process strong { color:var(--ink); }
.article-feature-list p,.article-process p { margin-top:.25rem; font-size:.925rem; line-height:1.65; }
.article-process { display:grid; gap:1.2rem; margin-top:1.35rem; }
.article-process li { display:flex; gap:1rem; }
.article-process li > span { display:flex; width:2rem; height:2rem; flex:0 0 2rem; align-items:center; justify-content:center; border-radius:999px; background:var(--brand-100); color:var(--brand-800); font-weight:800; }
.article-check-list { display:grid; gap:.7rem; margin-top:1.2rem; }
.article-check-list li { position:relative; padding-left:1.6rem; }
.article-check-list li::before { content:'✓'; position:absolute; left:0; color:var(--brand-600); font-weight:800; }
.article-faq { margin-top:1.2rem; border:1px solid #e2e8f0; border-radius:1rem; padding:0 1.25rem; }
.article-faq details + details { border-top:1px solid #e2e8f0; }
.article-faq summary { cursor:pointer; padding:1rem 0; color:var(--ink); font-weight:700; }
.article-faq p { padding:0 0 1rem; font-size:.925rem; line-height:1.7; }
.blog-page-button { display:flex; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #e2e8f0; border-radius:.7rem; background:#fff; color:#334155; font-size:.875rem; font-weight:700; transition:.18s; }
.blog-page-button:hover { border-color:var(--brand-300); color:var(--brand-700); }
.blog-page-button.active { border-color:var(--brand-600); background:var(--brand-600); color:#fff; }
.district-list :is(a,span),
body:has(a[href="#uskudar"]) main nav[aria-label="İstanbul ilçeleri"] a { border:1px solid #e2e8f0; border-radius:999px; background:#fff; padding:.55rem .85rem; color:#475569; font-size:.875rem; font-weight:600; transition:.18s; }
body:has(a[href="#uskudar"]) main nav[aria-label="İstanbul ilçeleri"] a:hover { border-color:var(--brand-300); color:var(--brand-700); }
body:has(a[href="#uskudar"]) main article { scroll-margin-top:6rem; border:1px solid #e2e8f0; border-radius:1.25rem; background:#fff; padding:1.5rem; }
body:has(a[href="#uskudar"]) main article h2 { color:var(--ink); font-size:1.15rem; line-height:1.5; font-weight:800; }
body:has(a[href="#uskudar"]) main article p { margin-top:.65rem; font-size:.925rem; line-height:1.7; }
.district-card-grid { align-items:stretch; }
.district-card-grid article { position:relative; display:flex; min-width:0; flex-direction:column; overflow:hidden; scroll-margin-top:6rem; border:1px solid #e5e7eb; border-radius:1.25rem; background:#fff; padding:1.6rem; box-shadow:0 14px 34px -30px rgba(41,41,41,.55); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.district-card-grid article::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--brand-500),var(--brand-300)); }
.district-card-grid article:hover { transform:translateY(-3px); border-color:var(--brand-200); box-shadow:0 20px 40px -30px rgba(41,41,41,.65); }
.district-card-grid article h2 { position:relative; padding-left:.9rem; color:var(--ink); font-size:1.08rem; line-height:1.45; font-weight:800; }
.district-card-grid article h2::before { content:""; position:absolute; top:.15em; bottom:.15em; left:0; width:3px; border-radius:999px; background:var(--brand-500); }
.district-card-grid article p { margin-top:.85rem; color:#5f6368; font-size:.925rem; line-height:1.7; }
@media (max-width:639px) { .district-card-grid { gap:1rem; } .district-card-grid article { padding:1.35rem; } }
