/*
 * krombera /tr/ statik sayfalar: React paketinin (index-*.js) yerine geçen küçük stil katmanı.
 * TASLAK. Canlıya konmadı. index-BGpD-UQn.css'ten SONRA yüklenmeli.
 * DRAFT for the /tr/ static pages. Load AFTER /assets/index-BGpD-UQn.css.
 */

/* Tailwind preflight [hidden] kuralı .grid/.flex gibi yardımcı sınıflara yeniliyor.
   Banner görünümleri ve mobil menü için hidden özniteliğini kesinleştir. */
[hidden] { display: none !important; }

/* 1) whileInView yerine "reveal". Gizleme yalnızca <html class="js"> varken uygulanır,
      JS yoksa içerik her zaman görünür. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--ry, 20px));
  transition:
    opacity var(--rd, .8s) cubic-bezier(.16, 1, .3, 1) var(--rdelay, 0s),
    transform var(--rd, .8s) cubic-bezier(.16, 1, .3, 1) var(--rdelay, 0s);
}
.js [data-reveal].is-in,
.reveal-fallback [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 2) Ana sayfa hero giriş animasyonu (paketteki animate: değerlerinin CSS karşılığı). İsteğe bağlı. */
@keyframes trWordUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes trFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes trFade   { from { opacity: 0; } to { opacity: 1; } }
.js [data-hero-word]   { animation: trWordUp 1.1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.4s + var(--i, 0) * .12s); }
.js [data-hero-label]  { animation: trFadeUp .8s cubic-bezier(.16, 1, .3, 1) .3s both; }
.js [data-hero-lead]   { animation: trFadeUp .9s ease-out 1s both; }
.js [data-hero-marquee]{ animation: trFade 1s ease-out 1.4s both; }
@media (prefers-reduced-motion: reduce) {
  .js [data-hero-word], .js [data-hero-label], .js [data-hero-lead], .js [data-hero-marquee] { animation: none; }
}

/* 3) Ana sayfa hizmet listesi: paket onMouseEnter ile scale-x-0 -> scale-x-100 yapıyor. CSS karşılığı. */
#services li.group:hover .origin-left.scale-x-0 { --tw-scale-x: 1; }

/* 4) Mobil menü (paketteki AnimatePresence + clipPath animasyonu). */
#tr-mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s cubic-bezier(.77, 0, .175, 1);
}
#tr-mobile-menu.is-open { clip-path: inset(0 0 0% 0); }
#tr-mobile-menu .tr-mitem {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
#tr-mobile-menu.is-open .tr-mitem { opacity: 1; transform: none; }
#tr-mobile-menu.is-open .tr-mitem:nth-child(1) { transition-delay: .2s; }
#tr-mobile-menu.is-open .tr-mitem:nth-child(2) { transition-delay: .26s; }
#tr-mobile-menu.is-open .tr-mitem:nth-child(3) { transition-delay: .32s; }
#tr-mobile-menu.is-open .tr-mitem:nth-child(4) { transition-delay: .38s; }
#tr-mobile-menu.is-open .tr-mitem:nth-child(5) { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  #tr-mobile-menu, #tr-mobile-menu .tr-mitem { transition: none; }
}

/* 4c) Ana sayfa kayan şerit: şerit 1,4 sn'de belirir (hero giriş animasyonu), sonra 3 sn sabit durur,
   4,4 sn'de kaymaya başlar (sahip: "önce sabit dursun 3 saniye, sonra kaymaya başlasın", 4 Kasım 2026) */
[data-hero-marquee] .marquee { animation-delay: 4.4s; }
/* 4b) Hero kelimeleri: Türkçe alt çengeller (ç, ş, ğ) kayan-kelime animasyonunun taşma kutusunda kesilmesin */
[data-hero-title] .overflow-hidden { padding-bottom: .16em; margin-bottom: calc(.125rem - .16em); }
/* 4d) Hero: italik "etki." noktası sağdaki taşma kutusunda kesilmesin */
[data-hero-title] .overflow-hidden { padding-right: .08em; margin-right: calc(.5rem - .08em); }
/* 4f) Hakkımızda zaman çizelgesi: yıl sütunu dar (7rem); "Bugüne kadar" tek satıra sığmayıp metnin üstüne taşıyordu */
.md\:w-28 > .whitespace-nowrap { white-space: normal; line-height: 1.15; }
/* 4e) Vitrin görseli "Fikirden etkiye" (sahibin tasarımı): başlığın sağındaki boşlukta, dikeyde başlığa ortalı.
   Ölçüler başlık yazı boyuna (em) bağlı; başlık ~4,1em genişlikte. Dar ekranda yer olmadığı için gizli. */
