:root { --bg:#080a0b; --ink:#f4f4f0; --muted:#949798; --line:rgba(255,255,255,.12); --acid:#b9ff00; --lilac:#a98df2; --orange:#ff4d20; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:"DM Sans",sans-serif; cursor:none; }
a { color:inherit; cursor:none; }
::selection { background:var(--acid); color:#050505; }
.cursor { position:fixed; top:0; left:0; z-index:999; width:34px; height:34px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-items:center; pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,background .25s; mix-blend-mode:difference; }
.cursor span { opacity:0; font:700 .58rem "Space Grotesk"; letter-spacing:.08em; }
.cursor.active { width:72px; height:72px; background:white; color:black; mix-blend-mode:normal; }
.cursor.active span { opacity:1; }
.topbar { position:fixed; inset:0 0 auto; z-index:50; height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 3.5vw; mix-blend-mode:difference; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-g { width:36px; height:36px; display:grid; place-items:center; border:2px solid white; border-radius:50%; font:700 1.4rem/1 "Space Grotesk"; }
.brand-name { font:700 .62rem/.88 "Space Grotesk"; }
nav { display:flex; gap:32px; }
nav a { position:relative; font-weight:600; text-decoration:none; }
nav a::after { content:""; position:absolute; left:0; bottom:-5px; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s; }
nav a:hover::after, nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }
.page-main { min-height:100vh; }
.page-hero { min-height:76vh; padding:160px max(3.5vw,28px) 70px; display:flex; flex-direction:column; justify-content:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; width:55vw; aspect-ratio:1; right:-18vw; top:-25vw; border-radius:50%; background:var(--hero-accent,var(--lilac)); filter:blur(100px); opacity:.18; }
.eyebrow { position:relative; margin-bottom:28px; color:var(--muted); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
/* /.72 idi: "küçük ekip." satirindaki ç ile alttaki "büyük odak." birbirine
   giriyordu. Turkce alt uzantili harfler icin .95 altina inilmiyor. */
.page-hero h1 { position:relative; margin:0; max-width:1200px; font:700 clamp(4.6rem,13vw,13rem)/.95 "Space Grotesk"; letter-spacing:-.055em; overflow-wrap:break-word; }
.page-hero h1 em { color:var(--acid); font-style:normal; }
.hero-bottom { position:relative; margin-top:56px; display:grid; grid-template-columns:1fr minmax(280px,520px); gap:60px; align-items:end; }
.hero-bottom p { margin:0; color:#c9cbcb; font-size:clamp(1.1rem,1.8vw,1.55rem); line-height:1.45; }
.hero-counter { color:var(--muted); font:600 .75rem "Space Grotesk"; letter-spacing:.14em; }
.content-section { padding:110px max(3.5vw,28px); border-bottom:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:58px; }
.section-head h2 { margin:0; font:700 clamp(3.5rem,7vw,7.5rem)/.82 "Space Grotesk"; letter-spacing:-.07em; }
.section-head span { color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.work-card { position:relative; min-height:410px; padding:28px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); text-decoration:none; background:var(--card,#161822); transition:transform .35s,border-color .35s; }
.work-card::before { content:""; position:absolute; width:300px; aspect-ratio:1; right:-90px; top:-100px; border-radius:50%; background:var(--accent,var(--lilac)); filter:blur(70px); opacity:.55; transition:transform .6s; }
.work-card::after { content:attr(data-letter); position:absolute; right:18px; bottom:-38px; color:rgba(255,255,255,.07); font:700 18rem/.8 "Space Grotesk"; letter-spacing:-.12em; }
.work-card:hover { transform:translateY(-7px); border-color:rgba(255,255,255,.38); }
.work-card:hover::before { transform:scale(1.25) translate(-20px,20px); }
.card-top,.card-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; }
.card-top { color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.card-bottom { align-items:end; }
.card-bottom h3 { margin:0; max-width:80%; font:600 clamp(2.5rem,4.5vw,5rem)/.85 "Space Grotesk"; letter-spacing:-.065em; }
.card-bottom b { font-size:2rem; transition:transform .3s; }
.work-card:hover .card-bottom b { transform:rotate(45deg); }
.work-card.full { grid-column:1/-1; min-height:360px; }
.client-strip { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.client-strip div,.client-strip a { min-height:115px; display:grid; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#c9cbcb; font:700 clamp(.85rem,1.3vw,1.2rem) "Space Grotesk"; text-decoration:none; transition:background .25s,color .25s; }
.client-strip a:hover { background:var(--ink); color:var(--bg); }
.studio-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; }
.studio-intro .number { color:var(--acid); font:700 clamp(7rem,15vw,16rem)/.7 "Space Grotesk"; letter-spacing:-.1em; }
.studio-copy p { margin:0 0 28px; font-size:clamp(1.25rem,2.3vw,2.25rem); line-height:1.35; letter-spacing:-.025em; }
.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:60px 1fr 1fr; gap:28px; padding:25px 8px; border-bottom:1px solid var(--line); align-items:center; }
.service-row small { color:var(--muted); }
.service-row strong { font:600 clamp(1.3rem,2.2vw,2.2rem) "Space Grotesk"; letter-spacing:-.04em; }
.service-row p { margin:0; color:#aeb0b0; line-height:1.5; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.process-card { min-height:240px; padding:26px; background:var(--bg); display:flex; flex-direction:column; justify-content:space-between; }
.process-card b { color:var(--lilac); font:600 .75rem "Space Grotesk"; }
.process-card h3 { margin:0 0 12px; font:600 1.55rem "Space Grotesk"; }
.process-card p { margin:0; color:var(--muted); line-height:1.5; }
.contact-hero { min-height:100vh; justify-content:center; }
.contact-hero h1 { font-size:clamp(3.8rem,9.4vw,9.4rem); line-height:.95; overflow-wrap:break-word; }
.contact-links { position:relative; display:flex; flex-wrap:wrap; gap:14px; margin-top:58px; }
.pill { display:inline-flex; align-items:center; gap:18px; padding:15px 17px 15px 22px; border:1px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:600; transition:background .25s,color .25s,transform .25s; }
.pill b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--acid); color:#050505; }
.pill:hover { background:var(--ink); color:var(--bg); transform:translateY(-3px); }
.contact-details { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:70px; }
.detail-card { padding:26px; border:1px solid var(--line); }
.detail-card small { display:block; margin-bottom:30px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.detail-card a,.detail-card p { margin:0; color:var(--ink); text-decoration:none; font-size:1.15rem; }
.project-hero { --project:#a98df2; min-height:88vh; background:linear-gradient(145deg,#080a0b 0 42%,color-mix(in srgb,var(--project) 18%,#080a0b) 100%); }
.project-hero h1 { max-width:none; font-size:clamp(4.8rem,13vw,13rem); }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.project-tags span { padding:8px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#dadbda; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.project-summary { display:grid; grid-template-columns:1fr 1.4fr; gap:10vw; align-items:start; }
.project-summary h2 { margin:0; font:700 clamp(3rem,6vw,6rem)/.86 "Space Grotesk"; letter-spacing:-.065em; }
.project-summary p { margin:0; font-size:clamp(1.3rem,2.2vw,2rem); line-height:1.42; letter-spacing:-.02em; }
.project-system { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.system-card { min-height:260px; padding:24px; border:1px solid var(--line); background:#0d0f10; }
.system-card small { color:var(--muted); }
.system-card h3 { margin:80px 0 12px; font:600 1.5rem "Space Grotesk"; }
.system-card p { margin:0; color:#aeb0b0; line-height:1.55; }
.media-section { overflow:hidden; }
.reels-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1180px; margin:0 auto; }
.reel-slot,.photo-slot { position:relative; margin:0; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,#0c0e0f,#141719); isolation:isolate; }
.reel-slot video,.photo-slot img { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
.reel-slot { aspect-ratio:9/16; padding:20px; display:flex; flex-direction:column; justify-content:space-between; }
.reel-slot::before,.photo-slot::before { content:""; position:absolute; width:75%; aspect-ratio:1; right:-28%; top:-18%; border-radius:50%; background:var(--project-accent,var(--lilac)); filter:blur(55px); opacity:.22; transition:transform .6s,opacity .6s; }
.reel-slot:hover::before,.photo-slot:hover::before { transform:scale(1.3) translate(-8%,8%); opacity:.38; }
.media-gridlines { position:absolute; inset:0; z-index:-1; opacity:.28; background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.reel-slot>span,.photo-slot>span { position:relative; color:#c7c9c8; font:600 .67rem "Space Grotesk"; letter-spacing:.14em; }
.reel-slot>b { position:relative; align-self:center; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--project-accent,var(--acid)); color:#070809; font-size:1rem; box-shadow:0 0 0 12px rgba(255,255,255,.06); transition:transform .3s; }
.reel-slot:hover>b { transform:scale(1.1) rotate(5deg); }
.reel-slot figcaption,.photo-slot figcaption { position:relative; font:600 clamp(1.15rem,1.7vw,1.6rem) "Space Grotesk"; letter-spacing:-.035em; }
.reel-slot figcaption small,.photo-slot figcaption small { display:block; margin-top:6px; color:var(--muted); font:500 .66rem "DM Sans"; letter-spacing:.08em; text-transform:uppercase; }
.photo-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(190px,22vw); gap:14px; }
.photo-slot { padding:20px; display:flex; flex-direction:column; justify-content:space-between; }
.photo-slot:nth-child(1) { grid-column:span 7; grid-row:span 2; }
.photo-slot:nth-child(2) { grid-column:span 5; }
.photo-slot:nth-child(3) { grid-column:span 5; }
.photo-slot:nth-child(4) { grid-column:span 4; }
.photo-slot:nth-child(5) { grid-column:span 4; }
.photo-slot:nth-child(6) { grid-column:span 4; }
.photo-slot figcaption { align-self:flex-end; width:100%; }
.next-project { display:flex; justify-content:space-between; align-items:center; min-height:220px; padding:50px max(3.5vw,28px); text-decoration:none; background:var(--acid); color:#071000; }
.next-project span { font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; }
.next-project strong { font:700 clamp(2.8rem,6vw,6rem)/.8 "Space Grotesk"; letter-spacing:-.06em; }
.next-project b { font-size:3rem; }
.page-footer { display:flex; justify-content:space-between; gap:20px; padding:28px max(3.5vw,28px); color:var(--muted); font-size:.76rem; }
.page-footer a { color:var(--ink); text-decoration:none; }
.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@media(max-width:800px){
  body,a { cursor:auto; } .cursor{display:none}.topbar{height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 20px 0}.brand-name{display:none}nav{gap:18px}nav a{font-size:.82rem}
  .page-hero{min-height:68vh;padding:calc(130px + env(safe-area-inset-top)) 20px 55px}.page-hero h1{font-size:clamp(4.1rem,22vw,8rem)}.hero-bottom{grid-template-columns:1fr;gap:22px}.hero-counter{order:2}
  .content-section{padding:78px 20px}.section-head{align-items:flex-start;flex-direction:column}.work-grid{grid-template-columns:1fr}.work-card,.work-card.full{grid-column:auto;min-height:330px}.client-strip{grid-template-columns:repeat(2,1fr)}
  .studio-intro,.project-summary{grid-template-columns:1fr;gap:50px}.service-row{grid-template-columns:38px 1fr}.service-row p{grid-column:2}.process-grid{grid-template-columns:1fr 1fr}.contact-details{grid-template-columns:1fr}.contact-hero h1{font-size:clamp(3.6rem,17vw,6rem)}
  .project-system{grid-template-columns:1fr}.system-card{min-height:220px}.reels-grid{grid-template-columns:repeat(3,78vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px}.reel-slot{scroll-snap-align:start}.photo-grid{grid-template-columns:1fr;grid-auto-rows:auto}.photo-slot,.photo-slot:nth-child(n){grid-column:auto;grid-row:auto;min-height:68vw}.photo-slot:nth-child(1){min-height:105vw}.next-project{align-items:flex-start;flex-direction:column;gap:24px}.page-footer{flex-direction:column;padding-bottom:max(20px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(hover:none) and (pointer:coarse){body,a{cursor:auto!important}.cursor{display:none!important}}


/* ==========================================================================
   TELEFON ADIMI — 560px
   UI3'un kendi CSS'inde 800px ALTINDA tek bir kural yoktu: 320px telefon ile
   799px tablet birebir ayni duzeni aliyordu. Deger keyfi degil —
   assets/portfolio-grid.css zaten 560'i kullaniyor, olcek tutarli kalsin.
   ========================================================================== */
@media (max-width: 560px) {
  /* Iki sutunlu kalan izgaralar tek sutuna. .process-grid 320px'de iki sutunda
     240px yuksekliginde kartlar tasiyordu. */
  .process-grid { grid-template-columns: 1fr; }
  .process-card { min-height: 0; padding-bottom: 28px; }
  .client-strip { grid-template-columns: repeat(2, 1fr); }
  .client-strip a { min-height: 88px; }
  .service-row { grid-template-columns: 1fr; gap: 10px; }

  /* Kart arkasindaki dev harf 288px sabitti ve hicbir kirilma noktasinda
     kuculmuyordu; 330px yuksekligindeki karti eziyordu. */
  .work-card::after { font-size: clamp(6rem, 34vw, 11rem); bottom: -18px; right: 12px; }
  .work-card { min-height: 280px; }
  .card-bottom b { font-size: 1.5rem; }

  .next-project { min-height: 150px; }
  .next-project b { font-size: clamp(1.6rem, 9vw, 2.4rem); }

  /* Kaydirma seridi: 3 x 78vw = 234vw. Kaydirilabildigi belli olsun diye
     son karti yariya kadar gosteriyoruz. */
  .reels-grid { grid-template-columns: repeat(3, 82vw); }

  /* Dokunma hedefleri: taban 13px'lik satir ici baglantilar ~12x16px'di. */
  .page-footer a,
  .detail-card a { display: inline-block; padding: 10px 2px; min-height: 44px; }

  /* Navigasyon ve marka rozeti: style.css'teki ayni duzeltmenin bu dosyadaki
     ikizi. isler/studio/iletisim/proje sayfalari style.css'i yuklemiyor. */
  nav a { padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; }
  nav { gap: 10px; }
  .brand-g { width: 44px; height: 44px; font-size: 1.5rem; }
}

/* Dokunmali cihazda :hover ile ortaya cikan tek ipucu ulasilamaz kaliyordu. */
@media (hover: none), (pointer: coarse) {
  .work-card .card-bottom b { transform: rotate(45deg); }
  .client-strip a { text-decoration: underline; text-underline-offset: 4px; }
}

/* Klavye kullanicisi icin gorunur odak — UI3'te hic :focus-visible yoktu. */
:focus-visible { outline: 2px solid #b9ff00; outline-offset: 3px; }

/* Hizmet satirlari artik detay sayfasina giden baglanti. Gorsel olarak satir
   duzeni aynen korunuyor; yalniz tiklanabilir oldugu belli olsun diye ok ve
   hover durumu eklendi. */
a.service-row { color:inherit; text-decoration:none; position:relative; transition:background .3s, padding .3s; }
a.service-row::after { content:"↗"; position:absolute; right:10px; opacity:0; transition:opacity .3s, transform .3s; transform:translateX(-6px); }
a.service-row:hover, a.service-row:focus-visible { background:rgba(255,255,255,.04); }
a.service-row:hover::after, a.service-row:focus-visible::after { opacity:.7; transform:none; }
a.service-row:focus-visible { outline:2px solid var(--acid); outline-offset:-2px; }

/* KnowledgeStudio: shared content, native Atölye presentation. */
.knowledge-page .ks-hero{min-height:65vh}
.knowledge-page .ks-hero h1{font-family:"Space Grotesk","DM Sans",sans-serif;font-size:clamp(3.3rem,9vw,9rem);line-height:1.04;max-width:1100px}
.knowledge-page .ks-hero .hero-bottom{margin-top:36px}
.knowledge-page .ks-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:7vw;align-items:start}
.ks-index{position:sticky;top:100px;display:flex;flex-direction:column;gap:6px}
.ks-index a{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.4}
.ks-index a span{color:var(--acid);font-family:"Space Grotesk",sans-serif;font-size:.75rem}
.ks-content{min-width:0}
.ks-group{margin-bottom:64px}.ks-group:last-child{margin-bottom:0}
.ks-group h2{font:600 clamp(1.7rem,3vw,2.8rem)/1.2 "Space Grotesk",sans-serif;letter-spacing:-.035em;margin:0 0 24px;scroll-margin-top:100px}
.ks-group h2>span{font-size:.75rem;letter-spacing:.06em;color:var(--acid);vertical-align:middle;margin-right:14px}
.ks-question{border-bottom:1px solid var(--line)}
.ks-question summary{display:flex;justify-content:space-between;align-items:start;gap:24px;list-style:none;padding:24px 0;font:500 clamp(1.05rem,1.7vw,1.4rem)/1.45 "DM Sans",sans-serif;cursor:pointer}
.ks-question summary::-webkit-details-marker{display:none}
.ks-plus{flex:none;color:var(--acid);font:400 1.6rem/1 "Space Grotesk",sans-serif;transition:transform .2s}
.ks-question[open] .ks-plus{transform:rotate(45deg)}
.ks-question[open] summary{color:var(--acid)}
.ks-question>p{max-width:760px;margin:0 48px 28px 0;font-size:1rem;line-height:1.85;color:#c5c8c9;overflow-wrap:anywhere}
.ks-alphabet{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:40px}
.ks-alphabet a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;font-family:"Space Grotesk",sans-serif;border:1px solid var(--line);border-radius:50%;color:var(--acid)}
.ks-alphabet a:hover{background:var(--acid);color:var(--bg)}
.ks-letter-group{display:grid;grid-template-columns:90px minmax(0,1fr);gap:5vw;padding:32px 0;border-bottom:1px solid var(--line)}
.ks-letter-group>h2{font:600 4.5rem/1 "Space Grotesk",sans-serif;color:var(--lilac);margin:0;scroll-margin-top:100px}
.ks-letter-group>dl{margin:0;min-width:0}
.ks-term{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2fr);gap:36px;padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px;overflow-wrap:anywhere}
.ks-term:first-child{padding-top:0}.ks-term:last-child{border-bottom:0}
.ks-term dt{font:600 clamp(1.2rem,2vw,1.8rem)/1.3 "Space Grotesk",sans-serif;letter-spacing:-.025em}
.ks-term dd{margin:0}.ks-term dd p{margin:0;color:#c5c8c9;font-size:1rem;line-height:1.8}
.ks-term dd a,.ks-brand a{display:inline-flex;gap:16px;align-items:center;min-height:44px;margin-top:12px;color:var(--acid);font-size:.85rem;text-underline-offset:6px}
.ks-sector-intro{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:6vw;align-items:start}
.ks-sector-intro h2,.ks-approach h2,.ks-brands .section-head h2{font:600 clamp(2rem,4vw,4rem)/1.1 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin:0}
.ks-sector-intro>p{margin:0;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.75;color:#c5c8c9}
.ks-approach ol{list-style:none;counter-reset:approach;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:0;margin:40px 0 0}
.ks-approach li{counter-increment:approach;display:flex;gap:22px;padding:28px;border:1px solid var(--line);font-size:1rem;line-height:1.8;overflow-wrap:anywhere}
.ks-approach li::before{content:counter(approach,decimal-leading-zero);flex-shrink:0;white-space:nowrap;font:500 .8rem/2 "Space Grotesk",sans-serif;color:var(--acid)}
.ks-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ks-brand{border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.ks-brand>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* Marka sayfasindaki musteri sozu ve proje notu.
   UI1'deki ayrimin UI3 karsiligi: referans TIRNAK ICINDE + rozet, proje notu
   tirnaksiz. Ikisi ayni kutuda gosterilseydi Grovia'nin kendi notu musteri
   sozu gibi okunurdu. */
.ks-referans-listesi { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.ks-referans { margin:0; padding:28px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.ks-referans blockquote { margin:0; font:400 1.05rem/1.6 inherit; color:#e8eaea; }
.ks-referans blockquote::before { content:"\201C"; }
.ks-referans blockquote::after { content:"\201D"; }
.ks-referans figcaption { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; color:var(--muted); font-size:.85rem; }
.ks-referans-rozet { border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.ks-proje-notu small { color:var(--acid); }

/* /atolye/hizmetler — kapsam kartlari. Her hizmet kendi renginde. */
.ks-hizmet { border-top:3px solid var(--hizmet-renk,var(--acid)); }
.ks-hizmet .ks-brand-copy h3 { color:#fff; }
.ks-hizmet-kapsam { list-style:none; margin:20px 0 4px; padding:0; display:grid; gap:9px; }
.ks-hizmet-kapsam li { position:relative; padding-left:22px; color:#c9cbcb; line-height:1.5; font-size:.95rem; }
.ks-hizmet-kapsam li::before { content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--hizmet-renk,var(--acid)); }
.ks-hizmet .ks-brand-copy a { color:var(--hizmet-renk,var(--acid)); }
/* Listede de ayni renk kodu: satirin uzerine gelince hizmetin rengi cikar. */
a.service-row:hover strong, a.service-row:focus-visible strong { color:var(--hizmet-renk,inherit); }

/* Kapaksiz marka: gorselle ayni olcu, marka renginde monogram. */
.ks-brand-monogram{display:grid;place-items:center;width:100%;aspect-ratio:4/3;background:linear-gradient(145deg,#111,#1d1d1d 60%,#0c0c0c);color:var(--accent,var(--acid));font:700 clamp(3rem,7vw,6rem)/1 "Space Grotesk",sans-serif;letter-spacing:-.06em;text-transform:uppercase}
.ks-brand-copy{padding:24px;display:flex;flex-direction:column;flex:1;overflow-wrap:anywhere}
.ks-brand h3{font:600 1.65rem/1.2 "Space Grotesk",sans-serif;margin:0 0 20px;letter-spacing:-.025em}
.ks-brand p{font-size:.95rem;line-height:1.75;color:#c5c8c9;margin:0 0 16px}
.ks-brand .ks-brand-services{font-size:.78rem;color:var(--lilac)}
.ks-brand a{margin-top:auto;align-self:flex-start}
.ks-resources{display:flex;flex-wrap:wrap;gap:12px;padding:36px max(3.5vw,28px);border-bottom:1px solid var(--line)}
.ks-resources a{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:-.01em;padding:12px 22px;border:1px solid var(--line);border-radius:999px;line-height:1.4;text-decoration:none;transition:border-color .25s,color .25s,background .25s}
.ks-resources a:hover{color:#080a0b;background:var(--acid);border-color:var(--acid)}
.knowledge-page :is(a,summary):focus-visible,.ks-resources a:focus-visible{outline:2px solid var(--acid);outline-offset:5px}
@media(max-width:899.98px){.knowledge-page .ks-layout{grid-template-columns:1fr;gap:48px}.ks-index{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}.ks-index a{padding:12px;gap:16px;border:1px solid var(--line)}.ks-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ks-sector-intro{grid-template-columns:1fr;gap:28px}.ks-term{gap:24px}}
@media(max-width:639.98px){.knowledge-page .ks-hero{min-height:55vh}.knowledge-page .ks-hero h1{font-size:clamp(2.8rem,11vw,4.4rem)}.ks-question summary{gap:16px;padding:22px 0}.ks-question>p{margin-right:0}.ks-group h2>span{display:block;margin:0 0 12px}.ks-letter-group{grid-template-columns:1fr;gap:28px}.ks-letter-group>h2{font-size:3.5rem}.ks-term{grid-template-columns:1fr;gap:12px}.ks-approach ol,.ks-brand-grid{grid-template-columns:1fr}.ks-approach li{padding:22px}.ks-resources{padding:28px 18px}.ks-resources a{font-size:.8rem}.ks-brand-copy{padding:22px}}
@media(prefers-reduced-motion:reduce){.ks-plus{transition:none}}

/*
  MENU 7 OGE. 2026-09-14'te "hizmetler" eklendi ve 390px'de son oge ("iletişim")
  ekranin DISINA tasti: olculdu, sag kenari 443px, gorunur genislik 390px.
  Sayfa yatay kaymadigi icin oge sessizce ulasilamaz hale geliyordu.
  Cozum: dar ekranda menu kendi icinde yatay kayar (sayfa degil) ve aralik/punto
  kisilir. Kaydirma cubugu gizli; kenardaki solma kaydirilabilecegini gosterir.
*/
@media(max-width:800px){
  .topbar nav[aria-label="Ana menü"]{
    display:flex; gap:14px; flex:1; min-width:0; margin-left:14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    justify-content:flex-end;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 4px),#000 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 4px),#000 100%);
  }
  .topbar nav[aria-label="Ana menü"]::-webkit-scrollbar{display:none}
  .topbar nav[aria-label="Ana menü"] a{flex:0 0 auto; font-size:.78rem}
}
@media(max-width:420px){
  .topbar nav[aria-label="Ana menü"]{gap:12px}
  .topbar nav[aria-label="Ana menü"] a{font-size:.75rem}
}