/* =========================================================
   Metal City Alüminyum — site stilleri
   Renkler logodaki çelik mavisi ve koyu grafit tonlarından alınmıştır.
   ========================================================= */
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/outfit-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/outfit-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --gece: #0a141c;
    --lacivert: #0e1c27;
    --lacivert-2: #15283a;
    --celik: #1f8ef1;
    --celik-koyu: #1565c0;
    --buz: #46c0f2;
    --gradyan: linear-gradient(118deg, #46c0f2 0%, #1f8ef1 45%, #1565c0 100%);
    --metal: linear-gradient(180deg, #e9eef2 0%, #9aa8b4 45%, #dfe6ec 60%, #7d8b97 100%);
    --metin: #24323d;
    --soluk: #5d6c78;
    --zemin: #f3f6f8;
    --zemin-2: #e9eef2;
    --cizgi: #dfe6ec;
    --beyaz: #fff;
    --wa: #25d366;
    --baslik-font: "Outfit", "Segoe UI", system-ui, sans-serif;
    --govde-font: "Manrope", "Segoe UI", system-ui, sans-serif;
    --kap: 1320px;
    --header-h: 96px;
    --kavis: 3px;
    --golge: 0 24px 60px -28px rgba(10, 20, 28, .35);
    --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--govde-font); font-size: 16px; line-height: 1.7; color: var(--metin); background: var(--beyaz); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { font-family: var(--baslik-font); font-weight: 600; line-height: 1.15; margin: 0; color: var(--lacivert); letter-spacing: -.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--celik); color: #fff; }
:focus-visible { outline: 2px solid var(--celik); outline-offset: 3px; }
.ic { flex-shrink: 0; }

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 28px; }
.kap-dar { max-width: 900px; }
.atla { position: fixed; top: -60px; left: 16px; z-index: 10001; background: var(--celik); color: #fff; padding: 10px 16px; border-radius: var(--kavis); }
.atla:focus { top: 16px; }

/* ---------- Butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; font-family: var(--baslik-font); font-weight: 500; font-size: 15.5px; letter-spacing: .01em; line-height: 1.2; border-radius: var(--kavis); border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; position: relative; overflow: hidden; white-space: nowrap; }
.btn .ic { transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-ana { background: var(--gradyan); color: #fff; box-shadow: 0 14px 30px -14px rgba(31, 142, 241, .8); }
.btn-ana:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(31, 142, 241, .95); }
.btn-cam { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.btn-cam:hover { background: #fff; color: var(--lacivert); border-color: #fff; }
.btn-koyu { background: var(--lacivert); color: #fff; }
.btn-koyu:hover { background: var(--celik); }
.btn-cizgi { border-color: var(--lacivert); color: var(--lacivert); }
.btn-cizgi:hover { background: var(--lacivert); color: #fff; }
.btn-beyaz { background: #fff; color: var(--lacivert); }
.btn-beyaz:hover { background: var(--lacivert); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #1eb956; transform: translateY(-2px); }
.btn-ince { padding: 11px 18px; font-size: 14px; border-color: var(--cizgi); color: var(--soluk); }
.btn-ince:hover { border-color: var(--lacivert); color: var(--lacivert); }
.btn-tam { width: 100%; }

/* ---------- Etiket & başlıklar ---------- */
.etiket { display: inline-flex; align-items: center; gap: 12px; font-family: var(--baslik-font); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--celik); margin-bottom: 18px; }
.etiket::before { content: ""; width: 30px; height: 2px; background: var(--gradyan); }
.etiket-acik { color: var(--buz); display: none;}
.bolum { padding: 120px 0; position: relative; }
.bolum-baslik {     font-size: clamp(0.9rem, 2vw, 2.9rem);
    max-width: 33ch; }
