/* =====================================================================
   developerdamla  |  style.css
   İÇİNDEKİLER
   1. Ayarlar (renk, font, ölçü)   2. Temel   3. Ortak parçalar
   4. Header   5. Açılış animasyonu   6. Video + Slider   7. Kayan barlar
   8. Bölümler (biz kimiz, hizmet, süreç, özel proje, damla)
   9. Alt sayfalar   10. Footer   11. Damla AI + Form   12. Mobil
   ===================================================================== */

/* ---------- 1. AYARLAR: değiştirmek için sadece burayı kullanın ---------- */
@font-face{font-family:'Hadelson Six';src:url(../assets/fonts/hadelson-six.woff2) format('woff2'),url(../assets/fonts/hadelson-six.ttf) format('truetype');font-display:swap}
:root{
  --white:#ffffff; --navy:#1b5092; --sky:#4588cc;
  --bg:#ffffff; --surface:#f1f7fd; --card:#ffffff; --text:#28466f; --head:#1b5092; --line:#d3e3f4; --accent:#4588cc; --glow:rgba(69,136,204,.28);
  --font-body:Arial,Helvetica,sans-serif;
  --font-head:'Hadelson Six','Arial Black',Impact,sans-serif;
  --font-logo:'Bricolage Grotesque','Segoe UI',Arial,sans-serif;   /* sadece logo yazısı (zip'teki gibi) */
  --head-case:uppercase;
  --header-h:3cm; --wrap:1200px; --radius:24px; --gap:clamp(2rem,6vw,5rem); --space:clamp(4rem,8vw,7rem);
  --slider-koyu:.5; /* slider karartması: 0 = hiç karartma yok, 1 = çok koyu */ --bant-egim:2deg; --bant-hiz:50s; --slider-sure:4s;
}
[data-theme=dark]{--bg:#08121f; --surface:#0d1c31; --card:#122843; --text:#c5d9f2; --head:#e9f3ff; --line:#22436d; --accent:#6fa8e0; --glow:rgba(69,136,204,.35)}

/* ---------- 2. TEMEL ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{font:400 1.05rem/1.7 var(--font-body);color:var(--text);background:var(--bg);overflow-x:clip;transition:background .4s,color .4s}
h1,h2,h3{font-family:var(--font-head);color:var(--head);font-weight:400;line-height:1.05;letter-spacing:.01em;text-transform:var(--head-case)}
h1{font-size:clamp(2.2rem,5.5vw,4.4rem)} h2{font-size:clamp(1.9rem,4.4vw,3.4rem)} h3{font-size:1.4rem}
p+p{margin-top:.9rem} a{color:var(--accent)} img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(var(--wrap),92%);margin-inline:auto;position:relative}
.sec{padding:var(--space) 0;position:relative;isolation:isolate}
.tint{background:linear-gradient(180deg,transparent,var(--surface) 10%,var(--surface) 90%,transparent)}
.lead{font-size:1.2rem;max-width:56ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.split.rev>:first-child{order:2}

/* ---------- 3. ORTAK PARÇALAR ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:99px;background:var(--navy);color:#fff;font:700 1rem var(--font-body);text-decoration:none;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px var(--glow)}
.btn.light{background:#fff;color:var(--navy)} .btn.ghost{background:transparent;color:var(--head);box-shadow:inset 0 0 0 2px var(--accent)}
[data-theme=dark] .btn{background:var(--sky)}
.pic{width:100%;aspect-ratio:4/3;border-radius:var(--radius);background:var(--img,none) center/cover no-repeat,var(--img-yedek) center/40% no-repeat,linear-gradient(140deg,var(--surface),var(--line));box-shadow:0 30px 50px -30px var(--glow)}
.deco-b1::after,.deco-b2::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
.pic{position:relative;overflow:hidden}.pic img,.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ph img{object-position:center 30%}
.deco-b1::after{left:2%;top:8%;width:190px;height:130px;background-size:contain;opacity:.55;animation:bob 6s ease-in-out infinite}
.deco-b2::after{right:3%;bottom:8%;width:150px;height:100px;background-size:contain;opacity:.5;animation:bob 7s 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
/* Sallanan başlık: alt alta yazılır, olduğu yerde oynar */
.wob span{display:block;width:fit-content;transform-origin:left bottom;animation:wob 2.6s ease-in-out infinite}
.wob span:nth-child(2){animation-delay:-.9s} .wob span:nth-child(3){animation-delay:-1.7s}
@keyframes wob{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg) translateY(-5px)}}
/* ? işaretinin tam üstüne oturan damla */
.q{position:relative;display:inline-block;font-style:normal}
.q::before{content:"";position:absolute;left:var(--soru-x);top:var(--soru-y);width:var(--soru-boyut);height:var(--soru-boyut);transform:translateX(-50%);background-size:contain;background-repeat:no-repeat;animation:qbob 3s ease-in-out infinite}
@keyframes qbob{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-6px)}}

