:root{ --bg:#08090a; --bg2:#0e0f11; --card:#121316; --line:rgba(var(--ink),.085); --line2:rgba(var(--ink),.16); --txt:#f4f4f5; --txt2:#c9cad0; --muted:#84868f; --accent:#5fd39a; --accentRgb:95,211,154; --accentParlak:#8af0bd; --accentParlakRgb:150,255,205; --accentKoyu:#2f8f66; --accentUstu:#062015; --ikonCizgi:#a9f2ce; --ikonDolgu:rgba(169,242,206,.22); --ikonVurgu:#d6ffe8; --r:18px; --maxw:1220px; --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif; /* Fraunces kaldirildi: yalnizca .wordmark kuralinda kullaniliyordu ve o sinif hicbir sablonda yok — hic cizilmeyen bir yazi tipi icin sayfa basina 124 KB iniyordu. Sistem serifine dusuruldu. */ --serif:Georgia,"Times New Roman",serif; } *{box-sizing:border-box} /* margin:0 — tarayıcının varsayılan 8px gövde boşluğu. Bugüne kadar görünmüyordu çünkü her bölüm ortalanmış bir kap içinde duruyor ve gövdenin zemin rengi tuvale yayılıyor. Kapak kenardan kenara olunca ortaya çıktı: fotoğrafın her iki yanında 8px'lik bir şerit. */ body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.011em} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .shell{max-width:1320px;margin:0 auto;padding:0 14px} /* ---------- shared ---------- */ .badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 11px;border:1px solid var(--line2); border-radius:999px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt2); background:rgba(var(--ink),.035);backdrop-filter:blur(8px);font-weight:500} .badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:12px 22px;font-size:14px; font-weight:500;transition:.25s;border:1px solid transparent;white-space:nowrap;cursor:pointer;font-family:inherit} .btn-l{background:var(--kontrast);color:var(--kontrastTxt)} .btn-l:hover{background:var(--accent);color:var(--accentUstu)} .btn-g{background:rgba(var(--ink),.06);color:var(--txt);border-color:var(--line2)} .btn-g:hover{background:rgba(var(--ink),.13)} .btn svg{width:13px;height:13px;transition:transform .25s;stroke:currentColor;fill:none;stroke-width:2} .btn:hover svg{transform:translateX(3px)} .sec{padding:104px 0;border-top:1px solid var(--line)} .eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:26px} .h2{text-wrap:balance;font-size:clamp(30px,4.1vw,46px);line-height:1.1;font-weight:400;letter-spacing:-.03em;margin:0} .h2 em{font-style:normal;color:var(--muted)} .lede{color:var(--muted);font-size:15px;max-width:46ch;margin:0} .sechead{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:52px} @media(max-width:820px){.sechead{grid-template-columns:1fr;gap:20px;align-items:start}} /* ---------- nav ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.3s} header.stuck{background:var(--kuyu);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:34px;height:74px;max-width:1320px;margin:0 auto;padding:0 26px} .nav .logo img{height:30px;width:auto;filter:brightness(0) invert(1)} .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--txt2)} .nav ul a{transition:.2s} .nav ul a:hover{color:var(--txt)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:16px} .nav .lang{font-size:12.5px;color:var(--muted);letter-spacing:.06em} .nav .lang:hover{color:var(--txt)} .burger{display:none;width:40px;height:40px;border:1px solid var(--line2);border-radius:10px; background:rgba(var(--ink),.05);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;padding:0} .burger i{display:block;width:15px;height:1.4px;background:var(--txt);border-radius:2px} @media(max-width:1060px){.nav ul,.nav .lang{display:none}.burger{display:flex}} @media(max-width:520px){.nav .btn{display:none}} /* ---------- hero ---------- */ /* Kapak tam ekran. Eskiden kapak, sayfanın içinde 26px köşeli bir karttı: üstte 88px boşluk, iki yanda .shell'in kenar payı. Şimdi kenardan kenara ve ekran boyu. Üstteki başlık çubuğu sabit ve saydam; fotoğraf artık onun ALTINDAN başlıyor, bu yüzden .hero'nun üst boşluğu kalktı. İçeriği çubuğun altında tutan şey .hero-c'nin kendi üst dolgusu. Yükseklik svh: mobil tarayıcıların adres çubuğu kayarken 100vh sıçrıyor, svh sıçramıyor. Desteklemeyen tarayıcı için vh yedeği önce yazılı. */ .hero{padding:0} .hero > .shell{max-width:none;padding:0} .hero-in{position:relative;border-radius:0;overflow:hidden; min-height:100vh;min-height:100svh; display:flex;align-items:stretch;justify-content:center;text-align:center} .hero-in img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-in:after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,10,9,.7) 0%,rgba(6,10,9,.35) 42%,rgba(8,9,10,.97) 100%)} /* Kapak icerigi iki kutba ayriliyor: logo ustte, geri kalani altta. Eskiden hepsi dikeyde ortalaniyordu ve tam ekranda logo, metnin icinde kaybolan bir satir gibi duruyordu. Ayirmayi `.badge`in `margin-top:auto`si yapiyor: ondan sonrasi (rozet, baslik, metin, butonlar) tek blok halinde asagi itiliyor. Markup'a sarmalayici bir div eklemeye gerek kalmiyor. Logonun ust bosluğu vh ile olceklendi: kisa ekranda ust cubuga yapismasin, uzun ekranda tepede yalniz kalmasin. */ .hero-c{position:relative;z-index:2;padding:0 24px;max-width:920px; flex:1;display:flex;flex-direction:column;align-items:center; padding-top:clamp(116px,19vh,210px); padding-bottom:clamp(96px,13vh,150px)} .hero-c .badge{margin-top:auto} /* Marka kilidi: amblem + ELESTAŞ yazısı bir arada. ------------------------------------------------------------------ Önceden burada yalnızca yazı kısmı vardı; kaynak dosya CSS ile kırpılıp yaprak amblemi dışarıda bırakılıyordu. Artık kırpma yok, kilidin tamamı görünüyor. ÇÖZÜNÜRLÜK TAVANI: kaynak dosya 500x104. Aşağıdaki --mo 1 demek, logo tam olarak kaynak çözünürlüğünde çiziliyor demek. Daha büyüğü büyütme olur ve yumuşar. Gerçek çözüm daha büyük bir dosya değil, VEKTÖR bir dosya (SVG); ayrıntısı DURUM.md > "Marka yazısı hakkında". --mo: ölçek çarpanı. 1'in üstüne çıkarmayın. */ .marka{--mo:1;width:calc(500px * var(--mo));height:calc(104px * var(--mo)); position:relative;margin:0 auto 26px} /* Iki golge, iki ayri is: - Kisa ve sert olan (2px) kenari fotograftan ayiriyor; logonun keskin gorunmesini asil bu sagliyor. - Genis ve zayif olan (24px) parlak bir gokyuzunun ustunde de okunurlugu koruyor. Onceden tek 26px'lik golge vardi: ince beyaz cizgilerin altinda gri bir pus birakiyor, beyazin canliligini dusuruyordu. */ .marka img{display:block;width:100%;height:100%;max-width:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 24px rgba(0,0,0,.38))} /* Dar ekranda logo genisligin tamamini kaplamasin. */ @media(max-width:900px){.marka{--mo:.76}} @media(max-width:520px){.marka{--mo:.58}} /* Alcak ekran (dizustu, tarayici arac cubuklari acikken). Logo ile metin arasindaki bosluk burada kapaniyor; olcegi ve dolgulari kismazsak butonlar ekranin dibine yapisip kaydirma ipucunun ustune biniyor. Ipucu da gizleniyor: kisa ekranda sayfanin devam ettigi zaten belli. DIKKAT: bu blok .marka'nin olcek tanimindan SONRA gelmek zorunda. Medya sorgusu ozgulluk eklemiyor; yukariya konsaydi .marka{--mo:.95} onu ezerdi (bir kere denendi, logo kucumedi). */ @media(max-height:720px){ .marka{--mo:.72} .hero-c{padding-top:clamp(92px,14vh,120px);padding-bottom:52px} .scrollcue{display:none} } .hero h1{text-wrap:balance;font-size:clamp(38px,6.4vw,74px);line-height:1.03;font-weight:400;letter-spacing:-.038em;margin:26px 0 0} .hero h1 span{display:block} /* .94: ortu hafifletildigi icin metnin kendisi parlatildi. %74'te 17px'lik metin en parlak karede 3,7:1 kaliyordu (gereken 4,5). */ .hero p{color:rgba(255,255,255,.94);font-size:17px;max-width:54ch;margin:22px auto 32px} .hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;font-size:10.5px; letter-spacing:.2em;color:rgba(255,255,255,.60);text-transform:uppercase} /* ---------- certs marquee ---------- */ .certs{padding:38px 0 8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .certs .track{display:flex;gap:64px;width:max-content;animation:slide 36s linear infinite} .certs span{font-size:15px;letter-spacing:.05em;color:var(--muted);white-space:nowrap;font-weight:500} .certs b{font-weight:600;color:var(--txt2)} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .stat{padding:32px 24px;background:var(--bg2)} .stat .n{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.035em;font-weight:400;line-height:1} .stat .n i{font-style:normal;font-size:.42em;color:var(--muted);margin-left:5px;letter-spacing:0} .stat .l{font-size:12.5px;color:var(--muted);margin-top:10px} @media(max-width:1100px){.stats{grid-template-columns:1fr 1fr}} @media(max-width:760px){.stats{grid-template-columns:1fr 1fr} /* tek sayida kutu varsa sonuncusu yanina bos hucre birakmayip ortalansin */ .stat:last-child:nth-child(odd){grid-column:1/-1;text-align:center}} @media(max-width:330px){.stats{grid-template-columns:1fr}} /* ---------- steps ---------- */ .steps-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start} @media(max-width:900px){.steps-grid{grid-template-columns:1fr;gap:34px}} .step{display:flex;align-items:flex-start;gap:14px;padding:20px 0;border-bottom:1px dashed rgba(var(--ink),.13)} .step:first-child{border-top:1px dashed rgba(var(--ink),.13)} .step .sq{width:14px;height:14px;border:1px solid var(--line2);border-radius:4px;flex:none;margin-top:6px;transition:.25s} .step:hover .sq{background:var(--accent);border-color:var(--accent)} .step .t{font-size:16.5px;font-weight:500} .step .d{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:48ch} .step .num{margin-left:auto;font-size:11.5px;color:var(--muted);letter-spacing:.1em;flex:none;margin-top:6px} .stepimg{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);position:relative} .stepimg img{height:100%;width:100%;object-fit:cover;aspect-ratio:4/3.2} .floatcard{position:absolute;right:16px;bottom:16px;left:16px;background:var(--kuyu);backdrop-filter:blur(14px); border:1px solid var(--line2);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .floatcard .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .floatcard .v{font-size:15px;margin-top:3px} .floatcard .v em{font-style:normal;color:inherit} /* ---------- tabs ---------- */ .tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:22px} .tab{padding:15px 18px;font-size:13.5px;color:var(--muted);border-right:1px solid var(--line);cursor:pointer; background:transparent;transition:.22s;text-align:left;font-family:inherit} .tab:last-child{border-right:0} .tab:hover{color:var(--txt2);background:rgba(var(--ink),.03)} .tab.on{background:rgba(var(--ink),.075);color:var(--txt)} .tab i{font-style:normal;color:var(--muted);margin-right:8px;font-size:12px} .tab.on i{color:var(--accent)} @media(max-width:820px){.tabs{grid-template-columns:1fr 1fr}.tab:nth-child(2n){border-right:0} .tab:nth-child(-n+2){border-bottom:1px solid var(--line)}} .panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden; display:grid;grid-template-columns:.92fr 1.08fr} @media(max-width:900px){.panel{grid-template-columns:1fr}} .panel .pl{padding:34px 32px} .panel h3{font-size:24px;font-weight:400;letter-spacing:-.028em;margin:0 0 10px} .panel p{color:var(--muted);font-size:14.5px;margin:0 0 20px} .panel .kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px} .panel .kv span{color:var(--muted);flex:0 0 40%;min-width:0} .panel .kv b{flex:1;min-width:0;margin-inline-start:auto;text-align:right;overflow-wrap:anywhere} .panel .kv{align-items:baseline} .pin[type=button]{appearance:none;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer} .pin:focus-visible .kutu,[data-var]:focus-visible{outline:2px solid var(--accent);outline-offset:4px} section[id]{scroll-margin-top:110px} body:has(.prose) #waves{opacity:.25} @media(max-width:600px){.panel .kv{gap:12px}.panel .kv span{flex-basis:36%}} .panel .pr{position:relative;min-height:330px} .panel .pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .panel .pr:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2),transparent 44%)} .panel[hidden]{display:none} /* ---------- offer cards ---------- */ .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch} /* Kucuk ekranda [data-kaydir] tasiyan siralar alt alta yigilmak yerine yandan yana kayar. Kenarlara tasirilir ki kart kenari ekrani doldursun; bir sonraki kartin ucu gorunerek kaydirilabilecegi belli olur. Kart genisligi --kw ile sirasina gore ayarlanir. */ /* Secici iki kez yazildi: .pgrid ve .news kurallari stil dosyasinda daha sonra geldigi icin tek [data-kaydir] onlari ezemiyordu. */ @media(max-width:900px){ [data-kaydir][data-kaydir]{--kw:85%;display:flex;grid-template-columns:none;gap:14px; align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-24px;padding-inline:24px;padding-block:4px 16px; scroll-padding-inline:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch} [data-kaydir][data-kaydir]::-webkit-scrollbar{display:none} [data-kaydir][data-kaydir] > *{flex:0 0 var(--kw);max-width:430px;scroll-snap-align:center} .pgrid[data-kaydir][data-kaydir]{--kw:62%} } @media(max-width:520px){.pgrid[data-kaydir][data-kaydir]{--kw:74%}} /* Kartlar esit yukseklikte; madde listesi buyuyup butonu ve alt notu asagi yaslar, boylece uc kartta ayni hizada dururlar. */ .offer{border:1px solid var(--line);border-radius:var(--r);background:var(--card); padding:28px 26px 26px;transition:.3s;display:flex;flex-direction:column} .offer:hover{border-color:var(--line2);transform:translateY(-3px)} .offer .ico{width:38px;height:38px;border:1px solid var(--line2);border-radius:10px;display:grid;place-items:center;margin-bottom:22px} .offer .ico svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.5} .offer h3{font-size:19px;font-weight:500;margin:0 0 8px;letter-spacing:-.02em} .offer .sub{font-size:13.5px;color:var(--muted);min-height:42px;margin-bottom:20px} .offer ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;font-size:13.5px;color:var(--txt2)} .offer li{display:flex;gap:10px;align-items:flex-start} .offer li svg{width:14px;height:14px;flex:none;margin-top:4px;stroke:var(--accent);fill:none;stroke-width:2} .offer.hi{background:#f4f4f2;color:#0d0e10;border-color:#f4f4f2;position:relative} .offer.hi .sub,.offer.hi ul{color:#4a4c52} .offer.hi .ico{border-color:rgba(0,0,0,.16)} .offer.hi .ico svg,.offer.hi li svg{stroke:var(--accentKoyu)} .offer.hi .tag{position:absolute;top:-11px;left:26px;background:var(--kontrast2);color:var(--kontrast2Txt);font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px} .offer .btn{width:100%;justify-content:center;margin-top:auto} .offer.hi .btn{background:var(--kontrast2);color:var(--kontrast2Txt)} .offer.hi .btn:hover{background:var(--accentKoyu)} .offer .note{font-size:11.5px;color:var(--muted);text-align:center;margin:14px 0 0} .offer.hi .note{color:#5b5d66} /* ---------- projects ---------- */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .chip{padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--muted); background:transparent;cursor:pointer;transition:.22s;font-family:inherit} .chip:hover{color:var(--txt);border-color:var(--line2)} .chip.on{background:var(--kontrast);color:var(--kontrastTxt);border-color:var(--kontrast)} .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1040px){.pgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.pgrid{grid-template-columns:1fr}} .pcard{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--card);position:relative; transition:.3s;display:block} .pcard:hover{border-color:var(--line2);transform:translateY(-4px)} /* Zemin asagida temaya baglaniyor (bkz. "Gorsel yer tutuculari"). Burada #111 sabitti: aydinlik temada fotograf gelene kadar siyah kutular cikiyordu. */ .pcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden} .pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .pcard:hover .ph img{transform:scale(1.06)} .pcard .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--kuyu))} .pcard .kind{position:absolute;top:11px;left:11px;z-index:2;font-size:10px;letter-spacing:.06em; background:var(--cam2);border:1px solid var(--line2);backdrop-filter:blur(8px); padding:4px 9px;border-radius:6px;color:var(--txt2)} /* Depolamasi olan kartlarda bir satir fazla oldugu icin kartlar dikeyde esitlenir; guc bloklari alta yaslanir. */ .pcard{display:flex;flex-direction:column} .pcard .body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1} .pcard .pw:not(.depo){margin-top:auto} .pcard .nm{font-size:14.5px;font-weight:500;letter-spacing:-.015em} .pcard .loc{font-size:12.5px;color:var(--muted);margin-top:3px} .pcard .pw{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);display:flex; justify-content:space-between;font-size:12.5px;color:var(--muted)} .pcard .pw b{color:var(--txt);font-weight:500} .pcard .pw.depo{margin-top:6px;padding-top:0;border-top:0} .pcard[hidden]{display:none} /* Yapim asamasindaki santraller icin yesil rozet */ /* Hibrit isareti: tur rozetinin icinde kucuk bir "+GES". Ayri bir rozet olsaydi kartin ustunde uc rozet yan yana gelirdi. */ .pcard .kind .hibritIsaret{ font-style:normal;font-weight:600;opacity:.75;margin-left:3px; letter-spacing:.02em} .pcard .kind.yapimda{left:auto;right:11px;background:rgba(var(--accentRgb),.9); border-color:rgba(var(--accentParlakRgb),.9);color:var(--accentUstu);font-weight:600;letter-spacing:.04em} .artmeta .pill.yapimda{background:rgba(var(--accentRgb),.92);border-color:rgba(var(--accentParlakRgb),.9); color:var(--accentUstu);font-weight:600} .yapimNot{font-style:normal;color:var(--muted);font-size:12.5px} /* ---------- quote + policy mosaic ---------- */ .qgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px;align-items:stretch} @media(max-width:900px){.qgrid{grid-template-columns:1fr}} .quote{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:32px 30px; display:flex;flex-direction:column} .quote .stars{color:var(--accent);letter-spacing:3px;font-size:13px;margin-bottom:20px} .quote blockquote{margin:0;font-size:clamp(19px,2.2vw,24px);line-height:1.42;font-weight:400;letter-spacing:-.022em} .quote .who{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:12px} .quote .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#1d3a2c,#2e6b4d); display:grid;place-items:center;font-size:13px;color:#bff0d6;flex:none} .quote .who .nm{font-size:14px} .quote .who .rl{font-size:12.5px;color:var(--muted)} .pol{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.pol{grid-template-columns:1fr}} .pitem{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:20px 20px 18px;transition:.25s} .pitem:hover{border-color:var(--line2);background:#16171b} .pitem .ico{width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);display:grid;place-items:center;margin-bottom:14px} .pitem .ico svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.6} .pitem h4{margin:0 0 6px;font-size:14.5px;font-weight:500} .pitem p{margin:0;font-size:12.8px;color:var(--muted);line-height:1.5} /* ---------- news ---------- */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.news{grid-template-columns:1fr}} .ncard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);transition:.3s} .ncard:hover{border-color:var(--line2);transform:translateY(-4px)} .ncard .ph{aspect-ratio:16/10;overflow:hidden} .ncard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .ncard:hover .ph img{transform:scale(1.05)} .ncard .body{padding:22px 22px 24px} .ncard .date{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .ncard h3{font-size:17px;font-weight:500;letter-spacing:-.02em;margin:11px 0 9px;line-height:1.3} .ncard p{font-size:13.5px;color:var(--muted);margin:0 0 18px} .ncard .more{font-size:13px;color:var(--accent);display:inline-flex;gap:7px;align-items:center} .ncard .more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} /* ---------- harita ikon aciklamasi ---------- */ .haritaAnahtar{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center; padding:4px 18px 6px;font-size:12.5px;color:var(--muted)} .haritaAnahtar:empty{display:none} .anahtarBir{display:inline-flex;align-items:center;gap:8px} .anahtarIkon{width:22px;height:22px;display:block;flex:0 0 22px; filter:drop-shadow(0 0 6px rgba(var(--accentRgb),.45))} .anahtarIkon svg{width:100%;height:100%;overflow:visible} /* ---------- yatay kaydirma gostergesi ---------- */ .kaydirNokta{display:none;gap:8px;justify-content:center;margin-top:4px} .kaydirNokta button{width:7px;height:7px;padding:0;border:0;border-radius:50%; background:var(--line2);cursor:pointer;transition:background .25s,width .25s} .kaydirNokta button[aria-current="true"]{width:20px;border-radius:4px;background:var(--accent)} .kaydirNokta button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:900px){.kaydirNokta.var{display:flex}} /* ---------- footer ---------- */ footer{position:relative;overflow:hidden;border-top:1px solid var(--line);margin-top:0} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:76px 0 0;position:relative;z-index:2} @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:34px}} /* Telefon: iki kisa bag listesi (Kurumsal, Faaliyetler) YAN YANA. Tek sutunda on bag alt alta diziliyor ve alt bilgi ekrani birkac kez kaydirtiyordu. Marka ve iletisim tam genislikte; iletisim blogu ince bir cizgiyle listelerden ayriliyor. Baglara dikey pay verildi: 13,5 px yazida parmakla dokunma alani darti. */ @media(max-width:560px){ .fgrid{grid-template-columns:1fr 1fr;gap:34px 18px;padding-top:56px} .fgrid .brand,.fgrid .ct{grid-column:1/-1} .fgrid h5{margin-bottom:10px} .fgrid ul{gap:2px} .fgrid ul a{display:block;padding:6px 0} .fgrid .ct{border-top:1px solid var(--line);padding-top:26px;gap:18px 18px} } /* Telefon ve e-posta yan yana; adres ustte tam genislikte. Cok dar ekranda (<380 px) e-posta adresi sutuna sigmiyor, alt alta kaliyor. */ @media(min-width:380px) and (max-width:560px){ .fgrid .ct{grid-template-columns:auto 1fr} .fgrid .ct > div:first-child{grid-column:1/-1} } /* Alt bilgideki marka kilidi: yaprak isareti + logonun yazi kismi. Yazi ayni kaynak dosyadan kirpilir (bkz. .marka). */ .fkilit{display:flex;align-items:center;gap:11px;margin-bottom:18px} .fkilit .fyaprak{height:34px;width:auto;filter:brightness(0) invert(1);margin:0;flex:none} .fyazi{--fo:.38;display:block;flex:none;position:relative;overflow:hidden; width:calc(408px * var(--fo));height:calc(90px * var(--fo))} .fyazi img{position:absolute;max-width:none; width:calc(500px * var(--fo));height:calc(104px * var(--fo)); left:calc(-92px * var(--fo));top:calc(-14px * var(--fo))} .fgrid p{font-size:13.5px;color:var(--muted);margin:0;max-width:38ch} .fgrid h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500} .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13.5px;color:var(--txt2)} .fgrid ul a:hover{color:var(--txt)} .fgrid .ct{font-size:13.5px;color:var(--txt2);display:grid;gap:14px} .fgrid .ct .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .socials{display:flex;gap:9px;margin-top:20px} .socials a{width:34px;height:34px;border:1px solid var(--line2);border-radius:9px;display:grid;place-items:center;transition:.25s} .socials a:hover{background:rgba(var(--ink),.1)} .socials svg{width:15px;height:15px;fill:none;stroke:var(--txt2);stroke-width:1.6} .wordmark{position:relative;z-index:2;margin-top:54px;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144; font-size:clamp(64px,17.5vw,250px);line-height:.82;letter-spacing:-.03em;text-align:center; color:rgba(255,255,255,.9);mix-blend-mode:overlay;white-space:nowrap;user-select:none} .fbar{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:34px;padding:20px 0 26px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)} .fbar .lk{display:flex;gap:20px;flex-wrap:wrap} .fbar a:hover{color:var(--txt)} /* Adresi henuz girilmemis kurumsal sistem. Gorunuyor ama bag degil; sonuk duruyor ki tiklanabilir sanilmasin. */ .fbar .lkPasif{opacity:.45;cursor:default} .js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .js-anim .reveal.in{opacity:1;transform:none} /* ---------- ambient: waves + grid strips ---------- */ #waves{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85} .rails{position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:repeating-linear-gradient(90deg,rgba(var(--ink),.032) 0 1px,transparent 1px 96px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent)} .glow{position:fixed;left:50%;top:-380px;transform:translateX(-50%);width:min(1500px,150vw);height:900px;z-index:-1; pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--accentRgb),.13),rgba(var(--accentRgb),0) 70%)} .glow.b{top:auto;bottom:-460px;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--accentRgb),.1),rgba(var(--accentRgb),0) 70%)} /* thin animated energy divider */ .eline{position:relative;height:1px;background:var(--line);overflow:hidden} .eline:after{content:"";position:absolute;top:0;left:-30%;width:30%;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:run 5.5s linear infinite;opacity:.85} @keyframes run{to{left:110%}} /* ---------- mix chart ---------- */ .mix{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:26px 28px 22px} .mix .cap{font-size:13px;color:var(--muted);margin:0 0 20px} .mix .row{display:grid;grid-template-columns:132px 1fr 46px;align-items:center;gap:14px;padding:9px 0; border-radius:8px;transition:background .2s} .mix .row:hover{background:rgba(var(--ink),.035)} .mix .lb{font-size:13.5px;color:var(--txt2)} .mix .lb i{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px} .mix .bar{height:10px;background:rgba(var(--ink),.05);border-radius:5px;overflow:hidden} .mix .fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accentKoyu),var(--accent)); transition:width 1.1s cubic-bezier(.2,.7,.2,1)} .mix .vl{font-size:14px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)} .mix .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* ---------- timeline ---------- */ .tl{position:relative;overflow-x:auto;padding:8px 0 20px;-webkit-overflow-scrolling:touch} /* Kaydirma cubugu: tutamagin ustune tiklamak kolay olsun diye kusak yuksek tutuluyor; gorunen serit seffaf kenarlikla inceltiliyor. */ .tl{scrollbar-color:rgba(var(--ink),.28) rgba(var(--ink),.06)} .tl::-webkit-scrollbar{height:16px} .tl::-webkit-scrollbar-track{background:rgba(var(--ink),.06);border-radius:8px; border:5px solid transparent;background-clip:padding-box} .tl::-webkit-scrollbar-thumb{background:rgba(var(--ink),.28);border-radius:8px; border:4px solid transparent;background-clip:padding-box} .tl::-webkit-scrollbar-thumb:hover{background:rgba(150,255,205,.55);border-width:3px} .tlrail{display:flex;gap:0;min-width:1080px;position:relative} .tstep{flex:1 1 0;min-width:120px;position:relative;padding:56px 14px 0 0} /* Cizgi tek parca halinde raya degil, her adimin kendi kutusuna cizilir: adimlar rayin kutusundan tasabildigi icin tek parca cizgi yarida kesiliyordu. */ .tstep:before{content:"";position:absolute;top:26px;left:0;right:0;height:1px; background:rgba(var(--accentRgb),.5)} .tstep.first:before{background:linear-gradient(90deg,rgba(var(--accentRgb),.12),rgba(var(--accentRgb),.5))} .tstep:last-child:before{background:linear-gradient(90deg,rgba(var(--accentRgb),.5),rgba(var(--accentRgb),.12))} .tstep .dot{position:absolute;top:21px;left:0;width:11px;height:11px;border-radius:50%; background:var(--bg);border:1.5px solid var(--accent);transition:.25s} .tstep:hover .dot{background:var(--accent);box-shadow:0 0 0 5px rgba(var(--accentRgb),.16)} .tstep .yr{position:absolute;top:0;left:0;font-size:12.5px;color:var(--muted);letter-spacing:.04em; font-variant-numeric:tabular-nums} .tstep:hover .yr{color:var(--txt)} .tstep .ev{font-size:13px;color:var(--txt2);line-height:1.45;padding-left:0} .tstep .ev b{display:block;font-weight:500;color:var(--txt)} .tstep .ev span{color:var(--muted);font-size:12.5px} .tstep.first .dot{background:var(--accent)} .tstep.future .dot{border-style:dashed} .tstep.future .ev b{color:var(--txt2)} /* ---------- mobile drawer ---------- */ .drawer{position:fixed;inset:0;z-index:80;background:var(--kuyu);backdrop-filter:blur(20px); display:flex;flex-direction:column;padding:22px 26px 34px;opacity:0;pointer-events:none;transition:opacity .28s} .drawer.open{opacity:1;pointer-events:auto} .drawer .top{display:flex;align-items:center;justify-content:space-between;height:52px} .drawer .top img{height:28px;width:auto;filter:brightness(0) invert(1)} .drawer .x{width:40px;height:40px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--ink),.05); color:var(--txt);font-size:20px;line-height:1;cursor:pointer;font-family:inherit} .drawer nav{display:grid;gap:2px;margin-top:34px} .drawer nav a{font-size:26px;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid var(--line);color:var(--txt2)} .drawer nav a:hover{color:var(--txt)} .drawer .bot{margin-top:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:24px} @media(prefers-reduced-motion:reduce){ .js-anim .reveal{opacity:1;transform:none}.certs .track{animation:none}.eline:after{animation:none;left:35%} .mix .fill{transition:none} } /* ================= IC SAYFALAR ================= */ /* sayfa basligi */ .phead{position:relative;padding:150px 0 62px;border-bottom:1px solid var(--line);overflow:hidden} .phead .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .phead h1{font-size:clamp(32px,5.4vw,60px);line-height:1.04;font-weight:400;letter-spacing:-.036em; margin:18px 0 0;text-wrap:balance;max-width:20ch} .phead .sub{color:var(--muted);font-size:15.5px;max-width:58ch;margin:18px 0 0} .phead.with-img{border-bottom:0;padding:0} .phead-img{position:relative;border-radius:24px;overflow:hidden;margin-top:88px;min-height:min(58vh,460px); display:flex;align-items:flex-end} .phead-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .phead-img:after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,10,9,.55),rgba(8,9,10,.94))} .phead-img .inner{position:relative;z-index:2;padding:48px 44px 44px;width:100%} @media(max-width:640px){.phead-img .inner{padding:32px 24px 30px}} /* kirinti */ .crumbs{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap} .crumbs a:hover{color:var(--txt)} .crumbs .sep{opacity:.45} /* uzun metin */ .prose{font-size:16.5px;line-height:1.72;color:var(--txt2);max-width:68ch} .prose > *{margin:0} .prose > * + *{margin-top:1.15em} .prose h2{font-size:clamp(22px,2.7vw,29px);font-weight:400;letter-spacing:-.028em;color:var(--txt); margin-top:1.9em;line-height:1.22;text-wrap:balance} .prose h3{font-size:19px;font-weight:500;color:var(--txt);margin-top:1.7em;letter-spacing:-.02em} .prose ul,.prose ol{padding-left:1.15em;display:grid;gap:.55em} .prose li::marker{color:var(--accent)} .prose strong{color:var(--txt);font-weight:500} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .prose blockquote{margin:0;padding:20px 24px;border-left:2px solid var(--accent);background:var(--card); border-radius:0 12px 12px 0;color:var(--txt);font-size:17px} .prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0} .prose img{border-radius:14px;border:1px solid var(--line)} /* iki kolonlu icerik + yan menu */ .docgrid{display:grid;grid-template-columns:250px 1fr;gap:60px;align-items:start} @media(max-width:900px){.docgrid{grid-template-columns:1fr;gap:34px}} .sidenav{position:sticky;top:100px;display:grid;gap:2px} @media(max-width:900px){.sidenav{position:static}} .sidenav .ttl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .sidenav a{display:block;padding:10px 14px;border-radius:10px;font-size:13.5px;color:var(--txt2);transition:.2s; border:1px solid transparent} .sidenav a:hover{background:rgba(var(--ink),.05);color:var(--txt)} .sidenav a.here{background:rgba(var(--accentRgb),.1);border-color:rgba(var(--accentRgb),.28);color:var(--txt)} /* santral kunye */ .santralTanitim{color:var(--txt);font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;max-width:72ch;margin:0 0 36px} .specgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch} @media(max-width:900px){.specgrid{grid-template-columns:1fr}} .speccard{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden} .speccard h2{font-size:15px;font-weight:500;margin:0;padding:20px 26px;border-bottom:1px solid var(--line); letter-spacing:-.01em} .specrow{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:15px 26px;border-bottom:1px solid var(--line); font-size:14px} .specrow:last-child{border-bottom:0} .specrow dt{color:var(--muted);margin:0} .specrow dd{margin:0;color:var(--txt)} @media(max-width:560px){.specrow{grid-template-columns:1fr;gap:4px}} /* Fotoğraf künye kartıyla aynı boyda: satırın yüksekliğini kart belirliyor, fotoğraf mutlak konumla o kutuyu dolduruyor. Normal akışta kalsaydı img'nin height="750" özelliği kutuyu uzatırdı. */ .specphoto{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;min-height:320px} .specphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* iletisim */ .ctgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start} @media(max-width:900px){.ctgrid{grid-template-columns:1fr}} .ctcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:28px 28px 26px; display:grid;gap:22px;align-content:start} .ctcard .blk .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .ctcard .blk .v{font-size:15px;color:var(--txt);line-height:1.6} .ctcard .blk .v a:hover{color:var(--accent)} .form{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:28px} .form .fr{display:grid;gap:7px;margin-bottom:16px} .form .fr.two{grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.form .fr.two{grid-template-columns:1fr}} .form label{font-size:12.5px;color:var(--muted);letter-spacing:.02em} .form input,.form textarea,.form select{width:100%;background:rgba(var(--ink),.04);border:1px solid var(--line2); border-radius:11px;padding:12px 14px;color:var(--txt);font-family:inherit;font-size:14.5px;transition:.2s} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent); background:rgba(var(--accentRgb),.06)} .form textarea{min-height:130px;resize:vertical} /* --- Form hata durumları ------------------------------------------- Renk tek başına hata demiyor (renk körlüğü): kenarlık rengi, alanın altındaki metin ve ikon birlikte. Mesaj boşken yer kaplamıyor. */ .form [aria-invalid="true"]{border-color:var(--hata);background:rgba(var(--hataRgb),.07)} .form [aria-invalid="true"]:focus{border-color:var(--hata);background:rgba(var(--hataRgb),.07); box-shadow:0 0 0 3px rgba(var(--hataRgb),.2)} .form .alanHata{margin:0;display:flex;gap:7px;align-items:flex-start; font-size:12.5px;line-height:1.45;color:var(--hata)} .form .alanHata:empty{display:none} .form .alanHata::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat} .formHataOzet,.formSunucuHata{margin:0 0 18px;padding:14px 16px;border:1px solid rgba(var(--hataRgb),.5); border-left-width:4px;border-radius:11px;background:rgba(var(--hataRgb),.08)} .formHataOzet:focus,.formSunucuHata:focus{outline:2px solid var(--hata);outline-offset:3px} .formSunucuHata .formHataBaslik{margin:0;font-size:14px;font-weight:600;color:var(--txt)} .formHataOzet .formHataBaslik{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--txt)} .formHataOzet ul{margin:0;padding-left:18px;display:grid;gap:3px} .formHataOzet li{font-size:13px;color:var(--hata)} .formHataOzet a{color:inherit;text-decoration:underline;text-underline-offset:2px} .form .hint{font-size:12px;color:var(--muted);margin:14px 0 0} .map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);margin-top:16px} .map iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.88) brightness(1.05)} /* haber detay */ .artmeta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:18px} .artmeta .pill{border:1px solid var(--line2);border-radius:999px;padding:4px 11px;color:var(--txt2);font-size:11px; letter-spacing:.1em;text-transform:uppercase} .artimg{border-radius:20px;overflow:hidden;border:1px solid var(--line);margin-bottom:44px} /* height:auto şart: yoksa img'nin height="750" özelliği aspect-ratio'yu eziyor ve dikey fotoğraflar (türbinler) upuzun, mobilde ince şerit oluyordu. */ .artimg img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;display:block} /* alt gezinme */ .pagenav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px} @media(max-width:640px){.pagenav{grid-template-columns:1fr}} .pagenav a{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:20px 22px;transition:.25s} .pagenav a:hover{border-color:var(--line2);background:#16171b} .pagenav .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .pagenav .t{font-size:15.5px;margin-top:6px} .pagenav .next{text-align:right} /* bos durum */ .empty{border:1px dashed var(--line2);border-radius:var(--r);padding:56px 24px;text-align:center;color:var(--muted); font-size:14.5px} /* ================================================================= v2 — Isik, hareket ve harita ================================================================= */ /* --- daha canli zemin: yesil isiltilar --- */ :root{ --glow1:rgba(var(--accentRgb),.20); --glow2:rgba(60,170,190,.13); --card:#141518; --line:rgba(var(--ink),.10); } body{ background: radial-gradient(900px 620px at 12% 2%, rgba(var(--accentRgb),.10), transparent 62%), radial-gradient(760px 560px at 92% 26%, rgba(60,170,190,.085), transparent 60%), radial-gradient(1000px 700px at 50% 108%, rgba(var(--accentRgb),.10), transparent 64%), var(--bg); background-attachment:fixed; } .glow{background:radial-gradient(50% 50% at 50% 50%,var(--glow1),rgba(var(--accentRgb),0) 70%); animation:nefes 13s ease-in-out infinite} .glow.b{background:radial-gradient(50% 50% at 50% 50%,var(--glow2),rgba(60,170,190,0) 70%); animation:nefes 17s ease-in-out infinite reverse} @keyframes nefes{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.13)}} .rails{background-image:repeating-linear-gradient(90deg,rgba(var(--ink),.04) 0 1px,transparent 1px 96px)} /* bolum ayirici parlama */ .sec{position:relative} .sec::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accentRgb),.42),transparent);opacity:.75} .sec.duz::before{display:none} /* --- kartlarda isik --- */ .offer,.pcard,.ncard,.pitem,.quote,.speccard,.specphoto,.ctcard,.form,.mix,.panel{ position:relative;isolation:isolate} .offer::after,.pcard::after,.ncard::after,.pitem::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(var(--accentRgb),.14),transparent 70%); opacity:0;transition:opacity .35s} .offer:hover::after,.pcard:hover::after,.ncard:hover::after,.pitem:hover::after{opacity:1} .pcard:hover,.ncard:hover,.offer:hover{box-shadow:0 18px 50px -22px rgba(var(--accentRgb),.45)} .offer.hi:hover{box-shadow:0 18px 50px -20px rgba(0,0,0,.6)} .badge{box-shadow:0 0 0 1px rgba(var(--accentRgb),.06), 0 8px 26px -18px rgba(var(--accentRgb),.7)} .badge .dot{animation:nabiz 2.4s ease-in-out infinite} @keyframes nabiz{0%,100%{box-shadow:0 0 0 0 rgba(var(--accentRgb),.55)}70%{box-shadow:0 0 0 7px rgba(var(--accentRgb),0)}} .btn-l{box-shadow:0 10px 30px -14px rgba(255,255,255,.5)} .btn-l:hover{box-shadow:0 14px 34px -12px rgba(var(--accentRgb),.8)} /* --- hero: canli kapak --- */ /* Kart hâlindeyken kapağın altında yeşil bir parıltı vardı; kenardan kenara bir yüzeyin etrafında görünecek bir şey kalmadı, kaldırıldı. */ .hero-in img.bg{transform:scale(1.06);animation:yaklas 26s ease-in-out infinite alternate} @keyframes yaklas{from{transform:scale(1.06)}to{transform:scale(1.15) translate(-1.2%,-1%)}} #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .hero-in:after{z-index:1} .hero-c{z-index:3} .scrollcue{z-index:3} .scrollcue span{display:block;width:1px;height:26px;margin:9px auto 0; background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);animation:kaydir 2.2s ease-in-out infinite} @keyframes kaydir{0%{opacity:0;transform:translateY(-8px)}45%{opacity:1}100%{opacity:0;transform:translateY(8px)}} /* acilista sirali giris */ .js-anim .gir{opacity:0;transform:translateY(22px);filter:blur(6px)} .js-anim .gir.acik{opacity:1;transform:none;filter:none; transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .85s} /* --- Turkiye haritasi --- */ .haritaKutu{display:grid;grid-template-columns:1.55fr .95fr;gap:18px;align-items:stretch} @media(max-width:980px){.haritaKutu{grid-template-columns:1fr}} .haritaSar{position:relative;border:1px solid var(--line);border-radius:var(--r); background:radial-gradient(70% 90% at 50% 30%,rgba(var(--accentRgb),.09),transparent 70%),var(--bg2); padding:18px;overflow:hidden} .haritaSar::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(var(--ink),.022) 0 1px,transparent 1px 46px), repeating-linear-gradient(0deg,rgba(var(--ink),.022) 0 1px,transparent 1px 46px); -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent); mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent)} #tr-harita{width:100%;height:auto;display:block;position:relative;z-index:1;overflow:visible} #tr-harita path{fill:rgba(var(--ink),.045);stroke:rgba(var(--ink),.13);stroke-width:.6; transition:fill .3s,stroke .3s} /* Santral bulunan iller. --------------------------------------------------------------------- Secici hem hem de icin yaziliyor. Kaynak SVG'de iller birer idi; svgo tek cocuklu gruplari birlestirdigi icin artik dogrudan . Yalnizca birine gore yazilirsa harita sessizce renksiz kaliyor — bir kez oldu. */ #tr-harita [data-var],#tr-harita [data-var] path{fill:rgba(var(--accentRgb),.20);stroke:rgba(var(--accentRgb),.55);cursor:pointer} #tr-harita [data-var]:hover,#tr-harita [data-var]:hover path, #tr-harita [data-var].sec,#tr-harita [data-var].sec path{ fill:rgba(var(--accentRgb),.46);stroke:rgba(150,255,200,.95)} /* inset, .haritaSar'in DOLGUSUYLA (padding:14px 18px 8px) ayni olmali. Onceden dort yani da 18px'ti; SVG dolgu kutusunun icinde 14px'ten basladigi icin pin katmani haritadan 4px asagida duruyordu ve butun pinler o kadar kaymis oluyordu. Dar ekranda gozle secilmiyordu ama genis ekranda buyuyor: harita 1000px olunca kayma ~14px. Olculdu: pinKat.top 185.8 / svg.top 181.8. */ .pinKat{position:absolute;inset:14px 18px 8px;z-index:2;pointer-events:none} .pin{pointer-events:auto;cursor:pointer;position:absolute;transform:translate(-50%,-50%);width:13px;height:13px} .pin b{position:absolute;inset:3px;border-radius:50%;background:var(--accentParlak); box-shadow:0 0 12px 2px rgba(var(--accentRgb),.9)} .pin i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(var(--accentRgb),.85); animation:halka 2.6s ease-out infinite} .pin.k2 i{animation-delay:.8s} .pin.k3 i{animation-delay:1.5s} @keyframes halka{0%{transform:scale(.5);opacity:.95}100%{transform:scale(2.9);opacity:0}} .haritaBilgi{position:absolute;z-index:5;pointer-events:none;background:var(--kuyu); border:1px solid rgba(var(--accentRgb),.4);border-radius:11px;padding:10px 13px;font-size:12.5px; color:var(--txt);box-shadow:0 14px 40px -14px #000;opacity:0;transform:translate(-50%,-118%) scale(.96); transition:opacity .18s,transform .18s;max-width:240px} .haritaBilgi.acik{opacity:1;transform:translate(-50%,-108%) scale(1)} .haritaBilgi b{display:block;font-weight:500;margin-bottom:3px} .haritaBilgi span{color:var(--muted);font-size:12px;display:block} /* Depolama satiri, ustundeki santral satiriyla ayni renk ve hizada durur. */ .ilListe{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2); padding:20px 8px 14px 20px;display:flex;flex-direction:column} .ilListe .bas{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .ilKaydir{overflow-y:auto;max-height:420px;padding-right:12px;display:grid;gap:2px;align-content:start} .ilKaydir::-webkit-scrollbar{width:5px} .ilKaydir::-webkit-scrollbar-thumb{background:rgba(var(--ink),.16);border-radius:4px} .ilSat{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 12px; border-radius:10px;cursor:pointer;transition:.22s;border:1px solid transparent;text-align:left; background:transparent;font-family:inherit;color:inherit;width:100%} .ilSat:hover,.ilSat.sec{background:rgba(var(--accentRgb),.10);border-color:rgba(var(--accentRgb),.3)} .ilSat .ad{font-size:14px} .ilSat .alt{font-size:12px;color:var(--muted);margin-top:2px} .ilSat .sy{font-size:12.5px;color:var(--accent);font-variant-numeric:tabular-nums; border:1px solid rgba(var(--accentRgb),.35);border-radius:999px;padding:2px 9px} .ilListe .dip{margin-top:14px;padding:12px 12px 0;border-top:1px solid var(--line); font-size:12px;color:var(--muted)} /* --- yeni footer imzasi --- */ .fmark{position:relative;z-index:2;margin-top:56px;display:flex;align-items:center; justify-content:space-between;gap:28px;flex-wrap:wrap; border:1px solid var(--line);border-radius:20px;padding:30px 34px; background:linear-gradient(120deg,rgba(var(--accentRgb),.09),rgba(60,170,190,.05) 55%,transparent),var(--cam2); backdrop-filter:blur(10px);overflow:hidden} .fmark::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%; background:linear-gradient(90deg,transparent,rgba(var(--ink),.06),transparent); animation:tarama 7s linear infinite} @keyframes tarama{to{left:120%}} .fmark .sol{display:flex;align-items:center;gap:18px;position:relative;z-index:1} .fmark .sol img{height:44px;width:auto;filter:brightness(0) invert(1)} .fmark .sz{font-size:clamp(19px,2.3vw,26px);letter-spacing:-.025em;line-height:1.25} .fmark .sz em{font-style:normal;color:var(--muted);display:block;font-size:13.5px;letter-spacing:0;margin-top:3px} .fmark .sag{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1} @media(prefers-reduced-motion:reduce){ .glow,.glow.b,.hero-in img.bg,.fmark::after,.badge .dot,.pin i,.scrollcue span{animation:none} .js-anim .gir{opacity:1;transform:none;filter:none} } /* ================================================================= v3 — Cizim tabanli kapak sahnesi, logo etkilesimi, harita ikonlari ================================================================= */ /* --- kapak: fotograf yerine animasyonlu sahne --- */ .hero-in{background:#07110e} .sahne{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} .hero-in:after{ background: radial-gradient(58% 44% at 50% 42%, rgba(5,12,10,.80), rgba(5,12,10,.28) 62%, transparent 78%), linear-gradient(180deg, rgba(6,14,12,.62) 0%, rgba(6,14,12,.02) 30%, rgba(6,14,12,.10) 62%, rgba(8,9,10,.78) 100%); z-index:1} .hero-c{z-index:3} .scrollcue{z-index:3} /* rotorlar */ .sahne .kanat{fill:rgba(200,255,228,.62);stroke:rgba(230,255,242,.55);stroke-width:1;stroke-linejoin:round} .sahne .turbin.uzak .kanat{fill:rgba(200,255,228,.34)} .sahne .rotor{transform-origin:0 0;animation:donRotor 9s linear infinite} .sahne .r-yavas{animation-duration:13s} .sahne .r-orta {animation-duration:9s} .sahne .r-hizli{animation-duration:6.5s} @keyframes donRotor{to{transform:rotate(360deg)}} /* baraj suyu */ .sahne .akis path{stroke-dasharray:26 46;animation:akSu 1.05s linear infinite} .sahne .akis path:nth-child(2){animation-duration:1.35s;animation-delay:-.3s} .sahne .akis path:nth-child(3){animation-duration:.9s;animation-delay:-.6s} .sahne .akis path:nth-child(4){animation-duration:1.5s;animation-delay:-.15s} .sahne .akis path:nth-child(5){animation-duration:1.2s;animation-delay:-.8s} @keyframes akSu{to{stroke-dashoffset:-72}} .sahne .nehir path{stroke-dasharray:52 30;animation:akNehir 3.4s linear infinite} .sahne .nehir path:nth-child(2){animation-duration:4.6s;animation-direction:reverse} .sahne .nehir path:nth-child(3){animation-duration:5.6s} @keyframes akNehir{to{stroke-dashoffset:-164}} .sahne .golSu path{stroke-dasharray:40 26;animation:akNehir 7s linear infinite} .sahne .golSu path:nth-child(2){animation-duration:9s;animation-direction:reverse} .sahne .kopuk circle{animation:kopur 2.2s ease-out infinite;transform-origin:center} .sahne .kopuk .k2{animation-delay:.6s} .sahne .kopuk .k3{animation-delay:1.2s} @keyframes kopur{0%{opacity:0;transform:translateY(0) scale(.4)} 30%{opacity:.85}100%{opacity:0;transform:translateY(-22px) scale(1.5)}} .sahne .lamba{animation:lambaYan 2.6s ease-in-out infinite} @keyframes lambaYan{0%,100%{opacity:.35}50%{opacity:1}} /* gunes paneli parlamasi */ .sahne .glint{animation:panelParla 6.5s ease-in-out infinite} @keyframes panelParla{0%,72%{transform:skewX(-28deg) translateX(0)} 100%{transform:skewX(-28deg) translateX(760px)}} /* kutup isigi ve yildizlar */ .sahne .aurora{animation:auroraKay 18s ease-in-out infinite alternate} @keyframes auroraKay{from{transform:translateX(-26px)}to{transform:translateX(26px)}} .sahne .yildizlar circle{animation:parla 4s ease-in-out infinite} .sahne .yildizlar .y2{animation-delay:1.3s} .sahne .yildizlar .y3{animation-delay:2.6s} @keyframes parla{0%,100%{opacity:.22}50%{opacity:.9}} /* --- logo etkilesimi --- */ .nav .logo{display:inline-flex;position:relative;padding:6px 8px;border-radius:12px;overflow:hidden; transition:background .3s} .nav .logo img{transition:transform .5s cubic-bezier(.22,.8,.25,1),filter .35s} .nav .logo::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%; background:linear-gradient(90deg,transparent,rgba(150,255,205,.4),transparent); transform:skewX(-20deg);opacity:0;transition:opacity .2s} .nav .logo:hover,.nav .logo:focus-visible{background:rgba(var(--accentRgb),.10)} .nav .logo:hover img,.nav .logo:focus-visible img{ transform:scale(1.06);filter:brightness(0) invert(1) drop-shadow(0 0 9px rgba(var(--accentRgb),.95))} .nav .logo:hover::after{opacity:1;animation:logoTara .75s ease-out} @keyframes logoTara{from{left:-70%}to{left:120%}} /* --- harita: santral tipi ikonlari --- */ .pin{width:34px;height:34px} .pin b,.pin i{display:none} .pin .kutu{position:absolute;inset:0;border-radius:11px; background:rgba(8,16,13,.86);border:1px solid rgba(var(--accentRgb),.65); box-shadow:0 0 16px rgba(var(--accentRgb),.45);display:grid;place-items:center; transition:transform .25s,box-shadow .25s,border-color .25s} .pin svg{width:22px;height:22px;overflow:visible} .pin .hal{position:absolute;inset:0;border-radius:12px;border:1.5px solid rgba(var(--accentRgb),.7); animation:pinHalka 2.8s ease-out infinite} .pin.k2 .hal{animation-delay:.9s} .pin.k3 .hal{animation-delay:1.7s} @keyframes pinHalka{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.85);opacity:0}} .pin .rozet{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;border-radius:9px; background:var(--accentParlak);color:var(--accentUstu);font-size:10.5px;line-height:17px;text-align:center; font-weight:600;padding:0 4px;box-shadow:0 2px 8px rgba(0,0,0,.5)} .pin.vurgu .kutu{transform:scale(1.18);border-color:#b6ffdb;box-shadow:0 0 26px rgba(var(--accentRgb),.85)} /* ikon parcalari: hem harita pinlerinde hem de sayfa icindeki .ikonKap sarmallarinda (harita anahtari, depolama seridi) kullanilir */ .ikonKap .cizgi{fill:none;stroke:var(--ikonCizgi);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ikonKap .dolgu{fill:var(--ikonDolgu)} /* RES: donen kanatlar */ .ikonKap .kanatMini{fill:var(--ikonVurgu);stroke:var(--ikonCizgi);stroke-width:.5;stroke-linejoin:round} .ikonKap .pRotor{transform-origin:0 0;animation:donRotor 4.2s linear infinite} /* HES: barajdan akan su */ .ikonKap .pSu{stroke-width:2;stroke-dasharray:3 5;animation:pinSu .9s linear infinite} .ikonKap .pSu2{animation-delay:-.3s;animation-duration:1.2s} .ikonKap .pSu3{animation-delay:-.6s;animation-duration:.75s} @keyframes pinSu{to{stroke-dashoffset:-8}} /* GES: agir agir donen isinlar, nabiz gibi parlayan gunes, panelde isik gecisi */ .ikonKap .pIsin{transform-origin:0 0;animation:donRotor 16s linear infinite} .ikonKap .pGunes{fill:var(--ikonVurgu);animation:pinGunes 3.4s ease-in-out infinite} @keyframes pinGunes{0%,100%{fill-opacity:.25}50%{fill-opacity:.7}} .ikonKap .pParilti{fill:none;stroke:var(--ikonVurgu);stroke-width:1;stroke-linecap:round; stroke-dasharray:1.8 8.8;opacity:0;animation:pinParilti 3.8s linear infinite} @keyframes pinParilti{0%{stroke-dashoffset:10.6;opacity:0} 25%{opacity:.85}65%{opacity:.85}100%{stroke-dashoffset:0;opacity:0}} /* Biyogaz: cursutucude yukselen kabarciklar, hafifce salinan yaprak */ .ikonKap .pKabarcik circle{fill:var(--ikonVurgu);transform-box:fill-box;transform-origin:50% 50%; animation:pinKabarcik 2.8s ease-in-out infinite} .ikonKap .pKabarcik .k2{animation-delay:-.95s} .ikonKap .pKabarcik .k3{animation-delay:-1.8s} @keyframes pinKabarcik{0%{transform:translateY(2px) scale(.45);opacity:0} 30%{opacity:.95}100%{transform:translateY(-7.5px) scale(1);opacity:0}} /* BESS: saha tipi konteyner unite — havalandirma dilimleri soldan saga sirayla parlar, ortadaki simsek nabiz gibi doler. */ .ikonKap .pDilim path{opacity:.42;animation:pinDilim 2.6s ease-in-out infinite} .ikonKap .pDilim path:nth-child(2){animation-delay:.18s} .ikonKap .pDilim path:nth-child(3){animation-delay:.36s} .ikonKap .pDilim path:nth-child(4){animation-delay:.54s} @keyframes pinDilim{0%,55%,100%{opacity:.42}22%{opacity:1}} .ikonKap .pSimsek{fill:var(--ikonVurgu);animation:pinSimsek 3.4s ease-in-out infinite} @keyframes pinSimsek{0%,100%{opacity:.45}55%{opacity:1}} @media(prefers-reduced-motion:reduce){ .sahne .rotor,.sahne .akis path,.sahne .nehir path,.sahne .golSu path,.sahne .kopuk circle, .sahne .lamba,.sahne .glint,.sahne .aurora,.sahne .yildizlar circle, .pin .hal,.ikonKap .pRotor,.ikonKap .pSu,.ikonKap .pIsin,.ikonKap .pGunes,.ikonKap .pParilti, .ikonKap .pKabarcik circle,.ikonKap .pDilim path,.ikonKap .pSimsek, .nav .logo::after{animation:none} .ikonKap .pDilim path{opacity:.8} .ikonKap .pParilti{opacity:.7} } /* ================================================================= v4 — Sinematik kapak, canli arka plan, sadelesen harita ================================================================= */ /* ---------- renk paleti: yesil + baraj mavisi + gunes isigi ---------- */ :root{ --bg:#0a1114; --bg2:#111c20; --card:#152025; --line:rgba(var(--ink),.115); --line2:rgba(var(--ink),.20); --txt:#f4f7f6; --txt2:#cdd6d8; --muted:#8b979b; --accent:#5fd39a; --su:#4fb8e8; /* baraj suyu */ --gunes:#ffcf87; /* gunes isigi */ } body{ background: radial-gradient(1150px 720px at 6% -6%, rgba(var(--accentRgb),.22), transparent 60%), radial-gradient(980px 660px at 97% 10%, rgba(79,184,232,.20), transparent 58%), radial-gradient(860px 620px at 46% 40%, rgba(255,207,135,.075), transparent 62%), radial-gradient(1250px 820px at 24% 78%, rgba(79,184,232,.16), transparent 60%), radial-gradient(1000px 760px at 88% 96%, rgba(var(--accentRgb),.18), transparent 60%), var(--bg); background-attachment:fixed; } .glow{background:radial-gradient(50% 50% at 50% 50%,rgba(var(--accentRgb),.26),rgba(var(--accentRgb),0) 70%)} .glow.b{background:radial-gradient(50% 50% at 50% 50%,rgba(79,184,232,.22),rgba(79,184,232,0) 70%)} .rails{background-image:repeating-linear-gradient(90deg,rgba(var(--ink),.05) 0 1px,transparent 1px 96px)} /* bolum ayiraclari yesil ve mavi arasinda degissin */ .sec::before{background:linear-gradient(90deg,transparent,rgba(var(--accentRgb),.55),transparent)} .sec:nth-of-type(even)::before{background:linear-gradient(90deg,transparent,rgba(79,184,232,.5),transparent)} /* yuzeyler biraz daha acik ve mavi tonlu */ /* Kartlarda backdrop-filter YOK — bilerek. Bir sayfada bu seçicilere yirmiden fazla öğe uyuyor ve her biri kendi birleştirme katmanını açıp arkasını her boyamada bulandırıyordu; kaydırma bunun altında takılıyordu. Arkalarında fotoğraf değil düz bir degrade var, kartlar da %78-90 opak — 6 pikselllik bulanıklığın gözle görülür bir karşılığı yoktu. Bulanıklık yalnızca gerçekten fotoğrafın/içeriğin üstünde duran birkaç yüzeyde kaldı: yapışkan üst çubuk, çekmece, açılır liste, kapak üzerindeki bilgi kartı. */ .stat,.panel,.mix,.form,.ilListe,.haritaSar{background:var(--cam2)} .offer,.pcard,.ncard,.pitem,.quote,.speccard,.ctcard{background:var(--cam)} .pitem:hover{background:var(--camUst)} .pagenav a{background:var(--cam)} .pagenav a:hover{background:var(--camUst)} /* ---------- KAPAK: sinematik goruntu dizisi ---------- */ .hero-in{background:#08120f} .kapakFilm{position:absolute;inset:0;z-index:0;overflow:hidden} .kapakFilm .kare{position:absolute;inset:0;opacity:0;will-change:opacity} /* --odak: panelden gelen dikey odak (hero.json > gorseller[].dikeyOdak) */ .kapakFilm .kare img{width:100%;height:100%;object-fit:cover;display:block; object-position:50% var(--odak,50%);transform-origin:center;will-change:transform} .js-anim .kapakFilm .kare{animation:kareGoster 32s linear infinite} .js-anim .kapakFilm .kare img{animation:kbA 32s ease-out infinite} .js-anim .kapakFilm .kA{animation-delay:0s} .js-anim .kapakFilm .kA img{animation-delay:0s;animation-name:kbA} .js-anim .kapakFilm .kB{animation-delay:8s} .js-anim .kapakFilm .kB img{animation-delay:8s;animation-name:kbB} .js-anim .kapakFilm .kC{animation-delay:16s} .js-anim .kapakFilm .kC img{animation-delay:16s;animation-name:kbC} .js-anim .kapakFilm .kD{animation-delay:24s} .js-anim .kapakFilm .kD img{animation-delay:24s;animation-name:kbD} /* JS yoksa ilk kare gorunur kalir */ .kapakFilm .kA{opacity:1} @keyframes kareGoster{ 0%{opacity:0} 2.5%{opacity:1} 22%{opacity:1} 26.5%{opacity:0} 100%{opacity:0} } @keyframes kbA{0%{transform:scale(1.04)} 27%{transform:scale(1.17) translate(-1.6%,-1.2%)} 100%{transform:scale(1.17) translate(-1.6%,-1.2%)}} @keyframes kbB{0%{transform:scale(1.18) translate(1.8%,1%)} 27%{transform:scale(1.03)} 100%{transform:scale(1.03)}} @keyframes kbC{0%{transform:scale(1.05) translate(1.4%,-1%)} 27%{transform:scale(1.18) translate(-1%,1.2%)} 100%{transform:scale(1.18) translate(-1%,1.2%)}} @keyframes kbD{0%{transform:scale(1.16) translate(-1.5%,1.2%)} 27%{transform:scale(1.04) translate(.8%,-.6%)} 100%{transform:scale(1.04) translate(.8%,-.6%)}} /* gunes parlamasi: yavasca gecen sicak isik */ .kapakFilm .tanecik{position:absolute;inset:-20%;pointer-events:none; background:radial-gradient(28% 40% at 20% 30%, rgba(255,207,135,.22), transparent 62%), radial-gradient(24% 34% at 78% 62%, rgba(79,184,232,.16), transparent 62%); animation:isikGez 26s ease-in-out infinite alternate} @keyframes isikGez{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,2%,0)}} /* KAPAK ORTUSU ------------------------------------------------------------------ Isi: fotografin uzerindeki beyaz yazilari okunur tutmak ve kapagi sayfanin zeminine baglamak. Isi fotografi karartmak DEGIL. Onceden ortada %86 opakliginda bir radial vinyet vardi. Alttaki dogrusal gradyanla birleince fotografin tam ortasi ~%88 siyah oluyordu: santral neredeyse gorunmuyordu. Yaziyi okunur kilan sey buydu, ama bedeli fotografin kendisiydi. Simdi ortu, her metin bandinin GERCEKTEN ihtiyaci kadar. Deger olcumle secildi: dort kapak karesinin de o banttaki en parlak %2'lik dilimi alinip WCAG kontrast orani hesaplandi (asagidaki yuzdeler kapak yuksekliginin yuzdesi): %0-9 ust cubuk, 12-14px -> 0.70 -> 5.2:1 %41-45 rozet, 11px -> 0.35 -> 5.3:1 (kendi zemini var) %48-67 baslik, 74px -> 0.44 -> 3.9:1 (buyuk metin: 3:1) %70-77 metin, 17px -> 0.55 -> 4.8:1 %91-97 kaydirma ipucu -> 0.86 -> 5.6:1 Radial gitti, tek bir dikey gradyan kaldi: yazi yatayda ortali ve genise yayiliyor, vinyet dogru arac degildi. Ustteki ve alttaki koyulugu KORUYUN. Ust, cubuktaki yazilar icin; alt, kapagin bir sonraki bolume dikissiz baglanmasi icin. Ortayi koyulastirmaya gerek yok: yazilarin kendi golgesi var (asagida). */ .hero-in:after{ background:linear-gradient(180deg, rgba(5,12,10,.70) 0%, rgba(5,12,10,.38) 14%, rgba(5,12,10,.30) 28%, rgba(5,12,10,.34) 42%, rgba(5,12,10,.44) 58%, rgba(5,12,10,.60) 80%, rgba(9,15,17,.84) 92%, rgba(10,17,20,.95) 100%); z-index:1} /* Yazinin golgesi, ortuyu hafifletmenin karsiligi: yalnizca harflerin ARKASINI koyulastiriyor, butun fotografi degil. Kontrast hesabinda sayilmiyor (WCAG golgeyi kredilendirmiyor), yukaridaki oranlar golgesiz de gecerli — golge gercek okunabilirlige ek. */ .hero h1,.hero p{text-shadow:0 1px 2px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.5)} /* Rozet en zor eleman: 11px, harf araligi genis, kendi zemini neredeyse saydamdi (%3,5). Butun fotografi onun icin karartmak yerine kendi zeminini aliyor. */ .hero .badge{background:rgba(5,12,10,.52);border-color:rgba(255,255,255,.22); text-shadow:0 1px 2px rgba(0,0,0,.5)} .hero .scrollcue{text-shadow:0 1px 3px rgba(0,0,0,.6)} /* Ust cubuktaki dil baglantisi (ENG) --muted rengindeydi (#84868f). Parlak bir kapak fotografinin ustunde 2,1:1 kaliyordu — okunmuyordu. Bu ortuden bagimsiz, eskiden beri var olan bir kusurdu. Acik temada zaten beyaza cevriliyordu (bkz. "Kapakli sayfada ust cubuk"), karanlik temada atlanmisti. */ body.kapakli header:not(.stuck) .nav .lang{color:rgba(255,255,255,.82)} body.kapakli header:not(.stuck) .nav .lang:hover{color:#fff} /* ---------- LOGO: kendi etrafinda parlayarak donsun ---------- */ .nav .logo{padding:7px 9px} .nav .logo img{transition:filter .3s} .nav .logo::after{display:none} .nav .logo:hover img,.nav .logo:focus-visible img{ animation:logoDon 1.15s cubic-bezier(.55,.05,.25,1); filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(var(--accentRgb),1)) drop-shadow(0 0 26px rgba(var(--accentRgb),.75))} @keyframes logoDon{ 0% {transform:rotate(0deg) scale(1); filter:brightness(0) invert(1) drop-shadow(0 0 0 rgba(var(--accentRgb),0))} 35% {transform:rotate(160deg) scale(1.14); filter:brightness(0) invert(1) drop-shadow(0 0 16px rgba(var(--accentRgb),1)) drop-shadow(0 0 34px rgba(255,207,135,.7))} 70% {transform:rotate(300deg) scale(1.08); filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(79,184,232,.95))} 100%{transform:rotate(360deg) scale(1); filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(var(--accentRgb),.95))} } .nav .logo:hover{background:rgba(var(--accentRgb),.13);box-shadow:0 0 24px -6px rgba(var(--accentRgb),.55)} /* ---------- HIZMET KARTLARI: ikon yerine kurum logosu ---------- */ .offer .ico{width:46px;height:46px;border-radius:12px;padding:8px; background:rgba(var(--accentRgb),.10);border-color:rgba(var(--accentRgb),.35)} .offer .ico img{width:100%;height:100%;object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(var(--accentRgb),.65));transition:transform .5s} .offer:hover .ico img{transform:rotate(360deg)} .offer.hi .ico{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.18)} .offer.hi .ico img{filter:brightness(0) drop-shadow(0 0 6px rgba(18,122,77,.35))} /* ---------- HARITA: cerceve yok, tam genislik ---------- */ .haritaKutu{display:block} .haritaSar{padding:14px 18px 8px} #pinKat{--po:1} .pin{width:calc(34px * var(--po));height:calc(30px * var(--po))} /* Pin kendi birlestirme katmaninda tutuluyor. Ikonlarin icinde surekli calisan animasyonlar var (donen rotor, akan su, nabiz gibi gunes). Katmanlanmadiginda her kare haritanin altindaki buyuk alani gecersiz kiliyor ve sayfa 29 kare/saniyeye dusuyordu; katmanla 63-78 arasina cikiyor. Golge de TEK: uc asamali bir drop-shadow, icindeki her animasyon karesinde yeniden hesaplaniyor ve tek basina yarim maliyet demek. */ /* contain:paint DENENDI, KULLANILMIYOR: sayim rozeti pinin kutusunun disina tasiyor (top:-6px), contain onu kirpiyor. Ustelik olcumde daha hizli da degil. */ .pin{will-change:transform} .pin .kutu{position:static;background:none;border:0;box-shadow:none;display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))} .pin .hal{display:none} .pin svg{width:100%;height:100%;overflow:visible} .pin.cok{width:max-content} .pin .ikonSira{display:flex;align-items:flex-end;justify-content:center; gap:calc(5px * var(--po));height:100%} .pin .ikonBir{position:relative;width:calc(28px * var(--po));height:calc(28px * var(--po))} .pin .rozet{position:absolute;top:calc(-6px * var(--po));right:calc(-8px * var(--po)); min-width:calc(16px * var(--po));height:calc(16px * var(--po)); border-radius:calc(8px * var(--po));background:var(--accentParlak);color:var(--accentUstu); font-size:calc(10px * var(--po));line-height:calc(16px * var(--po)); text-align:center;font-weight:700;padding:0 calc(4px * var(--po)); box-shadow:0 2px 7px rgba(0,0,0,.7)} .pin .kutu{transition:transform .25s,filter .25s} .pin.vurgu .kutu{transform:scale(1.22); filter:drop-shadow(0 0 18px rgba(150,255,205,1)) drop-shadow(0 1px 3px rgba(0,0,0,.9))} .haritaBilgi{white-space:normal} /* ---------- ic sayfa: yan menuden gelince icerige insin ---------- */ #icerik{scroll-margin-top:96px} @media(prefers-reduced-motion:reduce){ .kapakFilm .kare,.kapakFilm .kare img,.kapakFilm .tanecik{animation:none} .kapakFilm .kA{opacity:1} .nav .logo:hover img{animation:none} .offer:hover .ico img{transform:none} } /* ================================================================= v5 — Iletisim duzeni, acilir liste okunurlugu, yumusak sayfa gecisi ================================================================= */ /* Tarayicinin yerlesik menu/kaydirma renkleri koyu temaya gecsin. Bu olmadan