.bolum-ust { margin-bottom: 56px; }
.bolum-ust-yan { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.bolum-ust-sag { max-width: 440px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.bolum-ust-sag p { color: var(--soluk); margin: 0; }
.bolum-ust-orta { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.bolum-ust-orta .bolum-baslik { margin: 0 auto; }
.bolum-ust-orta p { color: var(--soluk); margin: 18px auto 0; max-width: 600px; }
.metin p { color: var(--soluk); }
.metin p:last-child { margin-bottom: 0; }

/* ---------- Açılış: sürgülü kapı ---------- */
.acilis { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.acildi .acilis { display: none; }
.acilis-kanat { position: absolute; top: 0; bottom: 0; width: 50.2%; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 100%) 0 0 / 7px 100%, radial-gradient(120% 90% at 50% 40%, #16293a 0%, #0b161f 70%); transition: transform 1.15s cubic-bezier(.77, 0, .18, 1); will-change: transform; pointer-events: auto; }
.acilis-kanat.sol { left: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.12); }
.acilis-kanat.sag { right: 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.acilis-kanat::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, #5d6b77, #c9d3db 40%, #7b8995 70%, #3a4652); opacity: .9; }
.acilis-kanat.sol::after { right: 0; }
.acilis-kanat.sag::after { left: 0; }
.acilis-ic { position: absolute; top: 0; bottom: 0; width: 100vw; display: grid; place-items: center; }
.sol .acilis-ic { left: 0; }
.sag .acilis-ic { right: 0; }
.acilis-ic img { width: min(440px, 72vw); opacity: 0; transform: scale(.94); animation: acilisLogo .7s .1s var(--ease) forwards; }
.kulp { position: absolute; top: calc(50% + 110px); width: 5px; height: 120px; border-radius: 4px; background: var(--metal); box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.4); }
.sol .kulp { right: 34px; }
.sag .kulp { left: 34px; }
.acilis-cizgi { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--buz) 30%, #fff 50%, var(--buz) 70%, transparent); transform: scaleY(0); animation: acilisCizgi .8s .45s var(--ease) forwards; box-shadow: 0 0 22px 2px rgba(70, 192, 242, .6); }
.acilis.ac .sol { transform: translateX(-101%); }
.acilis.ac .sag { transform: translateX(101%); }
.acilis.ac .acilis-cizgi { opacity: 0; transition: opacity .25s; }
@keyframes acilisLogo { to { opacity: 1; transform: none; } }
@keyframes acilisCizgi { to { transform: scaleY(1); } }

/* ---------- Header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--header-h); transition: height .35s var(--ease), background .35s, box-shadow .35s, transform .35s; }
.header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 18, .55), transparent); pointer-events: none; transition: opacity .3s; }
.header-ic { height: 100%; display: flex; align-items: center; gap: 32px; position: relative; }
.logo { position: relative; display: block; width: 214px; flex-shrink: 0; transition: width .35s var(--ease); }
.logo img { width: 100%; height: auto; transition: opacity .3s; }
.logo-koyu { position: absolute; inset: 0; opacity: 0; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 6px; }
.nav > ul > li { position: relative; }
.nav > ul > li > a { display: flex; align-items: center; gap: 5px; padding: 12px 16px; font-family: var(--baslik-font); font-weight: 500; font-size: 15.5px; color: #fff; position: relative; transition: color .25s; }
.nav > ul > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--gradyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav > ul > li:hover > a::after, .nav > ul > li.aktif > a::after { transform: scaleX(1); }
.nav .ic { transition: transform .3s; opacity: .75; }
.alt-var:hover > a .ic { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; left: 50%; width: 760px; transform: translate(-50%, 12px); padding-top: 14px; opacity: 0; visibility: hidden; transition: opacity .3s, transform .35s var(--ease), visibility .3s; }
.alt-var:hover .mega, .alt-var:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-liste { background: #fff; border-radius: 6px; box-shadow: 0 30px 70px -20px rgba(10, 20, 28, .4); padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 3px solid var(--celik); }
.mega-liste a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--lacivert); transition: background .25s, color .25s; }
.mega-liste a:hover { background: var(--zemin); color: var(--celik); }
.mega-ikon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 4px; background: var(--zemin); color: var(--celik); transition: background .25s, color .25s; }
.mega-liste a:hover .mega-ikon { background: var(--gradyan); color: #fff; }
.header-sag { display: flex; align-items: center; gap: 22px; }
.dil { display: flex; gap: 8px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .2); }
.bayrak { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: block; opacity: .6; transition: opacity .25s, transform .25s, box-shadow .25s; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.bayrak svg { width: 100%; height: 100%; }
.bayrak:hover { opacity: 1; transform: translateY(-1px); }
.bayrak.aktif { opacity: 1;   }
.header-tel { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--baslik-font); font-weight: 600; font-size: 16px; line-height: 1.25; }
.header-tel small { display: block; font-size: 12px; font-weight: 400; opacity: .7; letter-spacing: .04em; }
.header-tel-ikon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gradyan); color: #fff; box-shadow: 0 10px 22px -10px rgba(31,142,241,.9); }
.menu-ac { display: none; color: #fff; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: var(--kavis); }

.header.sabit { height: 78px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); box-shadow: 0 10px 40px -18px rgba(10, 20, 28, .35); }
.header.sabit::before { opacity: 0; }
.header.sabit .logo { width: 180px; }
.header.sabit .logo-acik { opacity: 0; }
.header.sabit .logo-koyu { opacity: 1; }
.header.sabit .nav > ul > li > a, .header.sabit .header-tel { color: var(--lacivert); }
.header.sabit .dil { border-color: var(--cizgi); }
.header.sabit .bayrak { box-shadow: 0 0 0 2px var(--cizgi); }
.header.sabit .bayrak.aktif { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--celik); }
.header.sabit .menu-ac { color: var(--lacivert); border-color: var(--cizgi); }
.header.gizli { transform: translateY(-100%); }

/* Mobil menü */
.mobil-menu { position: fixed; inset: 0; z-index: 1000; background: var(--lacivert); color: #fff; display: flex; flex-direction: column; padding: 22px 24px 30px; transform: translateX(100%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; overflow-y: auto; }
.mobil-menu.acik { transform: none; visibility: visible; }
.mobil-ust { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobil-ust img { width: 170px; }
.menu-kapat { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--kavis); }
.mobil-nav { padding: 20px 0; flex: 1; }
.mobil-nav > li > a { display: block; padding: 14px 0; font-family: var(--baslik-font); font-size: 26px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07); }
.mobil-nav > li.aktif > a { color: var(--buz); }
.mobil-nav ul { padding: 8px 0 8px 14px; border-left: 2px solid var(--celik); margin: 10px 0; }
.mobil-nav ul a { display: block; padding: 7px 0; font-size: 15px; color: rgba(255,255,255,.72); }
.mobil-alt { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.mobil-alt a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-size: 15px; }
body.menu-acik { overflow: hidden; }

/* ---------- Hero slider ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; background: var(--gece); color: #fff; overflow: hidden; }
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-slide { height: 100%; }
.hero-slide { position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-gorsel { position: absolute; inset: 0; }
.hero-gorsel img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 7.5s linear; }
.swiper-slide-active .hero-gorsel img { transform: scale(1.02); }
.hero-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 14, 20, .88) 0%, rgba(7, 14, 20, .62) 38%, rgba(7, 14, 20, .12) 72%), linear-gradient(0deg, rgba(7, 14, 20, .7) 0%, transparent 35%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent calc(100% / 3 - 1px), rgba(255,255,255,.06) calc(100% / 3), transparent calc(100% / 3 + 1px), transparent calc(200% / 3 - 1px), rgba(255,255,255,.06) calc(200% / 3), transparent calc(200% / 3 + 1px)); }
.hero-icerik { position: relative; z-index: 3; padding-top: 60px; }
.hero-icerik > * { max-width: 720px; opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.swiper-slide-active .hero-icerik > * { opacity: 1; transform: none; }
.swiper-slide-active .hero-icerik > :nth-child(2) { transition-delay: .15s; }
.swiper-slide-active .hero-icerik > :nth-child(3) { transition-delay: .3s; }
.swiper-slide-active .hero-icerik > :nth-child(4) { transition-delay: .45s; }
.swiper-slide-active .hero-icerik > :nth-child(5) { transition-delay: .6s; }
.hero-no { display: flex; align-items: center; gap: 12px; font-family: var(--baslik-font); font-size: 14px; letter-spacing: .12em; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.hero-no i { display: block; width: 48px; height: 1px; background: rgba(255,255,255,.5); }
.hero-ust { display: inline-block; font-family: var(--baslik-font); font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--buz); margin-bottom: 18px; }
.hero-baslik { color: #fff; font-size: clamp(1.4rem, 2.2vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; margin-bottom: 26px; }
.hero-metin { font-size: clamp(1rem, 0.25vw, 1.15rem); line-height: 1.75; color: rgba(255,255,255,.82); max-width: 580px !important; margin-bottom: 38px; }
.hero-butonlar { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-alt { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; }
.hero-alt > * { pointer-events: auto; }
.hero-sayfalama { display: flex; gap: 10px; position: static !important; width: auto !important; }
.hero-sayfalama .swiper-pagination-bullet { width: 64px; height: 3px; border-radius: 0; background: rgba(255,255,255,.25); opacity: 1; margin: 0 !important; position: relative; overflow: hidden; }
.hero-sayfalama .swiper-pagination-bullet::after { content: ""; position: absolute; inset: 0; background: var(--gradyan); transform: scaleX(0); transform-origin: left; }
.hero-sayfalama .swiper-pagination-bullet-active::after { animation: heroDolum var(--sure, 6500ms) linear forwards; }
@keyframes heroDolum { to { transform: scaleX(1); } }
.hero-oklar { display: flex; gap: 10px; }
.hero-ok { width: 56px; height: 56px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transition: background .3s, border-color .3s, color .3s; }
.hero-ok:hover { background: #fff; color: var(--lacivert); border-color: #fff; }
.hero-kaydir { position: absolute; z-index: 5; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.hero-kaydir span { width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 14px; position: relative; }
.hero-kaydir span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: kaydir 1.8s infinite; }
@keyframes kaydir { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Ürün grupları ---------- */
.urunler { background: var(--zemin); overflow: hidden; }
.urunler::before { content: ""; position: absolute; right: -120px; top: 60px; width: 420px; height: 420px; border: 1px solid var(--cizgi); border-radius: 50%; }
.ok-grup { display: flex; gap: 10px; }
.ok { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--cizgi); border-radius: 50%; color: var(--lacivert); background: #fff; transition: background .3s, color .3s, border-color .3s; }
.ok:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.ok.swiper-button-disabled { opacity: .35; pointer-events: none; }
.urun-swiper { overflow: visible; }
.urun-kart { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--lacivert); color: #fff; isolation: isolate; }
.urun-gorsel { position: absolute; inset: 0; z-index: -1; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.urun-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 23, .05) 30%, rgba(8, 16, 23, .92) 100%); transition: background .5s; }
.urun-kart:hover .urun-gorsel img { transform: scale(1.07); }
.urun-kart:hover .urun-gorsel::after { background: linear-gradient(180deg, rgba(8, 16, 23, .25) 0%, rgba(8, 16, 23, .95) 100%); }
.urun-no { position: absolute; top: 22px; left: 24px; font-family: var(--baslik-font); font-size: 15px; font-weight: 600; letter-spacing: .1em; padding: 6px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 30px; backdrop-filter: blur(6px); background: rgba(255,255,255,.08); }
.urun-alt { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; }
.urun-ikon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 4px; background: var(--gradyan); margin-bottom: 18px; box-shadow: 0 12px 26px -12px rgba(31,142,241,.9); }
.urun-alt h3 { color: #fff; font-size: 1.42rem; line-height: 1.22; margin-bottom: 0; }
.urun-alt p { font-size: 14.5px; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s, margin .5s; }
.urun-kart:hover .urun-alt p { max-height: 120px; opacity: 1; margin-top: 12px; }
.urun-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--baslik-font); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--buz); }
.urun-ilerleme { position: relative; height: 2px; background: var(--cizgi); margin-top: 44px; }
.urun-ilerleme span { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--gradyan); transition: width .4s var(--ease); }

