/*
 * Utkum İnşaat — kurumsal tema (logo renkleri: siyah + altın).
 * Bu dosya diğer stil dosyalarından SONRA yüklenir ve yalnızca renk / marka katmanını değiştirir.
 * Renkler ve arka plan görselleri yönetim panelinden gelir (Site Ayarları › Logo ve Renkler,
 * Görseller ve Arka Planlar); <head> içindeki #theme-vars bloğu aşağıdaki değişkenleri ezer.
 */
:root{
  --brand:#c99a3b;          /* ana vurgu (altın) */
  --brand-hi:#ecd08a;       /* açık ton */
  --brand-deep:#8f6515;     /* açık zeminde okunur koyu ton */
  --brand-soft:#f8f1df;     /* çok açık zemin tonu */
  --brand-line:#e7d5a8;     /* ince çizgi tonu */
  --on-brand:#14110a;       /* vurgu üstü yazı */
  --ink:#0d0d0f;            /* koyu renk (siyah) */
  --ink-2:#17171a;
  --ink-rgb:13,13,15;
  --orange:var(--brand);
  --blue:var(--ink);
  --paper:#f6f5f2;
  --line:#e4e2dc;
  --muted:#62625f;
  --wa:#25D366;             /* WhatsApp resmi yeşili */
  --logo-h:78px;
  --logo-h-m:58px;
  /* Koyu bölümlerin fotoğraf üstü karartma katmanları (fotoğraflar panelden gelir, <head> içinde eklenir) */
  --ov-hero:linear-gradient(rgba(var(--ink-rgb),.8),rgba(var(--ink-rgb),.88));
  --ov-footer:linear-gradient(90deg,rgba(var(--ink-rgb),.95),rgba(var(--ink-rgb),.8));
  --ov-selection:linear-gradient(rgba(var(--ink-rgb),.8) 0 280px,#fff 280px);
  --ov-counters:linear-gradient(rgba(var(--ink-rgb),.86),rgba(var(--ink-rgb),.92));
}

/* ------------------------------------------------------------ genel */
::selection{background:var(--brand);color:var(--on-brand)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.eyebrow,.ref-title>p,.menu-intro>small,.contact-block small,.search-results small,.card-body .meta,.doc-icon,.all-products a,.roof-project .text-link,.about-contact a{color:var(--brand-deep)}
.eyebrow:before{background:var(--brand)}
.ref-title>span{background:var(--brand-line)}
.ref-title>span:before{background:var(--brand);box-shadow:0 0 0 3px #fff}
.section:before{opacity:.05}
body.no-pattern .section:before{display:none}
.ref-service-section{background:var(--paper)}
.metal-section{background:#fafaf8}
.home-contact{background:#fafaf8}
.feature-overlap{background:#f6f5f2}

/* ------------------------------------------------------------ butonlar */
.btn{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-hi) 52%,var(--brand) 100%);background-size:200% 100%;background-position:0 0;color:var(--on-brand);border-color:var(--brand);transition:background-position .35s,transform .25s,box-shadow .25s}
.btn:hover{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-hi) 52%,var(--brand) 100%);background-size:200% 100%;background-position:100% 0;transform:translateY(-2px);box-shadow:0 10px 22px rgba(var(--ink-rgb),.16)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink-2);box-shadow:0 10px 22px rgba(var(--ink-rgb),.25)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:var(--brand-soft)}
.btn.line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.line:hover{background:var(--paper);box-shadow:none}
.sidebar .btn{color:var(--on-brand)}
.sidebar .btn.dark{color:#fff}
.pill-link{border-color:var(--brand);color:var(--ink)}
.pill-link:hover{background:var(--brand);color:var(--on-brand)}
.text-link{border-bottom-color:var(--brand)}
.whatsapp-order,.whatsapp-order:hover{background:var(--wa);border-color:var(--wa);color:#fff}

/* ------------------------------------------------------------ üst şerit */
.topbar{background:var(--ink);color:#d7d5cf;border:0}
.topbar a{color:#fff}
.topbar .ui-icon{color:var(--brand-hi)}
.topbar .wa-glyph{width:15px;height:15px;color:var(--wa);flex-shrink:0}
.topbar-message{color:#bdbbb4}
.topbar-message i{background:var(--brand)}
.topbar-cta{background:linear-gradient(135deg,var(--brand),var(--brand-hi));color:var(--on-brand)!important;font-weight:800!important}
.topbar .topbar-cta .ui-icon{color:var(--on-brand)}

/* ------------------------------------------------------------ header + logo */
.header{border-bottom:1px solid #eceae4;box-shadow:0 6px 24px rgba(var(--ink-rgb),.06)}
.brand.brand-logo{gap:0;flex-shrink:0}
.brand.brand-logo img{height:var(--logo-h);width:auto;max-width:260px;object-fit:contain;display:block}
.header-inner{min-height:calc(var(--logo-h) + 26px)}
.header .nav-group summary{min-height:calc(var(--logo-h) + 26px)}
.nav .active,.nav-group[open]>summary,.header .nav>a:hover,.header .nav-group summary:hover{color:var(--brand-deep)}
.header .mega-panel{border-top-color:var(--brand);box-shadow:0 22px 55px rgba(var(--ink-rgb),.16)}
.menu-intro{background:var(--paper);border-right-color:var(--line)}
.header .menu-links>a:hover,.header .menu-links>a:focus-visible{background:var(--brand-soft);border-color:var(--brand-line)}
.menu-icon{background:var(--ink);color:var(--brand-hi)}
.dropdown{border-top-color:var(--brand)}
.dropdown a:hover{color:var(--brand-deep)}
.header .ref-drawer-button{background:var(--ink);color:#fff}
.header .ref-drawer-button:hover{background:var(--ink-2);color:var(--brand-hi)}
.icon-button:hover{border-color:var(--brand)}

/* ------------------------------------------------------------ slider */
.reference-hero{background:var(--ink)}
.ref-slide:after{background:linear-gradient(90deg,rgba(var(--ink-rgb),.74),rgba(var(--ink-rgb),.22))}
.ref-slide.centered:after{background:rgba(var(--ink-rgb),.56)}
.ref-slide .wrap>p{color:var(--brand-hi);position:relative;padding-left:46px}
.ref-slide .wrap>p:before{content:'';position:absolute;left:0;top:50%;width:32px;height:2px;background:var(--brand)}
.ref-slide.centered .wrap>p{padding-left:0}
.ref-slide.centered .wrap>p:before{display:none}
.ref-slide-controls button[aria-pressed=true]{background:var(--brand);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.ref-prev,.ref-next{background:rgba(255,255,255,.14);backdrop-filter:blur(4px);transition:background .25s,color .25s}
.ref-prev:hover,.ref-next:hover{background:var(--brand);color:var(--on-brand)}

/* ------------------------------------------------------------ avantaj kartları */
.flip-front{box-shadow:0 10px 30px rgba(var(--ink-rgb),.07)}
.flip-front>span{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft);border-style:solid}
.flip-back{background:var(--ink);color:#fff;border-bottom:4px solid var(--brand)}
.flip-back p{color:#d9d7d0}
.flip-back b{border-bottom-color:var(--brand);color:var(--brand-hi)}

/* ------------------------------------------------------------ hakkımızda */
.experience-band{background:var(--ink);color:#fff;border-left:5px solid var(--brand)}
.experience-band>span,.experience-band .ui-icon{color:var(--brand-hi)}
.about-contact>span{background:linear-gradient(135deg,var(--brand),var(--brand-hi));color:var(--on-brand)}
.photo-label{background:var(--ink);color:#fff}
.check-list span:before{color:var(--brand-deep)}

/* ------------------------------------------------------------ hizmet / uygulama kartları */
.service-grid .roof-service,.roof-service{border-color:var(--line)}
.roof-service:hover{box-shadow:0 18px 40px rgba(var(--ink-rgb),.1)}
.expertise-rail .metal-service{border-color:var(--line)}
.project-plus{background:var(--ink);color:var(--brand-hi);transition:background .25s,color .25s}
.ref-project:hover .project-plus{background:var(--brand);color:var(--on-brand)}
.ref-roof-projects{background:#fff;background-image:var(--ov-selection);background-size:cover;background-position:center top;background-repeat:no-repeat}
.roof-project h3,.ref-product h3,.team-label h3,.counter-box h3{font-family:inherit;font-weight:800}
.ref-roof-projects .ref-title>p{color:var(--brand-hi)}
.roof-project.is-centered{background:var(--ink);color:#fff;box-shadow:0 18px 40px rgba(var(--ink-rgb),.28);outline:1px solid var(--brand)}
.roof-project.is-centered p{color:#d9d7d0}
.roof-project.is-centered .text-link{color:var(--brand-hi)}
.number{background:var(--brand);color:var(--on-brand)}
.filter-bar button.active,.product-filters button.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 5px 12px rgba(var(--ink-rgb),.18)}
.filter-bar button:hover{border-color:var(--brand)}
.price{color:var(--ink)}
.gallery-button{background:var(--ink)}
.rail-controls button:hover,.rail-dots i:first-child{background:var(--brand);color:var(--on-brand)}
.team-label{border-bottom-color:var(--brand)}
.team-social a{background:var(--brand);color:var(--on-brand)}
.blog-date{background:var(--brand);color:var(--on-brand)}
.project-body span{border-bottom-color:var(--brand)}

/* ------------------------------------------------------------ sayaçlar */
.ref-counters{background:var(--ink);background-image:var(--ov-counters);background-size:cover;background-position:center;background-repeat:no-repeat}
.counter-box:hover{border-color:var(--brand)}
.counter-box>.counter-icon{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--brand-hi)}
.counter-box p{color:#bdbbb4}
.counter-box strong{color:#fff}
.counter-box strong b{color:inherit;font-weight:inherit}

/* ------------------------------------------------------------ SSS + form */
.ref-faq .faq summary:before{background:var(--ink);color:var(--brand-hi)}
.ref-faq .faq details[open]{box-shadow:0 14px 34px rgba(var(--ink-rgb),.08);outline:1px solid var(--brand-line)}
.faq summary:after{color:var(--brand-deep)}
.ref-contact-box{border-top-color:var(--brand)}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
.notice{background:var(--brand-soft);border-left-color:var(--brand);color:#4d3b12}
.upload-box{border-color:#cfcabb;background:#fbfaf7}
.upload-box:focus-within,.upload-box:hover{border-color:var(--brand);background:var(--brand-soft)}
.upload-box>.ui-icon,.map-caption>.ui-icon{color:var(--brand-deep)}
.upload-box span,.map-caption small{color:#77756e}
.upload-remove{background:var(--brand-soft);color:#5d4510}
.contact-demo small{color:var(--brand-hi)}
.company-video img{background:var(--ink)}

/* ------------------------------------------------------------ iç sayfa başlığı */
.page-hero{background:var(--ink);background-image:var(--ov-hero);background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero h1{position:relative;padding-bottom:18px}
.page-hero h1:after{content:'';position:absolute;left:50%;bottom:0;width:64px;height:3px;margin-left:-32px;background:linear-gradient(90deg,var(--brand),var(--brand-hi));border-radius:3px}
.breadcrumb span{color:var(--brand)}
.sidebar{background:#fbfaf7}
.sidebar a[aria-current=page]{color:var(--brand-deep);font-weight:700}

/* ------------------------------------------------------------ footer */
.footer{background:var(--ink);background-image:var(--ov-footer);background-size:cover;background-position:center 52%;background-repeat:no-repeat;border-top:3px solid var(--brand)}
.footer p{color:#c9c7c0}
.footer h3{position:relative;padding-bottom:12px;margin-bottom:20px}
.footer h3:after{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--brand)}
.footer a:not(.brand){color:#d2d0c9}
.footer a:hover{color:var(--brand-hi)}
.footer .brand.brand-logo img{height:calc(var(--logo-h) + 14px)}
.footer .brand.brand-logo.on-plate{display:inline-flex;background:#fff;padding:14px 20px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.copyright{border-top-color:rgba(255,255,255,.14);color:#a3a19a}
.demo-note{color:#a3a19a}

/* ------------------------------------------------------------ sabit butonlar (WhatsApp yuvarlak) */
.floating{right:22px;bottom:22px;flex-direction:column-reverse;align-items:center;gap:12px}
.floating a.wa-float{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.45),0 4px 10px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s}
.floating a.wa-float:hover{transform:scale(1.07);box-shadow:0 14px 32px rgba(37,211,102,.55),0 4px 10px rgba(0,0,0,.2)}
.floating a.wa-float svg{width:34px;height:34px;display:block}
.floating a.wa-float:before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:waPulse 2.4s ease-out infinite;pointer-events:none}
.floating a.wa-float .wa-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(8px);background:#fff;color:#111;font-size:13px;font-weight:700;white-space:nowrap;padding:8px 14px;border-radius:22px;box-shadow:0 8px 24px rgba(0,0,0,.16);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.floating a.wa-float:hover .wa-tip,.floating a.wa-float:focus-visible .wa-tip{opacity:1;transform:translateY(-50%)}
.floating button{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--brand-hi);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;padding:0}
.floating button:hover{background:var(--brand);color:var(--on-brand)}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

/* ------------------------------------------------------------ pencereler */
.dialog::backdrop{background:rgba(var(--ink-rgb),.86)}
.info-drawer::backdrop,.contact-modal::backdrop{background:rgba(var(--ink-rgb),.66);backdrop-filter:blur(5px)}
.dialog .close-dialog{background:var(--paper);color:var(--ink)}
.dialog .close-dialog:hover{background:var(--ink);color:#fff}
.drawer-brand.brand-logo{margin:4px 0 26px}
.drawer-brand.brand-logo img{height:86px;width:auto;border-radius:0;margin:0;object-fit:contain}
.info-drawer .drawer-phone{color:var(--brand-deep)}
.info-drawer>a{border-bottom-color:var(--line)}
.contact-modal{border-top:4px solid var(--brand)}
.map-frame{border-color:var(--line)}

/* ------------------------------------------------------------ mobil */
@media(max-width:980px){
  .header-inner{min-height:calc(var(--logo-h-m) + 22px)}
  .brand.brand-logo img{height:var(--logo-h-m)}
  .header .nav{top:calc(var(--logo-h-m) + 22px)}
  .header .nav-group summary{min-height:0}
  .header .nav-group>.mega-panel{background:var(--paper)}
  .menu-icon{background:var(--ink)}
}
@media(max-width:600px){
  :root{--ov-selection:linear-gradient(rgba(var(--ink-rgb),.8) 0 230px,#fff 230px)}
  .ref-slide .wrap>p{padding-left:0}
  .ref-slide .wrap>p:before{display:none}
  .floating{right:14px;bottom:14px}
  .floating a.wa-float{width:54px;height:54px}
  .floating a.wa-float svg{width:30px;height:30px}
  .floating a.wa-float .wa-tip{display:none}
  .footer .brand.brand-logo img{height:calc(var(--logo-h-m) + 16px)}
}
@media(prefers-reduced-motion:reduce){.floating a.wa-float:before{animation:none;display:none}}
@media print{.floating{display:none}}

/* ------------------------------------------------------------ footer sütun sayısı (modüller kapatılınca) */
@media(min-width:901px){
  .footer-grid.cols-3{grid-template-columns:1.4fr 1fr 1.2fr}
  .footer-grid.cols-2{grid-template-columns:1.4fr 1.2fr}
  .footer-grid.cols-1{grid-template-columns:1fr}
}

/* Yukarı çık butonu kaydırınca belirir (theme.js) */
.floating button[data-top]{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s,background .2s,color .2s}
.floating.is-scrolled button[data-top]{opacity:1;visibility:visible;transform:none}

/* Hizmet kartları: "Detaylar" butonu kartın içinde, alt kenara hizalı (dışarı taşmaz) */
.roof-service,.service-grid .roof-service{display:flex;flex-direction:column;margin-bottom:0;overflow:hidden}
.roof-service>div,.service-grid .roof-service>div{flex:1 1 auto;min-height:0;padding:24px 28px 18px}
.roof-service>.btn,.service-grid .roof-service>.btn{position:static;align-self:flex-start;margin:0 28px 26px;bottom:auto;left:auto}
.service-grid{gap:28px;padding-bottom:10px}

/* Slider: ortalanmış slaytta üst yazı + başlık tam ortada; oklar dikeyde ortalı ve simgeleri dairenin merkezinde */
.ref-slide.centered .wrap{text-align:center}
.ref-slide.centered .wrap>p,.ref-slide.centered h1,.ref-slide.centered h2{margin-left:auto;margin-right:auto;text-align:center}
.ref-prev,.ref-next{top:50%;transform:translateY(-50%);width:52px;height:52px;padding:0;display:grid;place-items:center;line-height:0;font-size:0;border:1px solid rgba(255,255,255,.45);background:rgba(var(--ink-rgb),.38);color:#fff;cursor:pointer}
.ref-prev{left:24px}
.ref-next{right:24px}
.ref-prev .ui-icon,.ref-next .ui-icon{width:22px;height:22px;display:block}
.ref-prev:hover,.ref-next:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media(min-width:601px){.ref-slide .wrap{padding-left:clamp(30px,5vw,70px);padding-right:clamp(30px,5vw,70px)}}
@media(max-width:600px){
  .ref-prev,.ref-next{top:auto;bottom:62px;transform:none;width:38px;height:38px}
  .ref-prev{left:16px}
  .ref-next{right:16px}
  .ref-prev .ui-icon,.ref-next .ui-icon{width:18px;height:18px}
}