/* Studio site — responsive layer. Visual language unchanged: same colours, borders,
   radii and type scale members; only column counts, gutters and scale steps adapt. */
:root{--gutter-page-lg:clamp(20px,5vw,64px)}
img,svg{max-width:100%}
body{background:var(--kar-cream);overflow-x:hidden}

/* Type steps down the brand scale (no off-scale sizes invented). */
@media (max-width:1000px){:root{--fs-64:48px}}
@media (max-width:700px){:root{--fs-64:32px;--fs-48:32px}}
@media (max-width:480px){:root{--fs-32:24px;--fs-24:20px}}

/* Header */
.kar-nav-desktop{display:flex;align-items:center;gap:var(--sp-6)}
.kar-nav-toggle{display:none}
.kar-nav-panel{display:none}
@media (max-width:820px){
  .kar-nav-desktop{display:none}
  .kar-nav-toggle{display:grid}
  .kar-nav-panel{display:flex}
}

/* Hero */
.kar-mascot{position:absolute;right:calc(var(--sp-6) + 180px);bottom:-18px;height:clamp(300px,38vw,560px);width:auto;max-width:44%;object-fit:contain;object-position:bottom right;transform:scaleX(-1) rotate(-5deg);transform-origin:bottom center;pointer-events:none;z-index:2}
@media (max-width:900px){.kar-hero{display:flex;flex-direction:column}.kar-hero>div{order:1}.kar-mascot{order:2;position:static!important;display:block;align-self:center;margin:calc(-1 * var(--sp-4)) auto -14px;height:clamp(230px,40vw,330px);max-width:70%;object-position:bottom center;transform:scaleX(-1) rotate(-5deg)}}
@media (max-width:640px){.kar-mascot{height:210px;max-width:76%}}
.kar-hero-card{margin-top:var(--sp-8);position:relative;max-width:700px}
@media (min-width:901px){.kar-hero{--m:clamp(260px,30vw,420px);--hl:max(64px,calc((100vw - 1200px)/2 + 64px));--hr:max(24px,calc((100vw - 1200px)/2 + 64px))}.kar-mascot{right:var(--hr);height:var(--m);max-width:none}.kar-hero-card{max-width:min(700px,calc(100vw - var(--hl) - var(--hr) - var(--m)*.92 - 12px))}}
@media (max-width:900px){.kar-hero-card{max-width:none}}
@media (max-width:640px){.kar-hero-actions{flex-wrap:wrap}.kar-hero h1{font-size:clamp(30px,9vw,40px)!important;max-width:none!important}}

/* Ticker */
.kar-ticker-row{display:flex;gap:var(--sp-8);width:max-content;padding-left:320px}
@media (max-width:820px){.kar-ticker-row{padding-left:var(--sp-6)}}

