/* ==================================================================
   KD APPLE: Apple tasarım ilkelerinin (emilkowalski/skills apple-design)
   karameldigital.com'a birebir uyarlaması. TÜM sayfalarda yüklenir,
   diğer tüm stil dosyalarından SONRA gelir.

   Kaynak bölümler:
   §1 Response  §3 Interruptibility  §4 Springs  §7 Spatial consistency
   §11 Frame smoothness  §12 Materials & depth  §14 Reduced motion
   §15 Typography  §16 Design foundations (craft, familiarity, simplicity)
   ================================================================== */

:root {
  /* §4 Spring: damping 1.0 = kritik sönümlü, response 0.3-0.4sn.
     CSS tarafında spring'in yaklaşık karşılığı (overshoot YOK). */
  --ap-spring: cubic-bezier(0.32, 0.72, 0, 1);      /* damping 1.0, response ~0.4 */
  --ap-spring-fast: cubic-bezier(0.32, 0.72, 0, 1);  /* response ~0.3 */
  --ap-bounce: cubic-bezier(0.34, 1.32, 0.36, 1);    /* damping ~0.8, SADECE momentumlu jestler */
  --ap-res: 0.4s;
  --ap-res-fast: 0.28s;

  /* §12 Materyal ağırlıkları: koyu/ağır = yapısal bölge, açık = etkileşim */
  --ap-mat-heavy: rgba(10, 6, 3, 0.72);
  --ap-mat-regular: rgba(20, 12, 6, 0.55);
  --ap-mat-light: rgba(255, 241, 221, 0.06);
  --ap-mat-edge: rgba(255, 241, 221, 0.14);  /* ışığı yakalayan üst kenar */
}

/* ==================================================================
   §15 TİPOGRAFİ: optik tracking + Türkçe descender güvenli leading
   ------------------------------------------------------------------
   Apple: "Tracking boyuta özgüdür, asla tek değer olmaz. Büyük metin
   negatif, küçük metin hafif pozitif ister." + "Uzun inici/çıkıcıları
   olan yazılarda leading'i artır."  Türkçe Ş Ç Ğ ğ ç ş ı j y p q g
   inicileri 0.92-1.05 satır yüksekliğinde kutu dışında kalıyordu;
   gradient background-clip:text kutuyla sınırlı olduğu için harfin
   kuyruğu SOLUYOR/KESİLİYOR. Aşağısı bunu kökten çözer.
   ================================================================== */

/* Büyük display başlıklar: sıkı ama descender'a yer bırakan leading */
.kr-process__title,
.kr-featured__title,
.kr-stills__title,
.kr-contact__title,
.krp-form__title,
.krp-faq__title,
.krp-404__title,
.krp-corp__title,
.kfx-title,
.krx-wrow__title,
.krx-pstep__name,
.krp-project__title,
.krp-footer__title {
  line-height: 1.12;
  /* alt kuyruklar için nefes payı: gradient dolgu artık harfin sonunda bitmiyor */
  padding-bottom: 0.12em;
  /* §15 optik boyutlandırma */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* gradient dolgulu em'ler de aynı kutu payını almalı */
.kr-process__title em,
.kr-featured__title em,
.kr-stills__title em,
.kr-contact__title em,
.krp-form__title em,
.krp-faq__title em,
.krx-approach__quote b,
.kfx-cursive {
  padding-bottom: 0.1em;
  line-height: inherit;
}

/* .kfx-title kırpıyordu: kelime kaydırma animasyonu için overflow gerekiyor
   ama dikeyde kırpmamalı. Yatayda kırp, dikeyde serbest bırak. */
.kfx-title {
  overflow-x: clip;
  overflow-y: visible;
}

/* §15 Optik tracking ölçeği: boyut büyüdükçe negatifleşir */
.kr-hero__item { letter-spacing: -0.012em; }
.krx-pstep__name,
.krx-ccard__name { letter-spacing: -0.018em; }
.krx-wrow__title { letter-spacing: -0.028em; }
.kr-process__title,
.kr-featured__title { letter-spacing: -0.034em; }
.kr-stills__title,
.kr-contact__title,
.krp-form__title,
.krp-faq__title { letter-spacing: -0.038em; }

/* §15 Küçük metin hafif POZİTİF tracking + okunabilir taban boyut.
   10.5px'lik mono etiketler 11px'e çekilir (craft: kimse 10px okumaz). */
.kr-micro,
.krx-pstep__chips span,
.krx-ccard__role,
.krx-wrow__meta,
.krp-channel__label,
.kr-badge text {
  font-size: max(0.7rem, 11px);
  letter-spacing: 0.14em;
}

/* §15 Gövde metni: rahat leading, rem tabanlı (kullanıcı yazı boyutuna saygı) */
.krx-pstep__desc,
.kr-post__ex,
.krx-crew__lede,
.krp-form__lede,
.krx-principle p,
.krp-faq__a p {
  line-height: 1.65;
  letter-spacing: 0.002em;
}

/* ==================================================================
   §1 RESPONSE: geri bildirim basma anında, bırakmada değil
   ================================================================== */
.kr-chip,
.kr-hero__item,
.krx-wrow,
.kr-service-row,
.krp-faq__q,
.krp-submit,
.krx-deckform__submit,
.kr-logochip,
.krx-deck,
.kr-overlay__link,
.kr-burger,
button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* §1: ~300ms tap gecikmesini öldür */
}

/* basıldığı anda, 100ms içinde tepki (Apple'ın kendi örneği) */
.kr-chip:active,
.krp-submit:active,
.krx-deckform__submit:active,
.kr-logochip:active,
.krx-ccard:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}
.krx-wrow:active,
.kr-service-row:active,
.krp-faq__q:active { opacity: 0.72; transition: opacity 90ms ease-out; }

