/*
Theme Name: Res. digital
Theme URI: https://resdijital.com/
Author: Res. digital
Description: Res. digital kurumsal sitesi için bağımsız, sayfa kurucusuz tema. jQuery yok, ikon fontu yok, Elementor bağımlılığı yok. Core Web Vitals hedefiyle yazıldı.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resdijital
Tags: custom-theme, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. FONT — DM Sans, self-hosted, woff2
   --------------------------------------------------------------------------
   ÖNEMLİ: latin-ext subset ZORUNLU. Google Fonts'un `latin` alt kümesi
   ğ (U+011F) / Ğ (U+011E) / İ (U+0130) / ş (U+015F) / Ş (U+015E)
   karakterlerini İÇERMEZ — bunlar latin-ext içindedir. Subset atlanırsa
   bu harfler fallback fontla çizilir: görsel bozulma + ek layout shift.

   Dosyalar assets/fonts/ altına konmalı. Doğrulama: "ğĞİşŞ" gözle kontrol.
   ========================================================================== */

/* DM Sans v17 DEĞİŞKEN fonttur (wght ekseni 100-1000). Google Fonts,
   400/500/700 için AYNI dosyayı sunar — dosya karşılaştırmasıyla
   doğrulandı (SHA-256 aynı). Bu yüzden ağırlık başına ayrı @font-face
   yerine subset başına TEK bildirim kullanılır:
     · 2 dosya, 2 istek, toplam 54 KB — tüm ağırlıklar dahil
     · Ağırlık başına ayrı dosya olsaydı 6 istek / 165 KB olurdu

   unicode-range değerleri Google Fonts CSS API çıktısından birebir
   alındı ve karşılaştırılarak doğrulandı. */

/* --- latin-ext: Türkçe ğ Ğ (U+011E/F) · İ (U+0130) · ş Ş (U+015E/F) BURADA --- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("assets/fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- latin: ı (U+0131), ö, ü, ç burada; ğ/İ/ş DEĞİL --- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("assets/fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Metrik eşleştirilmiş fallback: font yüklenene kadar CLS'i sıfırlar ---
   size-adjust / ascent-override değerleri Arial'ı DM Sans metriklerine
   yaklaştırır. Gerçek woff2 dosyaları geldikten sonra ölçülüp doğrulanmalı
   (Faz 1 doğrulama maddesi). */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100.6%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ==========================================================================
   2. TASARIM TOKENLARI
   ========================================================================== */

:root {
  /* --- Renk: marka --- */
  --c-primary:        #174EA6;  /* ana mavi — buton, link hover, vurgu */
  --c-primary-hover:  #1A5FC8;  /* hover — beyaz metinle 5,98:1 (AA).
                                   #4285F4 idi: 3,57:1 ile eşiğin altındaydı */
  --c-primary-soft:   #D2E3FC;  /* çok açık mavi — zemin, ters buton hover */

  /* --- Renk: nötr --- */
  --c-text:           #202124;  /* gövde metni ve koyu zemin */
  --c-surface:        #F1F3F4;  /* gri kart zemini */
  --c-bg:             #ffffff;

  /* --- Renk: uyarı --- (Final Rapor A5: kırmızının tek rolü dikkat/uyarı) */
  --c-attention:      #EA4335;

  /* --- Renk: türetilmiş opaklıklar --- */
  --c-text-70:        rgba(32, 33, 36, 0.70);
  --c-text-66:        rgba(32, 33, 36, 0.66);
  /* --c-text-62 KALDIRILDI: beyaz üzerinde 4,58:1 ile geçiyordu ama
     asıl kullanıldığı yer kartlar — gri zeminde 4,41:1, soft mavi
     üzerinde 4,15:1 ile AA eşiğinin altında kalıyordu. Doğrulama
     yalnızca beyaza karşı yapılmıştı. Kullanımları --c-text-66 ile
     değiştirildi (beyaz 5,21 · gri 4,98 · soft mavi 4,65). */
  /* --c-text-45 KALDIRILDI: beyaz üzerinde 2,77:1 ile AA eşiğinin
     altındaydı ve yalnızca küçük metinlerde kullanılıyordu. Önce
     --c-text-62'ye taşınmıştı; o da kaldırılınca --c-text-66'ya geçti. */
  --c-border:         rgba(32, 33, 36, 0.16);
  --c-border-soft:    rgba(32, 33, 36, 0.10);
  --c-border-strong:  rgba(32, 33, 36, 0.24);

  --c-on-dark-94:     rgba(255, 255, 255, 0.94);
  --c-on-dark-82:     rgba(255, 255, 255, 0.82);
  --c-on-dark-72:     rgba(255, 255, 255, 0.72);
  --c-on-dark-32:     rgba(255, 255, 255, 0.32);

  /* --- Tipografi --- */
  --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, sans-serif;

  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14.5px;
  --fs-md:   16px;
  --fs-lg:   18.5px;
  --fs-xl:   clamp(22px, 2.6vw, 32px);
  --fs-2xl:  clamp(24px, 3.2vw, 40px);
  --fs-3xl:  clamp(30px, 3.7vw, 50px);
  --fs-hero: clamp(34px, 5.4vw, 68px);

  --lh-tight: 1.04;
  --lh-snug:  1.45;
  --lh-body:  1.55;
  --lh-loose: 1.6;

  --ls-tight: -0.025em;
  --ls-wide:  0.13em;

  /* --- Ölçü ve düzen --- */
  --wrap:      1320px;
  --gutter:    24px;

  /*
   * KIRILIM NOKTALARI — tema genelinde yalnızca bu dört eşik kullanılır.
   * CSS'te medya sorgusu değişkeni kullanılamadığı için değer olarak
   * yazılamıyorlar; burada referans olarak duruyorlar.
   *
   *   520px   dar telefon — tek sütuna iner
   *   620px   telefon — ana sayfa bileşenleri sadeleşir
   *   720px   tablet dikey
   *   981px   masaüstü — hem üst menü hem üç sütunlu ızgaralar
   *
   * 981 keyfi değil: masaüstü başlığı logo 83 + menü 761 + CTA 95 =
   * 939px içerik istiyor, üstüne 2×24px kenar boşluğu = 987px. Bu
   * eşiğin altında menü taşar. İçerik ızgaraları önce 900 ve 860'ta
   * dönüyordu; 900–980 arasında masaüstü düzeni hamburger menüyle
   * birlikte görünüyordu. Üçü de 981'e hizalandı.
   */

  /* --- Köşe yarıçapı --- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-2xl:  34px;
  --r-pill: 999px;

  /* --- Geçiş --- */
  --t-fast: .2s ease;
  --t-base: .25s ease;
  --t-slow: .35s cubic-bezier(.16, 1, .3, 1);

  /* --- Cam yüzeyler ---
     backdrop-filter her boyamada yeniden hesaplanır. Bu yüzden YALNIZCA
     içeriğin üzerine binen, sayısı az ve konumu sabit öğelerde kullanılır:
     başlık, mega menü, çerez bandı, koyu panel üstündeki kartlar.
     Kart ızgaralarında ve hover durumlarında KULLANILMAZ — orada bedeli
     kaydırma akıcılığı ve INP olarak geri döner. */
  --glass-light:  rgba(255, 255, 255, 0.72);
  --glass-dark:   rgba(255, 255, 255, 0.10);
  --glass-blur:   saturate(180%) blur(14px);
  --glass-border: rgba(255, 255, 255, 0.18);

  /* --- Gölge --- */
  --shadow-lift: 0 18px 40px rgba(32, 33, 36, 0.12);
  --shadow-blue: 0 18px 40px rgba(23, 78, 166, 0.24);
}

