/* fonts.css */ /* Anatolia yerel yazı tipleri: sitede kullanılan karaktere indirgenmiş alt küme. */ @font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-tight-400-normal.woff2') format('woff2');} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-tight-500-normal.woff2') format('woff2');} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-tight-600-normal.woff2') format('woff2');} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-tight-700-normal.woff2') format('woff2');} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-tight-800-normal.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400-normal.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-500-normal.woff2') format('woff2');} /* variables.css */ /* Anatolia: yüksek kontrast, Türkiye odağı, 16px kart yarıçapı. */ :root{--p:#FF4E00;--p-dark:#CC3E00;--ink:#1A1A1A;--ink-2:#2E2E2E;--cream:#F7F5F2;--white:#fff;--body:#333;--muted:#595959;--line:#E0DDD8;--light:#F5F5F5;--accent:#FFB800;--cyan:#9DECF4;--violet:#BFA3FF;--r:16px;--wrap:1180px;--ease:cubic-bezier(.22,1,.36,1);--head:Manrope,Arial,sans-serif;--body-font:Inter,Arial,sans-serif;--mono:"JetBrains Mono",monospace} /* reset.css */ /* Anatolia reset: tahmin edilebilir kutu modeli ve medya ölçekleme. */ *,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,p,figure{margin:0}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}summary{cursor:pointer} /* base.css */ /* Anatolia temel: açık zeminlerde koyu, koyu zeminlerde açık metin zorunluluğu. */ body{font-family:var(--body-font);font-size:16px;line-height:1.65;color:var(--body);background:var(--cream)}h1,h2,h3{font-family:var(--head);line-height:1.08;letter-spacing:-.035em}h1{font-size:clamp(2.65rem,6vw,5.6rem)}h2{font-size:clamp(2rem,4vw,3.4rem)}h3{font-size:clamp(1.12rem,2vw,1.45rem)}p{max-width:70ch}.container{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;z-index:100;left:16px;top:-70px;padding:10px 14px;border-radius:8px;background:var(--white);color:var(--ink);font-weight:800}.skip-link:focus{top:16px}:focus-visible{outline:3px solid var(--p);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--p);font:700 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.eyebrow span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--p);color:var(--white);font-size:.65rem}.eyebrow--light{color:var(--light)}.eyebrow--light span{background:var(--p);color:var(--white)}.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1;transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}.button:hover{transform:translateY(-2px)}.button:active{transform:scale(.97)}.button svg,.text-link svg{width:16px;height:16px}.button--primary{background:var(--p);color:var(--white)}.button--primary:hover{background:var(--p-dark)}.button--outline-light{border-color:#ffffff80;color:var(--light)}.button--outline-light:hover{border-color:var(--cyan);background:#ffffff12}.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--p);font-weight:800}.text-link:hover{text-decoration:underline} /* layout.css */ /* Anatolia yerleşim: ritmik bölüm boşlukları ve asimetrik iki sütunlu içerik. */ .section{position:relative;padding:88px 0;background:var(--cream);color:var(--body)}.section--white{background:var(--white)}.section--dark{overflow:hidden;background:var(--ink);color:var(--light)}.section--dark h2,.section--dark h3{color:var(--light)}.section--dark p{color:#e9e9e9}.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:start}.split--content{gap:84px}.split--faq{align-items:start}.prose>*+*{margin-top:19px}.prose h2{margin-top:46px;color:var(--ink)}.prose h2:first-child{margin-top:0}.prose p{color:var(--muted)}.service-aside{position:sticky;top:100px}.service-aside ul{display:grid;gap:9px;padding:0;list-style:none}.service-aside li{padding:10px 0;border-bottom:1px solid var(--line);font-weight:700}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}.benefit-grid article{padding:19px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}.benefit-grid span{font:700 .72rem var(--mono);color:var(--p)}.benefit-grid h3{margin:12px 0 5px;color:var(--ink)}.benefit-grid p{font-size:.9rem}.cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{color:var(--light)}.section--cta{padding:75px 0}.collection__head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.collection__head>p{color:var(--muted);max-width:390px}.contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:start}.contact-info address{display:grid;gap:12px;margin-top:24px;font-style:normal}.contact-info address strong{font-size:1.2rem}.contact-info address a{width:max-content;color:var(--body);font-weight:700}.contact-info address a:hover{color:var(--p)}.coverage-card{margin-top:30px;padding:22px;border-radius:var(--r);background:var(--ink);color:var(--light)}.coverage-card span{color:var(--accent);font:800 1.7rem var(--head)}.coverage-card p{margin-top:8px;color:#e9e9e9}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* header.css */ /* Anatolia başlık: sticky, görünür kontrast ve CSS-only detay/özet menüsü. */ .site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid #ffffff1f;background:#1a1a1af2;backdrop-filter:blur(12px);color:var(--light)}.header__inner{display:flex;min-height:76px;align-items:center;gap:26px}.brand{display:inline-flex;flex:0 0 auto;min-width:145px;min-height:44px;align-items:center}.brand img{width:150px;height:auto}.nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:1}.nav>a,.mega>summary{display:inline-flex;min-height:44px;align-items:center;padding:0 10px;color:#e4e4e4;font-size:.89rem;font-weight:700;list-style:none}.nav>a:hover,.mega>summary:hover{color:var(--white)}.mega>summary::-webkit-details-marker{display:none}.mega{position:relative}.mega>summary::after{content:"⌄";margin-left:6px;color:var(--accent)}.mega__panel{position:fixed;z-index:40;top:76px;left:50%;display:grid;width:min(1120px,calc(100vw - 40px));grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;max-height:calc(100vh - 96px);overflow:auto;padding:23px;transform:translateX(-50%);border:1px solid #ffffff25;border-radius:0 0 var(--r) var(--r);background:#202020;box-shadow:0 22px 55px #0007}.mega__group{display:grid;align-content:start}.mega__group p{margin:0 0 8px;color:var(--accent);font:700 .72rem/1.35 var(--mono);letter-spacing:.04em}.mega__group a{display:flex;min-height:44px;align-items:center;padding:7px 9px;border-radius:8px;color:#e8e8e8;font-size:.82rem;font-weight:600}.mega__group a:hover{background:#ffffff12;color:var(--white)}.header__cta{flex:0 0 auto}.mobile-nav{display:none}.mobile-nav summary{list-style:none}.mobile-nav summary::-webkit-details-marker{display:none} /* footer.css */ /* Anatolia footer: dört kolon, Türkiye geneli iletişim bilgisi, 44px bağlantılar. */ .site-footer{padding-top:64px;background:var(--ink);color:var(--light)}.footer__grid{display:grid;grid-template-columns:1.35fr .85fr .85fr .95fr;gap:40px}.footer__brand img{width:168px;height:auto}.site-footer p{margin-top:16px;color:#dedede;font-size:.92rem}.site-footer h2{margin:3px 0 13px;color:var(--accent);font:700 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.site-footer nav,.site-footer address{display:grid;gap:3px;font-style:normal}.site-footer nav a,.site-footer address a,.site-footer address span{display:flex;min-height:44px;align-items:center;color:#ededed;font-size:.9rem}.site-footer nav a:hover,.site-footer address a:hover{color:var(--accent)}.site-footer address strong{padding:0 0 10px;color:var(--white);font-size:1rem}.social-nav{display:flex!important;gap:8px;margin-top:15px}.social-nav a{display:grid!important;width:44px;min-height:44px;place-items:center;border:1px solid #ffffff33;border-radius:50%;color:var(--light)!important}.social-nav a:hover{border-color:var(--accent);color:var(--accent)!important}.social-nav svg{width:18px;height:18px}.footer__bottom{display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding:20px 0;border-top:1px solid #ffffff1e;color:#bfbfbf;font-size:.78rem}.footer__bottom nav{display:flex;gap:12px}.footer__bottom a{color:inherit}.footer__bottom a:hover{color:var(--accent)} /* hero.css */ /* Anatolia hero: koyu zeminde dairesel dekor, açık metin ve sabit görsel alanlar. */ .hero{position:relative;overflow:hidden;background:var(--ink);color:var(--light)}.hero__inner{position:relative;z-index:1;display:flex;min-height:430px;align-items:center;padding:90px 0}.hero--page h1{max-width:900px}.hero__lead{max-width:680px;margin-top:21px;color:#e4e4e4;font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.7}.hero .button{margin-top:28px}.breadcrumbs{display:flex;gap:9px;margin-bottom:27px;color:#d0d0d0;font-size:.84rem}.breadcrumbs a:hover{color:var(--accent);text-decoration:underline}.rings{position:absolute;inset:0;overflow:hidden;pointer-events:none}.rings>i,.rings>b,.rings>em{position:absolute;display:block;border:1px solid #ff4e0052;border-radius:50%;will-change:transform}.rings>i{width:430px;height:430px;top:-160px;right:7%;animation:orbit-a 14s linear infinite}.rings>b{width:280px;height:280px;bottom:-150px;left:9%;border-color:#ffb8003d;animation:orbit-b 11s linear infinite}.rings>em{width:160px;height:160px;top:38%;right:30%;border-color:#fff2;animation:pulse 5s ease-in-out infinite} /* cards.css */ /* Anatolia kartları: 16px yarıçap, sabit görsel oranları, sadece transform hover. */ .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.related-card{position:relative;display:flex;min-height:205px;flex-direction:column;padding:22px;border:1px solid #ffffff28;border-radius:var(--r);background:#ffffff0a;color:var(--light);transition:transform .22s var(--ease),background .22s var(--ease)}.related-card:hover{transform:translateY(-4px);background:#ffffff15}.related-card span,.market-card__meta{color:var(--accent);font:700 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.related-card h3{margin:15px 0 10px}.related-card p{color:#dedede;font-size:.88rem}.related-card svg{width:17px;height:17px;margin-top:auto;color:var(--accent)}.project-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}.project-card img{width:100%;aspect-ratio:16/10;padding:34px;object-fit:contain;transition:transform .25s var(--ease)}.project-card:hover img{transform:scale(1.04)}.project-card figcaption{padding:19px}.project-card figcaption span{color:var(--p);font:700 .68rem var(--mono);letter-spacing:.05em;text-transform:uppercase}.project-card figcaption h2{margin:8px 0;color:var(--ink);font-size:1.3rem}.project-card figcaption p{color:var(--muted);font-size:.88rem} /* animations.css */ /* Anatolia animasyonları: yalnızca transform ve opacity; reduced motion ile kapatılır. */ @keyframes orbit-a{to{transform:rotate(360deg)}}@keyframes orbit-b{to{transform:rotate(-360deg)}}@keyframes pulse{50%{transform:scale(1.1);opacity:.45}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* faq.css */ /* Anatolia FAQ: details/summary ile JavaScript’siz, açık ve okunur cevaplar. */ .section--faq{background:var(--white)}.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:18px;padding:10px 0;color:var(--ink);font:700 1.06rem/1.3 var(--head);letter-spacing:-.02em;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--p);font-family:var(--body-font);font-size:1.55rem;font-weight:400}.faq details[open] summary::after{content:"−"}.faq details p{padding:0 40px 22px 0;color:var(--muted)} /* forms.css */ /* Anatolia form: erişilebilir etiketler, belirgin focus, sabit alan ritmi. */ .contact-form{display:grid;gap:8px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:0 10px 30px #1a1a1a0c}.contact-form .eyebrow{margin-bottom:10px}.contact-form label{margin-top:10px;color:var(--muted);font-size:.84rem;font-weight:700}.contact-form input,.contact-form textarea{width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--body)}.contact-form textarea{resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--p);outline:3px solid #ff4e0029}.contact-form .check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.84rem;font-weight:400;line-height:1.5}.contact-form .check input{width:18px;min-height:18px;margin-top:3px}.contact-form .check a{color:var(--p);text-decoration:underline}.contact-form button{margin-top:12px;justify-self:start} /* schema-pages.css */ /* Anatolia içerik sayfaları: yapısal bileşenlerin kontrast ve boşluk tamamlayıcısı. */ .service-aside h2{font-size:1.2rem}.contact-info{min-width:0}.contact-info .eyebrow{margin-bottom:0} /* responsive.css */ /* Anatolia responsive: masaüstü, tablet ve mobil için tek kaynaklı kırılımlar. */ @media (max-width:1024px){.header__inner{gap:15px}.nav{display:none}.header__cta{margin-left:auto}.mobile-nav{display:block;order:4}.mobile-nav>summary{display:grid;width:44px;height:44px;place-content:center;gap:4px;border:1px solid #ffffff45;border-radius:8px}.mobile-nav>summary span{display:block;width:18px;height:2px;background:var(--white)}.mobile-nav__panel{position:absolute;top:76px;right:20px;display:grid;width:min(380px,calc(100vw - 40px));max-height:calc(100vh - 94px);overflow:auto;padding:14px;border:1px solid #ffffff2b;border-radius:var(--r);background:var(--ink-2);box-shadow:0 22px 55px #0007}.mobile-nav__panel>a,.mobile-nav__panel summary{display:flex;min-height:44px;align-items:center;color:var(--light);font-weight:700;list-style:none}.mobile-nav__panel summary::-webkit-details-marker{display:none}.mobile-nav__services{display:grid;gap:5px;padding:5px 0 9px}.mobile-nav__group{display:grid;border-top:1px solid #ffffff1e}.mobile-nav__group p{margin:11px 0 2px;color:var(--accent);font:700 .67rem var(--mono);letter-spacing:.05em;text-transform:uppercase}.mobile-nav__services a{display:flex;min-height:40px;align-items:center;padding-left:13px;color:#e7e7e7;font-size:.9rem}.split,.contact-grid{grid-template-columns:1fr;gap:40px}.service-aside{position:static}.benefit-grid,.related-grid{grid-template-columns:repeat(3,1fr)}.footer__grid{grid-template-columns:1.2fr 1fr}.project-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.container{width:min(100% - 28px,var(--wrap))}.site-header{position:relative}.header__inner{min-height:68px}.brand img{width:132px}.header__cta{display:none}.mobile-nav__panel{top:68px;right:14px}.section{padding:65px 0}.hero__inner{min-height:390px;padding:65px 0}.hero__lead{font-size:1rem}.collection__head,.cta,.footer__bottom{display:block}.collection__head>p{margin-top:14px}.benefit-grid,.related-grid,.project-grid{grid-template-columns:1fr}.cta .button{margin-top:22px}.footer__grid{grid-template-columns:1fr;gap:28px}.footer__bottom span+span,.footer__bottom nav{margin-top:9px}.footer__bottom nav{gap:14px}.footer__bottom nav a{min-height:44px;align-items:center;display:flex}.faq summary{min-height:60px}.faq details p{padding-right:0}} /* home.css */ /* Anatolia home: koyu modern koleksiyon görünümü, mor-camgöbeği vurgu yalnızca ikincil atmosferdir. */ .home{background:#0d0f15}.home .site-header{background:#0d0f15ee}.hero--home{background:#0d0f15}.home-hero{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;min-height:500px;padding:92px 0 55px}.home-hero h1{font-size:clamp(3.2rem,6.2vw,6.3rem);color:#f8f9fb;letter-spacing:-.075em}.home-hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.home-hero .hero__lead{color:#cbd0da}.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}.hero-panel{display:flex;min-height:315px;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid #ffffff21;border-radius:var(--r);background:linear-gradient(135deg,#bfa3ff29,#9decf417 56%,#ffffff08);box-shadow:0 24px 55px #0004}.hero-panel>div{display:flex;align-items:start;justify-content:space-between;color:#e4e4e4;font:700 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase}.hero-panel strong{font:800 clamp(5rem,10vw,8rem)/.7 var(--head);letter-spacing:-.09em}.hero-panel p{max-width:315px;color:#e4e4e4}.tag-nav{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;padding:23px 0 33px;border-top:1px solid #ffffff25}.tag-nav a{display:flex;min-height:44px;align-items:center;padding:0 14px;border:1px solid #ffffff31;border-radius:999px;color:#e4e4e4;font-size:.83rem;font-weight:700}.tag-nav a:hover,.tag-nav a[aria-current="page"]{border-color:transparent;background:linear-gradient(95deg,var(--violet),var(--cyan));color:#12141a}.home-collection{background:#0d0f15;color:#f7f8fa}.home-collection h2{color:#f7f8fa}.home-collection .collection__head>p{color:#cbd0da}.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.market-card{overflow:hidden;border:1px solid #ffffff1f;border-radius:var(--r);background:linear-gradient(145deg,#ffffff12,#ffffff08);transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}.market-card:hover{transform:translateY(-5px);border-color:#9decf48f;box-shadow:0 20px 45px #0006}.market-card__visual{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid #ffffff1b;background:#202636}.market-card__visual::before,.market-card__visual::after{content:"";position:absolute;border-radius:50%}.market-card__visual::before{width:75%;height:110%;top:-45%;right:-20%;background:radial-gradient(circle,#9decf4,transparent 65%);opacity:.78}.market-card__visual::after{width:80%;height:105%;bottom:-48%;left:-30%;background:radial-gradient(circle,#bfa3ff,transparent 65%);opacity:.67}.market-card__visual--1::before{background:radial-gradient(circle,#ffb800,transparent 65%)}.market-card__visual--1::after{background:radial-gradient(circle,#ff4e00,transparent 65%)}.market-card__visual--2::before{background:radial-gradient(circle,#bfa3ff,transparent 65%)}.market-card__visual--2::after{background:radial-gradient(circle,#9decf4,transparent 65%)}.market-card__visual span{position:absolute;z-index:1;top:18px;left:18px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #fff8;border-radius:10px;background:#0d0f1566;color:var(--white);font:700 .75rem var(--mono)}.market-card__visual i{position:absolute;z-index:1;inset:18px;border:1px solid #fff6;border-radius:11px}.market-card__visual b{position:absolute;z-index:1;bottom:20px;right:18px;width:84px;height:13px;border-radius:20px;background:#ffffff8f}.market-card__body{display:flex;min-height:245px;flex-direction:column;padding:21px}.market-card__meta{display:flex;justify-content:space-between;gap:8px;color:#aeb7c7;font-size:.64rem}.market-card__meta strong{color:var(--accent);font:inherit}.market-card h3{margin:15px 0 9px;color:#fff;font-size:1.35rem}.market-card p{color:#cad0dc;font-size:.89rem}.market-card__actions{display:grid;grid-template-columns:1fr 1.05fr;gap:8px;margin-top:auto;padding-top:22px}.market-card__actions a{display:flex;min-height:44px;align-items:center;justify-content:center;border:1px solid #ffffff32;border-radius:9px;color:#f7f8fa;font-size:.82rem;font-weight:800}.market-card__actions a:hover{border-color:var(--cyan);background:#9decf412}.market-card__actions .market-card__primary{border:0;background:linear-gradient(95deg,var(--violet),var(--cyan));color:#13151d}.proof{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:center}.proof>div>p:not(.eyebrow){margin-top:18px;color:#e7e7e7}.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.proof-grid article{padding:19px;border:1px solid #ffffff25;border-radius:var(--r);background:#ffffff0a}.proof-grid strong{display:block;color:var(--accent);font:800 1.6rem var(--head)}.proof-grid span{display:block;margin-top:4px;color:#f1f1f1;font-size:.89rem}@media(max-width:1024px){.home-hero,.proof{grid-template-columns:1fr;gap:35px}.hero-panel{min-height:220px}.market-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.home-hero{min-height:0;padding:62px 0 45px}.hero-panel{min-height:195px;padding:21px}.market-grid,.proof-grid{grid-template-columns:1fr}.tag-nav{padding-bottom:24px}.market-card__body{min-height:225px}} /* reference-theme.css */ /* Anatolia referans katmanı: ölçülen açık yüzeyler, Inter Tight, 20px yüzeyler ve pill CTA; içerik/URL değiştirilmez. */ :root{--p:#FF4E00;--p-dark:#C83E00;--ink:#1A1A1C;--ink-2:#13171E;--cream:#FCFCFD;--white:#FFF;--body:#1A1A1C;--muted:#5F6670;--line:#DFE4EB;--light:#FCFCFC;--accent:#FF4E00;--cyan:#83E7EE;--violet:#A585FF;--r:20px;--wrap:1280px;--ease:cubic-bezier(.22,1,.36,1);--head:"Inter Tight",Arial,sans-serif;--body-font:"Inter Tight",Arial,sans-serif;--mono:"JetBrains Mono",monospace}html{background:var(--cream)}body{background:var(--cream);color:var(--body);font-family:var(--body-font);line-height:1.5}.container{width:min(var(--wrap),calc(100% - 48px))}h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:-.04em}h1{font-size:clamp(3rem,5.3vw,68px);line-height:1.1}h2{font-size:clamp(2rem,3.5vw,48px);line-height:1.12}h3{font-weight:600}.eyebrow{font-family:var(--body-font);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--p)}.eyebrow span{width:24px;height:24px;background:var(--p);font-family:var(--mono)}.button{min-height:54px;padding:0 32px;border-radius:9999px;font-size:16px;font-weight:500}.button--primary{background:#1A1A1C;box-shadow:0 1px 2px rgba(16,24,40,.05)}.button--primary:hover{background:var(--p-dark);box-shadow:0 12px 28px rgba(255,78,0,.2)}.button--outline-light{border-color:#1A1A1C;color:#1A1A1C;background:#FFF}.button--outline-light:hover{border-color:var(--p);color:var(--p);background:#FFF}.site-header{border-bottom:1px solid rgba(223,228,235,.85);background:rgba(252,252,253,.92);color:var(--ink);backdrop-filter:blur(16px)}.header__inner{min-height:82px;gap:28px}.brand img{width:156px}.nav>a,.mega>summary{min-height:54px;color:#535862;font-size:.9rem;font-weight:500}.nav>a:hover,.mega>summary:hover{color:var(--ink)}.mega>summary::after{color:var(--p)}.mega__panel{top:82px;width:min(1290px,calc(100vw - 48px));gap:22px;padding:24px;border-color:var(--line);border-radius:20px;background:#FFF;box-shadow:0 24px 48px rgba(16,24,40,.12)}.mega__group p{color:var(--p);font-family:var(--body-font);font-size:.72rem;font-weight:700;letter-spacing:.02em}.mega__group a{min-height:42px;color:#475467;font-size:.85rem;font-weight:500}.mega__group a:hover{background:#F4F5F8;color:var(--ink)}.hero{background:#F4F5F8;color:var(--ink)}.hero__inner{min-height:520px;justify-content:center;padding:120px 0 100px;text-align:center}.hero--page h1{max-width:1000px;margin-inline:auto}.hero__lead{max-width:700px;margin:22px auto 0;color:#5F6670;font-size:18px;line-height:1.55}.hero .button{margin-top:30px}.breadcrumbs{justify-content:center;margin-bottom:23px;color:#667085}.breadcrumbs a:hover{color:var(--p)}.rings{opacity:.72}.rings>i,.rings>b,.rings>em{border-color:#A585FF55}.rings>b{border-color:#FF4E004D}.rings>em{border-color:#83E7EE9C}.section{padding:100px 0;background:#FCFCFD}.section--white{background:#FFF}.section--dark{background:#13171E}.section--dark h2,.section--dark h3{color:#FCFCFC}.section--dark p{color:#D0D5DD}.split{gap:88px}.split--content{gap:96px}.prose>*+*{margin-top:22px}.prose h2{margin-top:54px;color:var(--ink)}.prose p{color:#5F6670;line-height:1.7}.service-aside{top:114px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#F9FAFB}.service-aside li{padding:12px 0;border-color:var(--line);font-weight:500}.benefit-grid{gap:20px;margin-top:42px}.benefit-grid article{padding:28px;border-color:var(--line);border-radius:20px;background:#F9FAFB;transition:transform .24s var(--ease),box-shadow .24s var(--ease)}.benefit-grid article:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(16,24,40,.08)}.benefit-grid span{color:var(--p)}.cta{padding:52px;border:1px solid #ffffff1c;border-radius:20px;background:linear-gradient(135deg,#13171E 0%,#181D26 68%,#33251f 100%)}.section--cta{padding:100px 0;background:#FCFCFD}.collection__head{margin-bottom:42px}.contact-grid{gap:72px}.coverage-card{padding:28px;border-radius:20px;background:#13171E;box-shadow:0 18px 38px rgba(16,24,40,.13)}.coverage-card span{color:#FFB9A2}.project-grid{gap:24px}.project-card{border-color:var(--line);border-radius:20px;background:#F9FAFB;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .24s var(--ease),box-shadow .24s var(--ease)}.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(16,24,40,.11)}.project-card img{padding:38px;background:#FFF}.project-card figcaption{padding:24px}.contact-form{gap:10px;padding:32px;border-color:var(--line);border-radius:20px;background:#FFF;box-shadow:0 18px 40px rgba(16,24,40,.07)}.contact-form input,.contact-form textarea{min-height:52px;padding:14px 16px;border-color:#DFE4EB;border-radius:12px;background:#FCFCFD}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--p);outline:3px solid rgba(255,78,0,.16)}.section--faq{background:#F9FAFB}.faq{border-color:var(--line)}.faq details{border-color:var(--line)}.faq summary{min-height:74px;font-weight:600}.faq summary::after{color:var(--p)}.site-footer{padding-top:96px;background:#13171E}.footer__grid{gap:48px}.footer__brand img{width:174px}.site-footer h2{color:#FFB9A2}.site-footer nav a:hover,.site-footer address a:hover{color:#FFB9A2}.social-nav a:hover{border-color:#FFB9A2;color:#FFB9A2!important}.home{background:#FCFCFD}.home .site-header{background:rgba(252,252,253,.92)}.hero--home{background:#F4F5F8}.home-hero{grid-template-columns:1fr;gap:24px;min-height:858px;justify-items:center;padding:200px 0 100px;text-align:center}.home-hero h1{max-width:1000px;color:#1A1A1C;font-size:68px;line-height:74.8px;letter-spacing:-.045em}.home-hero h1 em{background:linear-gradient(135deg,#FF4E00 0%,#FFB9A2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.home-hero .hero__lead{max-width:690px;color:#5F6670}.button-row{justify-content:center;margin-top:30px}.hero-panel{display:none}.tag-nav{justify-content:center;padding:0 0 64px;border:0;background:#F4F5F8}.tag-nav a{min-height:44px;border-color:#DFE4EB;background:#FFF;color:#475467;font-weight:500}.tag-nav a:hover,.tag-nav a[aria-current="page"]{border-color:#1A1A1C;background:#1A1A1C;color:#FFF}.home-collection{padding:100px 0;background:#FCFCFD;color:var(--ink)}.home-collection h2{color:var(--ink)}.home-collection .collection__head>p{color:#5F6670}.market-grid{gap:24px}.market-card{border-color:#DFE4EB;border-radius:20px;background:#F9FAFB;box-shadow:0 1px 2px rgba(16,24,40,.04)}.market-card:hover{border-color:#FFB9A2;box-shadow:0 22px 42px rgba(16,24,40,.12)}.market-card__visual{background:linear-gradient(135deg,#FFF 0%,#F4F5F8 100%);border-bottom-color:#DFE4EB}.market-card__visual::before{background:radial-gradient(circle,#83E7EE 0%,transparent 65%);opacity:.46}.market-card__visual::after{background:radial-gradient(circle,#FFB9A2 0%,transparent 65%);opacity:.58}.market-card__visual--1::before{background:radial-gradient(circle,#F9EB57 0%,transparent 65%)}.market-card__visual--1::after{background:radial-gradient(circle,#FF4E00 0%,transparent 65%)}.market-card__visual--2::before{background:radial-gradient(circle,#A585FF 0%,transparent 65%)}.market-card__visual--2::after{background:radial-gradient(circle,#83E7EE 0%,transparent 65%)}.market-card__visual span{border-color:#1A1A1C22;border-radius:10px;background:#FFFFFFB3;color:#1A1A1C}.market-card__visual i{border-color:#1A1A1C30}.market-card__visual b{background:#1A1A1C80}.market-card__body{min-height:238px;padding:24px}.market-card__meta{color:#667085;font-family:var(--body-font);font-size:.68rem;letter-spacing:.02em}.market-card__meta strong{color:var(--p)}.market-card h3{color:#1A1A1C;font-size:1.5rem;font-weight:600}.market-card p{color:#5F6670}.market-card__actions{gap:10px;padding-top:24px}.market-card__actions a{min-height:46px;border-color:#D0D5DD;border-radius:9999px;color:#344054;font-weight:500}.market-card__actions a:hover{border-color:#1A1A1C;background:#FFF}.market-card__actions .market-card__primary{background:#1A1A1C;color:#FFF}.market-card__actions .market-card__primary:hover{background:var(--p-dark);border-color:var(--p-dark)}.proof{gap:70px}.proof>div>p:not(.eyebrow){color:#D0D5DD}.proof-grid{gap:20px}.proof-grid article{padding:28px;border-color:#ffffff22;border-radius:20px;background:#ffffff08}.proof-grid strong{color:#FFB9A2}.proof-grid span{color:#EAECF0}@media(max-width:1024px){.container{width:min(var(--wrap),calc(100% - 40px))}.header__inner{min-height:76px}.mobile-nav>summary{border-color:#D0D5DD;background:#FFF}.mobile-nav>summary span{background:#1A1A1C}.mobile-nav__panel{top:76px;border-color:var(--line);border-radius:20px;background:#FFF;box-shadow:0 24px 48px rgba(16,24,40,.12)}.mobile-nav__panel>a,.mobile-nav__panel summary{color:#1A1A1C}.mobile-nav__group{border-color:var(--line)}.mobile-nav__group p{color:var(--p)}.mobile-nav__services a{color:#475467}.home-hero{min-height:700px;padding:160px 0 80px}.home-hero h1{font-size:clamp(3rem,7vw,60px);line-height:1.08}.section,.home-collection,.section--cta{padding:88px 0}.split,.split--content{gap:56px}.market-grid{gap:20px}}@media(max-width:640px){.container{width:calc(100% - 28px)}.site-header{position:relative}.header__inner{min-height:68px}.home-hero{min-height:0;padding:112px 0 56px}.home-hero h1{font-size:42px;line-height:46px}.home-hero .hero__lead{font-size:17px;line-height:1.5}.button{min-height:50px;padding:0 24px}.button-row{width:100%;gap:10px}.button-row .button{flex:1;padding-inline:12px}.tag-nav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 14px 38px;scroll-snap-type:x proximity}.tag-nav a{flex:0 0 auto;scroll-snap-align:start}.section,.home-collection,.section--cta{padding:64px 0}.hero__inner{min-height:420px;padding:88px 0 66px}.hero__lead{font-size:17px}.split,.split--content{gap:36px}.service-aside{padding:20px;border-radius:16px}.benefit-grid{gap:14px}.benefit-grid article,.project-card,.contact-form,.coverage-card,.cta{border-radius:16px}.project-grid,.market-grid{gap:16px}.market-card{border-radius:16px}.market-card__body{min-height:0;padding:20px}.market-card h3{font-size:1.35rem}.market-card__actions{grid-template-columns:1fr 1fr}.contact-form{padding:22px}.footer__grid{gap:32px}.site-footer{padding-top:64px}} /* reference-brand.css */ /* Anatolia marka kontrastı: canlı siteden alınan beyaz yatay wordmark, açık referans header’ında koyu yüzeyle okunur kalır. */ .site-header .brand{min-height:58px;padding:7px 10px;border-radius:12px;background:#1A1A1C;box-shadow:0 1px 2px rgba(16,24,40,.08)}.site-header .brand img{width:156px;max-width:calc(100vw - 230px)}@media(max-width:640px){.site-header .brand{min-height:50px;padding:5px 8px;border-radius:10px}.site-header .brand img{width:132px;max-width:calc(100vw - 105px)}} /* reference-motion.css */ /* Anatolia kalıcı hareket katmanı: giriş koreografisi yalnızca motion-runtime.css ile yürür. */ @keyframes ns-menu-in{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}} @keyframes ns-orbit-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes ns-orbit-reverse{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}} @keyframes ns-float{0%,100%{transform:translate3d(0,0,0);opacity:.55}50%{transform:translate3d(0,-12px,0);opacity:.9}} @media (prefers-reduced-motion:no-preference){ .market-card,.project-card,.benefit-grid article,.related-card,.proof-grid article,.button,.tag-nav a,.mega__group a,.mobile-nav__services a,.social-nav a{transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s ease} .market-card:hover,.project-card:hover,.benefit-grid article:hover,.related-card:hover{transform:translateY(-6px) scale(1.01)}.button:hover{transform:translateY(-2px) scale(1.01)}.button:active{transform:scale(.97)}.tag-nav a:hover,.mega__group a:hover,.mobile-nav__services a:hover{transform:translateX(3px)}.social-nav a:hover{transform:translateY(-3px) scale(1.04)} .mega[open] .mega__panel{animation:ns-menu-in .3s ease both}.mega[open]>summary::after{transform:rotate(180deg)}.mega>summary::after{display:inline-block;transition:transform .3s ease}.rings>i{animation:ns-orbit-slow 14s linear infinite}.rings>b{animation:ns-orbit-reverse 11s linear infinite}.rings>em{animation:ns-float 5s ease-in-out infinite}.market-card__visual::before,.market-card__visual::after{animation:ns-float 6s ease-in-out infinite}.market-card__visual::after{animation-delay:-3s}} @media (prefers-reduced-motion:reduce){.mega[open] .mega__panel,.rings i,.rings b,.rings em,.market-card__visual::before,.market-card__visual::after{animation:none!important;transition:none!important}} /* motion-runtime.css */ /* Anatolia hareket sistemi: referanstan ölçülen çok katmanlı koreografi; içerik/URL değiştirmez. */ /* Başlangıçta yönsel transform alanları viewport dışına taşsa da yatay kaydırma alanı oluşmaz. */ html,body{overflow-x:hidden;overflow-x:clip} @keyframes motion-reveal-down{from{opacity:0;transform:translate3d(0,60px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-reveal-up{from{opacity:0;transform:translate3d(0,-100px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-reveal-left{from{opacity:0;transform:translate3d(-50px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-reveal-right{from{opacity:0;transform:translate3d(50px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-word-in{from{opacity:0;transform:translate3d(0,1.05em,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-accordion-in{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes motion-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:no-preference){ html.js-motion body::before{content:"";position:fixed;z-index:999;inset:0;background:linear-gradient(140deg,#13171e 0%,#1a1a1c 64%,#5b2a1b 100%);transform:translate3d(0,-108%,0);pointer-events:none;transition:transform .42s cubic-bezier(.22,1,.36,1)} html.js-motion body::after{content:"";position:fixed;z-index:1000;top:0;left:0;width:100%;height:4px;background:#FF4E00;transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none} html.js-motion body.is-leaving::before{transform:translate3d(0,0,0)} html.js-motion body.is-leaving::after{opacity:1;animation:motion-progress .42s cubic-bezier(.22,1,.36,1) both} html.js-motion body.is-leaving{pointer-events:none} .js-motion .motion-intro,.js-motion .motion-reveal{animation:none!important} .js-motion .motion-intro,.js-motion .motion-reveal{opacity:0;will-change:transform,opacity} .js-motion .motion-intro[data-motion-direction="down"],.js-motion .motion-reveal[data-motion-direction="down"]{transform:translate3d(0,var(--motion-offset,60px),0)} .js-motion .motion-intro[data-motion-direction="up"],.js-motion .motion-reveal[data-motion-direction="up"]{transform:translate3d(0,calc(var(--motion-offset,100px) * -1),0)} .js-motion .motion-intro[data-motion-direction="left"],.js-motion .motion-reveal[data-motion-direction="left"]{transform:translate3d(calc(var(--motion-offset,50px) * -1),0,0)} .js-motion .motion-intro[data-motion-direction="right"],.js-motion .motion-reveal[data-motion-direction="right"]{transform:translate3d(var(--motion-offset,50px),0,0)} .js-motion .motion-intro.motion-visible,.js-motion .motion-reveal.motion-visible{opacity:1;transform:translate3d(0,0,0);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)} .js-motion .motion-intro.motion-visible{transition-delay:var(--motion-delay,0ms)} .js-motion .motion-reveal.motion-visible{transition-delay:var(--motion-delay,0ms)} .js-motion .motion-split{overflow:visible} .js-motion .motion-split .motion-word{display:inline-block;opacity:0;transform:translate3d(0,1.05em,0);will-change:transform,opacity} .js-motion .motion-split.motion-visible .motion-word{animation:motion-word-in .6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--word-delay,0ms)} .js-motion .motion-parallax{will-change:transform} .js-motion .motion-parallax::before{transform:translate3d(calc(var(--motion-x,0) * 16px),calc(var(--motion-y,0) * 16px),0);transition:transform .18s cubic-bezier(.22,1,.36,1)} .js-motion .motion-parallax::after{transform:translate3d(calc(var(--motion-x,0) * -14px),calc(var(--motion-y,0) * -14px),0);transition:transform .18s cubic-bezier(.22,1,.36,1)} .js-motion .motion-parallax>i{transform:translate3d(calc(var(--motion-x,0) * -8px),calc(var(--motion-y,0) * -8px),0);transition:transform .18s cubic-bezier(.22,1,.36,1)} .js-motion .motion-parallax>span{transform:translate3d(calc(var(--motion-x,0) * 6px),calc(var(--motion-y,0) * 6px),0);transition:transform .18s cubic-bezier(.22,1,.36,1)} .js-motion .motion-magnetic{animation:none!important;will-change:transform;transform:translate3d(var(--magnetic-x,0px),var(--magnetic-y,0px),0) scale(var(--magnetic-scale,1));transition:transform .16s cubic-bezier(.22,1,.36,1),opacity .18s ease} .js-motion .motion-magnetic.is-pressed{--magnetic-scale:.96} .js-motion .site-header{transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,background-color .32s ease} .js-motion body.has-scrolled .site-header{box-shadow:0 12px 30px rgba(16,24,40,.09)} .js-motion .faq details[open]>p{animation:motion-accordion-in .5s cubic-bezier(.22,1,.36,1) both} .js-motion .faq details[open] summary::after{transform:rotate(90deg);transition:transform .3s cubic-bezier(.22,1,.36,1)} .js-motion .faq summary::after{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)} .js-motion .mega[open] .mega__panel{animation:ns-menu-in .3s ease both} .js-motion .mobile-nav[open] .mobile-nav__panel{animation:motion-reveal-down .3s ease both} } @media (prefers-reduced-motion:reduce){ html.js-motion body::before,html.js-motion body::after{display:none} .js-motion .motion-intro,.js-motion .motion-reveal,.js-motion .motion-split .motion-word{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .js-motion .motion-parallax,.js-motion .motion-parallax::before,.js-motion .motion-parallax::after,.js-motion .motion-parallax>i,.js-motion .motion-parallax>span,.js-motion .motion-magnetic{transform:none!important;animation:none!important;transition:none!important} } /* service-media.css */ /* Anatolia hizmet görselleri: canlı kaynak/özgün varlıklar, oval kartlar ve görüntü odaklı hizmet hiyerarşisi. */ .mega__group p a,.mobile-nav__group p a{color:#FF4E00!important;font-weight:700;text-decoration:none}.mega__group p a:hover,.mobile-nav__group p a:hover{color:#C83E00!important;text-decoration:underline} .hero--page .hero__inner:has(.hero__service-media){display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.76fr);gap:72px;text-align:left}.hero--page .hero__inner:has(.hero__service-media) .breadcrumbs{justify-content:flex-start;margin-inline:0}.hero--page .hero__inner:has(.hero__service-media) h1,.hero--page .hero__inner:has(.hero__service-media) .hero__lead{margin-inline:0}.hero__service-media{overflow:hidden;align-self:center;border:1px solid #ffffff3b;border-radius:20px;background:#fff;box-shadow:0 26px 58px rgba(16,24,40,.14)}.hero__service-image{width:100%;aspect-ratio:16/10;object-fit:cover}.service-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.service-card{overflow:hidden;display:flex;min-height:100%;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:#FFF;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}.service-card:hover{transform:translateY(-6px);border-color:#FFB9A2;box-shadow:0 22px 42px rgba(16,24,40,.12)}.service-card figure{overflow:hidden;background:#F4F5F8}.service-media__image,.market-card__image{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .42s var(--ease)}.service-card:hover .service-media__image,.market-card:hover .market-card__image{transform:scale(1.045)}.service-card>div{display:flex;flex:1;flex-direction:column;padding:24px}.service-card span{color:var(--p);font:700 .72rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}.service-card h2{margin:13px 0 10px;color:var(--ink);font-size:1.55rem;font-weight:600}.service-card p{color:var(--muted);font-size:.94rem;line-height:1.6}.service-card b{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;color:var(--ink);font-size:.9rem}.service-card b svg{width:16px;height:16px;color:var(--p)}.market-card__visual .market-card__image{position:absolute;inset:0;z-index:0}.market-card__visual::before,.market-card__visual::after{z-index:1;mix-blend-mode:screen}.market-card__visual span,.market-card__visual i,.market-card__visual b{z-index:2}@media(max-width:1024px){.hero--page .hero__inner:has(.hero__service-media){grid-template-columns:1fr;gap:42px;text-align:center}.hero--page .hero__inner:has(.hero__service-media) .breadcrumbs{justify-content:center}.hero--page .hero__inner:has(.hero__service-media) h1,.hero--page .hero__inner:has(.hero__service-media) .hero__lead{margin-inline:auto}.hero__service-media{width:min(560px,100%);justify-self:center}.service-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.service-card-grid{grid-template-columns:1fr;gap:16px}.service-card,.hero__service-media{border-radius:16px}.service-card>div{padding:20px}.service-card h2{font-size:1.35rem}}@media(prefers-reduced-motion:reduce){.service-card,.service-media__image,.market-card__image{transition:none!important}} /* Marka Studio’dan aktarılan proje kartları: yayımlı kapak görselini kırpmasız boşluk olmadan, bilgi künyesiyle sunar. */ .project-card--source{background:#fff}.project-card--source img{padding:0;aspect-ratio:16/10;object-fit:cover;background:#F4F5F8}.project-card--source figcaption span{display:block;min-height:1.4em}.project-card--source figcaption p{margin-top:8px} /* project-detail.css */ /* Anatolia proje ayrıntıları: doğrulanabilir künye, kırpılmayan yerel görsel arşivi ve bölüm düzeyinde yalın hareket. */ .project-card{display:block}.project-card figure{height:100%}.project-card:focus-visible{outline:3px solid var(--p);outline-offset:4px}.project-detail__cover{object-fit:contain;background:#FFF}.project-overview{background:#FCFCFD}.project-facts{align-self:start;padding:28px;border:1px solid var(--line);border-radius:20px;background:#F9FAFB}.project-facts dl{display:grid;gap:0;margin:20px 0 0}.project-facts dl>div{padding:14px 0;border-top:1px solid var(--line)}.project-facts dt{color:#667085;font:600 .74rem/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase}.project-facts dd{margin:7px 0 0;color:var(--ink);font-weight:600;line-height:1.35}.project-gallery-section{background:#FFF}.project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.project-gallery__item{overflow:hidden;margin:0;border:1px solid var(--line);border-radius:20px;background:#F9FAFB;box-shadow:0 1px 2px rgba(16,24,40,.04)}.project-gallery__item img{display:block;width:100%;height:auto;background:#FFF}.project-gallery__item figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;color:#667085;font-size:.76rem}.project-gallery__item figcaption span{font:600 .69rem var(--mono);letter-spacing:.04em;text-transform:uppercase}.project-gallery__item figcaption strong{color:var(--p);font:700 .72rem var(--mono);white-space:nowrap}@media(max-width:1024px){.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.project-facts{position:static}}@media(max-width:640px){.project-facts,.project-gallery__item{border-radius:16px}.project-facts{padding:22px}.project-gallery{grid-template-columns:1fr;gap:16px}.project-gallery__item figcaption{padding:12px 14px}} /* corrections.css */ /* Anatolia düzeltme katmanı: erişilebilirlik onarımları ve yeni bileşenler. Bu dosya kaskadda en sonda yer alır; tasarım dilini korur, kusurları giderir. */ /* --- 1. Erişilebilir turuncu: kurumsal #FF4E00 dekoratif yüzeylerde kalır, açık zeminde küçük metin için AA geçen #CC3E00 kullanılır. --- */ :root{--p-text:#CC3E00;--p-text-dark:#B83700} .eyebrow,.market-card__meta strong,.service-card b,.related-card span, .project-card figcaption span,.text-link,.form-note a,.keyword-strip__title{color:var(--p-text)} .eyebrow--light,.section--dark .eyebrow,.section--dark .text-link, .site-footer .text-link,.site-footer .eyebrow{color:#FF9166} .button--primary{background:var(--p-text);border-color:var(--p-text);color:#fff} .button--primary:hover,.button--primary:focus-visible{background:var(--p-text-dark);border-color:var(--p-text-dark)} .market-card__primary{background:var(--p-text);color:#fff} .market-card__primary:hover{background:var(--p-text-dark)} /* --- 2. Ana sayfa H1: background-clip:text ile motion.js kelime bölmesi çakışıyordu; vurgulu satır artık düz ve yüksek kontrastlı renkle boyanır. --- */ .home-hero h1 em,.home-hero h1 em .motion-word{ font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box; -webkit-text-fill-color:currentColor;color:var(--p-text)} .section--dark .home-hero h1 em,.section--dark .home-hero h1 em .motion-word{color:#FF9166} /* --- 3. Filtre çubuğu artık gerçek kategori bağlantısı taşıyor --- */ .tag-nav a[aria-current="true"]{border-color:transparent;background:var(--ink);color:#fff} /* --- 4. Güven şeridi --- */ .trust-strip{padding-block:clamp(38px,5vw,64px)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)} .trust-grid article{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .trust-grid strong{display:block;font-family:var(--head);font-size:clamp(2rem,3vw,2.7rem);line-height:1;color:var(--ink)} .trust-grid span{display:block;margin:8px 0 10px;font-weight:700;font-size:.9rem;color:var(--ink)} .trust-grid p{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)} .trust-note{margin:18px 0 0;font-size:.8rem;color:var(--muted)} /* --- 5. Neden biz --- */ .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)} .why-grid article{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .why-grid span{display:inline-grid;place-items:center;width:30px;height:30px;margin-bottom:14px;border-radius:50%;background:var(--ink);color:#fff;font:600 .7rem var(--mono)} .why-grid h3{margin-bottom:8px;color:var(--ink)} .why-grid h3 a{color:var(--p-text)} .why-grid p{margin:0;font-size:.93rem;color:var(--body)} /* --- 6. Öne çıkan projeler --- */ .featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)} .featured-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .featured-card:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(0,0,0,.1)} .featured-card img{aspect-ratio:16/11;object-fit:cover;width:100%} .featured-card span{display:block;padding:14px 16px 0;font:600 .68rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--p-text)} .featured-card strong{display:block;padding:4px 16px 18px;font-family:var(--head);font-size:1.02rem;color:var(--ink)} .collection__more{margin:clamp(24px,3vw,38px) 0 0} /* --- 7. Anahtar kelime şeridi --- */ .keyword-strip{padding-block:clamp(28px,3.5vw,44px)} .keyword-strip__title{font-size:.95rem!important;font-family:var(--body-font);font-weight:700;letter-spacing:0;margin-bottom:14px} .keyword-strip__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .keyword-strip__list li{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.83rem;color:var(--body)} /* --- 8. Form iyileştirmeleri --- */ .contact-form select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--body)} .label-note{font-weight:400;color:var(--muted)} .form-note{margin:14px 0 0;font-size:.85rem;color:var(--muted)} .form-note a{font-weight:700} /* --- 9. Proje künyesi ek satırı --- */ .project-facts dl>div:last-child dd{color:var(--p-text);font-weight:700} /* --- 11. Mega menü kategori bağlantıları: turuncu vurgu korunur, kontrast AA'ya çekilir --- */ .mega__group p a,.mobile-nav__group p a{color:var(--p-text)!important} /* --- 12. Cam etkili (glassmorphism) hareketli arka plan katmanı --- İçi dolu, yumuşak kenarlı küreler görünür biçimde sürüklenir ve nefes alır; üzerlerine ince halkalar ve cam bir tabaka biner. Katman tamamen akış dışıdır: CLS üretmez, işaretçi olaylarını yakalamaz, ekran okuyucuya görünmez. Hareket yalnızca transform ve opacity ile yapılır (GPU dostu); prefers-reduced-motion tercihinde tamamen durur. */ .rings{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:1;z-index:0} .rings__orb{ position:absolute;display:block;border-radius:50%; filter:blur(38px);opacity:.92;will-change:transform,opacity; transform:translate3d(0,0,0)} .rings__orb--1{ width:min(52vw,620px);aspect-ratio:1;top:-16%;right:-8%; background:radial-gradient(circle at 34% 32%,rgba(255,116,48,.92),rgba(255,78,0,.42) 48%,rgba(255,78,0,0) 72%); animation:orb-drift-a 17s ease-in-out infinite} .rings__orb--2{ width:min(44vw,520px);aspect-ratio:1;bottom:-24%;left:-10%; background:radial-gradient(circle at 58% 42%,rgba(52,58,74,.78),rgba(46,46,46,.34) 50%,rgba(46,46,46,0) 74%); animation:orb-drift-b 21s ease-in-out infinite} .rings__orb--3{ width:min(30vw,360px);aspect-ratio:1;top:14%;left:12%; background:radial-gradient(circle at 46% 46%,rgba(150,124,255,.72),rgba(120,100,220,.3) 50%,rgba(120,100,220,0) 73%); animation:orb-drift-c 14s ease-in-out infinite} .rings__orb--4{ width:min(24vw,290px);aspect-ratio:1;bottom:4%;right:20%; background:radial-gradient(circle at 50% 50%,rgba(96,208,220,.7),rgba(90,190,200,.26) 52%,rgba(90,190,200,0) 73%); animation:orb-drift-d 12s ease-in-out infinite} /* Cam yüzey: küreleri örtmeden, üzerlerine ince bir buzlu tabaka bindirir. */ .rings__grain{ position:absolute;inset:0;display:block; background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.03) 45%,rgba(255,255,255,.17)); -webkit-backdrop-filter:blur(9px) saturate(126%);backdrop-filter:blur(9px) saturate(126%); animation:glass-sheen 26s ease-in-out infinite} .rings>i,.rings>b,.rings>em{z-index:1;opacity:.85} /* Eski halka kuralları yalnızca doğrudan çocuklara uygulanır; aksi hâlde arka plandaki kelime düğümlerini de yakalayıp ters çeviriyordu. */ .rings .rings__words i,.rings .rings__words b,.rings .rings__words em, .rings__word{border:0!important;border-radius:0!important;animation-name:inherit} /* Koyu bölümlerde cam tabakası koyu tarafa çevrilir. */ .section--dark .rings__grain,.hero--dark .rings__grain{ background:linear-gradient(135deg,rgba(18,20,26,.34),rgba(18,20,26,.05) 45%,rgba(18,20,26,.28))} .section--dark .rings__orb{opacity:.85;filter:blur(44px)} .section--dark .rings__orb--2{ background:radial-gradient(circle at 58% 42%,rgba(168,178,205,.6),rgba(90,100,130,.24) 52%,rgba(90,100,130,0) 74%)} .section--dark .rings__orb--3{ background:radial-gradient(circle at 46% 46%,rgba(178,156,255,.6),rgba(120,100,220,.22) 52%,rgba(120,100,220,0) 73%)} /* Hero ve CTA içeriği her zaman cam katmanın üzerinde kalır. */ .hero>.container,.hero .container{position:relative;z-index:2} .section--cta>.container{position:relative;z-index:2} @keyframes orb-drift-a{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.92} 25%{transform:translate3d(-11%,9%,0) scale(1.2);opacity:1} 50%{transform:translate3d(-4%,17%,0) scale(.9);opacity:.8} 75%{transform:translate3d(8%,-7%,0) scale(1.12);opacity:.96}} @keyframes orb-drift-b{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.78} 30%{transform:translate3d(15%,-12%,0) scale(1.24);opacity:.92} 60%{transform:translate3d(6%,9%,0) scale(.88);opacity:.68}} @keyframes orb-drift-c{ 0%,100%{transform:translate3d(0,0,0) scale(.94);opacity:.72} 50%{transform:translate3d(19%,15%,0) scale(1.3);opacity:1}} @keyframes orb-drift-d{ 0%,100%{transform:translate3d(0,0,0) scale(1.02);opacity:.7} 50%{transform:translate3d(-17%,-15%,0) scale(1.28);opacity:1}} @keyframes glass-sheen{ 0%,100%{opacity:.85;transform:translate3d(0,0,0)} 50%{opacity:1;transform:translate3d(0,-1.5%,0)}} /* Kartlarda ve panellerde hafif cam yüzey (Apple benzeri derinlik). */ .hero-panel,.coverage-card,.trust-grid article,.why-grid article{ -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)} .trust-grid article,.why-grid article{background:rgba(255,255,255,.72)} @media (prefers-reduced-motion:reduce){ .rings__orb,.rings__grain{animation:none!important} .rings>i,.rings>b,.rings>em{animation:none!important} } @media (max-width:640px){ /* Mobilde blur maliyetlidir: küre sayısı ve blur yarıçapı düşürülür. */ .rings__orb--4{display:none} .rings__orb{filter:blur(30px)} .rings__grain{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} } /* --- 13. Görüşme planlama (brifing) formu --- */ .brief-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:start} .brief-form{display:grid;gap:clamp(18px,2.4vw,30px)} .brief-form fieldset{margin:0;padding:clamp(18px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r);background:#fff} .brief-form legend{padding:0 0 4px;font-family:var(--head);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;color:var(--ink);letter-spacing:-.02em} .brief-form legend .eyebrow{margin-bottom:8px} .brief-form .field{margin-top:18px} .brief-form label{display:block;margin-bottom:7px;font-size:.9rem;font-weight:600;color:var(--ink)} .brief-form input,.brief-form select,.brief-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--body);font:inherit} .brief-form textarea{resize:vertical;min-height:96px} .brief-form input:focus-visible,.brief-form select:focus-visible,.brief-form textarea:focus-visible{outline:3px solid var(--p);outline-offset:2px} .brief-form .req{margin-left:2px;color:var(--p-text);text-decoration:none;font-weight:700} .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px} .choice{display:flex;gap:9px;align-items:flex-start;min-height:44px;margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:400;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)} .choice:hover{border-color:var(--p-text)} .choice input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--p-text)} .choice span{font-size:.9rem;color:var(--body)} .choice:has(input:checked){border-color:var(--p-text);background:#FFF4EF} .brief-form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400} .brief-form .check input{width:auto;flex:0 0 auto;margin-top:4px;accent-color:var(--p-text)} .brief-side{display:grid;gap:14px;position:sticky;top:96px} .brief-side .coverage-card a{color:var(--p-text);font-weight:700;text-decoration:underline} @media (max-width:1024px){ .brief-grid{grid-template-columns:1fr} .brief-side{position:static;grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .brief-side{grid-template-columns:1fr} .choice-grid{grid-template-columns:1fr} } /* --- 14. Sabit hızlı iletişim paneli (dock) --- Sayfa boyunca sağ kenarda sabit kalır,
ile açılıp kapanır. position:fixed olduğu için sayfa akışını etkilemez ve CLS üretmez. */ .dock{position:fixed;top:50%;right:0;z-index:70;transform:translateY(-50%); display:flex;align-items:center;flex-direction:row-reverse} .dock__toggle{display:grid;place-items:center;width:36px;height:74px; border-radius:14px 0 0 14px;background:var(--ink);color:#fff;cursor:pointer; list-style:none;box-shadow:0 8px 24px rgba(16,24,40,.22); transition:background .2s var(--ease)} .dock__toggle::-webkit-details-marker{display:none} .dock__toggle svg{width:18px;height:18px;transition:transform .28s var(--ease)} .dock[open] .dock__toggle svg{transform:rotate(180deg)} .dock__toggle:hover{background:var(--p-text)} .dock__toggle:focus-visible{outline:3px solid var(--p);outline-offset:2px} .dock__panel{display:grid;overflow:hidden;border-radius:14px 0 0 14px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%); box-shadow:0 14px 40px rgba(16,24,40,.18); animation:dock-in .32s var(--ease) both} .dock__item{display:grid;place-items:center;gap:3px;width:96px;min-height:74px; padding:11px 8px;border-left:4px solid transparent;border-bottom:1px solid var(--line); color:var(--ink);font-size:.72rem;font-weight:700;line-height:1.2;text-align:center; transition:background .2s var(--ease),color .2s var(--ease)} .dock__item:last-child{border-bottom:0} .dock__item svg{width:24px;height:24px} .dock__item:hover,.dock__item:focus-visible{background:#F4F5F8} .dock__item--wa{border-left-color:#25D366;color:#0B7A38} .dock__item--tel{border-left-color:#1D4ED8;color:#1A3FA8} .dock__item--brief{border-left-color:var(--p);color:var(--p-text)} .dock__item--ig{border-left-color:#C13584;color:#A02A6C} .dock__item--li{border-left-color:#0A66C2;color:#08508F} .dock__item--fb{border-left-color:#1877F2;color:#1257AF} @keyframes dock-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}} @media (prefers-reduced-motion:reduce){ .dock__panel{animation:none} .dock__toggle svg{transition:none} } @media (max-width:900px){ /* Mobilde panel alt kenara taşınır ve yatay şerit olur. */ .dock{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:column;align-items:stretch} .dock__toggle{width:100%;height:26px;border-radius:14px 14px 0 0} .dock__toggle svg{transform:rotate(-90deg)} .dock[open] .dock__toggle svg{transform:rotate(90deg)} .dock__panel{grid-auto-flow:column;grid-auto-columns:1fr;border-radius:0; animation:dock-up .3s var(--ease) both} .dock__item{width:auto;min-height:60px;border-left:0;border-top:4px solid transparent; border-bottom:0;font-size:.64rem;gap:2px} .dock__item svg{width:20px;height:20px} .dock__item--wa{border-top-color:#25D366} .dock__item--tel{border-top-color:#1D4ED8} .dock__item--brief{border-top-color:var(--p)} .dock__item--ig{border-top-color:#C13584} .dock__item--li{border-top-color:#0A66C2} .dock__item--fb{border-top-color:#1877F2} /* Alt şerit içeriği kapatmasın */ .site-footer{padding-bottom:96px} } @keyframes dock-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media (max-width:520px){ /* Küçük ekranda yalnızca birincil eylemler görünür kalır. */ .dock__item--ig,.dock__item--li,.dock__item--fb{display:none} } /* --- 15. Filtre şeridi ve hareket belirginliği düzeltmeleri --- .tag-nav opak bir arka plan taşıdığı için hareketli zeminin üzerinde kesik bir dikdörtgen olarak görünüyordu. Şerit artık saydam; pill'ler cam yüzeyle okunur kalır ve arka plandaki hareket kesintisiz akar. */ .tag-nav{background:transparent!important;position:relative} .tag-nav a{ background:rgba(255,255,255,.82)!important;border-color:rgba(16,24,40,.10)!important; -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%); box-shadow:0 1px 2px rgba(16,24,40,.05)} .tag-nav a:hover,.tag-nav a:focus-visible{ background:#fff!important;border-color:rgba(16,24,40,.24)!important; color:var(--ink)!important;transform:none} .tag-nav a[aria-current="true"],.tag-nav a[aria-current="true"]:hover{ background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important} /* Yatay kaydırılabilir şeritte kenar solması: devamı olduğu görünür olur. */ .tag-nav{-ms-overflow-style:none;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)} .tag-nav::-webkit-scrollbar{display:none} /* Hareketi belirginleştir: küreler daha net, yolculuk daha uzun. */ .rings__orb{filter:blur(32px);opacity:1} .rings__orb--1{ width:min(56vw,680px); background:radial-gradient(circle at 34% 32%,rgba(255,104,32,.95),rgba(255,78,0,.5) 46%,rgba(255,78,0,0) 71%); animation-duration:13s} .rings__orb--2{ width:min(48vw,570px); background:radial-gradient(circle at 58% 42%,rgba(44,50,66,.86),rgba(46,46,46,.4) 48%,rgba(46,46,46,0) 72%); animation-duration:16s} .rings__orb--3{ width:min(34vw,410px); background:radial-gradient(circle at 46% 46%,rgba(140,110,255,.8),rgba(120,100,220,.36) 48%,rgba(120,100,220,0) 71%); animation-duration:11s} .rings__orb--4{ width:min(28vw,330px); background:radial-gradient(circle at 50% 50%,rgba(76,204,218,.8),rgba(90,190,200,.32) 50%,rgba(90,190,200,0) 71%); animation-duration:9s} .rings__grain{ background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 48%,rgba(255,255,255,.10)); -webkit-backdrop-filter:blur(7px) saturate(130%);backdrop-filter:blur(7px) saturate(130%)} .section--dark .rings__orb{opacity:.95;filter:blur(38px)} /* Not: Daha önce burada bir conic-gradient süpürmesi vardı; renk durakları ekranda keskin bir köşegen kenar üretiyordu. Yerine kenarsız, tamamen yumuşak geçişli kelime katmanı kullanılıyor (bkz. .rings__words). */ /* --- 16. Metin okunurluk koruması --- Küreler artık belirgin olduğu için başlık ve gövde metninin arkasına yumuşak bir aydınlatma katmanı konur. Kenarlarda hareket canlı kalır, metnin bulunduğu bantta kontrast WCAG AA eşiğinin üzerinde tutulur. */ .hero__inner,.home-hero{position:relative} .hero__inner::before,.home-hero::before{ content:"";position:absolute;z-index:-1;inset:-6% -8%; background:radial-gradient(52% 44% at 42% 54%,rgba(250,251,253,.9) 0,rgba(250,251,253,.62) 52%,rgba(250,251,253,0) 80%); pointer-events:none} .section--dark .hero__inner::before,.hero--dark .home-hero::before{ background:radial-gradient(60% 58% at 42% 52%,rgba(16,18,24,.9) 0,rgba(16,18,24,.7) 45%,rgba(16,18,24,0) 78%)} .section--dark .container.cta,.section--dark .container.proof{position:relative} .section--dark .container.cta::before,.section--dark .container.proof::before{ content:"";position:absolute;z-index:-1;inset:-10% -6%; background:radial-gradient(60% 60% at 40% 50%,rgba(16,18,24,.86) 0,rgba(16,18,24,.6) 48%,rgba(16,18,24,0) 80%); pointer-events:none} /* --- 17. Arka planda süzülen hizmet kelimeleri (Apple cam etkisi) --- Tamamen dekoratiftir: .rings katmanı aria-hidden olduğu için ekran okuyucuya ulaşmaz, seçilemez ve tıklanamaz. Yalnızca transform ve opacity ile hareket eder; düzen etkilenmez, CLS üretmez. */ .rings__words{position:absolute;inset:0;display:block;overflow:hidden; pointer-events:none;user-select:none;-webkit-user-select:none} .rings__word{ position:absolute;display:block;white-space:nowrap; font-family:var(--head);font-weight:800;letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.2px rgba(26,26,28,.20); filter:blur(.3px); will-change:transform,opacity; animation-timing-function:ease-in-out;animation-iteration-count:infinite} .section--dark .rings__word{-webkit-text-stroke-color:rgba(255,255,255,.22)} .rings__word--1 {font-size:clamp(2.2rem,5.4vw,4.4rem);top:6%; left:3%; animation:word-float-a 34s infinite;opacity:.85} .rings__word--2 {font-size:clamp(3.4rem,8vw,7rem); top:18%; right:6%; animation:word-float-b 41s infinite;opacity:.7} .rings__word--3 {font-size:clamp(1.8rem,4vw,3.2rem); top:38%; left:12%; animation:word-float-c 29s infinite;opacity:.8} .rings__word--4 {font-size:clamp(2rem,4.6vw,3.6rem); bottom:14%;right:14%;animation:word-float-a 37s infinite reverse;opacity:.75} .rings__word--5 {font-size:clamp(3rem,7vw,6rem); bottom:6%; left:8%; animation:word-float-b 32s infinite;opacity:.65} .rings__word--6 {font-size:clamp(1.6rem,3.4vw,2.6rem);top:52%; right:24%; animation:word-float-c 45s infinite reverse;opacity:.8} .rings__word--7 {font-size:clamp(2rem,4.4vw,3.4rem); top:2%; left:44%; animation:word-float-b 39s infinite;opacity:.7} .rings__word--8 {font-size:clamp(1.7rem,3.6vw,2.8rem);bottom:28%;left:34%;animation:word-float-a 27s infinite;opacity:.8} .rings__word--9 {font-size:clamp(2.6rem,6vw,5rem); top:66%; left:-2%; animation:word-float-c 43s infinite;opacity:.65} .rings__word--10{font-size:clamp(1.6rem,3.2vw,2.4rem);top:28%; left:56%; animation:word-float-b 36s infinite reverse;opacity:.78} .rings__word--11{font-size:clamp(1.9rem,4vw,3rem); bottom:38%;right:4%; animation:word-float-a 31s infinite;opacity:.72} .rings__word--12{font-size:clamp(2.2rem,5vw,4rem); top:78%; right:34%; animation:word-float-c 47s infinite;opacity:.68} .rings__word--13{font-size:clamp(2.8rem,6.6vw,5.4rem);top:44%; right:-2%;animation:word-float-b 33s infinite;opacity:.62} .rings__word--14{font-size:clamp(1.7rem,3.6vw,2.7rem);bottom:2%; left:52%;animation:word-float-a 40s infinite reverse;opacity:.75} @keyframes word-float-a{ 0%,100%{transform:translate3d(0,0,0) rotate(-1.5deg)} 50%{transform:translate3d(4.5vw,-3.5vh,0) rotate(1.5deg)}} @keyframes word-float-b{ 0%,100%{transform:translate3d(0,0,0) rotate(1deg)} 50%{transform:translate3d(-5.5vw,3vh,0) rotate(-1deg)}} @keyframes word-float-c{ 0%,100%{transform:translate3d(0,0,0) rotate(-.5deg)} 33%{transform:translate3d(3vw,3.5vh,0) rotate(1.2deg)} 66%{transform:translate3d(-3.5vw,-2vh,0) rotate(-1.2deg)}} @media (prefers-reduced-motion:reduce){.rings__word{animation:none!important}} @media (max-width:900px){ /* Küçük ekranda kalabalık yapmaması için kelime sayısı azaltılır. */ .rings__word--6,.rings__word--8,.rings__word--10,.rings__word--11, .rings__word--12,.rings__word--13,.rings__word--14{display:none} } /* --- 18. Anlamsal listeler (AEO/çıkarılabilirlik) --- */ .tag-nav ul{display:flex;flex-wrap:inherit;gap:inherit;margin:0;padding:0;list-style:none} .tag-nav li{display:flex;flex:0 0 auto} .contact-list{display:grid;gap:0;margin:0 0 22px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden} .contact-list>div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)} .contact-list>div:last-child{border-bottom:0} .contact-list dt{font-size:.83rem;font-weight:600;color:var(--muted)} .contact-list dd{margin:0;font-size:.9rem;font-weight:700;color:var(--ink);text-align:right} .contact-list dd a{color:var(--p-text)} .collection-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px);margin-top:clamp(28px,4vw,48px)} .collection-summary h3{margin-bottom:12px;font-size:1.05rem;color:var(--ink)} .summary-list{display:grid;gap:6px;margin:0;padding:0;list-style:none} .summary-list--dense{grid-template-columns:repeat(2,1fr)} .summary-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.86rem} .summary-list strong{font-weight:600;color:var(--ink)} .summary-list span{color:var(--p-text);font-weight:700;white-space:nowrap} .next-steps{display:grid;gap:10px;margin:0 0 clamp(24px,3vw,36px);padding-left:20px} .next-steps li{padding-left:6px;color:var(--body)} @media (max-width:768px){ .collection-summary{grid-template-columns:1fr} .summary-list--dense{grid-template-columns:1fr} .contact-list>div{flex-direction:column;gap:2px} .contact-list dd{text-align:left} } /* --- 19. Footer düzeni --- Beşinci sütun eklendiğinde 4 sütunluk ızgara taşıyor, "İletişim" bloğu alt satıra düşüp büyük bir boşluk bırakıyordu. Izgara beş sütuna göre yeniden tanımlandı; sağ kenarda sabit iletişim paneline yer bırakıldı. */ .footer__grid{ grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(140px,1fr)); gap:clamp(24px,3vw,44px);align-items:start} .site-footer{padding-right:clamp(0px,7vw,120px)} .footer__grid>section>h2{ margin-bottom:14px;font-family:var(--mono);font-size:.68rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#FF9166} .footer__grid nav{display:grid;gap:2px} .footer__grid nav a{ display:flex;min-height:38px;align-items:center;color:#e6e8ec;font-size:.88rem; transition:color .2s var(--ease)} .footer__grid nav a:hover{color:#FF9166} .footer__grid>section:first-child p{max-width:34ch;color:#b9bec8;font-size:.92rem} .site-footer address{gap:2px} .site-footer address a,.site-footer address span{min-height:38px} .site-footer address span b{font-weight:600;color:#fff} .site-footer address strong{padding-bottom:6px} .footer__bottom{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:12px 28px;margin-top:clamp(36px,4vw,56px)} .footer__bottom nav{display:flex;flex-wrap:wrap;gap:18px} @media (max-width:1180px){ .footer__grid{grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(150px,1fr))} } @media (max-width:760px){ .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer__grid>section:first-child{grid-column:1 / -1} .site-footer{padding-right:0} } @media (max-width:460px){ .footer__grid{grid-template-columns:1fr} .footer__bottom{display:grid;gap:10px} } /* --- 20. Teslim edilenler listesi --- */ .deliverables-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none} .deliverables-list li{position:relative;padding:16px 18px 16px 46px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:.94rem;line-height:1.55;color:var(--body)} .deliverables-list li::before{ content:"";position:absolute;left:18px;top:20px;width:16px;height:16px;border-radius:50%; background:var(--p-text); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} @media (max-width:820px){.deliverables-list{grid-template-columns:1fr}} /* --- 21. İkna mikro metinleri --- */ .cta-note{margin:14px 0 0;font-size:.83rem;color:var(--muted)} .section--dark .cta-note{color:#b9bec8} .section--cta .cta>div>p{max-width:46ch;margin-top:12px;color:#c8cdd6;font-size:.95rem} .trust-grid strong{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em} .trust-grid span{color:var(--p-text)} /* --- 22. Mobil menü: düğme sağda, panel sola doğru açılır --- */ @media (max-width:1024px){ /* Logo solda, menü düğmesi en sağda kalır; CTA arada. */ .header__inner{justify-content:space-between} .brand{order:1;margin-right:auto} .header__cta{order:2} .mobile-nav{order:3;margin-left:6px} .mobile-nav>summary{ border-color:rgba(16,24,40,.16);background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06)} .mobile-nav>summary span{background:var(--ink)} .mobile-nav>summary:focus-visible{outline:3px solid var(--p);outline-offset:2px} /* Panel sağ kenara sabitlenir ve sola doğru açılır. */ .mobile-nav__panel{ right:14px;left:auto;transform-origin:top right; animation:mobile-nav-in .26s cubic-bezier(.22,1,.36,1) both} } @keyframes mobile-nav-in{ from{opacity:0;transform:translateX(18px) scale(.97)} to{opacity:1;transform:translateX(0) scale(1)}} @media (prefers-reduced-motion:reduce){.mobile-nav__panel{animation:none}} @media (max-width:640px){ /* Dar ekranda CTA metni kısalır, düğme sağda kalır. */ .header__cta{padding:0 14px;font-size:.82rem} .header__cta svg{display:none} .mobile-nav__panel{right:12px;width:min(340px,calc(100vw - 24px))} } @media (max-width:400px){ .header__cta{display:none} } /* --- 23. Compositing maliyetini düşürme --- backdrop-filter, her boyamada arkasındaki katmanı yeniden bulanıklaştırır ve mobil GPU'larda en pahalı özelliklerden biridir. Ölçümde 21 ögede etkindi. Cam etkisi yalnızca gerçekten gerekli üç yüzeyde bırakılır; kart ve pill yüzeyleri opak arka planla aynı görünümü çok daha ucuza verir. */ .trust-grid article,.why-grid article,.coverage-card{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important; background:#fff} .tag-nav a{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important; background:rgba(255,255,255,.94)!important} @media (max-width:1024px){ /* Mobilde cam katmanı tamamen kalkar: hareketli küreler zaten yumuşak. */ .rings__grain{ -webkit-backdrop-filter:none;backdrop-filter:none; background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 48%,rgba(255,255,255,.14))} .hero-panel{-webkit-backdrop-filter:none;backdrop-filter:none} /* Küre sayısı ve blur yarıçapı düşürülür; boyama alanı küçülür. */ .rings__orb--3{display:none} .rings__orb{filter:blur(26px)} /* Arka plan kelimeleri mobilde daha az ve daha silik. */ .rings__word{-webkit-text-stroke-width:1px;opacity:.5} } @media (max-width:640px){ .rings__orb--2{display:none} .rings__orb{filter:blur(22px)} /* will-change yalnızca gerçekten animasyonlu ögede kalsın: bellek tüketimi düşer. */ .rings__word{will-change:auto} } /* Hareket tercih edilmiyorsa hiçbir katman boyama maliyeti üretmez. */ @media (prefers-reduced-motion:reduce){ .rings__orb,.rings__word,.rings__grain{will-change:auto} } /* --- 24. Compositor katman sayısını düşürme --- `will-change`, ögeyi kalıcı olarak ayrı bir GPU katmanına taşır. Ölçümde 142 ögede etkindi; bu, özellikle mobilde bellek ve boyama maliyeti demektir. Kural: yalnızca sürekli animasyonu olan az sayıda ögede bırakılır. Bir kez açılıp duran reveal ögelerinde transition zaten yeterlidir. */ .js-motion .motion-intro,.js-motion .motion-reveal, .js-motion .motion-split .motion-word, .js-motion .motion-magnetic, .rings>i,.rings>b,.rings>em, /* Kelimeler CSS animasyonu sırasında tarayıcı tarafından zaten geçici olarak katmana alınır; kalıcı `will-change` 28 ek katman üretiyordu. */ .rings__word{will-change:auto} /* Açılış animasyonu biten öge katmandan düşürülür. */ .js-motion .motion-intro.motion-visible,.js-motion .motion-reveal.motion-visible{will-change:auto} /* Sürekli animasyonlu tek grup: arka plan küreleri. */ .rings__orb{will-change:transform} /* İşaretçiyle sürüklenen katman yalnızca üzerine gelindiğinde katmana alınır. */ .js-motion .motion-parallax{will-change:auto} .js-motion .motion-parallax:hover{will-change:transform} @media (max-width:640px){ /* Dar ekranda arka plan kelimeleri seyreltilir. */ .rings__word--3,.rings__word--5,.rings__word--7{display:none} } /* --- 25. Dar ekranda çağrı düğmeleri --- */ @media (max-width:560px){ /* Yan yana iki düğme 375px'te üç satıra kırılıyordu; alt alta ve tam genişlik. */ .home-hero .button-row{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:340px} .home-hero .button-row .button{justify-content:center;width:100%;padding:0 18px;text-align:center} .home-hero .cta-note{text-align:center} .section--cta .container.cta{gap:18px} .section--cta .button{width:100%;max-width:340px;justify-content:center} } /* --- 10. Duyarlı kırılımlar --- */ @media (max-width:1024px){ .trust-grid{grid-template-columns:repeat(2,1fr)} .featured-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .trust-grid,.why-grid,.featured-grid{grid-template-columns:1fr} .keyword-strip__list li{font-size:.8rem} } /* 26. Kısa yanıt bloğu. Sayfanın tanımı önceden gövdenin 84. kelimesinde başlıyordu; yanıt motorları ve üretken arama arayüzleri üst bölümden çıkarım yaptığı için aynı tanım H1'in hemen altına, kendi başına anlaşılır bir pasaj olarak taşındı. Görsel olarak öne çıkar ama sayfanın akışını bölmez. */ .section--answer { padding-block: clamp(1.75rem, 4vw, 2.75rem) 0; } .answer-lead { max-width: 62ch; border-left: 3px solid var(--accent, #b8a06a); padding: 0.25rem 0 0.25rem 1.25rem; } .answer-lead .eyebrow { margin-bottom: 0.6rem; } .answer-lead__text { margin: 0; font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem); line-height: 1.62; color: var(--ink, #14161a); } @media (max-width: 640px) { .answer-lead { padding-left: 1rem; } } /* 27. Terim sözlüğü. Tanımlar kart yerine akışkan bir ızgarada verilir: her madde kendi başına anlaşılır olmalı, bağlamı bozulmadan alıntılanabilmelidir. */ .glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(1.25rem, 3vw, 2rem); } .glossary-item { border-top: 1px solid var(--line, #e3e0da); padding-top: 1.1rem; scroll-margin-top: 6rem; } .glossary-item dt { margin: 0 0 0.45rem; font-family: var(--head); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.3; letter-spacing: -.02em; } .glossary-item dd { margin: 0; } .glossary-item__short { margin: 0 0 0.6rem; font-weight: 600; } .glossary-item p { margin: 0 0 0.75rem; line-height: 1.6; } .glossary-item .text-link { font-size: 0.92rem; } /* 29. Kapsam listesindeki hizmet bağlantıları. Liste artık gezinilebilir: her madde ilgili hizmet sayfasına gider. */ .service-aside li a { display: block; color: inherit; text-decoration: none; } .service-aside li a:hover, .service-aside li a:focus-visible { color: var(--p); text-decoration: underline; } /* Terim geçen sayfalardan sözlüğe verilen bağlamsal not. */ /* 38. Site haritası listesi. */ .sitemap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2px 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .sitemap-list li { border-bottom: 1px solid var(--line, #e3e0da); } .sitemap-list a { display: flex; align-items: center; min-height: 44px; color: var(--ink, #14161a); } .sitemap-list a:hover { color: var(--p-text, #cc3e00); } /* 37. Sözlük giriş cümlesi. */ .glossary-intro { max-width: 68ch; margin: 0; color: var(--muted, #5c5f66); } /* 36. Eksik kalan bileşen varyantları. Bu üç sınıf işaretlemede kullanılıyor ama stil dosyasında karşılığı yoktu. En görünür sonucu `.button--outline` idi: temel `.button` kuralı saydam kenarlık ve zeminsiz tanımlandığı için açık zemindeki ikincil çağrılar ("Tüm referansları inceleyin", "Kısa mesaj gönderin") buton değil kalın metin gibi görünüyordu. */ .button--outline { border-color: var(--line, #e3e0da); background: transparent; color: var(--ink, #14161a); } .button--outline:hover, .button--outline:focus-visible { border-color: var(--p-text, #cc3e00); background: var(--vurgu-zemin, #fbede7); color: var(--p-text, #cc3e00); } /* Kart görselinin üçüncü renk varyantı: `index % 3` sıfır döndüğünde kullanılan sınıfın karşılığı yoktu, o kartlar diğerlerinden sönük kalıyordu. */ .market-card__visual--0::before { background: radial-gradient(circle, #6fd1c4, transparent 65%); } /* Açık zeminde kullanılan ilgili içerik ızgarası. */ .related-grid--light { list-style: none; padding: 0; } .related-grid--light .related-card { background: var(--white, #fff); border: 1px solid var(--line, #e3e0da); } .related-grid--light .related-card:hover { border-color: var(--p-text, #cc3e00); } /* 35. Baskı stili. Sayfa yazdırıldığında sabit iletişim rayı, arka plan küreleri, gezinme ve yönlendirme düğmeleri kâğıda basılıyordu. Baskıda yalnızca içerik kalır; bağlantı adresleri metin olarak açılır, böylece kâğıt üzerinde kaynak izlenebilir olur. */ @media print { .quick-dock, .dock, .rings, .site-header, .section--cta, .mobile-nav, .mega, .social-nav, .skip-link { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } main { width: auto; } .section { padding-block: 0.6cm; border: 0; } h1 { font-size: 20pt; } h2 { font-size: 14pt; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } p, li, figure, tr { break-inside: avoid; page-break-inside: avoid; } img { max-width: 100% !important; height: auto !important; } .faq details { break-inside: avoid; } .faq details > p { display: block !important; opacity: 1 !important; } a[href^="/"]::after { content: " (anatoliacreative.com.tr" attr(href) ")"; font-size: 9pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } .answer-lead { border-left-color: #000; } } /* 34. Etkileşimle açılan panellerde görünürlük güvencesi. SSS yanıtı, mega menü, mobil menü ve iletişim rayı paneli opaklığı 0'dan başlayan animasyonlarla açılıyordu. `animation-fill-mode: both` geriye dönük dolgu uyguladığı için animasyon hiç çalışmazsa (arka plan sekmesi, kısıtlanmış kare hızı, düşük güç modu) kullanıcı ögeyi açtığında panel görünmez kalıyordu. `forwards` ile geriye dönük dolgu kalkar: animasyon çalışırsa görünüm aynıdır, çalışmazsa öge doğal opaklığıyla görünür. */ .faq details[open] > p, .js-motion .faq details[open] > p, .mega[open] .mega__panel, .js-motion .mega[open] .mega__panel, .mobile-nav[open] .mobile-nav__panel, .js-motion .mobile-nav[open] .mobile-nav__panel, .dock__panel { animation-fill-mode: forwards; } /* Süreli güvence bu panelleri de kapsar. */ .motion-settled .faq details[open] > p, .motion-settled .mega[open] .mega__panel, .motion-settled .mobile-nav[open] .mobile-nav__panel, .motion-settled .dock__panel { opacity: 1 !important; animation: none !important; } /* 33. Grup alanı etiketi. Radyo ve onay kutusu grupları tek bir denetim olmadığı için `for` ile bağlanamaz; görsel etiket olarak verilir ve gruba aria-labelledby ile bağlanır. Görünümü