/* ==========================================================================
   Web projelerimiz (yalnızca web-projelerimiz.html)
   ========================================================================== */
.wp{--wp-bg:#F4F1EB;--wp-card:#FFFEFB;--wp-ink:#111418;--wp-muted:#62666E;--wp-navy:#002A40;--wp-accent:#635BFF;--wp-line:rgba(17,20,24,.12)}
body:has(.wp) main{background:var(--wp-bg)}
.wp .wrap{max-width:1380px}
.wp .eyebrow{margin-bottom:clamp(16px,2vw,26px)}
.wp .dot{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--wp-accent);margin-left:.04em}

/* ---------- Hero ---------- */
.wp-hero{position:relative;overflow:hidden;padding:clamp(40px,5.5vw,84px) 0 clamp(40px,4.5vw,64px);border-bottom:1px solid var(--wp-line)}
.wp-bgmark{position:absolute;right:-6vw;top:10%;width:min(44vw,620px);aspect-ratio:131/88;background:url('../img/sava-mark-ink.svg') no-repeat center/contain;opacity:.03;pointer-events:none;filter:grayscale(1)}
.wp-hero__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.wp-hero__main{grid-column:1 / span 7}
.wp-title{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6.2vw,96px);line-height:.93;letter-spacing:-.05em;color:var(--wp-ink);margin:0 0 0 -.04em}
.wp-lead{margin-top:clamp(20px,2.2vw,28px);max-width:560px;font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--wp-muted)}
.wp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(26px,3vw,38px)}
.wp-btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:10px;background:#071D2B;color:#fff;font-size:16px;font-weight:500;transition:background .25s,box-shadow .25s}
.wp-btn svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wp-btn:hover{background:#0E2F44;box-shadow:0 14px 30px -18px rgba(7,29,43,.8)}
.wp-btn:hover svg{transform:translate(3px,-3px)}
.wp-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--wp-ink)}
.wp-link svg{width:17px;height:17px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wp-link:hover svg{transform:translateX(4px)}
.wp-panel{grid-column:9 / span 4;padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--wp-line)}
.wp-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin:0 0 28px;padding-bottom:28px;border-bottom:1px solid var(--wp-line)}
.wp-stats>div{padding:0 clamp(16px,2vw,30px);border-left:1px solid var(--wp-line)}
.wp-stats>div:first-child{padding-left:0;border-left:0}
.wp-stats dt{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3vw,44px);letter-spacing:-.04em;line-height:1;color:var(--wp-ink);height:44px;display:flex;align-items:center}
.wp-stats__ico svg{width:30px;height:38px}
.wp-stats dd{margin:8px 0 0;font-size:14px;color:var(--wp-muted);white-space:nowrap}
.wp-panel p{margin:0;font-size:15.5px;line-height:1.6;color:var(--wp-muted);max-width:360px}
@media (prefers-reduced-motion:no-preference){
  .wp-hero__main>*{animation:wpUp .5s cubic-bezier(.2,.7,.2,1) both}
  .wp-hero__main>:nth-child(2){animation-delay:.05s}.wp-hero__main>:nth-child(3){animation-delay:.1s}.wp-hero__main>:nth-child(4){animation-delay:.15s}
  .wp-panel{animation:wpUp .5s .25s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes wpUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Filtre çubuğu ---------- */
.wp-works{padding:clamp(26px,3vw,40px) 0 clamp(56px,6vw,90px)}
.wp-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-bottom:clamp(22px,2.4vw,32px)}
.wp-bar__label{margin:0;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--wp-ink)}
.wp-bar__label span{font-weight:400;color:var(--wp-muted)}
.wp-filters{display:flex;gap:8px}
.wp-chip{font:inherit;font-size:14.5px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--wp-line);background:rgba(255,254,251,.7);color:var(--wp-ink);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.wp-chip:hover{border-color:rgba(17,20,24,.3)}
.wp-chip[aria-pressed="true"]{background:#071D2B;border-color:#071D2B;color:#fff}
.wp-chip:focus-visible,.pc-more:focus-visible,.pc-go:focus-visible,.wp-btn:focus-visible,.wp-link:focus-visible{outline:3px solid var(--wp-accent);outline-offset:3px}
.wp-bar__jump{justify-self:end}

/* ---------- Proje grid ---------- */
.wp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.pc{grid-column:span var(--span);position:relative;display:grid;border-radius:22px;border:1px solid var(--wp-line);background:var(--wp-card);overflow:hidden;color:var(--wp-ink);transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.wp-grid.is-filtered .pc{grid-column:span 6}
.pc:hover{transform:translateY(-4px);border-color:rgba(17,20,24,.22);box-shadow:0 30px 60px -44px rgba(7,29,43,.45)}
.pc.pc-enter{opacity:0;transform:translateY(10px)}
.js .pc.reveal{transition:opacity .45s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 50ms),transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 50ms),border-color .4s,box-shadow .4s}
.js .pc.reveal.is-in:hover{transform:translateY(-4px)}
.pc[hidden]{display:none}