/* ---------- 4. HEADER (3 cm) ---------- */
.hd{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 6px 20px -16px rgba(27,80,146,.5)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:800 1.75rem var(--font-logo);color:var(--navy);letter-spacing:-.025em}
.logo b{color:var(--sky)} .logo img{width:60px;height:60px;object-fit:contain}
.nav{display:flex;gap:1.3rem;align-items:center}
.nav a{color:var(--navy);text-decoration:none;font-weight:700;font-size:.95rem;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--sky);transition:width .3s}
.nav a:hover::after,.nav a.on::after{width:100%}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.burger svg{width:24px;height:24px;margin:auto;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5. AÇILIŞ ANİMASYONU (zip'ten; ekranda ~4 sn kalır) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;text-align:center;overflow:hidden;animation:curtain 1.1s 2.9s cubic-bezier(.7,0,.2,1) forwards}
.intro img.d{width:min(300px,60vw);margin:auto;animation:pop 1.2s cubic-bezier(.3,1.5,.5,1) both;filter:drop-shadow(0 26px 30px rgba(27,80,146,.35))}
.intro h2{margin-top:1rem;color:#1b5092;opacity:0;animation:fadein .8s 1.1s forwards}
.intro p{color:#4588cc;font-weight:700;opacity:0;animation:fadein .8s 1.5s forwards}
.intro .ring{position:absolute;left:50%;top:55%;width:12px;height:12px;border-radius:50%;background:#4588cc;animation:ripple 2.4s .5s ease-out forwards;opacity:0}
.intro .bb{position:absolute;width:90px;animation:bob 2s infinite}
@keyframes pop{from{transform:translateY(-70vh) scale(.3) rotate(-15deg)}}
@keyframes fadein{to{opacity:1}}
@keyframes ripple{0%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(170)}}
@keyframes curtain{to{clip-path:circle(0 at 50% 100%);visibility:hidden}}

/* ---------- 6. VİDEO + SLIDER ---------- */
.vid{position:relative;width:100%;aspect-ratio:16/7;background:linear-gradient(135deg,var(--navy),var(--sky));overflow:hidden}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid .mute{position:absolute;right:1rem;bottom:1rem;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);cursor:pointer;display:grid;place-items:center}
.vid .mute svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slider{position:relative;width:100%;aspect-ratio:12/5;min-height:420px;overflow:hidden;background:var(--navy)}
.slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s;background:var(--slide-img) center/cover no-repeat;color:#fff}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,48,92,var(--slider-koyu)),rgba(27,80,146,0) 65%)}
.slide.sag::before{background:linear-gradient(270deg,rgba(14,48,92,var(--slider-koyu)),rgba(27,80,146,0) 65%)}
.slide.on{opacity:1;visibility:visible}
.slide .wrap{display:flex}.slide.sag .wrap{justify-content:flex-end;text-align:right}
.slide .tx{max-width:560px;position:relative}
.slide h2,.slide h1{text-shadow:0 2px 14px rgba(10,30,60,.55);color:#fff;font-size:clamp(1.8rem,4vw,3.2rem)} .slide p{text-shadow:0 1px 10px rgba(10,30,60,.55);font-size:1.2rem;margin:1rem 0 1.8rem}
.slide .tx>*{transform:translateY(18px);opacity:0;transition:.7s .3s}.slide.on .tx>*{transform:none;opacity:1}

/* ---------- 7. KAYAN ÇAPRAZ BARLAR ---------- */
.bant-alan{overflow:hidden;padding:3rem 0}
.bant{width:112%;margin-left:-6%;padding:1.05rem 0;font:700 clamp(1.05rem,2.2vw,1.5rem) var(--font-body);overflow:hidden;transform:rotate(calc(var(--bant-egim)*-1))}
.bant.sag{transform:rotate(var(--bant-egim))}
.bant.acik{background:var(--white);color:var(--navy);border-block:2px solid var(--navy)}
.bant.koyu{background:var(--navy);color:var(--white)}
.bant .track{display:flex;width:max-content;animation:kay var(--bant-hiz) linear infinite}
.bant.sag .track{animation-direction:reverse}
.bant .track span{display:flex;align-items:center;white-space:nowrap}
.bant .track span::after{content:"";width:10px;height:10px;border-radius:50%;margin:0 1.6rem;background:currentColor;flex:none}
.bant.acik .track span::after{background:var(--navy)}
@keyframes kay{to{transform:translateX(-50%)}}

/* ---------- 8. BÖLÜMLER ---------- */
.biz-gorsel{aspect-ratio:8/9;border-radius:var(--radius);background-color:var(--surface);background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 30px 50px -30px var(--glow)}
.biz h2{margin-bottom:1.4rem;font-size:clamp(3rem,8vw,6rem)}
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr);margin-top:2.4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:.3s}
.card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 20px 40px -24px var(--glow)}
.card .pic{aspect-ratio:4/3;border-radius:16px;margin-bottom:1rem;box-shadow:none}
a.card{display:block;color:inherit;text-decoration:none}
.card h3{font-size:1.2rem;margin-bottom:.5rem} .card p{font-size:.98rem}
.more{margin-top:2.2rem;text-align:center}
/* süreç: 5 adım kartı. Kaydırdıkça sırayla belirir, rengi açık maviden koyu maviye gider (ana sayfa + nasıl çalışıyoruz) */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;margin-top:3rem}
.pc{grid-column:span 2;position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:28px;overflow:hidden;box-shadow:0 24px 50px -30px var(--glow);border:1px solid var(--line);opacity:0;transform:translateY(40px) scale(.97);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pc:nth-child(n+4){grid-column:span 3}
.pc.in{opacity:1;transform:none}.pc.in:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px var(--k)}
.pc:nth-child(1){--k:#6aa6dc}.pc:nth-child(2){--k:#4588cc}.pc:nth-child(3){--k:#336fb4}.pc:nth-child(4){--k:#245ea2}.pc:nth-child(5){--k:#1b5092}
.pc .ph{position:relative;aspect-ratio:16/10;background:var(--img) center 30%/cover no-repeat,var(--img-yedek) center/30% no-repeat,var(--surface)}
.pc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--k));opacity:.55}
.pc .bd{position:absolute;z-index:2;right:1.6rem;bottom:-31px;width:62px;height:62px;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:var(--k);box-shadow:0 12px 24px -8px var(--k);border:4px solid var(--card);display:grid;place-items:center}
.pc .bd b{transform:rotate(45deg);font:400 1.6rem var(--font-head);color:#fff}
.pc .bd::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--k);opacity:0}
.pc.in .bd::before{animation:ring 1.6s .5s ease-out 2}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.pc .tx{padding:2.6rem 1.8rem 1.9rem;background:linear-gradient(180deg,color-mix(in srgb,var(--k) 12%,var(--card)),var(--card) 60%)}
.pc small{display:block;font:700 .8rem var(--font-body);letter-spacing:.16em;color:var(--k);margin-bottom:.4rem}
[data-theme=dark] .pc small{color:var(--head)}
.pc h3{font-size:1.65rem;margin-bottom:.6rem}.pc p{font-size:1rem}
/* özel projeler: ilgi alanı baloncuğu + altında paragraf */
.ilgi{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin:2rem 0}
.ilgi span{display:inline-block;padding:.6rem 1.4rem;border-radius:99px;background:var(--navy);color:#fff;font-weight:700}
.ilgi div:nth-child(even) span{background:var(--sky)}
.ilgi p{margin-top:.8rem;font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 2rem;list-style:none}
.tags li{padding:.6rem 1.3rem;border-radius:99px;background:var(--navy);color:#fff;font-weight:700}
.tags li:nth-child(even){background:var(--sky)}
.mini-cat{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:linear-gradient(135deg,var(--navy),var(--sky));color:#fff;border-radius:var(--radius);padding:clamp(1.8rem,4vw,3rem)}
.mini-cat h3,.mini-cat p{color:#fff}
.mini-cat.full{display:block;border-radius:0;padding:clamp(2rem,4vw,3.4rem) 0}
.mc{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* ---------- 9. ALT SAYFALAR ---------- */
.page-top{padding:clamp(3rem,6vw,5rem) 0 2rem}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
.quick a{display:block;padding:1.1rem 1.3rem;border-radius:18px;background:var(--navy);color:#fff;text-decoration:none;font:400 1.15rem var(--font-head);text-transform:var(--head-case);transition:.25s}
.quick a:nth-child(even){background:var(--sky)} .quick a:hover{transform:translateY(-4px);box-shadow:0 14px 26px -12px var(--glow)}
.cat{padding-top:var(--space)} .cat>h2{margin-bottom:2rem;padding-bottom:1rem;border-bottom:3px solid var(--sky)}
.item{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:var(--gap);align-items:center;margin-bottom:3rem}
.item.rev{grid-template-columns:1fr minmax(0,420px)}.item.rev .pic{order:2}
.item h3{margin-bottom:.6rem;font-size:1.7rem}
.item ul{margin:.8rem 0 0 1.2rem}.item li{margin:.3rem 0;font-weight:700;color:var(--head)}
.quote.sm{font-size:1.15rem;margin-top:1.2rem}.cat>.quote{margin:1rem 0 0}
.kimlik{list-style:none;background:var(--card);border:2px dashed var(--accent);border-radius:var(--radius);padding:1.6rem;display:grid;gap:.5rem}
.kimlik b{color:var(--head)}
.quote{margin-top:1.8rem;padding-left:1.2rem;border-left:5px solid var(--sky);font:400 1.5rem/1.25 var(--font-head);text-transform:var(--head-case);color:var(--head)}
.damla-ana{aspect-ratio:1;background-position:center;background-size:contain;background-repeat:no-repeat;cursor:pointer;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 30px 30px var(--glow));position:relative}
.damla-ana:active{transform:scale(.95)}
.bubble{position:absolute;left:50%;top:6%;transform:translateX(-50%);background:var(--card);color:var(--head);border:2px solid var(--sky);border-radius:20px;padding:.7rem 1.1rem;font-weight:700;max-width:80%;text-align:center;box-shadow:0 12px 26px -10px var(--glow);opacity:0;transition:.3s;pointer-events:none}
.bubble.show{opacity:1;transform:translate(-50%,-8px)}
.cinfo{display:grid;gap:1rem;margin:1.6rem 0;list-style:none}
.cinfo li{display:flex;gap:.9rem;align-items:center}
.cinfo svg,.soc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cinfo a{color:var(--head);font-weight:700;text-decoration:none}

/* ---------- 10. FOOTER ---------- */
.ft{background:linear-gradient(180deg,#123c73,#0d2d57);color:#d3e3f6;padding:4.5rem 0 2rem;position:relative;isolation:isolate;overflow:hidden}
.ft::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--img-dalga-alt) bottom right/70% auto no-repeat;opacity:.2;mix-blend-mode:screen}
.ft .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
.ft h3{color:#fff;font-size:1.15rem;margin-bottom:.8rem} .ft .logo,.ft .logo b{color:#fff}
.ft a{color:#fff;display:block;text-decoration:none;margin:.35rem 0}.ft a:hover{text-decoration:underline}
.soc{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.ft .soc a{margin:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:.25s}
.ft .soc a:hover{background:#fff;color:var(--navy);transform:translateY(-4px);text-decoration:none}
.ft .soc svg{stroke-width:1.7}
.ft small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.theme-sw{display:inline-flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:99px;padding:.55rem 1.1rem .55rem .6rem;font:700 .95rem var(--font-body);cursor:pointer}
.theme-sw i{width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.35);position:relative;transition:.3s}
.theme-sw i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.3s}
[data-theme=dark] .theme-sw i{background:var(--sky)}[data-theme=dark] .theme-sw i::after{left:19px}

/* ---------- 11. DAMLA AI + FORM ---------- */
.ai{position:fixed;left:1.2rem;bottom:1.2rem;z-index:70;width:84px;height:84px;border-radius:50%;border:3px solid #fff;background:linear-gradient(140deg,#eaf3fd,#b9d6f3);box-shadow:0 14px 34px var(--glow);cursor:pointer;padding:6px;animation:bob 3s ease-in-out infinite}
.ai img{width:100%;height:100%;object-fit:contain}
.ai::after{content:"Sor";position:absolute;right:-6px;top:-6px;background:var(--navy);color:#fff;font:700 .75rem var(--font-body);padding:.15rem .5rem;border-radius:99px}
.chat{position:fixed;left:1.2rem;bottom:7.4rem;z-index:70;width:min(380px,calc(100% - 2.4rem));height:min(540px,72vh);background:var(--card);border-radius:24px;box-shadow:0 30px 70px rgba(10,30,60,.4);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.chat.open{display:flex}
.chat header{background:linear-gradient(135deg,var(--navy),var(--sky));color:#fff;padding:.9rem 1.1rem;font-weight:700;display:flex;gap:.7rem;align-items:center}
.cx{margin-left:auto;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:0 .3rem}
.chat header img{width:40px;height:40px;background:#fff;border-radius:50%;padding:3px;object-fit:contain}
.log{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--surface)}
.log p{margin:0;max-width:88%;padding:.65rem .95rem;border-radius:16px;font-size:.95rem;line-height:1.45}
.log .b{background:var(--card);border-bottom-left-radius:4px;border:1px solid var(--line)}
.log .u{background:var(--sky);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:.6rem .8rem 0;background:var(--surface)}
.chips button{border:1px solid var(--accent);background:var(--card);color:var(--head);border-radius:99px;padding:.3rem .75rem;font:600 .82rem var(--font-body);cursor:pointer}
.chat form{display:flex;gap:.5rem;padding:.7rem}
input,textarea{width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--line);border-radius:14px;font:inherit;color:var(--text);background:var(--bg)}
input:focus,textarea:focus{border-color:var(--accent);outline:0}
.chat input{border-radius:99px}.chat .btn{padding:0 1.2rem}
.form{display:grid;gap:.9rem;margin-top:1.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.msg{font-weight:700;color:var(--head)}

/* ---------- 12. MOBİL ---------- */
@media(max-width:1120px){
  .burger{display:grid}
  .nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:var(--white);flex-direction:column;align-items:flex-start;padding:1.4rem 4%;gap:1.1rem;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}.nav a{font-size:1.1rem}
}
@media(max-width:900px){
  :root{--header-h:2.2cm;--bant-egim:3deg}
  .logo{font-size:1.35rem}.logo img{width:46px;height:46px}
  .split,.item,.item.rev,.proje,.ft .wrap{grid-template-columns:1fr}
  .split.rev>:first-child,.item.rev .pic{order:0}
  .cards,.quick,.ilgi{grid-template-columns:1fr 1fr}
  .vid{aspect-ratio:16/10}.slider{aspect-ratio:auto;min-height:520px}
  .slide.sag .wrap{justify-content:flex-start;text-align:left}
  .slide::before,.slide.sag::before{background:linear-gradient(180deg,rgba(14,48,92,calc(var(--slider-koyu) + .1)),rgba(14,48,92,var(--slider-koyu)))}
  .pgrid{grid-template-columns:1fr 1fr}.pc,.pc:nth-child(n+4){grid-column:span 1}.pc:nth-child(5){grid-column:span 2}
  .ai{width:70px;height:70px}
}
@media(max-width:560px){.cards,.quick,.ilgi{grid-template-columns:1fr}.pgrid{grid-template-columns:1fr}.pc:nth-child(5){grid-column:span 1}}
@media(prefers-reduced-motion:reduce){.pc{opacity:1;transform:none}*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}.bant .track{animation:none}}