/* ==========================================================================
   KARAMEL NOIR: temel katman
   Apple renk disiplini + siyah agirlikli zemin + ince cizgiler + ara ara renk.
   Her sayfada EN SON yuklenir. Burada yalnizca tokenlar ve genel kurallar
   durur; bilesen bazli renkler kendi dosyalarinda bu tokenlara baglanir.
   ========================================================================== */

:root {
  /* --- siyah tonlari: zemin hiyerarsisi (agir basan) --- */
  --n-0: #000000;      /* ana zemin */
  --n-50: #0a0a0b;     /* ikinci bolum zemini */
  --n-100: #111113;    /* kart, karo */
  --n-150: #161617;    /* yukseltilmis yuzey */
  --n-200: #1d1d1f;    /* koyu buton, hover yuzeyi, acik zeminde ana metin */
  --n-300: #2c2c2e;
  --n-400: #424245;
  --n-500: #6e6e73;    /* acik zeminde ikincil metin (4.66:1) */
  --n-600: #86868b;    /* koyu zeminde ucuncul metin (5.8:1), iki tonlu baslik */
  --n-700: #a1a1a6;    /* koyu zeminde ikincil metin (8.2:1) */
  --n-800: #d2d2d7;    /* acik zeminde ayrac */
  --n-900: #f5f5f7;    /* koyu zeminde ana metin, acik bolum zemini */
  --n-1000: #ffffff;

  /* --- ince cizgiler --- */
  --hair: rgba(255, 255, 255, 0.12);
  --hair-soft: rgba(255, 255, 255, 0.07);
  --hair-strong: rgba(255, 255, 255, 0.24);
  --hair-light: rgba(0, 0, 0, 0.10);        /* acik zeminde */
  --hair-light-strong: rgba(0, 0, 0, 0.18);

  /* --- marka vurgusu: YALNIZCA etkilesim (metin link, odak, secim) --- */
  --accent: #e8a066;          /* koyu zeminde (9.6:1) */
  --accent-ink: #9a4f17;      /* acik zeminde (5.5:1 #f5f5f7 uzerinde) */

  /* --- ara ara renkler: kucuk isaret, nokta, ayrac glifi, sayi.
         ASLA buyuk yuzey, ASLA gradient metin, bilesen basina tek renk. --- */
  --spot-caramel: #e8a066; /* --accent ile ayni: iki yakin turuncu yan yana gelmesin */
  --spot-coral: #ef6f6c;
  --spot-lilac: #b48fd6;
  --spot-sky: #6fa8dc;
  --spot-sage: #8cc084;
  --spot-silver: #c7c7cc;

  /* --- tipografi: San Francisco > Helvetica; Apple disi cihazda Geist --- */
  --f-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Geist, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Geist Mono", Consolas, monospace;

  /* --- butonlar (Apple hap formu) --- */
  --pill: 980px;

  /* --- eski katman tokenlarinin notr karsiliklari --- */
  --kr-font-display: var(--f-sans);
  --kr-font-body: var(--f-sans);
  --kr-accent: var(--accent);
  --kr-cream: var(--n-900);
  --kr-cream-dim: var(--n-700);
  --kr-dark: var(--n-0);
  --kr-dark-2: var(--n-50);
  --kr-glass: rgba(255, 255, 255, 0.04);
  --kr-glass-brd: var(--hair);
  --kd-bg: var(--n-0);
  --kd-bg-2: var(--n-150);
  --kd-text: var(--n-900);
  --kd-accent: var(--accent);
  --kd-accent-dark: var(--n-200);
  --krx-amber: var(--n-900);
  --krx-burnt: var(--n-600);
  --krx-ink: var(--n-0);
  --krx-accent-light: var(--n-900);
  --krx-accent-core: var(--n-900);
  --krx-accent-deep: var(--n-600);
  --krx-cream-bg: var(--n-900);
  --krx-cream-ink: var(--n-200);
  --krx-glass-border: var(--hair);
  --krx-glass-fill: rgba(255, 255, 255, 0.04);
  --krx-glow: rgba(255, 255, 255, 0.6);
  --ap-mat-heavy: rgba(0, 0, 0, 0.72);
  --ap-mat-regular: rgba(12, 12, 13, 0.6);
  --ap-mat-light: rgba(255, 255, 255, 0.05);
  --ap-mat-edge: var(--hair);
}