[data-hero-title] { position: relative; }
.tr-hero-art { display: none; }
@media (min-width: 1200px) {
  .tr-hero-art { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: min(calc(100% - 4.5em), 6.2em); pointer-events: none; }
  .tr-hero-art svg { display: block; width: 100%; height: auto; }
  .js .tr-hero-art { animation: trFade 1.2s ease-out 1.2s both; }
}
@media (prefers-reduced-motion: reduce) { .js .tr-hero-art { animation: none; } }
/* 5) Görünür soru-cevap bloğu (TR'ye özel; footer'dan önce). Renkler sitenin CSS değişkenlerinden. */
.tr-faq { border-top: 1px solid hsl(var(--foreground) / .15); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.tr-faq-wrap { padding-top: 5rem; padding-bottom: 5rem; }
.tr-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.tr-faq-label { grid-column: span 12 / span 12; }
.tr-faq-body { grid-column: span 12 / span 12; }
.tr-faq-title { font-size: 2.25rem; line-height: 1.1; font-weight: 500; margin: 0 0 2.5rem; }
.tr-faq-item { border-top: 1px solid hsl(var(--foreground) / .15); padding: 1.75rem 0; display: grid; gap: .75rem; }
.tr-faq-item:last-child { border-bottom: 1px solid hsl(var(--foreground) / .15); }
.tr-faq-q { font-size: 1.375rem; line-height: 1.3; font-weight: 500; margin: 0; }
.tr-faq-a { font-size: 1rem; line-height: 1.7; color: hsl(var(--foreground) / .75); margin: 0; max-width: 46rem; }
@media (min-width: 768px) {
  .tr-faq-wrap { padding-top: 7rem; padding-bottom: 7rem; }
  .tr-faq-label { grid-column: span 3 / span 3; }
  .tr-faq-body { grid-column: span 9 / span 9; }
  .tr-faq-title { font-size: 3.75rem; }
  .tr-faq-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; }
  .tr-faq-q { font-size: 1.5rem; }
}

/* 4g) Dil düğmesi "TR / EN" başlığın sağında (sahip, 4 Kasım 2026). EN sayfalara aynı kuralları lang-switch.js ekler. */
.krb-lang { display: inline-flex; align-items: center; gap: .45rem; margin-right: .35rem; white-space: nowrap; line-height: 1; }
.krb-lang-on { color: hsl(var(--foreground)); font-weight: 600; }
.krb-lang-sep { color: hsl(var(--foreground) / .3); }
.krb-lang-off { color: hsl(var(--muted-foreground)); text-decoration: none; padding: .75rem .25rem; margin: -.75rem -.25rem; transition: color .3s ease; }
.krb-lang-off:hover { color: hsl(var(--accent)); }
.krb-lang-off:focus-visible { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; }
/* Tablet (768-1023 px): menü ve İLETİŞİM yan yana sığmıyor; yalnız öteki dilin bağlantısı görünür */
@media (min-width: 768px) and (max-width: 1023.98px) { .krb-lang-on, .krb-lang-sep { display: none; } }

/* 4h) Logonun yanındaki "15. YIL" mobilde de görünür (sahip, 4 Kasım 2026). 360 px altında dil düğmesine yer kalsın diye boşluklar daralır. */
@media (max-width: 359.98px) { header .group.gap-3 { gap: .5rem; } .krb-yil { padding-left: .5rem; } }

/* 6) Basın sayfası (sahip, 4 Kasım 2026): haber listesi, yeniden eskiye. Renkler sitenin CSS değişkenlerinden. */
.tr-basin-list { list-style: none; margin: 0; padding: 0; }
.tr-basin-item { border-top: 1px solid hsl(var(--foreground) / .15); padding: 1.75rem 0; display: grid; gap: .6rem; }
.tr-basin-item:last-child { border-bottom: 1px solid hsl(var(--foreground) / .15); }
/* Yayın adları yazıldığı gibi (büyük harfe çevrilince "CHIP Online" "ONLİNE" oluyordu) */
.tr-basin-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8125rem; letter-spacing: .04em; text-transform: none; color: hsl(var(--muted-foreground)); }
.tr-basin-yayin { color: hsl(var(--accent)); }
.tr-basin-baslik { font-size: 1.375rem; line-height: 1.3; font-weight: 500; margin: 0; }
.tr-basin-link { color: inherit; text-decoration: none; transition: color .3s ease; }
.tr-basin-link:hover { color: hsl(var(--accent)); }
.tr-basin-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.tr-basin-ok { color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) {
  .tr-basin-item { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem; align-items: baseline; }
  .tr-basin-meta { flex-direction: column; }
  .tr-basin-baslik { font-size: 1.625rem; }
}