/* CAH - acik tema

   Koyu tema style-*.css'te; oradaki hicbir kurala dokunulmadi. Bu dosya yalnizca
   <html data-theme="light"> iken devreye giriyor, secimi theme.js yapiyor.
   Degerler Figma'daki "· Light" board'larindan.

   Katmansiz yazildi: Tailwind'in @layer kurallarinin ustune ozgulluk
   yaristirmadan cikiyor. */

/* 1 - Renk degiskenleri - - - - - - - - - - - - - - - - - - - - - - - - - -  */

html[data-theme='light'] {
   /* Sayfa gecisinin zemini (head'deki satir ici stil). */
   --page-bg: #f7f8f9;

   --color-bg: #f7f8f9;
   --color-surface: #fff;
   --color-surface-raised: #e5e8ea;
   --color-surface-sunken: #f7f8f9;
   --color-border: #dfe4e7;
   --color-text: #15181b;
   --color-text-muted: #5b6268;
   --color-text-subtle: #949ba1;
   --color-on-accent: #fff;
   --color-icon: #12303f;

   --color-accent: #066293;
   --color-accent-10: #0662931a;
   --color-accent-14: #06629324;
   --color-accent-16: #06629329;
   --color-accent-18: #0662932e;
   --color-accent-26: #06629342;

   --color-warning: #e9e879;
   --color-danger: #a3352b;
   --color-scrim: #15181b57;
   --color-scrim-soft: #15181b57;

   /* Isaretlemede dogrudan kullanilan ara tonlar. 880, 900 ve 1000'e
      dokunulmadi: beyaz oynat dugmesindeki ikon, kapak rozeti ve video zemini
      acikta da koyu kaliyor. */
   --color-neutral-850: #f1f3f4;
   --color-neutral-750: #f1f3f4;
   --color-neutral-650: #e5e8ea;
   --color-neutral-600: #dfe4e7;
   --color-neutral-400: #c4cace;
}

/* 2 - Degiskenle cozulmeyen yerler - - - - - - - - - - - - - - - - - - - -  */

/* Eslesen soz (transkript, sonuc karti). --color-warning acikta vurgu zemini;
   yazi olarak okunmuyor. */
html[data-theme='light'] .text-warning {
   color: #7d6e12;
}

/* Footer'daki imza header'daki logodan bir ton sonuk. */
html[data-theme='light'] footer .text-icon {
   color: #5b6268;
}

/* Ziyaret fotografindaki +14 ortusu fotografin ustunde, acikta da koyu. */
html[data-theme='light'] .bg-scrim.text-text {
   background-color: #0b0d0f9e;
   color: #fff;
}

/* Mobilde Figma'nin ayrildigi yerler. */
@media (width < 64rem) {
   /* Ana sayfa "Son eserler": kucuk kapaklarin zemini kartla ayni beyaz
      olmasin. Masaustunde kapak zemini yok. */
   html[data-theme='light'] .group\/featured > .bg-surface,
   html[data-theme='light'] .group\/work > .bg-surface {
      background-color: #f1f3f4;
   }

   /* Menu paneli zemin renginde, tema hapi beyaz. Masaustunde panel beyaz,
      hap gri kaliyor. Transkriptteki yuzen bulma cubugu ve arama sonucundaki
      zaman kodu seridi de acikta beyaz. */
   html[data-theme='light'] [data-theme-switch],
   html[data-theme='light'] [data-transcript] .bg-neutral-750,
   html[data-theme='light'] [data-result-sheet] .bg-neutral-750 {
      background-color: #fff;
   }
}

/* Arama sonucundaki oynat dugmesi: koyuda yuzde 94 yuzey, acikta tam beyaz. */
@media (min-width: 64rem) {
   html[data-theme='light'] .lg\:bg-surface\/94 {
      background-color: #fff;
   }
}

/* 3 - Golgeler - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* Renkleri sinifin icine yazilmis, degiskene baglanamiyor. Acik zeminde
   Figma'daki gibi yaklasik yarim yogunluk. lg: satirlari style-*.css'teki
   sirayi izliyor, yoksa lg:shadow-none masaustunde golgeyi geri getirirdi. */
html[data-theme='light'] .shadow-resting {
   --tw-shadow: 0 1px 2px #15181b0d;
}
html[data-theme='light'] .shadow-raised {
   --tw-shadow: 0 6px 18px #15181b0a;
}
html[data-theme='light'] .shadow-overlay {
   --tw-shadow: 0 10px 28px #15181b12;
}
html[data-theme='light'] .shadow-dropdown {
   --tw-shadow: 0 1px 2px #15181b0a, 0 12px 32px #15181b12;
}
html[data-theme='light'] .shadow-panel {
   --tw-shadow: 0 18px 48px #00000033;
}
html[data-theme='light'] .shadow-sheet {
   --tw-shadow: 0 -8px 34px -6px #00000033;
}
html[data-theme='light'] .shadow-modal {
   --tw-shadow: 0 14px 36px #00000033;
}

@media (min-width: 64rem) {
   html[data-theme='light'] .lg\:shadow-dropdown {
      --tw-shadow: 0 1px 2px #15181b0a, 0 12px 32px #15181b12;
   }
   html[data-theme='light'] .lg\:shadow-panel {
      --tw-shadow: 0 18px 48px #00000033;
   }
   html[data-theme='light'] .lg\:shadow-popover {
      --tw-shadow: 0 14px 36px #0000003b;
   }
   html[data-theme='light'] .lg\:shadow-modal {
      --tw-shadow: 0 14px 36px #00000033;
   }
   html[data-theme='light'] .lg\:shadow-none {
      --tw-shadow: 0 0 #0000;
   }
}

/* Odak halkasi: shadow-focus'un tum varyantlari --tw-shadow-color'i okuyor,
   bu ogelerde baska golge yok. */
html[data-theme='light'] [class*='shadow-focus'] {
   --tw-shadow-color: #0662932e;
}

/* 4 - Tema degisirken - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* theme.js bir karelik bu sinifi basiyor: renkler ayni anda donuyor. Hapin
   kaymasi ve ikonun donusu kendi animasyonuyla kaliyor. */
html.theme-switching *:not([data-theme-thumb], .group\/theme *),
html.theme-switching *::before,
html.theme-switching *::after {
   transition: none !important;
}