/* --- temel --- */
html {
  background: var(--n-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--n-0);
  color: var(--n-900);
  font-family: var(--f-sans);
  font-feature-settings: "kern" 1;
}
body, button, input, select, textarea { font-family: var(--f-sans); }
code, kbd, samp, pre { font-family: var(--f-mono); }

/* Yatay tasma: hidden yerine clip. karamel-custom (html, body) ve kd-raw
   (body.kr-page) hidden verdigi icin body kendi kaydirma kabina donusuyor,
   position:sticky hic kaymayan body'ye gore hesaplanip calismiyordu
   (servis paneli, yasal icindekiler, hakkimizda ve kurumsal basliklar).
   clip yatay tasmayi yine keser ama kaydirma kabi olusturmaz. */
html, body, body.kr-page { overflow-x: clip !important; }

/* Sticky artik calistigi icin yan sutunlar sabit ust cubugun altinda
   durmali: logo 128px ve cubugun eriyen materyali ~160px'e iner; eski
   60px varsayimli top degerlerinde logo icindekiler basligini ortuyordu.
   Tablet ve mobilde bu ogeler zaten position:static. */
:root { --n-stick-top: 9.5rem; }
.krp-legal__toc,
.krp-project__shead,
.krp-faq__aside-inner,
.krp-form__aside,
.krp-corp__trust-head,
.krp-about__story-side .krp-about__h2 { top: var(--n-stick-top); }
/* icindekiler bagindan inen bolum basligi da ayni hizada, cubugun altinda */
.krp-legal__article h2 { scroll-margin-top: var(--n-stick-top); }

/* Basliklarin icindeki vurgu: Apple iki tonlu baslik.
   Italik serif ve gradient dolgu yok; ayni aile, ikincil gri. */
:is(h1, h2, h3, h4) :is(em, i) {
  font-family: inherit;
  font-style: normal;
}

/* --- tipografi olcegi (bilesen dosyalari bu basamaklara baglanir) ---
   hero: sayfa basina bir baslik; h1: bolum basligi; h2: satir / blok basligi. */
:root {
  --t-hero: clamp(3.25rem, 8vw, 7.5rem);
  --t-h1: clamp(2.5rem, 5.5vw, 5rem);
  --t-h2: clamp(1.875rem, 3.4vw, 3rem);
  --t-h3: clamp(1.375rem, 2vw, 1.75rem);
  --t-lead: clamp(1.1875rem, 1.6vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-body-lh: 1.53;
  --t-label: 12px;
  --t-label-ls: 0.06em;
}

/* Basliklar Apple gibi karisik harfte: kaynak metinler zaten Baslik
   Duzeninde. Tumu buyuk harf yalnizca mono kucuk etiketlerde kalir
   (.kr-micro ve benzerleri). Harf harf bolunen kompozisyonlar (menu
   katmani, marka sozcugu, 404 arka plan seridi) bilerek disarida. */
:is(
  .kfx-title, .kfx-w,
  .kr-service-row__title, .kr-process__title, .krx-pstep__name,
  .kr-featured__title, .krx-wrow__title, .krx-principle h3,
  .kr-stills__title, .kr-contact__title, .kr-works__title, .kd-uiw__title,
  .kr-marquee__track span, .krx-deck__track span,
  .krp-footer__title,
  .krp-services__title, .krp-sv__title, .krp-process__title,
  .krp-process__body h3, .krp-services__cta-panel h2,
  .krp-about__title, .krp-about__h2, .krp-about__brand,
  .krp-corp__h1, .krp-corp__title, .krp-corp__card h3,
  .krp-corp__row-body h3, .krp-corp__spec h3, .krp-corp__brand span,
  .krp-corp__panel-title,
  .krp-blog__title, .krp-blog__featured-title, .krp-blog__card-title,
  .krp-blog__cta-title,
  .krp-post__title, .krp-post__article h2, .krp-post__article h4,
  .krp-post__related-title, .krp-post__rcard-title, .krp-post__cta-title,
  .krp-faq__title, .krp-faq__cta-link,
  .krp-form__title, .krp-form__aside-title, .krp-success__title,
  .krp-fgroup__title, .krp-model__name,
  .krp-legal__title, .krp-legal__article h2,
  .krp-project__title, .krp-project__sheading, .krp-project__bheading,
  .krp-project__rich h4, .krp-project__tl-title, .krp-project__brand-name,
  .krp-project__others-title, .krp-cross-card__name,
  .krp-brand__works-title, .krp-brand__card-title,
  .krp-404__title,
  .kr-work-card__name, .krp-services__nav a
) {
  text-transform: none;
}

/* Kayan baslik kelimeleri: ust ogenin em degerini px olarak miras
   aliyordu (Yapiyoruz neredeyse 0 tracking, Neler -0.03em). Ayni baslikta
   her kelime ayni sikilikta. */
.kfx-w,
.kfx-w.kfx-cursive { letter-spacing: -0.025em; }

/* Kucuk sans basliklar: pozitif tracking yok, etiket sesi mono'da kalir */
.kr-work-card__name,
.krp-services__nav a {
  font-weight: 500;
  letter-spacing: -0.01em;
}
.kr-marquee__track span,
.krp-fgroup__title,
.krp-model__name { letter-spacing: -0.01em; }

/* Secim ve odak: marka vurgusu sadece burada ve metin linklerinde */
::selection { background: rgba(232, 160, 102, 0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- yardimci siniflar (sablonlar icin) --- */
.n-spot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--spot, var(--spot-silver)); vertical-align: 0.12em; }
.n-hair-top { border-top: 1px solid var(--hair); }
.n-hair-bottom { border-bottom: 1px solid var(--hair); }

/* Disiplin kodu: site geneli tek renk sozlugu (/servisler sirasiyla ayni).
   Sablon ogeye ya da bir atasina data-cat basar; renk yalnizca 6px nokta,
   metin notr kalir. Oge basina tek ton. */
[data-cat="ai"]        { --cat: var(--spot-caramel); }
[data-cat="video"]     { --cat: var(--spot-coral); }
[data-cat="web"]       { --cat: var(--spot-sky); }
[data-cat="marka"]     { --cat: var(--spot-lilac); }
[data-cat="sosyal"]    { --cat: var(--spot-sage); }
[data-cat="otomasyon"] { --cat: var(--spot-silver); }
.n-cat::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat, var(--spot-silver));
  margin-right: 0.55em;
  vertical-align: 0.12em;
}

