/* omerkuzey.com.tr — site stilleri.
   Faz 2'de satır içi <style> bloğundan buraya taşındı: CSP `style-src 'self'`
   satır içi stile izin vermiyor. Tailwind yardımcı sınıfları assets/tailwind.css'te,
   burada yalnızca özel bileşenler var. */

/* Dekoratif blur lekeleri ve reveal animasyonunun başlangıç ötelemesi görünür alanın
   dışına taşıyor; `clip` bunu kırpar ve `hidden`in aksine scroll-behavior'ı bozmaz. */
html { overflow-x: hidden; overflow-x: clip; }
body { background-color: #0C0D0E; color: #EAE9E6; transition: background-color 0.4s, color 0.4s; }

.glass {
  backdrop-filter: blur(20px);
  background: rgba(20, 21, 23, 0.45);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.4);
}
.glass-metal {
  backdrop-filter: blur(12px);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.1);
}
.stroke { -webkit-text-stroke: 1px rgba(234,233,230,0.35); color: transparent; }
#bg { position: fixed; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none; }

.bento-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(20, 21, 23, 0.35);
  border: 1px solid rgba(255,255,255,0.04);
}
.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(20, 21, 23, 0.6);
  transform: translateY(-4px) scale(1.005);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(255, 255, 255, 0.02);
}

/* Navbar: kaydırınca küçülür ve bulanıklaşır */
#navbar { transition: padding 0.4s cubic-bezier(0.16,1,0.3,1), background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
#navbar.nav-scrolled { padding-top: 0.5rem; padding-bottom: 0.5rem; background: rgba(12,13,14,0.72); box-shadow: 0 10px 40px rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.09); }
#navbar.nav-scrolled #navLogo { transform: scale(0.92); }

/* Scroll-spy */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: #ef4444; transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.nav-link.active { color: #fff; }
.nav-link.active::after { transform: scaleX(1); }

/* Scroll-reveal */
/* GİZLEME YALNIZCA .js ALTINDA: js/head.js boyamadan önce <html>'e .js ekler.
   JS kapalıysa sınıf hiç eklenmez, içerik baştan görünür kalır (eski <noscript>
   çözümünün yerini alır — CSP satır içi <style>'a izin vermiyor).
   BU KOŞULU KALDIRMA: kaldırılırsa JS kapalı kullanıcı boş sayfa görür. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="left"].revealed { transform: translateX(0); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="right"].revealed { transform: translateX(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

.tilt-card { transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); will-change: transform; }
.tilt-inner { transform: translateZ(30px); }

.flagship-card { transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
.flagship-card:hover { border-color: rgba(239,68,68,0.3); box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 40px -10px rgba(239,68,68,0.15); }
.flagship-img { transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.flagship-card:hover .flagship-img { transform: scale(1.04); }

.cred-pill { transition: all 0.3s ease; }
.cred-pill:hover { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); transform: translateY(-2px); }

.tag-pill { transition: all 0.2s ease; }
.tag-pill:hover { border-color: rgba(239,68,68,0.4); color: #ef4444; }

.project-card { transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
.project-card:hover { border-color: rgba(239,68,68,0.25); transform: translateY(-4px); }

.tech-card { border-left: 2px solid rgba(255,255,255,0.08); transition: all 0.4s ease; }
.tech-card:hover { border-left-color: #ef4444; background: rgba(255,255,255,0.03); }
.os-window { border-top: 6px solid rgba(255,255,255,0.06); }
.gradient-text { background: linear-gradient(120deg, #fff 0%, rgba(255,255,255,0.75) 45%, #ef4444 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Sertifika sayfası */
/* Belgelerin tarama oranları 0,71 (dikey Youthpass) ile 1,42 (yatay sertifika)
   arasında değişiyor — 2 kat fark. Doğal oranda basılınca ızgaradaki kartlar
   arasında 335px yükseklik farkı oluşuyordu. Sabit 4/3 pencere + object-contain:
   kartlar hizalanıyor, belge KIRPILMIYOR (kırpma sertifikanın içeriğini keserdi). */
