/* Zümer buton sistemi (29 Eki): 1 Ana (1a logo işareti) · 2 Vurgu (1c kesik gövde) · 3 Metin link · 4 Büyük CTA bandı · yardımcı: bilgili buton */
:root{--zk:#d61116;--zk-d:#b00d12;--zg1:#878787;--zg2:#706f6f;--zgr:#1e2023;--zy:#1b1c1f;--ease:cubic-bezier(.7,0,.2,1)}
.bx{position:relative;display:inline-flex;align-items:center;font:600 15px/1.35 "Plus Jakarta Sans",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate}
.bx .t{position:relative;display:inline-block;overflow:hidden}
.bx .t>span{display:block;transition:transform .5s var(--ease)}
.bx .t::after{content:attr(data-t);position:absolute;left:0;top:100%;transition:transform .5s var(--ease)}
.bx:hover .t>span,.bx.is-h .t>span,.bx:hover .t::after,.bx.is-h .t::after{transform:translateY(-100%)}
.bx:focus-visible{outline:2px solid var(--zk);outline-offset:4px}

/* ---------- 1 · ANA BUTON (1a): Teklif Al, form gönder, teklif listesine ekle ---------- */
.bx1{height:56px;background:var(--zk);color:#fff;padding-left:28px;gap:24px;border-radius:4px}
.bx1 .mk{position:relative;width:56px;height:56px;background:var(--zgr);border-radius:0 4px 4px 0;overflow:hidden;flex:none}
.bx1 .mk i{position:absolute;inset:11px;transition:transform .55s var(--ease),opacity .4s}
.bx1 .mk .g{background:var(--zg1);clip-path:polygon(0 0,100% 0,0 100%)}
.bx1 .mk .r{background:var(--zk);clip-path:polygon(100% 8%,100% 100%,8% 100%)}
.bx1 .mk svg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:scale(0) rotate(-45deg);transition:transform .5s var(--ease) .08s}
.bx1:hover .mk .g,.bx1.is-h .mk .g{transform:translate(-70%,-70%)}
.bx1:hover .mk .r,.bx1.is-h .mk .r{transform:translate(70%,70%)}
.bx1:hover .mk svg,.bx1.is-h .mk svg{transform:none}
.bx1::before{content:"";position:absolute;inset:0;right:56px;background:var(--zk-d);clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .55s var(--ease);z-index:-1;border-radius:4px 0 0 4px}
.bx1:hover::before,.bx1.is-h::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.bx1.dark{background:var(--zgr)}.bx1.dark .mk{background:var(--zk)}.bx1.dark .mk .r{background:#fff}.bx1.dark::before{background:#000}
.bx1.sm{height:44px;padding-left:20px;gap:18px;font-size:14px}.bx1.sm .mk{width:44px;height:44px}.bx1.sm .mk i{inset:9px}.bx1.sm::before{right:44px}
.bx1{overflow:hidden}
.bx1.light{background:#fff;color:var(--zy)}.bx1.light::before{background:#e9ebee}
.bx1:hover .mk .g,.bx1.is-h .mk .g{transform:translate(-115%,-115%)}
.bx1:hover .mk .r,.bx1.is-h .mk .r{transform:translate(115%,115%)}
.bx1.light .mk{background:var(--zk)}.bx1.light .mk .r{background:#fff}

/* ---------- 2 · VURGU BUTONU (1c): hero ve bölüm sonları, sayfa başına 1-2 ---------- */
.bm3{height:56px;gap:0;background:transparent;color:#fff}
.bm3 .body{height:100%;display:flex;align-items:center;padding:0 46px 0 28px;background:var(--zk);clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);border-radius:4px 0 0 4px;transition:background .4s}
.bm3 .tip{height:100%;width:76px;margin-left:-26px;background:var(--zg1);clip-path:polygon(30px 0,100% 0,100% 100%,0 100%);border-radius:0 4px 4px 0;display:grid;place-items:center;padding-left:18px;transition:background .45s var(--ease),margin .45s var(--ease)}
.bm3 .tip svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.bm3:hover .tip,.bm3.is-h .tip{background:var(--zgr);margin-left:-18px}
.bm3:hover .body,.bm3.is-h .body{background:var(--zk-d)}
.bm3:hover .tip svg,.bm3.is-h .tip svg{transform:translate(3px,-3px)}
.bm3.dark .body{background:var(--zgr)}.bm3.dark .tip{background:var(--zk)}
.bm3.dark:hover .body,.bm3.dark.is-h .body{background:#000}.bm3.dark:hover .tip,.bm3.dark.is-h .tip{background:var(--zk-d)}
.bm3.sm{height:44px;font-size:14px}.bm3.sm .body{padding:0 36px 0 20px}.bm3.sm .tip{width:62px}
.bm3.on-dark:hover .tip,.bm3.on-dark.is-h .tip{background:#fff}.bm3.on-dark:hover .tip svg,.bm3.on-dark.is-h .tip svg{stroke:var(--zk)}

/* ---------- 3 · METİN LİNK: eğik uçlu alt çizgi + mini logo işareti; kart içi "Detay", küçük geçişler ---------- */
.zl{position:relative;display:inline-flex;align-items:center;gap:12px;padding-bottom:9px;font:600 15px/1.35 "Plus Jakarta Sans",sans-serif;color:var(--zy);text-decoration:none;cursor:pointer}
.zl::before,.zl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.zl::before{background:#dfe2e6}
.zl::after{background:var(--zk);transform:scaleX(.22);transform-origin:left;transition:transform .55s var(--ease)}
.zl:hover::after,.zl.is-h::after{transform:none}
.zl .mk{position:relative;width:14px;height:14px;flex:none}
.zl .mk i{position:absolute;inset:0;transition:transform .45s var(--ease)}
.zl .mk .g{background:var(--zg1);clip-path:polygon(0 0,100% 0,0 100%)}
.zl .mk .r{background:var(--zk);clip-path:polygon(100% 12%,100% 100%,12% 100%)}
.zl:hover .mk .g,.zl.is-h .mk .g{transform:translate(-3px,-3px)}
.zl:hover .mk .r,.zl.is-h .mk .r{transform:translate(3px,3px)}
.zl:focus-visible{outline:2px solid var(--zk);outline-offset:4px}
.zl.on-dark{color:#fff}.zl.on-dark::before{background:rgba(255,255,255,.2)}.zl.on-dark .mk .g{background:#fff}
.zl.sm{font-size:14px;padding-bottom:7px;gap:10px}.zl.sm .mk{width:12px;height:12px}

/* ---------- Yardımcı · BİLGİLİ BUTON (önceki G): telefon/WhatsApp, iletişim ve servis sayfası ---------- */
.zi{position:relative;display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 22px 0 10px;background:var(--zgr);color:#fff;border-radius:4px;text-decoration:none;font-family:"Plus Jakarta Sans",sans-serif;overflow:hidden;isolation:isolate;transition:background .35s}
.zi .ic{width:44px;height:44px;background:var(--zk);display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:transform .45s var(--ease)}
.zi .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zi .tx{display:flex;flex-direction:column;gap:3px}
.zi small{font-size:11.5px;font-weight:500;color:#9ba1a8;letter-spacing:.04em}
.zi b{font-size:15px;font-weight:600}
.zi:hover,.zi.is-h{background:#000}
.zi:hover .ic,.zi.is-h .ic{transform:rotate(-8deg) scale(1.05)}
.zi.light{background:#fff;color:var(--zy);box-shadow:inset 0 0 0 1px #e2e5e9}
.zi.light:hover,.zi.light.is-h{box-shadow:inset 0 0 0 1px var(--zk)}
.zi.wa .ic{background:#25d366}

/* ---------- 4 · BÜYÜK CTA BANDI (önceki H): her sayfanın sonunda bir kez ---------- */
.zcta{position:relative;overflow:hidden;background:var(--zgr);color:#fff;border-radius:6px;padding:64px 64px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;isolation:isolate;font-family:"Plus Jakarta Sans",sans-serif}
.zcta .deco{position:absolute;right:-40px;top:-40px;width:320px;height:320px;z-index:-1;opacity:.9}
.zcta .deco i{position:absolute;inset:0}
.zcta .deco .g{background:#2a2d31;clip-path:polygon(0 0,100% 0,0 100%)}
.zcta .deco .r{background:var(--zk);clip-path:polygon(100% 8%,100% 100%,8% 100%);opacity:.14}
.zcta small{display:block;font-size:12px;letter-spacing:.16em;color:var(--zk);font-weight:700;margin-bottom:14px}
.zcta h3{margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.03em;font-weight:700;max-width:640px}
.zcta p{margin:16px 0 0;color:#a3a8ae;font-size:16px;line-height:1.6;max-width:560px}
.zcta .act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.zcta .big{position:relative;display:inline-flex;align-items:center;gap:20px;padding-bottom:14px;color:#fff;text-decoration:none;font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.zcta .big::before,.zcta .big::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.zcta .big::before{background:rgba(255,255,255,.18)}
.zcta .big::after{background:var(--zk);transform:scaleX(.2);transform-origin:left;transition:transform .7s var(--ease)}
.zcta .big:hover::after,.zcta .big.is-h::after{transform:none}
.zcta .big .mk{position:relative;width:50px;height:50px;flex:none}
.zcta .big .mk i{position:absolute;inset:0;transition:transform .55s var(--ease)}
.zcta .big .mk .g{background:var(--zg1);clip-path:polygon(0 0,100% 0,0 100%)}
.zcta .big .mk .r{background:var(--zk);clip-path:polygon(100% 10%,100% 100%,10% 100%)}
.zcta .big .mk svg{position:absolute;right:6px;bottom:6px;width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease)}
.zcta .big:hover .mk .g,.zcta .big.is-h .mk .g{transform:translate(-6px,-6px)}
.zcta .big:hover .mk .r,.zcta .big.is-h .mk .r,.zcta .big:hover .mk svg,.zcta .big.is-h .mk svg{transform:translate(6px,6px)}
@media (max-width:900px){.zcta{grid-template-columns:1fr;padding:44px 28px}}

@media (prefers-reduced-motion:reduce){.bx *,.bx::before,.zl *,.zl::after,.zi *,.zcta *{transition:none!important}}
/* CTA dekoru: yalnız sağ altta büyük, soluk logo üçgenleri */
.zcta .deco{top:auto;right:0;bottom:0;width:46%;height:100%;opacity:1}
.zcta .deco .g{background:rgba(255,255,255,.035);clip-path:polygon(30% 0,100% 0,100% 0,30% 100%,30% 100%);display:none}
.zcta .deco .r{opacity:.16;clip-path:polygon(100% 0,100% 100%,0 100%)}
.zcta .zi small{color:#9ba1a8;margin:0;letter-spacing:.04em;font-size:11.5px;font-weight:500}
/* 1c hover: uç gövdeye yaklaşırken toplam genişlik sabit kalsın (mega menüde satır oynamasın) */
.bm3 .body{transition:background .4s,padding .45s var(--ease)}
.bm3:hover .body,.bm3.is-h .body{padding-right:38px}
.bm3.sm:hover .body,.bm3.sm.is-h .body{padding-right:28px}
.bm3.sm:hover .tip,.bm3.sm.is-h .tip{margin-left:-18px}
/* imza işareti = logodaki Z: kayık iki üçgen (gri sol-üst, kırmızı sağ-alt) + kesişim tonları (logo_shape.svg oranları) */
.bx1 .mk i{margin:auto;width:64%;height:50.4%}
.bx1 .mk .g{clip-path:polygon(0 17%,64.8% 17%,0 100%)}
.bx1 .mk .r{clip-path:polygon(100% 0,100% 83.2%,34.9% 83.2%)}
.bx1 .mk .g::before,.bx1 .mk .r::before{content:"";position:absolute;inset:0}
.bx1 .mk .g::before{background:rgba(0,0,0,.17);clip-path:polygon(0 17%,32.5% 58.4%,0 100%)}
.bx1 .mk .r::before{background:rgba(255,20,30,.35);clip-path:polygon(67.3% 41.8%,100% 83.2%,34.9% 83.2%)}
.bx1.dark .mk .r::before,.bx1.light .mk .r::before{background:rgba(0,0,0,.06)}