.pc--wide{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);grid-template-areas:"body shot" "detail detail"}
.pc--stack{grid-template-columns:1fr;grid-template-areas:"body" "shot" "detail"}
.wp-grid.is-filtered .pc--wide{grid-template-columns:1fr;grid-template-areas:"body" "shot" "detail"}
.pc-body{grid-area:body;position:relative;z-index:1;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,36px) clamp(22px,2.4vw,36px) 0}
.pc--wide .pc-body{padding-bottom:clamp(24px,2.4vw,36px)}
.pc-no{margin:0 0 clamp(14px,1.6vw,22px);font-size:13px;letter-spacing:.08em;color:var(--pc-muted,var(--wp-muted))}
.pc-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.6vw,42px);line-height:1;letter-spacing:-.045em;overflow-wrap:break-word;hyphens:manual}
.pc-meta{margin:10px 0 0;font-size:15px;letter-spacing:.02em;color:var(--pc-muted,var(--wp-muted))}
.pc-tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.pc-tags li{font-size:12.5px;padding:6px 11px;border-radius:8px;border:1px solid var(--pc-line,var(--wp-line));background:var(--pc-tag,rgba(255,255,255,.6))}
.pc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:auto;padding-top:clamp(22px,2.4vw,32px)}
.pc-go{display:inline-flex;align-items:center;gap:14px;min-height:48px;font-size:16px;font-weight:500;color:inherit}
.pc-go__ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--pc-btn,#071D2B);color:var(--pc-btn-ink,#fff);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pc-go__ico svg{width:18px;height:18px}
.pc-go:hover .pc-go__ico,.pc:hover .pc-go__ico{transform:translateX(4px)}
.pc-more{font:inherit;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;border-bottom:1px solid transparent;color:var(--pc-muted,var(--wp-muted));font-size:14.5px;cursor:pointer;transition:color .2s}
.pc-more:hover{color:inherit}
.pc-plus{width:15px;height:15px;transition:transform .3s}
.pc-more[aria-expanded="true"] .pc-plus{transform:rotate(45deg)}