/* Two-column splits */
.kar-split{display:grid;gap:var(--sp-16);align-items:start}
.kar-split-contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.kar-split-project{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.kar-split-contactpage{grid-template-columns:minmax(0,1fr) 420px}
.kar-split-folder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-10);align-items:start}
@media (max-width:1000px){
  .kar-split-project,.kar-split-contactpage{grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
  .kar-aside-sticky{position:static!important}
}
@media (max-width:900px){
  .kar-split-contact,.kar-split-folder{grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
}

/* Grids */
.kar-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.kar-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.kar-howwe{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--sp-8);align-items:center}
.kar-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:1000px){.kar-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .kar-howwe{grid-template-columns:minmax(0,1fr)}
  .kar-frames{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .kar-work-grid{grid-template-columns:minmax(0,1fr)}
  .kar-frames{grid-template-columns:minmax(0,1fr)}
  .kar-form-grid{grid-template-columns:1fr}
}

/* Folder stack */
.kar-folder-tabs{position:relative;display:flex;align-items:flex-end;gap:6px;padding-left:24px}
@media (max-width:900px){
  .kar-folder-tabs{padding-left:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kar-folder-tabs::-webkit-scrollbar{display:none}
  .kar-folder-tabs>button{flex:0 0 auto;padding:12px 20px 14px;font-size:var(--fs-16);min-width:44px;text-align:center}
  .kar-folder-share{display:none}
}
.kar-folder-body{position:relative;border:var(--border-ink);border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);padding:var(--sp-10);box-shadow:var(--shadow-sticker)}
@media (max-width:600px){.kar-folder-body{padding:var(--sp-6)}}
@media (max-width:900px){.kar-folder-body{border-radius:var(--radius-lg)}}

/* Footer */
.kar-footer-inner{max-width:var(--maxw-page);margin:0 auto;padding:var(--sp-16) var(--gutter-page-lg);display:flex;justify-content:center;align-items:flex-start;gap:var(--sp-24)}
@media (max-width:700px){.kar-footer-inner{flex-direction:column;align-items:center;gap:var(--sp-10);text-align:center}}

/* ===== 2 Ekim 2026 eklemeleri (canlı siteyle eşitleme) ===== */

/* Erişilebilirlik: kayan şerit fareyle/odakla durur, "hareketi azalt" açıksa dönmez. */
.kar-marquee:hover,.kar-marquee:focus-within{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.kar-marquee{animation:none}html{scroll-behavior:auto}}

/* Ana içerik bölgesi programatik odak alınca halka çizme (sayfa değişiminde odak buraya taşınır). */
#icerik:focus{outline:none}

/* "İçeriğe geç" bağlantısı: yalnızca klavye odağında görünür. */
.kar-skip{position:absolute;left:var(--sp-4);top:-120px;z-index:100;padding:var(--sp-3) var(--sp-5);background:var(--kar-ink);color:var(--kar-cream);border-radius:var(--radius-pill);font:var(--text-small);font-weight:var(--fw-bold);text-decoration:none;box-shadow:var(--shadow-sticker-sm)}
.kar-skip:focus{top:var(--sp-4);color:var(--kar-cream)}

/* "Yukarı dön" butonu (BackToTop.jsx): DS kuralı — gölgeli öğe basılınca 2px içeri gömülür, gölge küçülür. */
.kar-totop button:active{transform:translate(2px,2px)!important;box-shadow:var(--shadow-sticker-sm)!important}
@media (prefers-reduced-motion: reduce){.kar-totop{animation:none!important;transition:none!important}}

/* Sekme/filtre çubuğu (DS Tabs: İşler ve Blog): dar ekranda tek satırda kalıp taşmasın, satırlara bölünsün.
   Köşeler pill yerine yumuşak dikdörtgen (çok satırlı pill kapsül gibi şişer). */
@media (max-width:700px){
  [role="tablist"]{flex-wrap:wrap;max-width:100%;border-radius:var(--radius-lg)!important}
  [role="tablist"]>button{padding:8px 14px!important}
}

/* İşler sayfası: proje fotoğrafı küçük görselleri siyah-beyaz; fare kartın üstüne gelince yalnız o
   kartın fotoğrafı renklenir. Renkli karınca çıkartmalı kartlar etkilenmez. Sadece fareli cihazlarda
   (dokunmatikte hover yapışıp kalır). */
.kar-work-grid img[src*="assets/projects/"]{filter:grayscale(1);transition:filter var(--dur-base) var(--ease-out)}
@media (hover:hover){.kar-work-grid>*:hover img[src*="assets/projects/"]{filter:none}}
@media (prefers-reduced-motion: reduce){.kar-work-grid img[src*="assets/projects/"]{transition:none}}

/* Ana sayfa "iki kanat" kartları: başlık, açıklama ve üç madde iki kartta SATIR SATIR ortak (CSS subgrid),
   sağ kartın başlığı iki satıra inince listeler kaymasın, ayırıcı çizgiler yan yana hizalansın.
   Seçici h3 + p + liste(madde > div > h4) yapısına uyar; yalnız ana sayfadaki bu kapsayıcıyla eşleşir. */
div:has(>div>h3+p+div>div>div>h4)>div{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
div:has(>div>h3+p+div>div>div>h4)>div>div{display:grid!important;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}

/* Form spam tuzağı (form.js): gözle görünmez, klavye ve ekran okuyucudan gizli. */
.kar-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Galeri (büyütme penceresi): uzun ekran görüntülerinde pencerenin kendi kaydırma çubuğu sağ üstteki
   kapat "×" düğmesinin üstüne biniyordu. Çubuk gizlenir; kaydırma tekerlek, dokunma ve klavyeyle sürer
   ("Sayfanın devamını görmek için aşağı kaydır" ipucu zaten çıkıyor). */
[role="dialog"][aria-modal="true"] > div[style*="overflow: auto"]{scrollbar-width:none;-ms-overflow-style:none}
[role="dialog"][aria-modal="true"] > div[style*="overflow: auto"]::-webkit-scrollbar{display:none}