/* ---------- Hakkımızda (anasayfa) ---------- */
.hakkinda-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.hakkinda-gorseller { position: relative; padding: 0 70px 80px 0; }
.hg-buyuk { aspect-ratio: 5 / 6; overflow: hidden; border-radius: 4px; }
.hg-buyuk img, .hg-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.hg-kucuk { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; overflow: hidden; border-radius: 4px; border: 10px solid #fff; box-shadow: var(--golge); }
.hg-rozet { position: absolute; left: -28px; top: 44px; background: var(--lacivert); color: #fff; padding: 26px 28px; border-radius: 4px; box-shadow: var(--golge); min-width: 170px; }
.hg-rozet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gradyan); }
.hg-rozet strong { display: block; font-family: var(--baslik-font); font-size: 3.4rem; font-weight: 600; line-height: 1; background: var(--gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hg-rozet small { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,.75); letter-spacing: .04em; }
.hg-profil { position: absolute; top: 12%; bottom: 30%; right: 34px; width: 8px; border-radius: 4px; background: var(--metal); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.hakkinda-metin .bolum-baslik { margin-bottom: 26px; }
.sayaclar { display: grid; grid-template-columns: repeat(3, 1fr); margin: 40px 0 44px; border-top: 1px solid var(--cizgi); }
.sayac { padding: 24px 18px 0 0; }
.sayac + .sayac { padding-left: 22px; border-left: 1px solid var(--cizgi); }
.sayac strong { display: block; font-family: var(--baslik-font); font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 600; line-height: 1; color: var(--lacivert); }
.sayac > span { display: block; margin-top: 8px; font-size: 14px; color: var(--soluk); line-height: 1.4; }

/* ---------- Neden biz (ikonlu) ---------- */
.ozellikler { background: var(--gece); color: #fff; overflow: hidden; }
.ozellik-arka { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.ozellikler::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--gece) 0%, rgba(10,20,28,.82) 40%, var(--gece) 100%); }
.ozellikler .kap { position: relative; z-index: 2; }
.ozellikler .bolum-baslik { color: #fff; }
.ozellikler .bolum-ust-orta p { color: rgba(255,255,255,.7); }
.ozellik-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.ozellik { position: relative; padding: 46px 40px 44px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); transition: background .4s; overflow: hidden; }
.ozellik::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--gradyan); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.ozellik:hover { background: rgba(255,255,255,.035); }
.ozellik:hover::before { transform: scaleX(1); }
.ozellik-no { position: absolute; right: 32px; top: 30px; font-family: var(--baslik-font); font-size: 3.6rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); }
.ozellik-ikon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 4px; color: var(--buz); border: 1px solid rgba(70, 192, 242, .35); background: rgba(31, 142, 241, .08); margin-bottom: 28px; transition: background .4s, color .4s, border-color .4s; }
.ozellik:hover .ozellik-ikon { background: var(--gradyan); color: #fff; border-color: transparent; }
.ozellik h3 { color: #fff; font-size: 1.32rem; margin-bottom: 12px; }
.ozellik p { color: rgba(255,255,255,.66); font-size: 15px; margin: 0; }

/* ---------- Uygulama mozaiği ---------- */
.mozaik { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 14px; }
.mozaik-oge { position: relative; overflow: hidden; border-radius: 4px; background: var(--zemin-2); }
.mozaik-oge:nth-child(10n+1) { grid-column: span 2; grid-row: span 2; }
.mozaik-oge:nth-child(10n+4) { grid-row: span 2; }
.mozaik-oge:nth-child(10n+7), .mozaik-oge:nth-child(10n) { grid-column: span 2; }
.mozaik-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mozaik-oge:hover img { transform: scale(1.07); }
.mozaik-bilgi { position: absolute; inset: auto 0 0 0; padding: 18px 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; color: #fff; font-family: var(--baslik-font); font-weight: 500; font-size: 15px; line-height: 1.3; background: linear-gradient(0deg, rgba(8,16,23,.85), transparent); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); }
.mozaik-oge:hover .mozaik-bilgi, .mozaik-oge:focus-visible .mozaik-bilgi { opacity: 1; transform: none; }

/* ---------- Çağrı bandı ---------- */
.cta { position: relative; background: var(--gradyan); color: #fff; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px); }
.cta::after { content: ""; position: absolute; right: -6%; top: -60%; width: 46%; height: 220%; background: rgba(10, 20, 28, .18); transform: skewX(-20deg); }
.cta-ic { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 40px; padding-bottom: 40px; flex-wrap: wrap; }
.cta h2 { color: #fff; font-size: clamp(1.6rem, 1.6vw, 2.3rem);
    max-width: 39ch; margin-bottom: 10px; }
.cta p { margin: 0; color: rgba(255,255,255,.85); }
.cta-butonlar { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--gece); color: rgba(255,255,255,.7); font-size: 15px; overflow: hidden; }
.footer-cizgiler { position: absolute; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.footer-cizgiler span { width: 1px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); }
.footer-ust { position: relative; display: grid; grid-template-columns: 1.35fr .8fr 1.15fr 1.25fr; gap: 50px; padding-top: 90px; padding-bottom: 70px; }
.footer-logo img { width: 220px; margin-bottom: 24px; }
.footer-marka p { max-width: 340px; }
.footer h3 { color: #fff; font-size: 1.1rem; margin-bottom: 22px; position: relative; padding-bottom: 14px; }
.footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--gradyan); }
.footer-kolon li { margin-bottom: 10px; }
.footer-kolon a { transition: color .25s, padding .25s; }
.footer-kolon:not(.footer-iletisim) a:hover { color: #fff; padding-left: 6px; }
.footer-hizmet li { font-size: 14.5px; line-height: 1.45; }
.footer-iletisim li { display: flex; gap: 12px; align-items: flex-start; }
.footer-iletisim .ic { color: var(--buz); margin-top: 3px; }
.footer-iletisim a:hover { color: #fff; }
.sosyal { display: flex; gap: 10px; margin-top: 24px; }
.sosyal a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; transition: background .3s, border-color .3s, color .3s; }
.sosyal a:hover { background: var(--celik); border-color: var(--celik); color: #fff; }
.footer-alt { position: relative; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.footer-alt-ic { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.footer-alt p { margin: 0; }
.footer-yasal { display: flex; gap: 22px; }
.footer-yasal a, .imza a { color: #fff; }
.footer-yasal a:hover, .imza a:hover { color: var(--buz); }

/* ---------- WhatsApp ---------- */
.wa { position: fixed; right: 24px; bottom: 24px; z-index: 950; }
.wa-btn { width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .8); position: relative; transition: transform .3s var(--ease); }
.wa-btn:hover { transform: scale(1.06); }
.wa-dalga { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: waDalga 2.2s infinite; }
@keyframes waDalga { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.wa-kutu { position: absolute; right: 0; bottom: 78px; width: 330px; max-width: calc(100vw - 32px); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(10,20,28,.5); transform-origin: bottom right; animation: waAc .35s var(--ease); }
.wa-kutu[hidden] { display: none; }
@keyframes waAc { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.wa-ust { display: flex; gap: 12px; align-items: center; background: #075e54; color: #fff; padding: 18px 16px; }
.wa-ust strong { display: block; font-family: var(--baslik-font); font-weight: 600; font-size: 16px; line-height: 1.3; }
.wa-ust small { display: block; font-size: 12.5px; opacity: .8; line-height: 1.4; }
.wa-ust-ikon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.wa-kapat { margin-left: auto; align-self: flex-start; color: #fff; opacity: .8; }
.wa-liste { padding: 12px; display: grid; gap: 8px; background: #f0f4f1; }
.wa-hat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 8px; border-left: 3px solid var(--wa); transition: transform .25s, box-shadow .25s; }
.wa-hat:hover { transform: translateX(-3px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.25); }
.wa-hat-ikon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--wa); color: #fff; flex-shrink: 0; }
.wa-hat small { display: block; font-size: 12px; color: var(--soluk); }
.wa-hat b { display: block; font-family: var(--baslik-font); font-weight: 600; color: var(--lacivert); font-size: 16px; }
.wa-hat > .ic { margin-left: auto; color: var(--soluk); }
.yukari { position: fixed; right: 100px; bottom: 32px; z-index: 940; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--lacivert); color: #fff; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, background .3s; }
.yukari.gor { opacity: 1; visibility: visible; transform: none; }
.yukari:hover { background: var(--celik); }

/* ---------- Çerez ---------- */
.cerez { position: fixed; left: 24px; bottom: 24px; z-index: 960; max-width: 380px; background: #fff; border-radius: 8px; padding: 18px 20px; line-height: 1.55; box-shadow: 0 24px 60px -18px rgba(10,20,28,.45); border-top: 3px solid var(--celik); font-size: 14px; color: var(--soluk); }
.cerez[hidden] { display: none; }
.cerez a { color: var(--celik); text-decoration: underline; }
.cerez div { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cerez .btn { padding: 11px 18px; font-size: 14px; }

/* ---------- İç sayfa başlığı ---------- */
.sayfa-hero { position: relative;
    min-height: 324px;
    padding: calc(var(--header-h) + 70px) 0 45px;
    display: flex;
    align-items: flex-end;
    background: var(--gece);
    color: #fff;
    overflow: hidden; }
.sayfa-hero-gorsel { position: absolute; inset: 0; }
.sayfa-hero-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; animation: heroYakin 12s ease-out forwards; }
.sayfa-hero-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,14,20,.75) 0%, rgba(7,14,20,.35) 55%, rgba(7,14,20,.15) 100%), linear-gradient(0deg, rgba(7,14,20,.6), transparent 60%); }
@keyframes heroYakin { from { transform: scale(1.08); } to { transform: scale(1); } }
.sayfa-hero-cizgiler { position: absolute; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.sayfa-hero-cizgiler span { width: 1px; background: rgba(255,255,255,.06); }
.sayfa-hero-ic { position: relative; z-index: 2; }
.sayfa-hero h1 { color: #fff; font-size: clamp(2.2rem, 2.6vw, 3.9rem); max-width: 22ch; margin-bottom: 22px; letter-spacing: -.02em; }
.kirinti ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: rgba(255,255,255,.7); }
.kirinti li + li::before { content: "/"; margin: 0 12px; opacity: .45; }
.kirinti a:hover { color: #fff; }
.kirinti [aria-current] { color: var(--buz); }

/* ---------- İçerik tipografisi ---------- */
.icerik { font-size: 16.5px; }
.icerik p { color: var(--soluk); margin-bottom: 1.15em; }
.icerik h2, .icerik h3 { margin: 1.6em 0 .6em; font-size: 1.4rem; }
.icerik ul { margin: 0 0 1.2em; display: grid; gap: 8px; }
.icerik ul li { position: relative; padding-left: 26px; color: var(--soluk); }
.icerik ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--gradyan); }
.icerik a { color: var(--celik); text-decoration: underline; }
.icerik strong { color: var(--lacivert); }

/* ---------- Hakkımızda sayfası ---------- */
.hk-ic { display: grid; grid-template-columns: 1.25fr .9fr; gap: 90px; align-items: start; }
.hk-giris { font-family: var(--baslik-font); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.38; font-weight: 500; color: var(--lacivert); margin-bottom: 30px; letter-spacing: -.01em; }
.hk-yan { position: sticky; top: 110px; }
.hk-gorsel { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.hk-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hk-gorsel .hg-profil { right: 24px; }
.hk-sayaclar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--lacivert); border-radius: 4px; margin: -50px 24px 0; position: relative; z-index: 2; padding: 26px 10px; box-shadow: var(--golge); }
.hk-sayaclar .sayac { padding: 0 14px; text-align: center; }
.hk-sayaclar .sayac + .sayac { border-color: rgba(255,255,255,.12); }
.hk-sayaclar .sayac strong { color: #fff; font-size: 2.1rem; }
.hk-sayaclar .sayac > span { color: rgba(255,255,255,.65); font-size: 12.5px; }
.degerler { background: var(--zemin); }
.deger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.deger { background: #fff; padding: 40px 32px; border-radius: 4px; border-bottom: 3px solid transparent; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.deger:hover { transform: translateY(-6px); box-shadow: var(--golge); border-color: var(--celik); }
.deger-ikon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 4px; background: var(--zemin); color: var(--celik); margin-bottom: 24px; transition: background .4s, color .4s; }
.deger:hover .deger-ikon { background: var(--gradyan); color: #fff; }
.deger h3 { font-size: 1.22rem; margin-bottom: 10px; }
.deger p { color: var(--soluk); font-size: 15px; margin: 0; }
.hizmet-satirlar { border-top: 1px solid var(--cizgi); }
.hizmet-satir { position: relative; display: grid; grid-template-columns: 70px 56px 1fr auto; align-items: center; gap: 18px; padding: 24px 8px; border-bottom: 1px solid var(--cizgi); transition: background .35s, padding .35s var(--ease); }
.hs-no { font-family: var(--baslik-font); font-size: 15px; color: var(--soluk); letter-spacing: .1em; }
.hs-ikon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 4px; background: var(--zemin); color: var(--celik); transition: background .3s, color .3s; }
.hs-ad { font-family: var(--baslik-font); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 500; color: var(--lacivert); transition: color .3s; }
.hs-ok { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cizgi); color: var(--lacivert); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.hs-gorsel { position: absolute; right: 110px; top: 50%; width: 170px; height: 120px; object-fit: cover; border-radius: 4px; opacity: 0; transform: translateY(-50%) rotate(-4deg) scale(.9); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; box-shadow: var(--golge); }
.hizmet-satir:hover { background: var(--zemin); padding-left: 22px; }
.hizmet-satir:hover .hs-ad { color: var(--celik); }
.hizmet-satir:hover .hs-ikon { background: var(--gradyan); color: #fff; }
.hizmet-satir:hover .hs-ok { background: var(--lacivert); color: #fff; border-color: var(--lacivert); transform: rotate(45deg); }
.hizmet-satir:hover .hs-gorsel { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(1); }

/* ---------- Hizmetler listesi ---------- */
.hizmet-liste { background: var(--zemin); }
.hizmet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hizmet-kart { display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; }
.hizmet-kart:hover { transform: translateY(-8px); box-shadow: var(--golge); }
.hk-gorselK { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hk-gorselK img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.hizmet-kart:hover .hk-gorselK img { transform: scale(1.07); }
.hizmet-no { position: absolute; top: 18px; left: 18px; font-family: var(--baslik-font); font-weight: 600; font-size: 14px; letter-spacing: .1em; color: #fff; background: rgba(10,20,28,.55); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 30px; }
.hizmet-foto { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--lacivert); background: rgba(255,255,255,.92); padding: 6px 11px; border-radius: 30px; }
.hizmet-govde { position: relative; padding: 46px 30px 30px; flex: 1; display: flex; flex-direction: column; }
.hizmet-ikon { position: absolute; top: -30px; left: 30px; width: 60px; height: 60px; display: grid; place-items: center; background: var(--gradyan); color: #fff; border-radius: 4px; box-shadow: 0 14px 28px -12px rgba(31,142,241,.85); }
.hizmet-govde h2 { font-size: 1.32rem; line-height: 1.25; margin-bottom: 12px; }
.hizmet-govde p { color: var(--soluk); font-size: 15px; margin-bottom: 22px; }
.hizmet-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--baslik-font); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--celik); }
.hizmet-kart:hover .hizmet-link .ic { transform: translateX(4px); }
.hizmet-link .ic { transition: transform .3s; }

/* ---------- Hizmet detay ---------- */
.detay-ic { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 70px; align-items: start; }
.detay-bas { display: flex; gap: 22px; align-items: center; margin-bottom: 26px; }
.detay-bas .etiket { margin-bottom: 8px; }
.detay-bas .bolum-baslik { max-width: none; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.detay-ikon { width: 78px; height: 78px; flex-shrink: 0; display: grid; place-items: center; border-radius: 4px; background: var(--gradyan); color: #fff; box-shadow: 0 16px 30px -14px rgba(31,142,241,.85); }
.detay-ozet { font-family: var(--baslik-font); font-size: 1.28rem; line-height: 1.5; color: var(--lacivert); padding: 4px 0 4px 22px; border-left: 3px solid var(--celik); margin-bottom: 30px; }
.galeri-bas { display: flex; justify-content: space-between; align-items: center; margin: 56px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.galeri-bas h3 { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; }
.galeri-bas h3 .ic { color: var(--celik); }
.galeri-bas span { font-size: 14px; color: var(--soluk); background: var(--zemin); padding: 6px 14px; border-radius: 30px; }
.galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.galeri-oge { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--zemin-2); }
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.galeri-oge::after { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 28, .45); opacity: 0; transition: opacity .35s; }
.galeri-zoom { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--lacivert); transform: scale(.6); opacity: 0; transition: transform .35s var(--ease), opacity .35s; }
.galeri-oge:hover img { transform: scale(1.08); }
.galeri-oge:hover::after, .galeri-oge:focus-visible::after { opacity: 1; }
.galeri-oge:hover .galeri-zoom, .galeri-oge:focus-visible .galeri-zoom { transform: none; opacity: 1; }
.detay-yan { position: sticky; top: 100px; display: grid; gap: 24px; }
.yan-kutu { border-radius: 4px; padding: 30px; }
.yan-kutu h3 { font-size: 1.2rem; margin-bottom: 18px; }
.yan-hizmetler { background: var(--zemin); }
.yan-hizmetler li + li { margin-top: 6px; }
.yan-hizmetler a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: #fff; border-radius: 4px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--lacivert); border-left: 3px solid transparent; transition: background .3s, color .3s, border-color .3s, padding .3s; }
.yh-ikon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 4px; background: var(--zemin); color: var(--celik); transition: background .3s, color .3s; }
.yh-ok { margin-left: auto; opacity: .35; transition: opacity .3s, transform .3s; }
.yan-hizmetler a:hover { border-color: var(--celik); padding-left: 18px; }
.yan-hizmetler a:hover .yh-ok { opacity: 1; transform: translateX(3px); }
.yan-hizmetler li.aktif a { background: var(--lacivert); color: #fff; border-color: var(--buz); }
.yan-hizmetler li.aktif .yh-ikon { background: var(--gradyan); color: #fff; }
.yan-hizmetler li.aktif .yh-ok { opacity: 1; color: var(--buz); }
.yan-iletisim { position: relative; background: var(--lacivert); color: rgba(255,255,255,.75); overflow: hidden; display: grid; gap: 12px; }
.yan-iletisim::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 30px rgba(255,255,255,.02); }
.yan-iletisim h3 { color: #fff; margin: 6px 0 0; }
.yan-iletisim p { font-size: 14.5px; margin: 0 0 4px; }
.yan-iletisim-ikon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--gradyan); color: #fff; }
.yan-tel { font-family: var(--baslik-font); font-size: 1.3rem; font-weight: 600; color: #fff; }
.yan-tel:hover { color: var(--buz); }

/* ---------- İletişim ---------- */
.iletisim-kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 80px; }
.i-kart { position: relative; padding: 34px 28px; border: 1px solid var(--cizgi); border-radius: 4px; transition: border-color .35s, box-shadow .35s, transform .35s var(--ease); }
.i-kart:hover { border-color: transparent; box-shadow: var(--golge); transform: translateY(-4px); }
.i-ikon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 4px; background: var(--gradyan); color: #fff; margin-bottom: 22px; }
.i-ikon-wa { background: var(--wa); }
.i-kart h2 { font-size: 1.15rem; margin-bottom: 10px; }
.i-kart p { margin: 0 0 4px; color: var(--soluk); font-size: 15px; }
.i-kart a:hover { color: var(--celik); }
.i-kart p a { color: var(--lacivert); font-weight: 600; }
.i-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--celik); }
.i-saat { display: flex; align-items: center; gap: 6px; font-size: 13.5px !important; margin-top: 8px !important; }
.iletisim-ic { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(10,20,28,.4); }
.form-kutu { padding: 60px 56px; background: #fff; }
.form-kutu .bolum-baslik { margin-bottom: 10px; }
.form-alt { color: var(--soluk); margin-bottom: 34px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: grid; gap: 7px; }
.alan > span { font-size: 13.5px; font-weight: 600; color: var(--lacivert); }
.alan-tam { grid-column: 1 / -1; }
.alan input, .alan select, .alan textarea { width: 100%; font: inherit; font-size: 15px; color: var(--metin); padding: 14px 16px; background: var(--zemin); border: 1px solid transparent; border-radius: var(--kavis); transition: border-color .25s, background .25s, box-shadow .25s; appearance: none; }
.alan select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6c78' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.alan textarea { resize: vertical; min-height: 140px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; background: #fff; border-color: var(--celik); box-shadow: 0 0 0 4px rgba(31,142,241,.12); }
.alan .hatali { border-color: #d64545; background: #fff6f6; }
.onay { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 18px; font-size: 14px; color: var(--soluk); line-height: 1.55; cursor: pointer; }
.onay input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onay-kutu { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 1.5px solid #b6c3cd; border-radius: 3px; color: transparent; transition: background .2s, border-color .2s, color .2s; margin-top: 1px; }
.onay input:checked + .onay-kutu { background: var(--celik); border-color: var(--celik); color: #fff; }
.onay input:focus-visible + .onay-kutu { outline: 2px solid var(--celik); outline-offset: 2px; }
.onay.hatali .onay-kutu { border-color: #d64545; }
.onay a { color: var(--celik); text-decoration: underline; font-weight: 600; }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sonuc { display: none; padding: 14px 16px; border-radius: var(--kavis); font-size: 14.5px; margin-bottom: 16px; }
.form-sonuc.ok { display: block; background: #eaf8ef; color: #17643a; border-left: 3px solid #26a65b; }
.form-sonuc.hata { display: block; background: #fdf0f0; color: #9b2626; border-left: 3px solid #d64545; }
.form button[disabled] { opacity: .65; pointer-events: none; }
.harita { min-height: 520px; background: var(--zemin-2); position: relative; }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); transition: filter .5s; }
.harita:hover iframe { filter: none; }

/* ---------- 404 ---------- */
.hata-hero { min-height: 100vh; min-height: 100svh; align-items: center; }
.hata-ic { text-align: left; }
.hata-kod { display: block; font-family: var(--baslik-font); font-size: clamp(6rem, 16vw, 11rem); font-weight: 700; line-height: .9; background: var(--gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.hata-ic p { color: rgba(255,255,255,.8); max-width: 480px; margin-bottom: 32px; }

/* ---------- Görünür olma animasyonu ---------- */
.js [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--g, 0) * 90ms); }
.js [data-anim].gor { opacity: 1; transform: none; z-index:22; }

/* ---------- Lightbox ince ayar ---------- */
.glightbox-clean .gslide-description { background: var(--lacivert); }
.glightbox-clean .gslide-title { font-family: var(--baslik-font); color: #fff; margin: 0; font-size: 15px; }
.glightbox-clean .gdesc-inner { padding: 14px 20px; }
.goverlay { background: rgba(6, 12, 18, .94) !important; }

/* =========================================================
   Duyarlı düzen
   ========================================================= */
@media (max-width: 1280px) {
    .header-tel > span:last-child { display: none; }
    .nav > ul > li > a { padding: 12px 13px; }
    .footer-ust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
    :root { --header-h: 84px; }
    .nav { display: none; }
    .menu-ac { display: grid; }
    .header-sag { margin-left: auto; gap: 14px; }
    .dil { border: 0; padding-left: 0; }
    .bolum { padding: 96px 0; }
    .hakkinda-ic, .hk-ic { gap: 60px; }
    .ozellik-grid { grid-template-columns: repeat(2, 1fr); }
    .deger-grid { grid-template-columns: repeat(2, 1fr); }
    .hizmet-grid { grid-template-columns: repeat(2, 1fr); }
    .detay-ic { grid-template-columns: 1fr; }
    .detay-yan { position: static; grid-template-columns: 1fr 1fr; }
    .iletisim-kartlar { grid-template-columns: repeat(2, 1fr); }
    .mozaik { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
    .galeri { grid-template-columns: repeat(3, 1fr); }
    .mozaik-oge:nth-child(10n+7), .mozaik-oge:nth-child(10n) { grid-column: span 1; }
}
@media (max-width: 900px) {
    .hakkinda-ic, .hk-ic { grid-template-columns: 1fr; }
    .hakkinda-gorseller { max-width: 560px; }
    .hg-rozet { left: 0; }
    .hk-yan { position: static; max-width: 560px; }
    .iletisim-ic { grid-template-columns: 1fr; }
    .harita { min-height: 380px; }
    .form-kutu { padding: 44px 32px; }
    .hs-gorsel { display: none; }
    .hero-kaydir { display: none; }
}
@media (max-width: 680px) {
    body { font-size: 15.5px; }
    .kap { padding: 0 16px; }
    :root { --header-h: 74px; }
    .bolum { padding: 76px 0; }
    .bolum-ust { margin-bottom: 40px; }
    .logo { width: 158px; }
    .header.sabit { height: 68px; }
    .header.sabit .logo { width: 140px; }
    .header-tel { display: none; }
    .bayrak { width: 26px; height: 26px; }
    .menu-ac { width: 42px; height: 42px; }
    .hero { min-height: 560px; }
    .hero-icerik { padding-top: 40px; }
    .hero-baslik { margin-bottom: 18px; }
    .hero-metin { margin-bottom: 28px; font-size: 15px; }
    .hero-butonlar .btn { padding: 14px 20px; font-size: 14.5px; }
    .hero-alt { bottom: 26px; }
    .hero-sayfalama .swiper-pagination-bullet { width: 28px; }
    .hero-oklar { display: none; }
    .hero::before { display: none; }
    .hero-gorsel::after { background: linear-gradient(0deg, rgba(7,14,20,.92) 0%, rgba(7,14,20,.55) 55%, rgba(7,14,20,.35) 100%); }
    .ok { width: 46px; height: 46px; }
    .urun-alt { padding: 22px; }
    .urun-alt p { max-height: none; opacity: 1; margin-top: 10px; }
    .hakkinda-gorseller { padding: 0 30px 60px 0; }
    .hg-rozet { top: 20px; padding: 18px 20px; min-width: 0; }
    .hg-rozet strong { font-size: 2.4rem; }
    .hg-profil { display: none; }
    .sayaclar, .hk-sayaclar { grid-template-columns: repeat(3, 1fr); }
    .sayac { padding: 18px 8px 0 0; }
    .sayac + .sayac { padding-left: 12px; }
    .sayac strong { font-size: 1.9rem; }
    .sayac > span { font-size: 12.5px; }
    .hk-sayaclar { margin: -40px 12px 0; }
    .hk-sayaclar .sayac strong { font-size: 1.6rem; }
    .ozellik-grid, .deger-grid, .hizmet-grid, .iletisim-kartlar, .detay-yan { grid-template-columns: 1fr; }
    .ozellik { padding: 36px 26px; }
    .mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; }
    .mozaik-oge:nth-child(10n+1) { grid-column: span 2; }
    .mozaik-oge:nth-child(10n+4) { grid-row: span 1; }
    .cta-ic { padding-top: 56px; padding-bottom: 56px; }
    .cta-butonlar { width: 100%; }
    .cta-butonlar .btn { flex: 1; }
    .footer-ust { grid-template-columns: 1fr; gap: 40px; padding-top: 70px; padding-bottom: 50px; }
    .footer-alt-ic { flex-direction: column; text-align: center; }
    .hizmet-satir { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 18px 4px; }
    .hs-ikon { display: none; }
    .hs-ok { width: 40px; height: 40px; }
    .sayfa-hero { min-height: 360px; padding: calc(var(--header-h) + 50px) 0 56px; }
    .detay-bas { flex-direction: column; align-items: flex-start; gap: 16px; }
    .detay-ikon { width: 62px; height: 62px; }
    .galeri { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .form-kutu { padding: 36px 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .wa { right: 16px; bottom: 16px; }
    .wa-btn { width: 56px; height: 56px; }
    .yukari { right: 84px; bottom: 22px; width: 42px; height: 42px; }
    .cerez { left: 12px; right: 12px; bottom: 84px; max-width: none; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .acilis { display: none; }
}

.cerez p { margin-bottom: 12px; }