.pc-shot{grid-area:shot;display:block;position:relative;padding:clamp(18px,2vw,28px) clamp(18px,2vw,30px) clamp(22px,2.4vw,34px);perspective:1400px}
.pc--wide .pc-shot{padding-left:0;display:flex;align-items:center}
.pc-browser{display:block;width:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 50px -30px rgba(7,29,43,.45),0 8px 18px -12px rgba(7,29,43,.25);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pc--wide .pc-browser{transform:rotateY(-8deg) rotateX(2deg);transform-origin:0 50%}
.pc-browser__bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#F1F0EC;border-bottom:1px solid #E4E2DC}
.pc-browser__bar i{width:8px;height:8px;border-radius:50%;background:#E2574C}
.pc-browser__bar i:nth-child(2){background:#E5B33A}.pc-browser__bar i:nth-child(3){background:#51B55C}
.pc-browser__bar em{margin-left:10px;font-style:normal;font-size:11px;color:#5A5E64;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pc-browser img{display:block;width:100%;height:auto}
.pc:hover .pc-browser{transform:scale(1.018)}
.pc--wide:hover .pc-browser{transform:rotateY(-4deg) rotateX(1deg) scale(1.018)}

.pc-detail{grid-area:detail;position:relative;z-index:1;margin:0 clamp(22px,2.4vw,36px) clamp(22px,2.4vw,32px);padding-top:20px;border-top:1px solid var(--pc-line,var(--wp-line))}
.pc-detail:not([hidden]){animation:wpUp .35s cubic-bezier(.2,.7,.2,1)}
.pc-detail dl,.wp-social dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0}
.pc--stack .pc-detail dl{grid-template-columns:1fr}
.wp-grid.is-filtered .pc-detail dl{grid-template-columns:1fr}
.pc-detail dt,.wp-social dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-accent,var(--wp-accent));margin-bottom:6px}
.pc-detail dd,.wp-social dd{margin:0;font-size:15px;line-height:1.55}

/* ---------- Marka temaları ---------- */
.pc--ice{background:linear-gradient(145deg,#EAF6FF,#DDEEFA 70%);border-color:rgba(0,103,160,.14);--pc-tag:rgba(255,255,255,.7);--pc-muted:#4F5B66;--pc-accent:#0067A0}
.pc--dark{background:linear-gradient(160deg,#0B1A26,#081722 60%,#11222E);color:#F3F5F7;border-color:rgba(255,255,255,.08);--pc-muted:#A7B0B8;--pc-line:rgba(255,255,255,.16);--pc-tag:rgba(255,255,255,.04);--pc-btn:#fff;--pc-btn-ink:#081722;--pc-accent:#9AA7FF}
.pc--navy{background:radial-gradient(120% 90% at 100% 0%,rgba(212,168,62,.14),transparent 55%),linear-gradient(160deg,#0B2238,#0A1B2C);color:#F3F5F7;border-color:rgba(212,168,62,.18);--pc-muted:#B5BCC4;--pc-line:rgba(212,168,62,.28);--pc-tag:rgba(212,168,62,.07);--pc-btn:#D4A83E;--pc-btn-ink:#0A1B2C;--pc-accent:#E5C06A}
.pc--light{background:linear-gradient(160deg,#FFFEFB,#F2F6FA);--pc-accent:#0067A0;--pc-btn:#0B3A63}
.pc--mint{background:linear-gradient(155deg,#F1F8F5,#E6F2EC);border-color:rgba(20,110,80,.14);--pc-muted:#4E5E57;--pc-accent:#17805C;--pc-btn:#0F5A43}
.pc--plum{background:linear-gradient(155deg,#F6F2FA,#EDE6F4);border-color:rgba(90,50,130,.12);--pc-muted:#5F566A;--pc-accent:#6A3E9A;--pc-btn:#3A2458}
.pc--graphite{background:linear-gradient(160deg,#16181C,#1E2126);color:#F2F3F5;border-color:rgba(255,255,255,.08);--pc-muted:#A3A7AE;--pc-line:rgba(255,255,255,.14);--pc-tag:rgba(255,255,255,.05);--pc-btn:#fff;--pc-btn-ink:#16181C;--pc-accent:#A5A0FF}
.pc--graphite.pc--wide{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}

.wp-empty{margin:24px 0 0;padding:30px;border:1px dashed var(--wp-line);border-radius:18px;text-align:center;color:var(--wp-muted)}
.wp-empty button{font:inherit;background:none;border:0;color:var(--wp-ink);text-decoration:underline;cursor:pointer;min-height:44px}

/* ---------- Sosyal medya vakası ---------- */
.wp-social{padding:0 0 clamp(56px,6vw,90px)}
.wp-social__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,60px);padding:clamp(26px,3vw,40px);border-radius:22px;background:var(--wp-card);border:1px solid var(--wp-line)}
.wp-social h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.045em;line-height:1}
.wp-social__lead{margin:10px 0 14px;color:var(--wp-muted)}
.wp-social dl{align-self:center}

/* ---------- Kapanış CTA ---------- */
.wp-end{background:#071D2B;color:#F4F1EB;padding:clamp(64px,8vw,120px) 0}
.wp-end .eyebrow{color:#AEB6BF}
.wp-end h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.4vw,84px);line-height:.95;letter-spacing:-.05em;max-width:14ch}
.wp-end p{max-width:520px;margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#B9C1C9}
.wp-btn--light{background:#F4F1EB;color:#071D2B}
.wp-btn--light:hover{background:#fff}
.wp-link--light{color:#F4F1EB}
.site-footer--bare .footer-grid{padding-top:clamp(40px,5vw,64px)}

/* ---------- WhatsApp butonu: bu sayfada sade ---------- */
body:has(.wp) .wa-ring,body:has(.wp) .wa-spark{display:none}
body:has(.wp) .wa-fab__core{animation:none!important;box-shadow:0 10px 24px -10px rgba(18,140,126,.65)}
body:has(.wp) .wa-wrap .wa-fab{width:52px;height:52px}

/* ---------- Duyarlı ---------- */
@media (max-width:1279px){
  .wp-hero__main{grid-column:1 / span 7}
  .wp-panel{grid-column:8 / span 5}
  .wp-bar{grid-template-columns:1fr auto}
  .wp-bar__jump{display:none}
}
@media (max-width:1023px){
  .wp-hero__main,.wp-panel{grid-column:1 / -1}
  .wp-panel{margin-top:36px;padding:28px 0 0;border-left:0;border-top:1px solid var(--wp-line)}
  .wp-bar{grid-template-columns:1fr}
  .wp-filters{overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter)}
  .wp-filters::-webkit-scrollbar{display:none}
  .pc,.wp-grid.is-filtered .pc{grid-column:span 6}
  .pc--wide{grid-template-columns:1fr;grid-template-areas:"body" "shot" "detail"}
  .pc--wide .pc-shot{padding-left:clamp(18px,2vw,30px)}
  .pc-browser,.pc--wide .pc-browser,.pc--wide:hover .pc-browser{transform:none}
  .pc[style*="--span:12"]{grid-column:1 / -1}
  .pc-detail dl{grid-template-columns:1fr}
  .wp-social__in{grid-template-columns:1fr}
  .wp-social dl{grid-template-columns:1fr}
}
@media (max-width:767px){
  .wp-bgmark{display:none}
  .wp-hero{padding-top:28px}
  .wp-title{font-size:clamp(40px,11.6vw,58px)}
  .wp-cta{flex-direction:column;align-items:stretch;gap:6px}
  .wp-btn{justify-content:center}
  .wp-link{justify-content:center}
  .wp-stats>div{padding:0 14px}
  .wp-stats dt{font-size:32px}
  .wp-grid{grid-template-columns:1fr}
  .pc,.wp-grid.is-filtered .pc,.pc[style*="--span:12"]{grid-column:1 / -1}
  .pc{border-radius:20px}
  .pc-body{padding:24px 20px 0}
  .pc-shot,.pc--wide .pc-shot{padding:18px 20px 22px}
  .pc-detail{margin:0 20px 22px}
  .pc-title{font-size:clamp(28px,8.4vw,36px)}
  .pc:hover{transform:none}
  .pc:hover .pc-browser{transform:none}
  .wp-end h2{font-size:clamp(38px,11vw,54px)}
  body:has(.wp) .wa-wrap{right:16px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .pc,.pc-browser,.pc-go__ico,.wp-btn svg,.wp-link svg{transition:none!important}
  .pc:hover,.pc:hover .pc-browser,.pc--wide:hover .pc-browser{transform:none}
  .pc--wide .pc-browser{transform:none}
}
/* düzeltmeler */
.pc-title,.pc-detail dd,.pc-tags li,.pc-go{color:inherit}
.pc--dark .pc-title,.pc--navy .pc-title,.pc--graphite .pc-title{color:#F5F6F8}
.wp-grid{align-items:stretch}
.pc--wide{grid-template-columns:minmax(0,.66fr) minmax(0,1fr)}
.pc--graphite.pc--wide{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
@media (max-width:1023px){.pc--wide,.pc--graphite.pc--wide{grid-template-columns:1fr}}
.pc--stack .pc-shot{margin-top:auto}
.pc--stack{grid-template-rows:auto 1fr auto}
.pc--stack .pc-shot{display:flex;align-items:flex-end}
.wp-end h2{color:#F4F1EB}
@media (min-width:1024px){
  .pc--wide{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
  .pc--wide .pc-shot{padding-right:0;overflow:visible}
  .pc--wide .pc-browser{width:112%;border-top-right-radius:0;border-bottom-right-radius:0}
  .pc--wide .pc-title{font-size:clamp(28px,2.3vw,38px)}
  .pc--graphite.pc--wide .pc-browser{width:104%}
}
@media (min-width:1024px){
  .pc--wide{grid-template-columns:minmax(0,.58fr) minmax(0,1fr)}
  .pc--wide .pc-body{padding-right:8px}
  .pc--wide .pc-browser{width:118%}
}
body:has(.wp) .wa-bubble{display:none}
body:has(.wp) .wa-wrap.has-msg .wa-fab__core{animation:none!important}
/* LCP: başlık ve açıklama opaklık animasyonu olmadan yalnızca hafif kayarak gelir */
@media (prefers-reduced-motion:no-preference){
  .wp-hero__main>.wp-title,.wp-hero__main>.wp-lead{animation-name:wpSlide}
}
@keyframes wpSlide{from{transform:translateY(12px)}to{transform:none}}
.pc{scroll-margin-top:calc(var(--header-h) + 20px)}