/* Dekoratif karamel AI varliklari (Kling/GPT donguleri, lottie):
   notr cam / titanyum. Icerik medyasina (proje video/gorselleri) dokunulmaz. */
[data-kfx-lottie],
.krx-process__vids video,
.krx-faq-vid,
.kfx-dial__core {
  filter: grayscale(1) contrast(1.06) brightness(1.04);
}

/* Buyuk harf donusumu lang=tr altinda calisir: e-posta adresi ve
   Ingilizce/karma veritabani etiketleri noktali I ile bozulmasin. */
a[href^="mailto:"] { text-transform: none !important; }
.krp-blog__tag { text-transform: none; letter-spacing: 0.02em; }

/* ==================================================================
   VURGU: az ama belirgin karamel (kullanici istegi, 2026-10-02).
   Yalnizca su yerlerde: baslik ici anahtar kelime haplari, oneri rozeti,
   manifesto marka ifadesi, is endeksi hover cizgisi, Yetenek Dosyasi hapi,
   hero aktif slayt isareti (kd-hero.css) ve surec aktif adimi (kd-krx.css).
   Buyuk renkli yuzey ve gradient YOK.
   ================================================================== */
:root {
  --accent-tint: rgba(232, 160, 102, 0.12);
  --accent-line: rgba(232, 160, 102, 0.42);
}
.krp-about__hl {
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: 0.38em;
  /* line-height 1: hap satira sigar, alt alta gelen iki hap birbirine degmez */
  line-height: 1;
  padding: 0.06em 0.3em 0.1em;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.krp-about__hl:hover {
  background: rgba(232, 160, 102, 0.2);
  border-color: rgba(232, 160, 102, 0.62);
}
/* rozet de hap gramerinde: ton dolgu + 1px cizgi + karamel metin (dolu turuncu yuzey yok) */
.krp-corp__badge {
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
}
.kr-manifesto__text .w.is-accent { color: var(--accent); }
.krx-wrow::after { background: var(--accent); }
.krx-deck__pill { color: var(--accent); border-color: var(--accent-line); }
.krx-deck:hover .krx-deck__pill {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(232, 160, 102, 0.7);
}