/*
 * Dar ekranda kenar boşluğu.
 *
 * 24px her genişlikte sabitken 360px'lik ekranda içerik 297px'e
 * düşüyor ve satır uzunluğu 31–43 karaktere iniyordu; rahat okuma
 * aralığı 45–75. Bir SSS yanıtı 12 satıra yayılıyordu. 16px ile
 * içerik 328px'e çıkıyor.
 */
@media (max-width: 520px) {
  :root { --gutter: 16px; }
}

/*
 * Cam yüzey yardımcı sınıfı.
 *
 * @supports olmadan uygulanmaz: desteklemeyen tarayıcıda yarı saydam
 * zemin bulanıklık olmadan kalır ve metin okunmaz hale gelir. Fallback
 * her zaman DOLU zemindir.
 */
.glass { background: var(--c-bg); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: var(--glass-light);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .glass--dark {
    background: var(--glass-dark);
    border: 1px solid var(--glass-border);
  }
}

/*
 * Saydamlığı azaltma tercihi — erişilebilirlik gereği.
 * Bazı kullanıcılar için bulanık zemin üzerindeki metin okunamaz hale
 * gelir; bu tercihi açanlarda cam tamamen kapanır.
 */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass--dark {
    background: var(--c-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass--dark { background: rgba(255, 255, 255, 0.14) !important; }
}

/* Hareketi azaltma tercihi: tüm geçiş ve animasyonlar kapanır.
   Ana sayfa slider'ı da bunu JS tarafında kontrol eder. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/*
 * [hidden] KORUMASI — sessizce bozan bir tuzak.
 *
 * Tarayıcının kendi stil sayfası `[hidden] { display: none }` der, ama bu
 * kural en düşük öncelikli katmandadır: yazdığınız HERHANGİ bir
 * `display` bildirimi onu ezer. `.mega { display: flex }` yazdığınız anda
 * o elemana `hidden` koymak hiçbir işe yaramaz.
 *
 * Bu, staging'de mega menünün hiç kapanmamasına yol açtı: dört panel de
 * `hidden` idi ama `display:flex` yüzünden üst üste görünüyorlardı.
 *
 * !important burada bilinçli: `hidden` bir DURUM bildirimidir ve
 * görünüm kurallarından her zaman üstün olmalıdır.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { color: var(--c-primary); }

/* Görseller: width/height öznitelikleri şablonda ZORUNLU (CLS).
   Buradaki height:auto oranı korur. */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   4. ETKİLEŞİM DURUMLARI
   ========================================================================== */

::selection {
  background: var(--c-primary);
  color: #fff;
}

/* Klavye odağı — tema CSS'i bunu asla ezmemeli (WCAG 2.2 / Final Rapor #2) */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* Ekran okuyucu metni */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "İçeriğe atla" bağlantısı — odaklanınca görünür */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
  color: #fff;
}

/* ==========================================================================
   5. DÜZEN
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Dokunma hedefi minimumu — WCAG 2.2 2.5.8: 24×24px.
   Önemli kontroller için 44px önerilir (Final Rapor A2). */
.tap-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}