/* ==================================================================
   §16 CRAFT: "Ara/Kopyala" bağlam menüsü dekoratif metinde çıkmasın
   ------------------------------------------------------------------
   Mobilde başlıklara/etiketlere uzun basınca iOS metin seçim balonu
   ("Ara", "Paylaş") açılıyordu. Dekoratif ve etkileşimli metin
   seçilemez olur; gövde metni ve form içeriği seçilebilir kalır.
   ================================================================== */
.kr-hero__item,
.kr-hero__intro,
.kr-hero__hud,
.kr-marquee,
.kr-micro,
.kr-process__title,
.kr-featured__title,
.kr-stills__title,
.kr-contact__title,
.kfx-title,
.krx-wrow__no,
.krx-wrow__title,
.krx-wrow__meta,
.krx-pstep__no,
.krx-pstep__name,
.krx-pstep__chips,
.krx-process__ghost,
.krx-process__stagelabel,
.krx-ccard__no,
.krx-ccard__mono,
.krx-fresh,
.krx-deck,
.kr-badge,
.kfx-dial,
.kr-overlay__link,
.krp-faq__ghost,
.krp-faq__no,
.krx-principle__no,
.kr-service-row__no,
.kr-stat__num,
.kr-burger {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ==================================================================
   §12 MATERYAL & DERİNLİK
   ================================================================== */

/* §12 Nav: yüzen translucent katman, içerik altından akar (opak şerit değil).
   Materyal AYRI bir katmanda durur: logo/burger'ın difference blend'ini
   bozmasın diye topbar'ın kendisine backdrop-filter/mask verilmez. */
.kr-topbar { border-bottom: 0 !important; }
.kr-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
  /* §12 scroll edge effect: 1px sert çizgi yerine eriyen geçiş */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.6) 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.6) 80%, transparent);
  transition: opacity 0.5s var(--ap-spring);
}
/* açık zeminli bölgelerde materyal ters çevrilir (okunabilirlik korunur) */
body.kr-over-light .kr-topbar::before {
  background: linear-gradient(to bottom, rgba(244, 236, 225, 0.5), rgba(244, 236, 225, 0));
}

/* §12 Büyük yüzey = daha kalın materyal: kartlar chip'lerden daha güçlü blur */
.kr-glass {
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}
/* §12 Işığı yakalayan üst kenar */
.kr-glass,
.krx-ccard,
.krp-panel {
  border-top-color: var(--ap-mat-edge) !important;
}

/* §12 Vibrancy: translucent yüzey üstünde düz gri metin yasak;
   kontrast + hafif kalınlık + tracking artışı */
.kr-glass .kr-stat__label,
.krx-ccard__role,
.krp-panel label {
  color: rgba(244, 236, 225, 0.82) !important;
  font-weight: 500;
}

/* §12 Modal görev: karartma + arka planı geri it */
.krx-deckform { --ap-scrim: 1; }
.krx-deckform.is-open ~ * { pointer-events: none; }

/* ==================================================================
   §3 + §4 HAREKET: spring eğrileri, kesintiye uğratılabilirlik
   ------------------------------------------------------------------
   Tüm geçişler kritik sönümlü spring yaklaşımına çekilir; overshoot
   yalnızca momentum taşıyan jestlerde (deck paneli fırlatma) kalır.
   ================================================================== */
.kr-chip,
.krx-wrow,
.kr-service-row,
.kr-hero__item,
.krx-pstep,
.krx-ccard,
.kr-logochip,
.krp-faq__q,
.krx-works__preview {
  transition-timing-function: var(--ap-spring) !important;
  transition-duration: var(--ap-res) !important;
}

/* §7 Uzamsal tutarlılık: panel tetikleyicisinden doğar */
.krx-deckform__panel { transform-origin: bottom center; }

/* §11 Yalnızca compositor dostu özellikler + niyet ipucu */
.krx-wrow,
.kr-chip,
.krx-ccard,
.krx-works__preview,
.krx-process__vids video { will-change: transform, opacity; }

/* ==================================================================
   §16 SIMPLICITY / CRAFT: mobil düzeltmeleri
   ================================================================== */

/* iş endeksi: mobilde meta alt satıra iner, taşma biter */
@media (max-width: 640px) {
  .krx-wrow {
    grid-template-columns: auto 1fr;
    row-gap: 0.35rem;
  }
  .krx-wrow__meta {
    grid-column: 2;
    white-space: normal;
  }
}

/* §16 Familiarity: dokunma hedefleri en az 44px (Apple HIG) */
.kr-chip,
.krp-faq__q,
.kr-overlay__link,
.krx-deckform__close,
.kr-footer__legal a,
.krp-footer__col a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.krp-faq__q,
.krp-footer__col a { display: flex; }

/* ==================================================================
   FORM: iOS otomatik zoom hatası (16px altı input odaklanınca
   Safari sayfayı zoomlar). Apple'ın kendi platform kuralı.
   ================================================================== */
