@charset "UTF-8";

/* Yerel, açık lisanslı font; harici bir font servisine ihtiyaç duymaz. */
@font-face {
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-variable.woff2") format("woff2")
}

/* 1. Atölyenin renkleri: yalnız koyu tema ve portakal turuncusu. */
:root {
  color-scheme:dark;
  --paper:#121211;
  --surface:#191918;
  --ink:#f5f4f0;
  --muted:#b3b2ad;
  --line:#353530;
  --accent:#ff852e;
  --accent-hover:#ffa158;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Inter",Arial,Helvetica,sans-serif
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:28px }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
a:focus-visible { outline:3px solid var(--accent); outline-offset:6px }
::selection { color:var(--paper); background:var(--accent) }
.skip-link { position:fixed; top:12px; left:12px; z-index:20; padding:14px 20px; border-radius:6px; background:var(--accent); color:var(--paper); font-weight:700; transform:translateY(-160%) }
.skip-link:focus { transform:translateY(0) }
.page-shell { max-width:1536px; margin:auto; padding:0 4.5% }

/* 2. Rüzgâr logosu ve menü. */
.site-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line) }
.brand { display:inline-flex; align-items:center; gap:13px; white-space:nowrap }
.brand-mark { width:39px; height:39px; color:var(--accent); flex-shrink:0 }
.brand-name { display:block; font-size:26px; font-weight:800; letter-spacing:-1px; line-height:1.05 }
.brand-subtitle { display:block; font-size:12px; font-weight:500; margin-top:6px; letter-spacing:0 }
.brand-dot { color:var(--accent) }
.main-nav { display:flex; align-items:center; gap:40px; font-size:14px; font-weight:650 }
.main-nav>a { padding:14px 0; transition:color .18s }
.main-nav>a:hover { color:var(--accent) }
.main-nav .nav-cta { display:flex; align-items:center; gap:28px; border:1px solid #b4b3ab; border-radius:99px; padding:14px 24px }
.nav-cta>span { font-family:Arial,Helvetica,sans-serif; font-size:22px; font-weight:400; line-height:1 }

/* 3. Büyük başlık, özgün rüzgâr çizimi ve merak etiketi. */
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px; padding:20px 0 32px }
.hero-copy { position:relative; z-index:1; min-width:0 }
.hero .eyebrow { display:none }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:1.8px; line-height:1.7; margin:0 0 24px }
h1 { font-size:clamp(70px,8.7vw,126px); font-weight:850; line-height:.88; letter-spacing:-.045em; margin:0 0 22px }
.hero-accent { color:var(--accent); white-space:nowrap }
.serif-word { font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.055em }
.hero-description { max-width:540px; font-size:20px; color:var(--muted); line-height:1.5; margin:0 0 20px }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:48px; padding:18px 30px; border-radius:99px; font-size:16px; font-weight:750; transition:background .18s,transform .18s }
.button>span { font-family:Arial,Helvetica,sans-serif; font-size:24px; font-weight:400; line-height:1 }
.button-dark,.button-light { background:var(--accent); color:#17130e }
.button:hover { background:var(--accent-hover); transform:translateY(-2px) }
.hero-note { color:var(--muted); font-size:12px; line-height:1.7; margin:16px 0 0 }
.hero-note>span { font-size:22px; line-height:1; margin-right:9px }
.hero-art { position:relative; min-width:0; height:540px }
.wind-art { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.08); mix-blend-mode:lighten }
.art-label { position:absolute; display:flex; align-items:center; gap:11px; padding:14px 18px; border:1px solid #6b5739; border-radius:99px; background:#1b1915; font-size:13px; font-weight:750; white-space:nowrap }
.label-top { top:7%; left:12%; transform:rotate(-8deg) }
.label-dot { width:10px; height:10px; border-radius:50%; background:var(--accent) }
.idea-card { position:absolute; right:1%; bottom:12%; display:flex; align-items:center; gap:15px; padding:18px 21px; border:1px solid #6b604e; border-radius:17px; background:#201e19; transform:rotate(8deg); font-size:15px; line-height:1.65 }
.idea-card strong { font-weight:800 }
.idea-icon { color:var(--accent); font-size:33px; line-height:1; padding-right:6px }
.art-caption { position:absolute; bottom:3%; left:0; right:0; text-align:center; font-size:10px; letter-spacing:2.4px; color:var(--muted) }
.manifesto-strip { display:flex; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; font-size:18px; letter-spacing:-.4px }
.strip-star { font-size:28px; color:var(--accent); line-height:1 }

/* 4. Projeler. Resimler gönderilen görselin özgün piksellerini kullanır.
   Bir projeye kendi resmini eklemek için project-image-* sınıfını kaldırıp
   img etiketine project-image-own sınıfını ve yeni src adresini yazabilirsin. */
.section-space { padding:75px 0 }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; margin-bottom:25px }
.section-kicker { font-size:10px; font-weight:700; line-height:1.8; letter-spacing:1.9px; margin:0 0 18px }
.section-number { color:var(--muted); font-weight:400; letter-spacing:0; margin-right:12px }
h2 { font-size:clamp(34px,3.5vw,50px); font-weight:800; letter-spacing:-2.2px; line-height:1.15; margin:0 }
.heading-note { color:var(--muted); font-size:13px; line-height:1.8; max-width:410px; margin:0 0 3px }
.explore { padding-top:34px; padding-bottom:60px }
.explore .section-kicker { display:none }
.explore-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.explore-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#141615 }
.project-art { position:relative; overflow:hidden; aspect-ratio:616/226; background:#0c1111 }
.project-image { display:block; position:absolute; top:0; width:357.4675%; max-width:none; height:auto; transform:translateY(-8.0078%) }
.project-image-space { left:-16.8831% }
.project-image-map { left:-121.2662% }
.project-image-door { left:-226.9481% }
.project-image-own { position:static; width:100%; height:100%; object-fit:cover; transform:none }
.project-copy { padding:21px 25px 25px }
.card-category { min-height:22px; display:flex; align-items:center; color:var(--muted); font-size:9px; font-weight:650; letter-spacing:1.5px; margin:0 0 9px }
h3 { font-weight:800; letter-spacing:-1px }
.explore-card h3 { font-size:27px; line-height:1.2; margin:0 0 13px }
.project-copy>p:last-child { color:var(--muted); font-size:13px; line-height:1.8; margin:0 }
.project-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:12px; color:var(--accent); font-size:13px; font-weight:700 }
.project-link:hover { color:var(--accent-hover) }
.draft-badge { display:inline-flex; align-items:center; border:1px solid #655338; border-radius:99px; padding:4px 9px; color:#ffd0a8; font-size:8px; line-height:1.5; letter-spacing:.6px }

/* 5. Hikâye ve geliştirme süreci: sevilen metinler aynı kalır. */
.about { display:grid; grid-template-columns:1fr 3fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.about>.section-kicker { padding-top:8px }
.about-body h2 { margin-bottom:28px }
.muted { color:#92938b }
.about-text { display:grid; grid-template-columns:1fr 1fr; gap:20px 35px }
.about-text p { color:var(--muted); font-size:14px; line-height:1.9; margin:0 }
.handwritten { grid-column:1/-1; justify-self:end; color:var(--accent); font-family:var(--serif); font-style:italic; font-size:24px; transform:rotate(-2deg); margin-top:10px }
.approach .section-heading { margin-bottom:35px }
.principle-list { border-top:1px solid var(--line) }
.principle { display:grid; grid-template-columns:60px 1fr 1.35fr 45px; align-items:center; gap:25px; border-bottom:1px solid var(--line); padding:30px 0 }
.principle-index { font-size:12px; color:var(--muted) }
.principle h3 { font-size:29px; margin:0 }
.principle p { font-size:14px; line-height:1.8; color:var(--muted); max-width:380px; margin:0 }
.principle-symbol { font-size:38px; color:var(--accent); justify-self:end }

/* 6. Sayfa sonu. */
.closing { position:relative; text-align:center; padding:60px 30px; background:#201a14; border:1px solid #4f3926; border-radius:17px; overflow:hidden }
.closing>.eyebrow { color:#e1b595; font-size:9px; margin-bottom:18px }
.closing h2 { font-size:clamp(38px,4.6vw,65px); line-height:1.12 }
.closing .serif-word { color:var(--accent) }
.closing>p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.8; margin:23px 0 27px }
.closing-star { display:none }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:135px }
.footer-brand .brand-name { font-size:23px }
.site-footer p,.site-footer>span { font-size:10px; color:var(--muted); line-height:1.8 }

@media(min-width:1536px) { .page-shell { padding:0 69px } }
@media(max-width:1100px) {
  .main-nav { gap:25px }
  h1 { font-size:8.5vw; line-height:.94 }
  .hero-art { height:auto; aspect-ratio:1 }
  .wind-art { transform:none }
  .hero-description { font-size:15px }
  .art-label { padding:11px 14px; font-size:10px }
  .idea-card { font-size:12px; padding:13px 15px; gap:10px }
  .idea-icon { font-size:28px }
  .art-caption { font-size:8px; letter-spacing:1.5px }
  .project-copy { padding:18px }
  .explore-card h3 { font-size:22px }
  .principle { grid-template-columns:35px 1fr 1.4fr 35px }
}

/* Telefon ve tablet: içerik tek sütuna iner; menü erişilebilir kalır. */
@media(max-width:760px) {
  .page-shell { padding:0 6% }
  .site-header { min-height:89px; gap:14px }
  .brand { gap:9px }
  .brand-mark { width:31px; height:31px }
  .brand-name { font-size:22px }
  .brand-subtitle { font-size:10px; margin-top:5px }
  .main-nav { gap:0 }
  .main-nav>a:first-child,.main-nav>a:nth-child(2) { display:none }
  .main-nav .nav-cta { font-size:11px; gap:12px; padding:11px 14px }
  .nav-cta>span { font-size:19px }
  .hero { grid-template-columns:1fr; gap:8px; padding:35px 0 22px }
  h1 { font-size:clamp(55px,12.8vw,96px); letter-spacing:-.05em; line-height:.98; margin-bottom:23px }
  .hero-description { max-width:520px; font-size:15px; line-height:1.8; margin-bottom:23px }
  .button { font-size:14px; padding:16px 23px; gap:37px }
  .hero-note { font-size:10px; margin-top:16px }
  .hero-art { width:min(100%,470px); height:auto; aspect-ratio:1; justify-self:center }
  .art-label { font-size:11px; padding:11px 14px }
  .label-top { top:6%; left:10% }
  .idea-card { font-size:12px; right:1%; bottom:12%; padding:13px 15px; gap:12px }
  .art-caption { font-size:7px; letter-spacing:1.5px; bottom:2% }
  .manifesto-strip { display:grid; grid-template-columns:1fr auto 1fr auto 1.2fr; gap:10px; text-align:center; font-size:12px; line-height:1.6; padding:20px 0 }
  .strip-star { font-size:22px }
  .last-star { display:none }
  .section-space { padding:52px 0 }
  .section-heading { display:block; margin-bottom:23px }
  .heading-note { font-size:12px; margin-top:16px }
  h2 { font-size:35px; letter-spacing:-1.6px }
  .explore { padding-top:30px; padding-bottom:45px }
  .explore-grid { grid-template-columns:1fr; gap:18px }
  .project-copy { padding:20px 23px 24px }
  .explore-card h3 { font-size:26px }
  .project-copy>p:last-child { font-size:13px; max-width:520px }
  .about { grid-template-columns:1fr }
  .about>.section-kicker { padding-top:0 }
  .about-text { grid-template-columns:1fr; gap:16px }
  .about-text p { font-size:14px }
  .handwritten { justify-self:start; font-size:21px; line-height:1.6 }
  .principle { grid-template-columns:22px 1fr 28px; gap:12px; padding:25px 0 }
  .principle h3 { font-size:26px }
  .principle p { grid-column:2; grid-row:2; font-size:13px }
  .principle-symbol { grid-column:3; grid-row:1; font-size:30px }
  .principle-index { font-size:10px }
  .closing { padding:45px 18px; border-radius:13px }
  .closing h2 { font-size:37px }
  .closing>p:not(.eyebrow) { font-size:12px; max-width:300px; margin:23px auto }
  .site-footer { flex-wrap:wrap; gap:10px; padding:30px 0 }
  .footer-brand { width:100% }
  .site-footer p,.site-footer>span { font-size:9px; margin:5px 0 }
}
@media(max-width:370px) {
  .brand-name { font-size:20px }
  .brand-subtitle { font-size:9px }
  .brand-mark { width:28px; height:28px }
  .main-nav .nav-cta { gap:8px; padding:10px; font-size:10px }
  h1 { font-size:12.5vw }
  .idea-card { font-size:10px; padding:11px; gap:7px }
  .art-label { font-size:9px; padding:10px 12px }
  .manifesto-strip { font-size:10px; gap:6px }
  .strip-star { font-size:18px }
  h2 { font-size:31px }
  .closing h2 { font-size:31px }
  .site-footer p,.site-footer>span { width:100% }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .button,.main-nav>a { transition:none }
  .button:hover { transform:none }
}