/* Batı Anadolu Demir Çelik — marka katmanı.
   Logo renkleri: lacivert #232850 ve çelik grisi/gümüş. Bu dosya en son yüklenir. */
:root{
  --brand:#232850;--brand-600:#2f366a;--brand-dark:#191d3d;--brand-deep:#12152c;
  --steel:#667399;--steel-light:#9aa3b8;--silver:#c9ced8;--silver-soft:#eef0f5;
  --yellow:#232850;--ink:#232850;--muted:#6b7186;--paper:#f4f5f8;--line:#e3e6ee;
}
body{color:#3d4258}
p{color:#6b7186}
::selection{background:#232850;color:#fff}
:focus-visible{outline:3px solid #667399;outline-offset:4px}
.skip{background:var(--brand);color:#fff}

/* ---------- Üst bilgi şeridi ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--paper);color:#5b6178;border-bottom:1px solid var(--line);padding:7px var(--v2-gutter,4%);font-size:12.5px;letter-spacing:.02em;min-height:38px}
.topbar .topbar-tagline{margin-right:0;color:var(--brand);font-weight:700;letter-spacing:.12em;font-size:11.5px;white-space:nowrap}
.topbar .topbar-middle{margin-right:auto;color:#7b8197;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-contact{display:flex;align-items:center;gap:20px;flex:none}
.topbar a{color:#3d4258;font-weight:600;white-space:nowrap}
.topbar a:hover{color:var(--brand)}
.topbar-phone:before,.topbar-mail:before{content:'';display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;background:var(--steel);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.topbar-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.topbar-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E")}
.topbar-quote{display:none}
.topbar-socials:empty{display:none}

/* ---------- Sosyal medya: resmî logolar, resmî renkler ---------- */
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.social,footer .socials a.social{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 3px 10px #12152c1f;transition:transform .2s,box-shadow .2s}
.social .brand-icon{width:22px;height:22px;display:block}
a.social:hover{transform:translateY(-3px);box-shadow:0 8px 18px #12152c33}
.social.is-unset{cursor:default}
.socials-chips{margin-top:18px}
.socials-plain{gap:14px}
.socials-plain .social{width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0}
.socials-plain .social .brand-icon{width:17px;height:17px}
.socials-plain a.social:hover{transform:translateY(-2px);box-shadow:none}
.v2-contact .socials{margin-top:14px}

/* ---------- Header ---------- */
header{border-bottom:1px solid var(--line)}
header .brand-logo,.brand .brand-logo{height:66px;width:auto;display:block;transition:height .25s}
header.is-scrolled .brand-logo{height:54px}
#navigation{gap:22px}
#navigation>a,#navigation .dropdown>button{color:var(--brand);font-weight:700;letter-spacing:.03em}
#navigation>a{position:relative;padding:15px 0}
#navigation>a:after{content:'';position:absolute;left:0;right:100%;bottom:8px;height:2px;background:var(--brand);transition:right .2s}
#navigation>a:hover:after,#navigation>a:focus-visible:after{right:0}
nav>a:hover,.dropdown>button:hover,#navigation .dropdown.open>button{color:var(--steel)}
#navigation .dropdown .dropdown-menu{border-top-color:var(--brand)}
.v2-menu-intro{background:linear-gradient(120deg,#f4f5f8,#eceef5)}
.v2-menu-intro>span{color:var(--brand)}
#navigation .v2-menu-links>a{color:#2b305a}
#navigation .v2-menu-links>a:hover,#navigation .v2-menu-links>a:focus-visible{background:var(--paper);color:var(--brand)}
#search-open{color:var(--brand)}

/* ---------- Butonlar ---------- */
.button,.text-link.button{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 12px #2328501f}
.button:hover,.text-link.button:hover{background:var(--brand-600);border-color:var(--brand-600);box-shadow:0 8px 20px #23285033}
.button.outline{background:transparent;border-color:#ffffff99;color:#fff;box-shadow:none}
.button.outline:hover{background:#fff;border-color:#fff;color:var(--brand)}
.button.dark{background:var(--brand-dark);color:#fff}
.filter:hover,.filter.active{background:var(--brand);border-color:var(--brand);color:#fff}
.rail-arrows button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ref-pagination button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.top-button{background:var(--brand);color:#fff;box-shadow:0 6px 18px #12152c40}
.ref-news-copy>span.card-action,.ref-overlay-news>div>span.card-action{background:var(--brand);color:#fff}
.ref-service-card>div>span{background:var(--brand);color:#fff;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.ref-service-card:hover>div>span,.ref-service-card:focus-visible>div>span{opacity:1;transform:translateY(0)}
.product-inspect{background:#232850eb;color:#fff}
.new-label{background:var(--brand)}
.ref-document-card span{background:#232850e0;color:#fff;padding:5px 0}
.ref-video-card span,.ref-project-video>button{background:var(--brand);color:#fff}
.modal-close{background:var(--brand)}
/* koyu zemin üzerindeki birincil butonlar */
.polish-experience .button,.ref-slider .button:not(.outline),.ref-package-bottom .button,.opening-detail.card-action{background:#fff;border-color:#fff;color:var(--brand);box-shadow:none}
.polish-experience .button:hover,.ref-slider .button:not(.outline):hover,.ref-package-bottom .button:hover{background:var(--silver-soft);border-color:var(--silver-soft);color:var(--brand)}
.opening-detail.card-action{border-radius:4px}

/* ---------- Açılış paneli ---------- */
.big-number{color:#fff;opacity:.28}
.ref-opening>a:after{background:linear-gradient(#191d3d40,#191d3d55 45%,#12152ceb)}
.ref-opening>a:hover:after,.ref-opening>a:focus-visible:after{background:linear-gradient(#191d3d1a,#191d3d40 45%,#12152cf2)}
.ref-opening h1{max-width:260px;font-size:25px}

/* ---------- Bölüm başlıkları ---------- */
.ref-section-heading h2,.polish-section-title h2,.ref-about h2{color:var(--brand)}
.ref-section-heading h2:before,.ref-section-heading h2:after{background:var(--brand)}
.polish-kicker{color:var(--steel)}
.ref-about h3{color:var(--steel);font-weight:600}
.ref-about-frame:before{border-color:var(--brand)}
.ref-about-frame img{border-radius:2px}
.ref-project-photo{background:linear-gradient(var(--brand) 0 25%,#fff 25% 78%,var(--brand) 78%)}
.ref-project-title h3,.ref-service-card h3,.ref-category h3,.ref-news-copy h3,.ref-team-caption h3{color:var(--brand)}
.ref-project-title span{background:var(--steel)}
.project-hover{background:#232850e0}
.ref-service-card h3{font-weight:600}
.ref-product-card h3{color:#2b305a;font-weight:600;font-size:16px;text-align:center}
.ref-product-photo{padding:0;border:0;background:var(--silver-soft)}
.ref-product-photo img{object-fit:cover}
.ref-price:empty{display:none}
.ref-category img{object-fit:cover}
.step-icon{background:var(--silver-soft);color:var(--brand)}
.polish-steps article:hover{border-color:var(--steel)}
.polish-steps h3{color:var(--brand)}
.step-connector{background:transparent;color:var(--steel)}
.ref-service-tabs button{color:#4a5072;font-weight:600}
.ref-service-tabs button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.ref-service-panel h3{color:var(--brand)}
.ref-service-panel>img{border-radius:8px}

/* ---------- Koyu tasarımlı modüller ---------- */
.experience-intro .polish-kicker{color:var(--silver)}
.experience-intro h2 em{color:var(--silver)}
.experience-cards svg,.experience-cards strong span{color:var(--silver)}
.ref-slider.hero{background:var(--brand-dark)}
.ref-slider .hero-image{filter:none}
.ref-slider.hero:after{background:linear-gradient(90deg,#12152ce6 0%,#191d3db8 45%,#191d3d59 100%)}
.ref-slider .hero-content p{color:var(--silver)}
.eyebrow:before{background:var(--silver)}
.slide-controls button.active{border-color:#fff;color:#fff}
.ref-banner-shape{opacity:.5}
.ref-coffee h2 span{color:var(--silver)}
.ref-package-bottom{background:var(--brand-dark)}
.ref-package{border-radius:10px;overflow:hidden;box-shadow:0 12px 35px #12152c14}
.ref-package-top h3{letter-spacing:.14em;font-size:15px;font-weight:700}
.ref-package strong{font-size:27px;font-weight:600}
.ref-package li{color:#4a5072}

/* ---------- Ana sayfa modül arka planları (panelden yönetilir) ---------- */
.home-sec{position:relative;background-position:center;background-size:cover;background-repeat:no-repeat}
.home-sec.has-bg>section{background-color:transparent!important;background-image:none!important}
.home-sec.tone-dark .ref-section-heading h2,.home-sec.tone-dark .polish-section-title h2{color:#fff}
.home-sec.tone-dark .ref-section-heading h2:before,.home-sec.tone-dark .ref-section-heading h2:after{background:var(--silver)}
.home-sec.tone-dark .polish-kicker{color:var(--silver)}
.home-sec.tone-dark .polish-section-title>p,.home-sec.tone-dark .ref-demo{color:#d9dce6}
.home-sec.tone-dark .ref-section-heading>.button,.home-sec.tone-dark .polish-section-title>.button,.hs-about.tone-dark .button,.hs-serviceTabs.tone-dark .ref-service-panel .button{background:#fff;border-color:#fff;color:var(--brand)}
.home-sec.tone-dark .rail-arrows button{background:transparent;border-color:#ffffff66;color:#fff}
.home-sec.tone-dark .rail-arrows button:hover{background:#fff;color:var(--brand)}
.hs-about.tone-dark h2,.hs-about.tone-dark h3,.hs-serviceTabs.tone-dark .ref-service-panel h3,.hs-testimonials.tone-dark h2,.hs-testimonials.tone-dark #quote-author{color:#fff}
.hs-about.tone-dark p,.hs-serviceTabs.tone-dark .ref-service-panel p,.hs-testimonials.tone-dark blockquote{color:#d9dce6}
.hs-about.tone-dark .ref-about-frame:before{border-color:var(--silver)}
.hs-testimonials.tone-dark .ref-testimonial-box{border-color:#ffffff59}
.hs-partners.tone-dark .partner-rail button,.hs-serviceTabs.tone-dark .ref-service-tabs button:not(.active){background:#fff}
.home-sec.tone-light.has-bg .polish-steps article,.home-sec.tone-light.has-bg .ref-service-card{box-shadow:0 14px 35px #12152c12}

/* ---------- İç sayfalar ---------- */
.ref-page-banner{position:relative}
.ref-page-banner h1{letter-spacing:.5px}
.ref-breadcrumb a:hover{color:var(--brand)}
.sidebar .selected,.side-links a:hover{color:var(--brand);font-weight:600}
.prose h2,.v2-contact h2,.v2-map-heading h2,.polish-about-detail .prose h2,.ref-product-detail h2,.v2-social-heading{color:var(--brand)}
.prose ul li::marker{color:var(--steel)}
.ref-thumbnails button.active{border-color:var(--brand)}
.ref-pill-tabs button.active{color:#fff;background:var(--brand);border-color:var(--brand)}
.product-facts b,.product-facts span{color:var(--brand);font-weight:600}
.ref-detail-price strong{color:var(--brand)}
.product-detail-gallery{padding:0;overflow:hidden}
.product-detail-gallery img{object-fit:cover}
.ref-product-detail .ref-thumbnails img{object-fit:cover;border-radius:10px}
.ref-product-detail .ref-thumbnails button{width:118px;height:92px;border-radius:12px}
.v2-contact-card>span{background:var(--silver-soft);color:var(--brand)}
.v2-contact-card h3{color:var(--brand)}
.accordion summary{color:var(--brand)}
.panel h3{color:var(--brand)}
.form-result{background:var(--silver-soft);border-left:4px solid var(--brand)}
.search-results a:hover{color:var(--steel)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--steel);outline-offset:1px;border-color:var(--steel)}
.ref-map g[data-il-adi]{fill:#c9ced8}
.ref-map g[data-il-adi]:hover,.ref-map g[data-il-adi]:focus,.ref-map g.selected{fill:var(--brand)}
.empty{color:#6b7186}

/* ---------- Footer ---------- */
footer{background:var(--brand-dark)}
footer .footer-top h4{color:#fff;font-weight:600;letter-spacing:.06em}
footer .footer-top p,footer a:not(.brand):not(.social){color:#c3c8d6}
footer a:not(.brand):not(.social):hover{color:#fff}
.ref-newsletter p{color:#c3c8d6}
.newsletter input::placeholder{color:#aab0c3}
.newsletter button{background:#fff;color:var(--brand);font-weight:700;letter-spacing:.04em}
.newsletter button:hover{background:var(--silver)}
.footer-bottom{border-top:1px solid #ffffff26;color:#aab0c3}
.footer-bottom .brand-logo{height:74px}

/* ---------- Sabit iletişim kısayolları ---------- */
.dock-item .brand-icon{width:23px;height:23px}
.dock-phone{background:var(--brand)}
.dock-whatsapp{background:#25D366}
.dock-instagram{background:linear-gradient(45deg,#FFD600,#FF7A00 25%,#FF0069 50%,#D300C5 75%,#7638FA)}
.dock-quote{background:#fff;color:var(--brand);border-color:var(--line)}
.dock-item>span{background:var(--brand-dark)}

/* ---------- Duyarlı düzen ---------- */
@media(max-width:1380px){.topbar .topbar-middle{display:none}.topbar .topbar-tagline{margin-right:auto}#navigation{gap:15px}}
@media(max-width:1250px){header .brand-logo{height:58px}}
@media(max-width:1050px){
  #navigation>a:after{display:none}
  #navigation>a{padding:12px;border-radius:6px;background:var(--paper)}
  #navigation .dropdown>button{background:var(--paper)}
}
@media(max-width:800px){
  .topbar{font-size:12px;gap:12px;padding:6px 16px}
  .topbar .topbar-tagline{display:none}
  .topbar-contact{width:100%;justify-content:space-between;gap:12px}
  .topbar a{margin-left:0}
  .topbar-mail{display:none}
  .topbar-socials{margin-left:auto}
}
@media(max-width:700px){
  header .brand-logo,header.is-scrolled .brand-logo{height:48px}
  .footer-bottom .brand-logo{height:62px}
  .ref-product-detail .ref-thumbnails button{width:78px;height:62px}
}

/* Eski şablon kurallarının (.topbar span:first-child / nth-child) sosyal ikonları etkilemesini önler */
.topbar .topbar-socials{display:inline-flex!important;margin:0!important}
.topbar .topbar-socials:empty{display:none!important}
.topbar .socials .social{display:grid!important;margin:0!important;color:inherit}
@media(max-width:800px){
  .topbar .topbar-middle{display:none!important}
  .ref-opening h1{font-size:18px;max-width:none;min-height:0;padding-left:6px;overflow-wrap:anywhere}
  .big-number{font-size:70px}
}
@media(max-width:500px){
  .ref-opening h1{font-size:15px;padding-top:18px}
  .big-number{font-size:60px;top:-2px}
  .ref-opening-caption{left:7%;right:4%}
}