input, select, textarea,
.krp-field input[type="text"],
.krp-field input[type="email"],
.krp-field input[type="tel"],
.krp-field input[type="url"],
.krp-field input,
.krp-field select,
.krp-field textarea,
.krp-panel input,
.krp-panel select,
.krp-panel textarea,
.krx-blank input {
  font-size: max(1rem, 16px) !important;
}
/* §1 form alanında anlık odak geri bildirimi */
.krp-panel input:focus-visible,
.krp-panel select:focus-visible,
.krp-panel textarea:focus-visible {
  outline: 2px solid var(--krx-accent-core, #E0813B);
  outline-offset: 2px;
  transition: outline-color 120ms ease-out;
}

/* §16 Wayfinding: klavye kullanıcısı nerede olduğunu görsün */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--krx-accent-light, #F0A35C);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==================================================================
   DAYANIKLILIK: reveal animasyonları JS'e bağımlı kalmasın
   JS yüklenmezse/hata verirse içerik görünmez kalıyordu (opacity 0).
   ================================================================== */
.no-js .kr-reveal,
.no-js [data-kfx-word],
.no-js .kr-manifesto__text .w,
.no-js .kr-vision__text .vw {
  opacity: 1 !important;
  transform: none !important;
}

/* ==================================================================
   §14 REDUCED MOTION / TRANSPARENCY / CONTRAST: üç bağımsız sinyal
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* kaydırma/spring yerine kısa opaklık geçişi; overshoot tamamen kalkar */
  .kr-reveal,
  [data-kfx-word],
  .kr-manifesto__text .w,
  .kr-vision__text .vw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .kr-chip:active,
  .krp-submit:active { transform: none; }
  .krx-works__preview { display: none !important; }
  .kr-marquee__track,
  .krx-fresh__track span,
  .krx-deck__track span { animation: none !important; }
  /* §14 yavaş döngüsel salınımlar (0.2Hz civarı) kapanır */
  .kfx-dial rect,
  .krx-process__beam { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .kr-glass,
  .kr-chip,
  .kr-topbar,
  .krx-deckform,
  .krp-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .kr-glass, .krp-panel { background: #0b0805 !important; }
  .kr-topbar { background: rgba(0, 0, 0, 0.92) !important; -webkit-mask-image: none; mask-image: none; }
  .krx-deckform { background: rgba(0, 0, 0, 0.9) !important; }
}

@media (prefers-contrast: more) {
  .kr-glass,
  .kr-chip,
  .krx-ccard {
    background: #0a0705 !important;
    border-color: rgba(244, 236, 225, 0.55) !important;
  }
  .kr-cream-dim,
  .krx-pstep__desc,
  .kr-post__ex,
  .krx-ccard__role { color: #f4ece1 !important; }
  .krx-pstep { opacity: 1 !important; }
}

/* §1 JS destekli basma durumu (CSS :active'in gecikmediği yerlerde de anlık) */
.is-pressed { transform: scale(0.97); transition: transform 100ms ease-out !important; }
.krx-wrow.is-pressed, .kr-service-row.is-pressed { transform: none; opacity: 0.72; }

/* §3 Sürüklenebilir sheet: sürükleme tutamağı (familiarity: iOS sheet dili) */
.krx-deckform__panel::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(35, 26, 16, 0.22);
  pointer-events: none;
}
.krx-deckform__panel { touch-action: pan-y; }

/* ==================================================================
   QA-2 DÜZELTMELERİ (kullanıcı ekran görüntüleri, 2026-08-15)
   ================================================================== */

/* --- Menü overlay: İ noktası ve Ş kuyruğu kırpılıyordu.
   Linkler karakter animasyonu için overflow:hidden taşır; klip kutusuna
   üstten (İ noktası cap yüksekliğinin ÜSTÜNde) ve alttan pay verilir,
   negatif margin ile satır ritmi korunur. */
html.kfx-chars .kr-overlay__link {
  line-height: 1.08;
  padding-top: 0.16em;
  margin-top: -0.12em;
  padding-bottom: 0.14em;
  margin-bottom: -0.08em;
}

/* --- Menü açıkken topbar materyali kapanır: krem overlay üstünde
   backdrop-blur beyaz bulamaç şerit bırakıyordu. */
body.kr-menu-open .kr-topbar::before { opacity: 0; }

/* --- /calismalar: araç çubuğu dev başlığın üstüne biniyordu ve
   arama inputunun backdrop-filter'ı arkadaki başlığı bulandırıyordu.
   Başlık statik, tam opak, kendi alanında; araç çubuğu altında. */
.kr-works__title {
  position: static !important;
  margin: 0 0 1.6rem !important;
  font-size: clamp(3rem, 11vw, 9.5rem) !important;
  line-height: 1.05;
  padding-bottom: 0.08em;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
.kr-works__toolbar { margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); }
body.kr-page .kr-works__toolbar input[type="search"],
body.kr-page .kr-works__toolbar button {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--krx-glass-border, rgba(224, 129, 59, 0.25));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  min-height: 44px;
}
body.kr-page .kr-works__toolbar input[type="search"]::placeholder {
  color: rgba(244, 236, 225, 0.45);
}
body.kr-page .kr-works__toolbar input[type="search"]:focus {
  border-color: var(--krx-accent-core, #E0813B);
}
@media (max-width: 860px) {
  .kr-works__title { font-size: clamp(2.6rem, 15vw, 5rem) !important; }
}

/* --- NÜVE ve diğer uzun başlıklar viewport'tan taşıp kesilmesin */
.krx-crew .kr-process__title {
  font-size: clamp(1.8rem, 5.2vw, 4rem);
}
.kr-process__title,
.kr-featured__title,
.krp-form__title,
.krp-faq__title {
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ==================================================================
   QA-3: STATİK DENETİM BULGULARI (crop + craft ajanları, 2026-08-15)
   ================================================================== */

/* --- KRİTİK: modal 'hidden' iken görünmez tam ekran katman olarak
   kalıyordu (kd-krx display:flex, normalize'in [hidden]'ını cascade'de
   eziyor) ve tüm sayfanın tıklamalarını yiyordu. */
.krx-deckform[hidden] { display: none !important; }
.krx-deckform:not(.is-open) { pointer-events: none; }
.krx-deckform.is-open { pointer-events: auto; }
/* modal site kromunun ÜSTÜNDE durmalı (topbar 9000) */
.krx-deckform { z-index: 9100; }

/* --- KRİTİK: difference blend menü-açık invert'ini eziyordu; logo
   krem overlay üstünde beyaz kalıp görünmez oluyordu. Menü açıkken
   kd-raw'ın invert kuralı devralır. */
body.kr-page.kr-menu-open .kr-topbar__logo img {
  mix-blend-mode: normal;
  filter: invert(1) !important;
}
body.kr-page.kr-menu-open .kr-burger {
  mix-blend-mode: normal;
  color: var(--kr-ink, #0e0e0e) !important;
}

/* --- İç sayfa hero başlıkları: aynı descender-crop sınıfı (denetimde
   bulunan TÜM kalanlar): servisler, hakkımızda, blog, kurumsal, legal,
   SSS alt CTA, blog/post CTA'ları, servis blok başlıkları */
.krp-services__title,
.krp-about__title,
.krp-blog__title,
.krp-corp__h1,
.krp-faq__cta-link {
  line-height: 1.12 !important;
  padding-bottom: 0.12em;
}
.krp-about__h2,
.krp-sv__title,
.krp-services__cta-panel h2,
.krp-blog__cta-title,
.krp-post__cta-title,
.krp-post__related-title,
.krp-legal__title {
  line-height: 1.1 !important;
  padding-bottom: 0.1em;
}
.krp-services__title em,
.krp-about__title em,
.krp-blog__title em,
.krp-corp__h1 em,
.krp-corp__title em,
.krp-faq__cta-link em,
.krp-about__h2 em,
.krp-sv__title em,
.krp-services__cta-panel h2 em,
.krp-blog__cta-title em,
.krp-post__cta-title em,
.krp-legal__title em,
.krp-footer__title em {
  padding-bottom: 0.1em;
  line-height: inherit;
}

/* --- Anasayfa kontakt CTA: satır sarmalayıcıları overflow klibi içinde
   glif payı alır (İ noktası üstte, Konuşalım'ın ş kuyruğu altta) */
.kr-contact__title .kr-line {
  padding: 0.14em 0;
  margin: -0.14em 0;
}

/* --- Vizyon başlığı: nowrap dar ekranda kırpıyordu */
.kr-vision__title {
  white-space: normal !important;
  text-wrap: balance;
}

/* --- Kontrast düzeltmeleri (WCAG 4.5:1 tabanı) --- */
body.kr-page .kr-works__toolbar input[type="search"]::placeholder {
  color: var(--kr-cream-dim, rgba(244, 236, 225, 0.62));
}
.krx-blank input::placeholder { color: rgba(35, 26, 16, 0.55); }
.kr-hero__item { color: rgba(255, 255, 255, 0.78); }
.kr-hero__item.is-active { color: #fff; }
.krx-pstep { opacity: 0.6; }
.krx-pstep.is-active { opacity: 1; }
#works-empty { color: var(--kr-cream-dim, rgba(244, 236, 225, 0.62)) !important; }

/* --- Dokunma hedefleri: burger + footer legal/sosyal linkleri 44px --- */
.kr-burger { min-height: 44px; }
.krp-footer__legal a,
.krp-footer__social a,
.kr-footer__legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --- Reduced motion: glow bandı sabit tam boy (ayrılmış boşluk boş kalmasın) */
@media (prefers-reduced-motion: reduce) {
  .krx-glow { transform: scaleY(1) !important; }
}

/* ==================================================================
   QA-4: responsive denetim + GPT dış görüş düzeltmeleri
   ================================================================== */
/* admin HTML'i icindeki uzun URL/token satiri patlatmasin */
.krp-project__rich,
.krp-post__article {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.krp-brand__works-title { overflow-wrap: break-word; }
/* rakamlar zaten bolunmez; nowrap dar sutunda tasma riskiydi */
.krp-about__stat-num { white-space: normal; }
/* konusma formu: "adın soyadın" placeholder'i 9.5ch'de kirpiliyordu */
.krx-blank input { width: 13ch; }
/* marka adi tek kelime cok uzunsa vw tabanli boyut viewport'u asiyordu;
   EJS --wlen (en uzun kelime harf sayisi) ile ust sinir */
.krp-brand__name {
  font-size: min(clamp(2.8rem, 11vw, 9rem), calc(140vw / var(--wlen, 10))) !important;
}
/* hero intro artik semantik H1 (GPT bulgusu: sayfada H1 yoktu) */
h1.kr-hero__intro { margin: 0; }

/* footer CTA: Instrument Serif italik "Konuşalım" el yazısının kuyrugu
   0.12em'den derin; overflow:hidden footer icinde ekstra pay gerekli */
.krp-footer__title { padding-bottom: 0.24em; }
.krp-footer__title .kfx-script { padding-bottom: 0.14em; }
.kr-contact__title { padding-bottom: 0.24em; }

/* ==================================================================
   MEDYA ORANI: dikey çekimler artık yatay kırpılmıyor
   ------------------------------------------------------------------
   Portföyün büyük kısmı 9:16 dikey (1080x1920) çekim. Kartlar sabit
   4/5 kutuda object-fit:cover ile gösterildiği için karenin %30-40'ı
   kesiliyordu. Kart artık medyanın GERÇEK oranını alır; works ızgarası
   zaten masonry (columns) olduğu için bu düzen editoryal duruyor.
   Oran sunucuda hesaplanıp --ar olarak basılır: sıfır layout kayması.
   ================================================================== */
.kr-work-card__media {
  aspect-ratio: var(--ar, 4 / 5);
  background: #0b0805;
}
/* medya kutuyu tam doldurur ama kutu zaten doğru oranda: kırpma yok */
.kr-work-card__media img,
.kr-work-card__media video { object-fit: cover; }

/* Öne çıkan şerit kartları: dikey medyada portre kutu, yatayda geniş */
.kr-fcard { aspect-ratio: var(--ar, 4 / 5); }

/* İş endeksi hover önizlemesi: 16/9 kutuda dikey video yan yatıyordu.
   Kart medyanın oranını alır, genişlik ona göre küçülür. */
.krx-works__preview {
  aspect-ratio: var(--pv-ar, 16 / 9);
  width: auto;
  height: min(38vh, 340px);
  transition: opacity 0.35s var(--krx-ease), transform 0.45s var(--krx-ease),
              aspect-ratio 0.3s var(--krx-ease);
}
.krx-works__preview video { object-fit: cover; }

/* Hero tam ekran: dikey film yanlardan boşluk bırakmasın diye cover
   kalır, ama odak üst-orta (yüz/ürün üstte olur) */
.kr-hero__media video,
.kr-hero__media img { object-position: 50% 42%; }

/* Kampanya kareleri: kurate edilmiş yazısız çekimler, doğal oranlı */
.kr-stills__img {
  aspect-ratio: auto;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
}

/* kd-raw'daki nth-child oran çeşitlemesi (1/1, 3/4) medyanın gerçek
   oranını eziyordu: dikey çekimler yine kırpılıyordu. Doğal oran kazanır. */
.kr-work-card:nth-child(3n) .kr-work-card__media,
.kr-work-card:nth-child(4n) .kr-work-card__media {
  aspect-ratio: var(--ar, 4 / 5);
}

/* ==================================================================
   BOŞLUK DİSİPLİNİ: modüler dikey ritim
   ------------------------------------------------------------------
   Apple §16 Craft: "Hiçbir şey rastgele değildir; her boşluk savunabile-
   ceğin bilinçli bir karardır." Site 7 farklı taban (4/5/6/7rem), 7 farklı
   vw (8-14vw) ve 7 farklı tavan (5/7/8/9/10.5/11/13rem) kullanıyordu.
   Üç kademeli tek bir ölçeğe indirildi; her bölüm hangi kademede olduğunu
   beyan eder. Ölçek 1.5 katsayılı: 4 -> 6 -> 9rem.
   ================================================================== */
:root {
  --sp-xl: clamp(6rem, 11vw, 9rem);      /* ana bölümler (manifesto, süreç, işler) */
  --sp-lg: clamp(4rem, 7.5vw, 6rem);     /* ikincil bölümler (blog, logolar, nüve) */
  --sp-md: clamp(2.6rem, 5vw, 4rem);     /* bağlayıcı şeritler, dar bloklar */
  --sp-head: clamp(2.2rem, 4.5vw, 3.5rem);  /* başlıktan içeriğe */
  --sp-kicker: 1.1rem;                      /* mikro etiketten başlığa */
  --sp-gap: clamp(0.9rem, 1.6vw, 1.4rem);   /* ızgara boşluğu */
}

/* --- Kademe 1: ana bölümler --------------------------------------- */
.kr-manifesto,
.krx-process,
.krx-works,
.kr-featured {
  padding-top: var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}
/* fırından-yeni bandı bölümün kendi üst boşluğunu üstlenir */
.krx-works { padding-top: 0 !important; }
.krx-fresh { margin-bottom: var(--sp-xl); }

/* --- Kademe 2: ikincil bölümler ----------------------------------- */
.krx-crew,
.kr-posts,
.kr-logos,
.kfx-dial-sec {
  padding-top: var(--sp-lg) !important;
  padding-bottom: var(--sp-lg) !important;
}

/* --- Kademe 3: bağlayıcılar --------------------------------------- */
.krx-deck { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }

/* --- Krem editoryal bloklar: içeriden nefes, dışarıdan ayrım ------- */
.krx-approach,
.kr-stills {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-md);
}

/* --- Başlık ritmi: kicker -> başlık -> içerik ---------------------- */
.kr-manifesto > .kr-micro,
.krx-process__head .kr-micro,
.krx-works__head .kr-micro,
.krx-crew > .kr-micro,
.krx-approach > .kr-micro,
.kr-logos > .kr-micro,
.kr-posts > .kr-micro {
  display: block;
  margin-bottom: var(--sp-kicker) !important;
}
.kr-process__title,
.kr-featured__title,
.krx-approach__quote {
  margin-bottom: var(--sp-head) !important;
}
.krx-process__head { margin-bottom: var(--sp-head); }
.krx-works__head { margin-bottom: var(--sp-head) !important; }
.krx-crew__lede { margin-bottom: var(--sp-head) !important; }

/* --- Izgara boşlukları tek değerde --------------------------------- */
.kr-stats,
.krx-crew__grid,
.kr-posts__grid,
.kr-works__grid { gap: var(--sp-gap); }
.kr-works__grid { column-gap: var(--sp-gap); }
.kr-work-card { margin-bottom: var(--sp-gap); }

/* --- Ölçü (measure): uzun metin 68 karakteri geçmez ---------------- */
.krx-crew__lede,
.krp-form__lede,
.kr-contact__sub,
.krx-principle p,
.krp-about__lead { max-width: 62ch; }

/* ==================================================================
   PROJE DETAY: galeri + showcase da doğal orana geçer
   ------------------------------------------------------------------
   Galeri videolarının çoğu 9:16 dikey (1080x1930) ama ızgara 16/10,
   ilk hücre 21/9 kutuya cover'lıyordu: karenin ~%65'i kesiliyordu.
   Çalışmalar sayfasıyla aynı dil: masonry sütun + medyanın gerçek oranı.
   ================================================================== */
.krp-project__ggrid {
  display: block !important;
  columns: 2 300px;
  column-gap: var(--sp-gap);
}
.krp-project__gitem {
  aspect-ratio: var(--ar, 16 / 10) !important;
  break-inside: avoid;
  margin-bottom: var(--sp-gap);
  display: block;
}
/* ilk hücrenin zorunlu 21/9 sinemaskopu kalkar (dikey videoyu katlediyordu) */
.krp-project__ggrid .krp-project__gitem:first-child {
  grid-column: auto;
  aspect-ratio: var(--ar, 16 / 10) !important;
}
@media (max-width: 860px) {
  .krp-project__ggrid { columns: 1; }
  .krp-project__gitem,
  .krp-project__ggrid .krp-project__gitem:first-child {
    aspect-ratio: var(--ar, 4 / 5) !important;
  }
}

/* Showcase hücreleri: sütun sayısı yönetici kararı, ama hücre yüksekliği
   medyanın oranını izler; kırpma yerine tam kare. */
.krp-project__sc-cell {
  aspect-ratio: var(--ar, auto);
  height: auto;
}
.krp-project__sc-cell img,
.krp-project__sc-cell video { height: auto; }
.krp-project__sc-grid { align-items: start; }
/* kimlik/kartvizit gibi oran uyuşmazlığı olanlarda contain korunur */
.krp-project__sc-cell.is-contain { aspect-ratio: var(--ar, 4 / 3); }
.krp-project__sc-cell.is-contain img,
.krp-project__sc-cell.is-contain video { height: 100%; }

/* ==================================================================
   İÇ SAYFA RİTMİ: ana sayfayla aynı ölçek
   ------------------------------------------------------------------
   kd-pages.css'te bölümler vh ve vw'yi karışık kullanıyordu (9vh, 8vh,
   16vh, 7vw, 10vw...) ve 15'ten fazla farklı değer vardı; vh tabanlı
   dikey boşluk mobilde adres çubuğu açılıp kapandıkça zıplıyordu.
   Hepsi vw tabanlı tek ölçeğe bağlandı.
   ================================================================== */

/* Kademe 1: sayfa ana bölümleri */
.krp-services__list,
.krp-process,
.krp-about__story,
.krp-about__values-wrap,
.krp-corp__models,
.krp-corp__band,
.krp-faq__layout,
.krp-blog__list,
.krp-post__related,
.krp-project__gallery,
.krp-project__sc {
  padding-top: var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* Kademe 2: ikincil bölümler ve CTA bantları */
.krp-about__brands,
.krp-about__cta,
.krp-services__cta,
.krp-faq__cta,
.krp-blog__cta,
.krp-post__cta,
.krp-project__closing,
.krp-project__brand,
.krp-corp__cta {
  padding-top: var(--sp-lg) !important;
  padding-bottom: var(--sp-lg) !important;
}

/* Sayfa hero'ları: üstte topbar payı + altta ölçek boşluğu */
.krp-faq__hero,
.krp-form__hero,
.krp-services__hero,
.krp-about__hero,
.krp-corp__hero,
.krp-blog__hero {
  padding-bottom: var(--sp-lg) !important;
}

/* Bölüm başlığından içeriğe tek ritim */
.krp-services__title,
.krp-about__title,
.krp-corp__h1,
.krp-blog__title,
.krp-about__h2,
.krp-project__bheading { margin-bottom: var(--sp-head) !important; }
.krp-project__bandhead { margin-bottom: var(--sp-head); }

/* ==================================================================
   ERİŞİLEBİLİRLİK: klavye yolu
   ------------------------------------------------------------------
   Menü overlay'i clip-path ile gizleniyordu ama linkleri hâlâ Tab
   sırasındaydı: aria-hidden="true" bir kapsayıcının içinde odaklanabilir
   öğe bırakmak WCAG ihlali; klavye kullanıcısı Tab'a basınca hiçbir yere
   gitmiyordu (10 görünmez hedef). visibility ile sıradan çıkarılır,
   geçiş süresi kadar geciktirildiği için açılış animasyonu korunur.
   ================================================================== */
.kr-overlay {
  visibility: hidden;
  transition: clip-path 0.7s var(--kr-ease, cubic-bezier(0.16,1,0.3,1)), visibility 0s linear 0.7s;
}
.kr-menu-open .kr-overlay {
  visibility: visible;
  transition: clip-path 0.7s var(--kr-ease, cubic-bezier(0.16,1,0.3,1)), visibility 0s linear 0s;
}

/* §16 Wayfinding: "Kullanıcıyı asla kapana kıstırma": içeriğe atla */
.kr-skip {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 9500;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ap-spring);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0d04;
  background: linear-gradient(150deg, var(--krx-accent-light, #F0A35C), var(--krx-accent-core, #E0813B));
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
}
.kr-skip:focus { transform: translateY(0); }

/* ==================================================================
   BÖLÜM GEÇİŞLERİ: siyah üstüne siyah bölümler ayrışsın
   ------------------------------------------------------------------
   Apple §12: "Materyal ağırlığı hiyerarşiyi kodlar." Site boyunca
   arka arkaya gelen saf siyah bölümler tek bir uzun yüzey gibi
   akıyordu; nerede bittiği belli değildi. Sert 1px çizgi yerine
   merkeze doğru eriyen ince ışık dikişi (scroll edge mantığı).
   ================================================================== */
.krx-process,
.krx-works,
.krx-crew,
.kr-posts,
.kfx-dial-sec,
.kr-featured { position: relative; }

.krx-process::after,
.krx-works::after,
.krx-crew::after,
.kr-posts::after,
.kr-featured::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 236, 225, 0.13) 22%, rgba(224, 129, 59, 0.22) 50%, rgba(244, 236, 225, 0.13) 78%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* krem bloklardan sonra dikiş gereksiz: renk zaten ayırıyor */
.krx-approach + .kr-vision::after,
.kr-stills + section::after { display: none; }

/* ==================================================================
   GÖRSEL YÜKLEME: "materialize, don't just fade" (Apple §12)
   ------------------------------------------------------------------
   Lazy görseller boş siyah kutudan bir anda patlıyordu. Artık hafif
   blur + ölçekten netliğe yerleşiyor: yüzey gelmiş gibi okunuyor.
   ================================================================== */
.kr-work-card__media img,
.kr-work-card__media video,
.krp-project__gitem img,
.krp-project__gitem video,
.krp-project__sc-cell img,
.krp-project__sc-cell video,
.kr-stills__img {
  opacity: 0;
  transform: scale(1.015);
  filter: blur(6px);
  transition: opacity 0.6s var(--ap-spring), transform 0.8s var(--ap-spring), filter 0.6s var(--ap-spring);
}
.kr-work-card__media img.is-ready,
.kr-work-card__media video.is-ready,
.krp-project__gitem img.is-ready,
.krp-project__gitem video.is-ready,
.krp-project__sc-cell img.is-ready,
.krp-project__sc-cell video.is-ready,
.kr-stills__img.is-ready {
  opacity: 1;
  transform: none;
  filter: none;
}
/* JS yoksa görseller olduğu gibi görünür */
.no-js .kr-work-card__media img,
.no-js .kr-work-card__media video,
.no-js .krp-project__gitem img,
.no-js .krp-project__gitem video,
.no-js .krp-project__sc-cell img,
.no-js .krp-project__sc-cell video,
.no-js .kr-stills__img {
  opacity: 1; transform: none; filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .kr-work-card__media img, .kr-work-card__media video,
  .krp-project__gitem img, .krp-project__gitem video,
  .krp-project__sc-cell img, .krp-project__sc-cell video,
  .kr-stills__img { transform: none !important; filter: none !important; transition: opacity 0.3s ease; }
}

/* ==================================================================
   UZUN OKUMA: blog makalesi + proje anlatısı
   ------------------------------------------------------------------
   Apple §15: "Hiyerarşiyi ağırlık + boyut + satır aralığını BİRLİKTE
   kullanarak kur, tek başına boyutla değil." Proje anlatısında h2/h3/h4
   üçü de 1.25rem'di: hiyerarşi yoktu. Blog tarafında bitişik öğe ritmi
   (başlıktan hemen sonraki paragraf) ve dul satır kontrolü eksikti.
   ================================================================== */

/* --- Proje anlatısı: gerçek başlık kademesi --------------------- */
.krp-project__rich h2 {
  font-size: 1.5rem;
  line-height: 1.18;
  padding-bottom: 0.06em;
  margin: 2em 0 0.7em;
}
.krp-project__rich h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  padding-bottom: 0.05em;
  margin: 1.7em 0 0.55em;
  color: rgba(244, 236, 225, 0.92);
}
.krp-project__rich h4 {
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 1.5em 0 0.45em;
  color: var(--krx-accent-light, #F0A35C);
}
/* ilk başlık bloğun tepesinde fazladan boşluk açmasın */
.krp-project__rich > :first-child,
.krp-post__article > :first-child { margin-top: 0 !important; }

/* --- Bitişik öğe ritmi: başlıktan sonraki paragraf yaklaşır ------ */
.krp-post__article h2 + p,
.krp-post__article h3 + p,
.krp-post__article h4 + p,
.krp-project__rich h2 + p,
.krp-project__rich h3 + p,
.krp-project__rich h4 + p { margin-top: 0; }
/* listeden sonra gelen başlık nefes alsın */
.krp-post__article ul + h2,
.krp-post__article ol + h2,
.krp-project__rich ul + h2,
.krp-project__rich ol + h2 { margin-top: 2.2em; }

/* --- Dul/yetim satır kontrolü (§16 craft) ----------------------- */
.krp-post__article p,
.krp-post__article li,
.krp-project__rich p,
.krp-project__rich li,
.krp-post__excerpt,
.kr-post__ex { text-wrap: pretty; }
.krp-post__article h2,
.krp-post__article h3,
.krp-project__rich h2,
.krp-project__rich h3 { text-wrap: balance; }

/* --- Türkçe descender: makale başlıkları ve alıntı -------------- */
.krp-post__article h2,
.krp-post__article h3,
.krp-post__article h4 {
  line-height: 1.22;
  padding-bottom: 0.06em;
}
.krp-post__article blockquote {
  line-height: 1.55;
  padding-bottom: 0.5em;
}

/* --- Bağlantılar: okunur altçizgi, kesişme boşluklu -------------- */
.krp-post__article a,
.krp-project__rich a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
  transition: color 0.25s var(--ap-spring), text-decoration-color 0.25s var(--ap-spring);
}

/* --- Eksik öğeler: ayraç, tablo, satır içi kod ------------------- */
.krp-post__article hr,
.krp-project__rich hr {
  border: 0;
  height: 1px;
  margin: 2.4em 0;
  background: linear-gradient(90deg, var(--krx-accent-core, #E0813B), rgba(244, 236, 225, 0.14) 40%, transparent);
}
.krp-post__article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}
.krp-post__article th,
.krp-post__article td {
  text-align: left;
  padding: 0.65em 0.8em;
  border-bottom: 1px solid rgba(35, 26, 16, 0.14);
}
.krp-post__article th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--krx-accent-deep, #8A4A22);
}
.krp-post__article :not(pre) > code,
.krp-project__rich :not(pre) > code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  background: rgba(224, 129, 59, 0.12);
}

/* --- Makale içi görseller de doğal oran + materialize alır ------- */
.krp-post__article img,
.krp-project__rich img {
  border-radius: 0.9rem;
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.012);
  transition: opacity 0.6s var(--ap-spring), filter 0.6s var(--ap-spring), transform 0.8s var(--ap-spring);
}
.krp-post__article img.is-ready,
.krp-project__rich img.is-ready { opacity: 1; filter: none; transform: none; }
.no-js .krp-post__article img,
.no-js .krp-project__rich img { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .krp-post__article img,
  .krp-project__rich img { filter: none !important; transform: none !important; }
}

/* --- Okuma ilerlemesi: makalenin üstünde ince karamel çizgi ------ */
.kr-readbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--krx-accent-light, #F0A35C), var(--krx-accent-core, #E0813B));
  z-index: 9200;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .kr-readbar { display: none; } }

/* ==================================================================
   PROJE SAYFASI: diğer markalardan seçki kartları
   Her iş artık kendi sayfasında; aynı marka listesi metin satırları,
   farklı markalar görsel kart olarak ayrışır.
   ================================================================== */
.krp-project__cross {
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-lg);
  padding-left: var(--kr-pad);
  padding-right: var(--kr-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.krp-project__cross-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-gap);
  margin-bottom: 1.6rem;
}
.krp-cross-card {
  display: block;
  text-decoration: none;
  color: var(--kr-cream);
  transition: transform 0.4s var(--ap-spring);
}
.krp-cross-card__media {
  aspect-ratio: var(--ar, 4 / 5);
  border-radius: 1rem;
  overflow: hidden;
  background: #120d09;
  border: 1px solid var(--krx-glass-border, rgba(224, 129, 59, 0.25));
}
.krp-cross-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ap-spring);
}
.krp-cross-card:hover { transform: translateY(-4px); }
.krp-cross-card:hover .krp-cross-card__media img { transform: scale(1.05); }
.krp-cross-card__meta { padding: 0.8rem 0.2rem 0; }
.krp-cross-card__brand {
  display: block;
  color: var(--krx-accent-core, #E0813B);
  margin-bottom: 0.3rem;
}
.krp-cross-card__name {
  font-family: var(--kr-font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  padding-bottom: 0.06em;
  display: block;
}

/* ==================================================================
   VIDEO BÜYÜTME (lightbox)
   ------------------------------------------------------------------
   Portföydeki her video kutusu tıklanınca tam ekran izlenebilir.
   Apple §3 kesintiye uğratılabilirlik: aşağı sürükleyip fırlatarak
   kapanır. §12 materyal: sahne karartılır, panel öne çıkar.
   ================================================================== */
.kr-lb {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 3rem);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  transition: opacity 0.35s var(--ap-spring);
}
.kr-lb[hidden] { display: none !important; }
.kr-lb.is-open { opacity: 1; }
.kr-lb__stage {
  position: relative;
  max-width: min(96vw, 1400px);
  max-height: 90vh;
  border-radius: clamp(12px, 2vw, 20px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
  transform: scale(0.94);
  transition: transform 0.45s var(--ap-spring);
  touch-action: pan-y;
}
.kr-lb.is-open .kr-lb__stage { transform: scale(1); }
.kr-lb__stage video {
  display: block;
  max-width: min(96vw, 1400px);
  max-height: 90vh;
  width: auto;
  height: auto;
  background: #000;
}
/* video metadata gelmeden panel dogru oranda dursun (zıplama yok) */
.kr-lb__stage[style*="--lb-ar"] {
  /* Genislik uc sinirin en kucugu: ekran genisligi, ust sinir ve
     90vh yuksekligin bu orandaki genisligi. Yukseklik orandan dogar. */
  aspect-ratio: var(--lb-ar);
  width: min(96vw, 1400px, calc(90vh * var(--lb-ar)));
  height: auto;
}
.kr-lb__stage[style*="--lb-ar"] video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* kapat ve sayaç */
.kr-lb__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.2rem);
  right: clamp(0.6rem, 2vw, 1.2rem);
  z-index: 3;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 225, 0.28);
  background: rgba(10, 7, 5, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--kr-cream, #F4ECE1);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s var(--ap-spring), background 0.3s ease;
}
.kr-lb__close:hover { background: rgba(224, 129, 59, 0.9); color: #1a0d04; transform: rotate(90deg); }
.kr-lb__nav {
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 225, 0.22);
  background: rgba(10, 7, 5, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--kr-cream, #F4ECE1);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s var(--ap-spring);
}
.kr-lb__nav:hover { background: rgba(224, 129, 59, 0.9); color: #1a0d04; }
.kr-lb__nav.is-prev { left: clamp(0.4rem, 1.5vw, 1rem); }
.kr-lb__nav.is-next { right: clamp(0.4rem, 1.5vw, 1rem); }
.kr-lb__count {
  position: absolute;
  bottom: clamp(0.6rem, 2vw, 1.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--kr-cream, #F4ECE1);
  background: rgba(10, 7, 5, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  pointer-events: none;
}
/* büyütülebilir kutularda imleç ve hafif ipucu */
[data-kr-zoom] { cursor: zoom-in; position: relative; }
[data-kr-zoom]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(224, 129, 59, 0);
  transition: box-shadow 0.35s var(--ap-spring);
  pointer-events: none;
  z-index: 2;
}
[data-kr-zoom]:hover::after { box-shadow: inset 0 0 0 2px rgba(224, 129, 59, 0.55); }
@media (max-width: 640px) {
  .kr-lb__nav { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-lb, .kr-lb__stage { transition: opacity 0.2s ease; }
  .kr-lb__stage { transform: none; }
}