/* Ezgi Karakülah Yıldız — portfolio
   Layout and type modelled on kysondana.com: huge tight Inter headings,
   near-white page, full-bleed imagery, dark "connect" footer. */

:root {
  --bg: #FCFCFC;
  --ink: #0A0A0B;
  --ink-2: #414141;
  --ink-3: #7A7A7A;
  --line: #E7E7E7;
  --night: #091C36;            /* logo navy */
  --night-2: #0F2647;
  --cream: #F3F1EC;
  --grad: linear-gradient(115deg, #FFFBE3 0%, #B4FFE4 22%, #BAEEFF 44%, #EBC5F5 73%, #D4B5E7 100%);
  --radius: 18px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --max: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: #BAEEFF; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }

/* ---------- type ---------- */
.display {
  font-weight: 500; letter-spacing: -0.065em; line-height: 0.98;
  font-size: clamp(44px, 7.2vw, 104px); margin: 0;
}
.h1 { font-weight: 500; letter-spacing: -0.06em; line-height: 1; font-size: clamp(40px, 6vw, 80px); margin: 0; }
.h2 { font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; font-size: clamp(32px, 4.4vw, 60px); margin: 0; }
.h3 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; font-size: clamp(24px, 2.6vw, 34px); margin: 0; }
.lead { font-size: clamp(19px, 2.1vw, 28px); line-height: 1.38; letter-spacing: -0.02em; color: var(--ink-2); margin: 0; }
.body { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.body p { margin: 0 0 1.1em; }
.body p:last-child { margin-bottom: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.muted { color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; background-origin: border-box;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-grad { background: var(--grad); color: var(--night); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px -12px rgba(102, 90, 180, .45); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 16px 34px -12px rgba(102, 90, 180, .55); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--night); transform: translateY(-2px); }
.btn-line { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(252,252,252,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand small { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.brand b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links .btn { padding: 10px 18px; color: #fff; }
.nav-links .nav-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); }
.nav-links .nav-icon:hover { background: rgba(10,10,11,.06); color: var(--ink); }
.nav-icon svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .nav-links a:not(.btn):not(.nav-icon) { display: none; } .brand small { display: none; } }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 5vw, 64px); }
.hero .display { max-width: 15ch; }
.hero .lead { max-width: 40ch; margin-top: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.6) brightness(.82); }

/* ---------- statement ---------- */
.statement { padding: clamp(80px, 12vw, 170px) 0; display: grid; gap: 28px; }
.statement .lead { max-width: 34ch; }

/* ---------- work ---------- */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 40px; }
.work { display: grid; gap: clamp(64px, 8vw, 120px); padding-bottom: clamp(80px, 10vw, 140px); }
.card { display: block; text-decoration: none; color: inherit; }
.panel {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 16 / 9.2; display: flex; align-items: center; justify-content: center;
}
.panel > img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.card:hover .panel > img { transform: translateY(-10px) scale(1.012); }
.card-meta { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: end; padding-top: 26px; }
.card-meta .eyebrow { margin-bottom: 10px; }
.card-meta .h3 { max-width: 26ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span { font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; }
@media (max-width: 760px) { .card-meta { grid-template-columns: 1fr; } }

/* panel compositions */
.p-commencis { background: radial-gradient(120% 90% at 20% 0%, #233B12 0%, #0B120A 55%, #050705 100%); }
.p-cosmo { background: radial-gradient(110% 100% at 80% 10%, #7A3BC9 0%, #2A1150 45%, #0D0620 100%); }
.p-ptt { background: linear-gradient(160deg, #DDF1F8 0%, #B9E2F0 100%); }
.p-jotform { background: linear-gradient(170deg, #F5D7DC 0%, #B6A2DA 55%, #6E4FA8 100%); }
.p-denizbank { background: linear-gradient(130deg, #00143F 22%, rgba(0,111,255,.34) 84%), #232324; }

.phones { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.2vw, 30px); height: 100%; padding: 6% 0; }
.phones img { height: 100%; width: auto; border-radius: clamp(14px, 2.4vw, 34px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.phones img:nth-child(2) { height: 108%; }
.panel .shot-wide { width: 84%; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(9,28,54,.55); margin-top: 9%; }
.panel .shot-duo { position: absolute; inset: 0; }
.shot-duo .a { position: absolute; left: 7%; top: 12%; width: 70%; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(40,20,80,.6); }
.shot-duo .b { position: absolute; right: 8%; top: 22%; width: 21%; filter: drop-shadow(0 30px 50px rgba(40,20,80,.5)); }

/* ---------- dark theme (about page) ---------- */
.theme-dark { --bg: #000; --ink: #fff; --ink-2: #B5B5B5; --ink-3: #7E7E7E; --line: #262626; }
.theme-dark .nav { background: rgba(0,0,0,.78); }
.theme-dark .nav-links .nav-icon:hover { background: rgba(255,255,255,.08); }
.theme-dark .footer { background: #0A0A0A; border-top: 1px solid var(--line); }
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #E6E6E6; }
.btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost:hover { border-color: #fff; }

/* ---------- about ---------- */
.ab-hero { padding: clamp(64px, 10vw, 150px) 0 clamp(48px, 6vw, 90px); }
.ab-hero .display { max-width: 19ch; }
.ab-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 10vw, 150px); }
.ab-intro .body { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; }
@media (max-width: 900px) { .ab-intro { grid-template-columns: 1fr; } }
.ab-xp { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ab-xp li { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.ab-xp li span:first-child { color: var(--ink-3); }
.ab-xp li span:last-child { text-align: right; color: var(--ink-2); }
@media (max-width: 640px) { .ab-xp li { grid-template-columns: 1fr; gap: 2px; } .ab-xp li span:last-child { text-align: left; } }
.ab-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.ab-statement { padding: clamp(100px, 13vw, 190px) 0 clamp(56px, 7vw, 96px); }
.ab-statement .h1 { max-width: 22ch; }
.ab-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: clamp(80px, 10vw, 140px); }
.ab-lists h4 { margin: 0 0 14px; font-size: 17px; font-weight: 500; color: var(--ink); }
.ab-lists ul { list-style: none; margin: 0; padding: 0; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.ab-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 40px 0 clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.ab-facts p { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { .ab-lists, .ab-facts { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- icon set: endless icon scroll + pixel-grid card ---------- */
.iconset { display: grid; grid-template-columns: 545fr 493fr; aspect-ratio: 1038 / 832; border-radius: var(--radius); overflow: hidden; }
.iconset-scroll { position: relative; overflow: hidden; background: #172555; border-radius: var(--radius); }
/* three identical seamless tiles; moving up by exactly one tile (a third of the track) loops with no gap */
.iconset-track { position: absolute; left: 0; right: 0; top: 0; animation: iconset 26s linear infinite; will-change: transform; }
.iconset-track img { display: block; width: 100%; height: auto; }
.iconset-scroll::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0D1D53 2%, rgba(23,37,85,0) 10%, rgba(23,37,85,0) 90%, #0D1D53 98%); }
@keyframes iconset { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -33.3333%, 0); } }
.iconset-grid { display: grid; place-items: center; background: transparent; }
.iconset-grid img { width: 65%; border-radius: 19.7%; }
@media (prefers-reduced-motion: reduce) { .iconset-track { animation: none; } }

/* ---------- footer / connect ---------- */
.cta-strip { background: var(--ink); color: #fff; }
.cta-strip a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 34px 0; }
.cta-strip .h2 { font-size: clamp(30px, 4.6vw, 60px); }
.cta-strip svg { width: clamp(30px, 4vw, 54px); height: auto; transition: transform .3s ease; }
.cta-strip a:hover svg { transform: translateY(6px); }
.theme-dark .cta-strip { color: #000; }
.footer { background: var(--night); color: #fff; padding: 32px 0; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: #7F8BA0; font-size: 14px; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.socials a:hover { background: rgba(255,255,255,.08); }
.socials svg { width: 18px; height: 18px; }
/* ---------- case study ---------- */
.case-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(36px, 5vw, 60px); }
.case-hero .eyebrow { margin-bottom: 22px; }
.case-hero .h1 { max-width: 17ch; }
.case-hero .lead { max-width: 44ch; margin-top: 28px; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.meta dt { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.meta dd { margin: 6px 0 0; font-size: 16px; font-weight: 500; }
@media (max-width: 760px) { .meta { grid-template-columns: repeat(2, 1fr); } }

.full { width: 100%; }
.bleed { border-radius: var(--radius); overflow: hidden; }
.block { padding: clamp(56px, 7vw, 100px) 0; }
.block-tight { padding: clamp(28px, 3.5vw, 48px) 0; }
.text-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.text-split .h2 { font-size: clamp(30px, 3.6vw, 48px); }
@media (max-width: 900px) { .text-split { grid-template-columns: 1fr; gap: 20px; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two h4 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 8px; }
.steps div { padding: 20px 18px 0 0; }
.steps b { display: block; font-weight: 600; margin-bottom: 6px; }
.steps span { color: var(--ink-3); font-size: 15px; line-height: 1.55; }
.steps i { font-style: normal; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 0 20px; } }
.quote { font-size: clamp(24px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.035em; font-weight: 500; margin: 0; max-width: 28ch; }
.list { margin: 0; padding-left: 1.1em; }
.list li { margin-bottom: .55em; }

.stage { border-radius: var(--radius); padding: clamp(28px, 5vw, 80px); }
.stage-dark { background: #0B0F0B; }
.stage-night { background: var(--night); }
.stage-cream { background: var(--cream); }
.stage-sky { background: #E3F3F9; }
.stage-lilac { background: #EEEAF8; }
.stage-navy { background: linear-gradient(130deg, #00143F 22%, #0B3B86 100%); }
.stage-purple { background: radial-gradient(110% 100% at 80% 0%, #6B34B5 0%, #22103F 60%, #0D0620 100%); }

.screens { display: grid; gap: clamp(14px, 2vw, 28px); align-items: start; }
.screens.c4 { grid-template-columns: repeat(4, 1fr); }
.screens.c3 { grid-template-columns: repeat(3, 1fr); }
.screens.c2 { grid-template-columns: repeat(2, 1fr); }
.screens.c5 { grid-template-columns: repeat(5, 1fr); }
.screens img { width: 100%; border-radius: clamp(14px, 2vw, 30px); }
.screens.flat img { border-radius: 12px; box-shadow: 0 30px 70px -30px rgba(9,28,54,.35); }
@media (max-width: 900px) { .screens.c5, .screens.c4, .screens.c3 { grid-template-columns: repeat(2, 1fr); } }
/* phone screens taller than the viewport, cropped to the top like the device frame */
.screens.crop img { aspect-ratio: 1179 / 2556; object-fit: cover; object-position: top; }
.screens figure { margin: 0; }
.screens figure .cap { text-align: center; }
.feature-cards { display: grid; gap: 16px; }
.feature-cards.c2 { grid-template-columns: repeat(2, 1fr); }
.feature-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.feature-cards div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px); }
.feature-cards h4 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.feature-cards p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) { .feature-cards.c2, .feature-cards.c3 { grid-template-columns: 1fr; } }
.cap { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.stage .cap { color: rgba(255,255,255,.55); }
.stage-cream .cap, .stage-sky .cap, .stage-lilac .cap { color: var(--ink-3); }

.next-section { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); padding: clamp(36px, 5vw, 64px) 0; }
.next { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; }
.next .panel { width: 100%; aspect-ratio: 16 / 10; }
.next-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.next-title { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; font-size: clamp(22px, 2.4vw, 32px); max-width: 24ch; }
.next-text .btn { margin-top: 10px; }
@media (max-width: 760px) { .next { grid-template-columns: 1fr; gap: 24px; } .next .panel { max-width: none; } }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}