.cert-thumb { aspect-ratio: 4 / 3; }
.cert-card { transition: all 0.45s cubic-bezier(0.16,1,0.3,1); }
.cert-card:hover { transform: translateY(-5px); border-color: rgba(239,68,68,0.35); box-shadow: 0 22px 50px rgba(0,0,0,0.5); }
.filter-tab[aria-selected="true"] { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); color: #fff; }
#lightbox[hidden] { display: none; }
.lb-btn { transition: background 0.2s ease, transform 0.2s ease; }
.lb-btn:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); }

/* Yıllık modalı (Ctrl+K) */
#yillikModal[hidden] { display: none; }
.yillik-kutu { animation: yillikGir 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes yillikGir { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .yillik-kutu { animation: none; } }

/* Odak halkası — klavyeyle gezinenler için her zaman görünür */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #ef4444; outline-offset: 3px; border-radius: 6px;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: #ef4444; color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 0.75rem 0.75rem;
  font-size: 0.8rem; font-weight: 700; z-index: 100; transition: transform 0.2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tilt-card, #heroTilt { transform: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Açık tema */
.light-mode body { background-color: #F5F5F7; color: #1A1A1A; }
.light-mode .glass {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
.light-mode .glass-metal { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
.light-mode #navbar.nav-scrolled { background: rgba(255,255,255,0.9) !important; }
.light-mode .bento-card { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode .bento-card:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.16) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.06) !important; }
.light-mode .text-white { color: #1A1A1A !important; }
.light-mode .text-white\/90 { color: rgba(0, 0, 0, 0.9) !important; }
.light-mode .text-white\/70 { color: rgba(0, 0, 0, 0.72) !important; }
.light-mode .text-white\/60 { color: rgba(0, 0, 0, 0.64) !important; }
.light-mode .text-white\/50 { color: rgba(0, 0, 0, 0.58) !important; }
.light-mode .stroke { -webkit-text-stroke: 1px rgba(26, 26, 26, 0.45) !important; }
.light-mode .gradient-text { background: linear-gradient(120deg, #141414 0%, #333 45%, #c81e1e 100%); -webkit-background-clip: text; background-clip: text; }
.light-mode #bg { opacity: 0.15; }
.light-mode canvas { filter: invert(1); }
.light-mode .bg-oxy-500\/10 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light-mode .bg-oxy-700\/5 { background-color: rgba(0, 0, 0, 0.02) !important; }
.light-mode .bg-amber-500\/5 { background-color: rgba(0, 0, 0, 0.01) !important; }
.light-mode .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }
.light-mode .border-white\/5 { border-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light-mode .bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, 0.02) !important; }
.light-mode .tech-card { border-left-color: rgba(0,0,0,0.1) !important; }
.light-mode .os-window { border-top-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode #themeToggle, .light-mode #menuBtn { color: #1A1A1A !important; }

/* ── Yazdırma ────────────────────────────────────────────────────────────────
   Komisyon üyesi sayfayı yazdırırsa: navigasyon, animasyon, dekoratif görsel ve
   arka plan olmadan, okunur, kısa bir belge çıkar. Dış bağlantıların adresi basılır. */
@media print {
  #bg, header, #mobileMenu, .skip-link, #lightbox, canvas,
  .animate-slowPulse, .animate-float, [aria-hidden="true"] { display: none !important; }

  /* Dekoratif görseller yazdırmada yer kaplar, bilgi taşımaz */
  .flagship-card img, #heroTilt, .cert-card img, .os-window img { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 9.5pt !important; line-height: 1.35 !important; }

  main, #main { padding-top: 0 !important; }
  section { padding-top: 4mm !important; padding-bottom: 4mm !important;
            min-height: 0 !important; break-inside: avoid; }
  #home { min-height: 0 !important; padding-top: 0 !important; }
  h1 { font-size: 20pt !important; line-height: 1.1 !important; margin-bottom: 2mm !important; }
  h2 { font-size: 12pt !important; margin-bottom: 1.5mm !important; }
  h3 { font-size: 10pt !important; }
  p, li { margin-bottom: 1mm !important; }

  .glass, .glass-metal, .bento-card, .flagship-card, .cert-card, .tech-card, .cred-pill, .tag-pill {
    background: none !important; border: 0.5pt solid #ccc !important;
    box-shadow: none !important; backdrop-filter: none !important;
    padding: 2.5mm !important; border-radius: 2mm !important;
  }
  .grid { gap: 2.5mm !important; }

  [data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stroke { -webkit-text-stroke: 0 !important; color: #000 !important; }
  .gradient-text, .bg-clip-text {
    color: #000 !important; background: none !important; -webkit-text-fill-color: #000 !important;
  }
  .text-white, .text-white\/90, .text-white\/70, .text-white\/60, .text-white\/50 { color: #000 !important; }
  .text-oxy-500 { color: #444 !important; }

  /* Dış bağlantının adresi görünsün; site içi bağlantılarda gereksiz */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; word-break: break-all; }
  a[href^="https://omerkuzey.com.tr"]::after { content: ""; }
}

/* Açık tema */
.light-mode body { background-color: #F5F5F7; color: #1A1A1A; }
.light-mode .glass {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
.light-mode .glass-metal { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
.light-mode #navbar.nav-scrolled { background: rgba(255,255,255,0.9) !important; }
.light-mode .bento-card { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode .bento-card:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.16) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.06) !important; }
.light-mode .text-white { color: #1A1A1A !important; }
.light-mode .text-white\/90 { color: rgba(0, 0, 0, 0.9) !important; }
.light-mode .text-white\/70 { color: rgba(0, 0, 0, 0.72) !important; }
.light-mode .text-white\/60 { color: rgba(0, 0, 0, 0.64) !important; }
.light-mode .text-white\/50 { color: rgba(0, 0, 0, 0.58) !important; }
.light-mode .stroke { -webkit-text-stroke: 1px rgba(26, 26, 26, 0.45) !important; }
.light-mode .gradient-text { background: linear-gradient(120deg, #141414 0%, #333 45%, #c81e1e 100%); -webkit-background-clip: text; background-clip: text; }
.light-mode #bg { opacity: 0.15; }
.light-mode canvas { filter: invert(1); }
.light-mode .bg-oxy-500\/10 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light-mode .bg-oxy-700\/5 { background-color: rgba(0, 0, 0, 0.02) !important; }
.light-mode .bg-amber-500\/5 { background-color: rgba(0, 0, 0, 0.01) !important; }
.light-mode .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }
.light-mode .border-white\/5 { border-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light-mode .bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, 0.02) !important; }
.light-mode .tech-card { border-left-color: rgba(0,0,0,0.1) !important; }
.light-mode .os-window { border-top-color: rgba(0, 0, 0, 0.07) !important; }
.light-mode #themeToggle, .light-mode #menuBtn { color: #1A1A1A !important; }

/* Komisyon üyesi yazdırırsa: navigasyon, animasyon ve dekor olmadan temiz çıktı */
@media print {
  #bg, header, #mobileMenu, .skip-link, #lightbox, canvas { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { padding-top: 0 !important; }
  .glass, .glass-metal, .bento-card { background: none !important; border: 1px solid #ddd !important; box-shadow: none !important; backdrop-filter: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stroke { -webkit-text-stroke: 0 !important; color: #000 !important; }
  .gradient-text { color: #000 !important; background: none !important; -webkit-text-fill-color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #555; }
  section { break-inside: avoid; }
}

/* ── Satır içi style="" yerine sınıflar (CSP: style-src 'self') ──────────── */
/* Reveal gecikme kademesi: eskiden style="--i:N" idi. */
.d0 { --i: 0 } .d1 { --i: 1 } .d2 { --i: 2 } .d3 { --i: 3 } .d4 { --i: 4 } .d5 { --i: 5 }
/* Ortam lekelerinin animasyon kaydırması */
.ad-3 { animation-delay: -3s }
.ad-5 { animation-delay: -5s }
/* Lightbox taşarsa dikey kaydırılabilsin */
.kaydir-y { overflow-y: auto }

/* ── JS kapalıyken reveal öğeleri görünür kalır ───────────────────────────
   Eskiden bunu <noscript><style> hallediyordu; CSP için kaldırıldı.
   js/head.js <html> öğesine .js sınıfını ekliyor, gizleme ona bağlı. */