/* ===== PIXEL ART PORTFOLIO — STYLE v7 ===== */
:root {
  --bg: #1a1028;
  --bg2: #261740;
  --wood: #8B5E3C;
  --wood-dark: #5C3A1E;
  --wood-light: #C08B5C;
  --chain: #aaa;
  --gold: #f0c040;
  --text: #e8d8c4;
  --accent: #e8985a;
  --red: #ff3333;
  --green: #22c55e;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Press Start 2P', cursive;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  font-size:12px;
  line-height:2;
}

/* ===== LOADING SCREEN ===== */
.loading-screen {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
}
.kepenk-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  image-rendering:pixelated;
  z-index:2;
}
.loading-text {
  position:relative; z-index:3;
  font-size:16px; color:var(--gold);
  text-shadow:2px 2px 0 rgba(0,0,0,.8), 0 0 20px rgba(240,192,64,.5);
  animation:loadPulse 1.5s ease-in-out infinite;
  pointer-events:none;
}
.loading-dots { animation:dotBlink 1s steps(4,end) infinite; }
@keyframes loadPulse {
  0%,100% { opacity:.5; transform:scale(.97); }
  50% { opacity:1; transform:scale(1); }
}
@keyframes dotBlink { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:100vh; overflow:visible;
  display:flex; align-items:center; z-index:10;
}
.parallax-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.parallax-img {
  position:absolute; width:100%; min-height:115%;
  object-fit:cover; object-position:center bottom;
  image-rendering:pixelated; will-change:transform;
  bottom:0; left:0;
}

/* ===== VINVIM (below overlay so gradient affects it) ===== */
.vosvos-layer {
  position:absolute; width:100%; min-height:115%;
  bottom:0; left:0; z-index:1;
  pointer-events:none; will-change:transform;
}
.road-svg { position:absolute; inset:0; width:100%; height:100%; }
.vosvos {
  position:absolute; width:200px; height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  will-change:transform;
}

/* ===== CLOUDS (below overlay so gradient affects them) ===== */
.cloud-layer {
  position:absolute; top:0; left:0; width:100%; height:250px;
  z-index:1; pointer-events:none;
}
.cloud { position:absolute; opacity:.6; image-rendering:pixelated; }
.cloud-r { transform:translateX(-350px); }
.cloud-l { transform:translateX(calc(100vw + 350px)); }
.cloud-1 { top:5px;   height:110px; animation:cloudR 40s linear infinite; }
.cloud-2 { top:60px;  height:80px;  animation:cloudL 50s linear infinite; }
.cloud-3 { top:15px;  height:70px;  animation:cloudR 60s 12s linear infinite; opacity:.35; }
.cloud-4 { top:90px;  height:55px;  animation:cloudL 35s 5s linear infinite;  opacity:.4;  }
.cloud-5 { top:30px;  height:90px;  animation:cloudR 45s 8s linear infinite;  opacity:.3;  }
.cloud-6 { top:120px; height:60px;  animation:cloudL 55s 15s linear infinite; opacity:.25; }
@keyframes cloudR { 0%{transform:translateX(-350px)} 100%{transform:translateX(calc(100vw + 350px))} }
@keyframes cloudL { 0%{transform:translateX(calc(100vw + 350px))} 100%{transform:translateX(-350px)} }

/* ===== HERO OVERLAY (above clouds+vosvos, applies gradient) ===== */
.hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right,
    rgba(26,16,40,.88) 0%,
    rgba(26,16,40,.55) 35%,
    rgba(26,16,40,.10) 100%);
  pointer-events:none;
}

/* ===== PARAGLIDER (above overlay) ===== */
.flying-photos {
  position:absolute; inset:0; z-index:4; pointer-events:none;
}
.flying-photo {
  position:absolute; pointer-events:all; cursor:grab;
}
.flying-photo:active { cursor:grabbing; }
.flying-photo img {
  height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));
  image-rendering:pixelated;
  will-change:transform;
}

/* ===== HERO CONTENT (above overlay) ===== */
.hero-content {
  position:relative; z-index:5; width:100%; max-width:1200px;
  margin:0 auto; padding:60px 40px 140px;
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-direction:row-reverse; /* card right, text left */
  gap:40px;
}
.hero-left { flex:1; padding:30px 0; }

/* Title */
.hero-title {
  display:flex; flex-direction:column; gap:4px;
  margin-bottom:20px; line-height:1.3;
}
.title-line {
  font-size:clamp(22px,4.5vw,44px); color:var(--gold);
  text-shadow:
    3px 3px 0 rgba(0,0,0,.8),
    0 0 30px rgba(240,192,64,.6),
    0 0 60px rgba(240,192,64,.3),
    0 0 90px rgba(240,192,64,.1);
  display:block;
}
/* "Swagger" — red pixel art dithered gradient */
.swagger-text {
  background: linear-gradient(
    to bottom,
    #ff5555 0%, #ff5555 25%,
    #dd2222 25%, #dd2222 50%,
    #990000 50%, #990000 75%,
    #550000 75%, #550000 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.85));
  animation: swaggerPulse 1.5s steps(4, start) infinite alternate;
  display: inline-block;
  padding: 0 4px;
}
@keyframes swaggerPulse {
  0%  { filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.85)) drop-shadow(0 0 4px rgba(255,51,51,0.5)); transform: scale(1); }
  100%{ filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.85)) drop-shadow(0 0 12px rgba(255,51,51,0.8)); transform: scale(1.03); }
}

/* Typewriter */
.typewriter-wrapper { min-height:30px; display:flex; align-items:center; margin-top:8px; }
.typewriter-text { font-size:12px; color:var(--accent); text-shadow:2px 2px 4px rgba(0,0,0,.8); }
.typewriter-cursor { font-size:14px; color:var(--gold); animation:blink .6s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ===== PROFILE CARD ===== */
.profile-card {
  position:relative; z-index:6;
  cursor:grab; user-select:none;
  display:flex; flex-direction:column; align-items:center;
  padding:12px;
  border:4px solid var(--wood);
  box-shadow:0 8px 0 #3a2010, 0 18px 40px rgba(0,0,0,.6);
  border-radius:4px; flex-shrink:0;
  animation:cardFloat 4s ease-in-out infinite;
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wood-dark);
  z-index: 1; /* Puts background above hakkimda-panel */
}
.profile-card > * {
  position: relative;
  z-index: 2; /* Puts content above background */
}
.profile-card > .hakkimda-panel {
  z-index: -1; /* Puts panel below background */
}
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.profile-card:active { cursor:grabbing; animation:none; }

.drag-handle {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; color:var(--gold); font-size:8px; margin-bottom:10px;
  pointer-events:none; opacity:.7;
}
.drag-dots { font-size:12px; letter-spacing:-2px; }

.profile-reveal-container {
  position:relative; width:260px; height:320px;
  border:4px solid #111;
  box-shadow:inset 0 0 20px rgba(0,0,0,.8);
  overflow:hidden; background:#222;
  image-rendering:pixelated; cursor:none;
}
.profile-base, .profile-cyber {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.profile-cyber { opacity:0; pointer-events:none; clip-path:circle(0px at 50% 50%); }

.pixel-magnifier {
  position:absolute; pointer-events:none; opacity:0; z-index:10;
  width:300px; height:auto;
  transform:translate(-48.09%,-40.10%);
  image-rendering:pixelated;
  filter:drop-shadow(4px 6px 10px rgba(0,0,0,.7));
}

.profile-buttons { display:flex; gap:8px; width:100%; margin-top:10px; }
.profile-buttons .nes-btn {
  font-size:8px !important; flex:1; text-align:center;
  image-rendering:auto; transition:transform .15s;
}
.profile-buttons .nes-btn:hover { transform:scale(1.05) translateY(-2px); }

/* ===== HAKKIMDA PANEL ===== */
.hakkimda-panel {
  position:absolute; top:0;
  width:280px;
  background:rgba(15,8,25,.97);
  border:3px solid var(--wood);
  padding:16px 14px; font-size:10px; line-height:1.9;
  z-index:-1;
  /* hidden state */
  opacity:0; pointer-events:none; visibility:hidden;
}
.hakkimda-panel.open-right {
  left:calc(100% + 6px); right:auto; visibility:visible;
}
.hakkimda-panel.open-left {
  right:calc(100% + 6px); left:auto; visibility:visible;
}
.panel-close {
  position:absolute !important; top:6px; right:6px;
  font-size:10px !important; padding:2px 6px !important;
}
.panel-title { font-size:13px; color:var(--gold); margin-bottom:10px; }
.hakkimda-panel p { font-size:9px; }

/* ===== CHAIN SIGNS — absolutely positioned outside card ===== */
.card-chain-signs {
  position:absolute; z-index:7;
  display:flex; gap:10px; justify-content:center; align-items:flex-start;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, left 0.08s ease-out, top 0.08s ease-out, transform 0.08s ease-out;
}
.card-chain-signs.visible { opacity:1; pointer-events:all; }

.card-sign-wrapper {
  display:flex; flex-direction:column; align-items:center;
  transform-origin:top center;
}
.sign-swing { animation:signSwing 2.8s ease-in-out infinite; }
.sign-swing:nth-child(2) { animation-delay:.45s; }
.sign-swing:nth-child(3) { animation-delay:.9s;  }
@keyframes signSwing {
  0%,100% { transform:rotate(0deg); }
  30% { transform:rotate(3.5deg); }
  70% { transform:rotate(-3.5deg); }
}

.chain-pair { display:flex; gap:24px; justify-content:center; }
.chain { display:flex; flex-direction:column; align-items:center; }
.chain span {
  display:block; width:5px; height:8px;
  border:2px solid var(--chain); border-radius:2px; margin:-1px 0;
  background:rgba(180,180,180,.15);
}
.chain span:nth-child(odd) { width:7px; }

.card-sign {
  display:block; padding:6px 12px;
  background:linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 40%, var(--wood-dark) 100%);
  color:#fff; font-size:7px; text-decoration:none !important;
  border:2px solid var(--wood-dark);
  box-shadow:0 3px 0 #3a2010, inset 0 1px 0 rgba(255,255,255,.2);
  white-space:nowrap; text-align:center;
  transition:transform .2s, color .2s;
}
.card-sign:hover { transform:scale(1.1) rotate(-2deg); color:var(--gold); }

/* ===== DUAL LAYOUT ===== */
.dual-section {
  display:grid; grid-template-columns:1fr 1fr;
  gap:30px; max-width:1200px; margin:0 auto;
  padding:60px 20px; position:relative;
}

/* ===== SPLIDE CAROUSEL ===== */
.splide { margin:8px 0; }
.splide__track { overflow:hidden; }
.splide__slide {
  display:flex; align-items:center; justify-content:center; padding:3px;
}
.splide__slide img {
  width:100%; height:130px; object-fit:cover;
  border:3px solid var(--wood);
  image-rendering:pixelated;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .3s;
  display:block;
}
.splide__slide img:hover { transform:scale(1.06); }
.splide__arrows { display:none !important; }

/* Nav row: ← Hepsini Gör → */
.section-more-row {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:10px;
}
.section-more-row .nes-btn { font-size:9px !important; transition:transform .15s; }
.section-more-row .nes-btn:hover { transform:scale(1.05) translateY(-2px); }
.carousel-prev, .carousel-next {
  font-size:14px !important; padding:5px 10px !important; flex-shrink:0;
}

/* Gear Typewriter */
.gear-typewriter-wrapper {
  display:flex; align-items:center; justify-content:center;
  min-height:22px; margin:4px 0;
}
.gear-typewriter { font-size:10px; color:var(--accent); }

/* ===== PROJECT / EXP CARDS with scrollable fade ===== */
.dual-card-container { position:relative; }
.scrollable-content { max-height:300px; overflow:hidden; padding-bottom:10px; }
.content-fade {
  position:absolute; bottom:52px; left:0; right:0; height:90px;
  background:linear-gradient(to bottom, transparent, rgba(15,8,25,.97));
  pointer-events:none; z-index:2;
}

.project-card, .exp-card {
  margin-bottom:10px !important;
  transition:transform .2s, box-shadow .2s;
  position:relative;
}
.project-card:hover, .exp-card:hover {
  transform:translateY(-5px) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.4) !important;
}
.project-card h3, .exp-card h3 { font-size:11px; color:var(--gold); margin-bottom:4px; }
.project-card p, .exp-card p { font-size:10px; }
.exp-role { color:var(--accent) !important; }

/* Section Breathing float animation (like profile card float) */
.nes-container.with-title {
  animation: sectionFloat 6s ease-in-out infinite;
}
.dual-left .nes-container.with-title {
  animation-delay: 0.5s;
}
.dual-right .nes-container.with-title {
  animation-delay: 1.2s;
}
@keyframes sectionFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Aktif Proje badge */
.badge-aktif {
  background:var(--green) !important;
  color:#fff !important;
  font-size:7px !important;
  padding:3px 6px !important;
  display:inline-flex !important;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  font-family:'Press Start 2P', cursive !important;
  height: 18px;
}
.badge-aktif .nes-icon.star {
  transform: scale(0.5) !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: -5px !important;
  margin-right: -3px !important;
  margin-top: -2px !important;
}

.section-more { margin-top:10px; text-align:center; position:relative; z-index:3; }
.section-more .nes-btn { font-size:9px !important; transition:transform .15s; }
.section-more .nes-btn:hover { transform:scale(1.05) translateY(-2px); }

/* ===== LINKS GRID ===== */
.links-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.link-grid-item {
  font-size:8px !important; text-decoration:none !important;
  text-align:center; transition:transform .15s;
}
.link-grid-item:hover { transform:scale(1.05) translateY(-2px); }
.link-full { width:100%; display:block !important; }

/* Contact */
.contact-items { display:flex; flex-direction:column; gap:14px; }
.contact-items p { display:flex; align-items:center; gap:14px; font-size:11px; }

/* Sertifika grid */
.sertifika-preview { padding:40px 20px; }
.sertifika-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-bottom:12px;
}
.sertifika-grid .nes-container { font-size:10px; line-height:2; transition:transform .2s; }
.sertifika-grid .nes-container:hover { transform:translateY(-3px); }
.sertifika-grid h3 { font-size:11px; color:var(--gold); margin-bottom:4px; }

/* ===== FOOTER ===== */
.pixel-footer { padding:30px 20px; text-align:center; border-top:4px solid var(--wood-dark); }
.pixel-footer p { font-size:9px; margin-bottom:12px; }
.footer-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.footer-links .nes-btn { font-size:7px !important; transition:transform .15s; }
.footer-links .nes-btn:hover { transform:scale(1.05) translateY(-2px); }

/* ===== WHATSAPP FLOAT — simple nes-icon with bounce ===== */
.whatsapp-float {
  position:fixed; bottom:20px; left:20px; z-index:9000;
  display:block;
  animation:wpBounce 2s ease-in-out infinite;
  transition:transform .2s;
}
.whatsapp-float:hover {
  animation:none;
  transform:scale(1.1) translateY(-3px);
  filter: brightness(1.2);
}
@keyframes wpBounce {
  0%,100% { transform:translateY(0); }
  20%      { transform:translateY(-5px); }
  40%      { transform:translateY(0); }
  60%      { transform:translateY(-2px); }
  80%      { transform:translateY(0); }
}

/* ===== ANIMATION HELPERS ===== */
.anim-item {
  opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
}
.anim-item.visible { opacity:1; transform:translateY(0); }

.nes-container.with-title > .title {
  font-size:14px; color:var(--gold); background:var(--bg) !important;
  animation:titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  0%   { text-shadow:0 0 4px rgba(240,192,64,.2); }
  100% { text-shadow:0 0 14px rgba(240,192,64,.7), 0 0 28px rgba(240,192,64,.3); }
}

/* ===== CONTAINER SCROLL ANIMATION — ALT PANEL ===== */
.container-scroll-scene {
  min-height: 120vh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative; padding: 60px 20px 100px; overflow: hidden; perspective: 1200px;
}
.scroll-scene-header {
  position: relative; z-index: 10; width: 100%; max-width: 800px; text-align: center; margin-bottom: 40px;
  /* GSAP will move this up */
}
.scroll-scene-label {
  font-size: 14px; color: var(--gold); margin-bottom: 8px;
  animation: floatUpDown 2s ease-in-out infinite alternate;
}
@keyframes floatUpDown {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}
.scroll-scene-title {
  font-size: 24px; color: var(--text); line-height: 1.6;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.8);
}
.scroll-bottom-card {
  width: 100%; max-width: 1100px; position: relative;
  /* GSAP will animate transform */
  transform-style: preserve-3d;
  background: rgba(15, 8, 25, 0.95);
  border: 4px solid var(--wood);
  border-radius: 12px;
  box-shadow: 0 0 rgba(0,0,0,0.3), 0 9px 20px rgba(0,0,0,0.3), 0 37px 37px rgba(0,0,0,0.26), 0 84px 50px rgba(0,0,0,0.15), 0 149px 60px rgba(0,0,0,0.04), 0 233px 65px rgba(0,0,0,0.02);
  padding: 20px;
}
.bottom-card-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 30px;
}
.bottom-dual { margin-top: 0; padding-top: 0; }
.bottom-footer { margin-top: 0; border-top: 2px dashed var(--wood); padding-top: 20px; }

/* ===== NES.CSS OVERRIDES ===== */
.nes-container.is-rounded { border-image:none !important; border:3px solid var(--wood) !important; }
.nes-btn { font-family:'Press Start 2P', cursive !important; image-rendering:auto; }
/* is-warning & is-success: dark text for contrast */
.nes-btn.is-warning, .nes-btn.is-success { color:#111 !important; }

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
  .hero-content { flex-direction:column; padding-top:40px; align-items:center; padding-bottom:160px; }
  .hero-left { text-align:center; }
  .dual-section { grid-template-columns:1fr; }
  .links-grid { grid-template-columns:1fr; }
  .sertifikalar-layout { display: flex; flex-direction: column-reverse; }
  .sertifika-preview-wrapper { position: sticky; top: 10px; z-index: 100; margin-bottom: 20px; width: 100%; }
  .sertifika-item { flex-direction: column; text-align: center; }
  .sertifika-item .sertifika-btn { width: 100%; margin-top: 10px; }
}
@media(max-width:600px) {
  .profile-reveal-container { width:200px; height:240px; }
  .vosvos { width:100px; }
  .sertifika-grid { grid-template-columns:1fr; }
  .hakkimda-panel { width:200px; font-size:8px; }
  .title-line { font-size:clamp(16px,4vw,30px); }
  .whatsapp-float { padding:8px 10px; font-size:7px; }
}

/* ===== SUBPAGES ===== */
.subpage { min-height:100vh; padding:40px 20px; max-width:800px; margin:0 auto; }
.subpage-certificates { max-width:900px; }
.subpage-wide { max-width:1000px; }
.subpage-header { display:flex; align-items:center; gap:20px; margin-bottom:30px; }
.subpage-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.subpage-certificates .subpage-header,
.subpage-certificates .subpage-nav {
  justify-content: center;
  text-align: center;
}
.subpage-nav .nes-btn { font-size:8px !important; text-decoration:none !important; transition:transform .15s; }
.subpage-nav a.nes-btn:hover { transform:scale(1.05) translateY(-2px); }
.subpage-note { font-size:9px; color:var(--accent); margin-bottom:24px; line-height:2; }
.subpage-note a { color:var(--gold); }
.exp-meta { font-size:9px; color:var(--accent) !important; margin-bottom:6px; }
.back-btn { font-size:9px !important; flex-shrink:0; }
.subpage-title { font-size:20px; color:var(--gold); }
.subpage-content { display:flex; flex-direction:column; gap:16px; }
.subpage-content .nes-container { font-size:10px; line-height:2; }
.subpage-content h3 { font-size:12px; color:var(--gold); margin:8px 0; }
.link-list { display:flex; flex-direction:column; gap:12px; }
.link-item {
  font-size:10px !important; display:flex !important;
  align-items:center; gap:10px; text-decoration:none !important;
}

/* ===== SERTIFIKALAR LAYOUT ===== */
.sertifikalar-layout {
  display: grid;
  grid-template-columns: minmax(320px, 720px);
  gap: 24px;
  align-items: start;
  justify-content: center;
}
.sertifika-list {
  display: flex;
  flex-direction: column;
  gap: 14px; /* Reduced gap instead of using <br> */
  width: 100%;
}
.sertifika-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0 !important;
  transition: transform .2s, border-color .2s;
  cursor: pointer;
}
.sertifika-item:hover {
  transform: translateX(4px);
  border-color: var(--gold) !important;
}
.sertifika-info {
  flex: 1;
}
.sertifika-info h3 {
  font-size: 11px;
  color: var(--gold);
  margin-top: 0;
  margin-bottom: 4px;
}
.sertifika-info p {
  font-size: 9px;
  margin-bottom: 0;
}
.sertifika-btn {
  font-size: 9px !important;
  padding: 6px 12px !important;
  flex-shrink: 0;
}
.sertifika-preview-wrapper {
  position: fixed;
  left: 50%;
  top: var(--preview-top, 120px);
  width: min(860px, calc(100vw - 40px));
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.sertifikalar-layout.is-preview-visible .sertifika-preview-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.sertifika-preview-panel {
  padding: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
}
.preview-img-container {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 280px;
  max-height: 420px;
  border: 4px solid #111;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 10px;
}
.preview-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  display: none;
}
.preview-placeholder-text {
  font-size: 9px;
  color: var(--chain);
  line-height: 1.8;
}

@media(max-width:900px) {
  .subpage-certificates { max-width:800px; }
  .sertifikalar-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }
  .sertifika-preview-wrapper {
    position: sticky;
    top: 10px;
    left: auto;
    z-index: 100;
    width: 100%;
    margin-bottom: 20px;
    transform: translateY(12px) scale(.98);
  }
  .sertifikalar-layout.is-preview-visible .sertifika-preview-wrapper {
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .preview-img-container {
    height: auto;
    min-height: 220px;
  }
  .sertifika-item {
    flex-direction: column;
    text-align: center;
  }
  .sertifika-item .sertifika-btn {
    width: 100%;
    margin-top: 10px;
  }
}

/* Portföyüm kutusu — ince çerçeve override */
.portfolio-container-override {
  border-width: 1px !important;
  border-color: rgba(139, 94, 60, 0.4) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.tilted-grid-wrapper {
  position: relative;
  width: 100%;
}

.tilted-grid-viewport {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 4px;
  perspective: 900px;
  background: rgba(0, 0, 0, 0.15);
  position: relative;
}

/* Üst ve alt fade maskeleri — sonsuzluk hissi */
.tilted-grid-viewport::before,
.tilted-grid-viewport::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  z-index: 10;
  pointer-events: none;
}
.tilted-grid-viewport::before {
  top: 0;
  background: linear-gradient(to bottom, #212529 0%, transparent 100%);
}
.tilted-grid-viewport::after {
  bottom: 0;
  background: linear-gradient(to top, #212529 0%, transparent 100%);
}

.tilted-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 16px;
}

.tg-tile {
  margin: 0;
  position: relative;
  perspective: 800px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
}

/* Başlangıç: görünür ve normal */
.tg-tile {
  opacity: 1;
  filter: blur(0px) brightness(1);
}

/* Görüş alanı dışındaki kartlar — üst */
.tg-tile.tg-out-top {
  opacity: 0.15;
  filter: blur(4px) brightness(0.3);
}
.tg-tile.tg-out-top.tg-left {
  transform: translateY(-60px) translateX(-30%) rotateX(-45deg) skewX(12deg) scale(0.85);
}
.tg-tile.tg-out-top.tg-right {
  transform: translateY(-60px) translateX(30%) rotateX(-45deg) skewX(-12deg) scale(0.85);
}

/* Görüş alanı dışındaki kartlar — alt */
.tg-tile.tg-out-bottom {
  opacity: 0.15;
  filter: blur(4px) brightness(0.3);
}
.tg-tile.tg-out-bottom.tg-left {
  transform: translateY(60px) translateX(-30%) rotateX(45deg) skewX(-12deg) scale(0.85);
}
.tg-tile.tg-out-bottom.tg-right {
  transform: translateY(60px) translateX(30%) rotateX(45deg) skewX(12deg) scale(0.85);
}

/* Görüş alanında olan kartlar */
.tg-tile.tg-visible {
  opacity: 1;
  filter: blur(0px) brightness(1);
  transform: translateY(0) translateX(0) rotateX(0deg) skewX(0deg) scale(1);
}

.tg-tile-inner {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(232, 216, 196, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  aspect-ratio: 4/3;
}

.tg-tile-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  transition: transform 0.5s ease;
}

.tg-tile.tg-visible .tg-tile-inner img {
  transform: scale(1);
}
.tg-tile.tg-out-top .tg-tile-inner img,
.tg-tile.tg-out-bottom .tg-tile-inner img {
  transform: scale(1.3);
}

/* Ok Butonları */
.tg-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.tg-btn {
  font-size: 16px !important;
  padding: 8px 20px !important;
  min-width: 52px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.tg-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* Giriş animasyonu — GSAP tarafından kontrol edilecek */
.tilted-grid-wrapper.tg-entrance {
  opacity: 0;
  transform: perspective(900px) rotateX(25deg) scale(0.88) translateY(60px);
}
.tilted-grid-wrapper.tg-entered {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) scale(1) translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== PORTFÖYÜM GALERİ (portfoyum.html) ===== */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.gallery-item {
  margin:0 !important; padding:10px !important;
  cursor:zoom-in;
  transition:transform .2s, box-shadow .2s;
}
.gallery-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.gallery-item img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  image-rendering:pixelated;
  border:3px solid var(--wood);
}
.gallery-item figcaption {
  font-size:8px; margin-top:8px; text-align:center; color:var(--gold);
}

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:99998;
  background:rgba(10,5,18,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px;
  opacity:0; pointer-events:none; cursor:zoom-out;
  transition:opacity .25s ease;
}
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox img {
  max-width:90vw; max-height:78vh;
  border:4px solid var(--wood);
  image-rendering:pixelated;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.lightbox-caption { font-size:10px; color:var(--gold); text-align:center; }

/* ===== ERİŞİLEBİLİRLİK — hareket azaltma tercihi ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== BEHANCE ENTEGRASYONU ===== */
/* Behance kapakları gerçek grafik işler — pixelate etme, yumuşak ölçekle */
img[src*="behance/"] { image-rendering:auto !important; }

.gallery-item { position:relative; display:flex; flex-direction:column; }
.gallery-tag {
  position:absolute; top:4px; left:4px; z-index:2;
  font-size:7px; line-height:1;
  padding:5px 7px;
  background:var(--wood-dark); color:var(--gold);
  border:2px solid var(--gold);
  letter-spacing:.5px;
}
.gallery-item[data-url] { cursor:zoom-in; }
.gallery-link {
  font-size:7px !important;
  margin-top:10px;
  padding:8px 6px !important;
  text-align:center;
  cursor:pointer;
}

/* ===== EĞİTİM / İLGİ ALANLARI (deneyimler.html) ===== */
.subpage-subtitle {
  font-size:14px; color:var(--gold);
  margin:36px 0 16px;
  border-bottom:3px solid var(--wood);
  padding-bottom:10px;
}
.ilgi-wrap { display:flex; flex-wrap:wrap; gap:14px 22px; margin-bottom:30px; }
.ilgi-badge { font-size:8px; }

@media (max-width:600px) {
  .gallery-tag { font-size:6px; padding:4px 5px; }
  .subpage-subtitle { font-size:11px; }
}

/* ===== PORTFÖY SAYFASI v3 — tam genişlik, yazısız görsel duvarı ===== */
.subpage-full { max-width:none; padding:28px 26px 60px; }
.subpage-full .subpage-header,
.subpage-full .subpage-nav { max-width:1400px; margin-left:auto; margin-right:auto; }
.subpage-full .subpage-nav { margin-bottom:18px; }

.pf-filters {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 auto 22px; max-width:1400px;
}
.pf-filter { font-size:8px !important; padding:9px 11px !important; }
.pf-behance { font-size:8px !important; padding:9px 11px !important; margin-left:auto; }
.pf-count {
  display:inline-block; margin-left:5px; padding:1px 5px;
  background:var(--wood-dark); color:var(--gold); font-size:7px;
}

.pf-group { margin:0 0 14px; }
/* Behance modülleri sunum slaytı — doğal oranı koru, masonry akışı */
.pf-group[data-kaynak="Behance"] .pf-grid {
  column-count:5; column-gap:12px;
}
.pf-group[data-kaynak="Behance"] .pf-tile { break-inside:avoid; margin:0 0 12px; }
.pf-group[data-kaynak="Behance"] .pf-tile img { height:auto; aspect-ratio:auto; object-fit:fill; }

/* Atölye fotoğrafları — düzenli ızgara */
.pf-group[data-kaynak="Atölye"] .pf-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;
}
.pf-group[data-kaynak="Atölye"] .pf-tile img { aspect-ratio:4/3; object-fit:cover; }

.pf-tile {
  position:relative; margin:0; cursor:zoom-in;
  border:3px solid var(--wood); background:#120a1e;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pf-tile:hover, .pf-tile:focus-visible {
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 10px 26px rgba(0,0,0,.55); outline:none;
}
.pf-tile img { width:100%; display:block; image-rendering:auto; }

/* Lightbox — gezinme */
.lightbox { gap:0; padding:0; }
.lb-stage {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; max-width:86vw; cursor:default;
}
.lb-stage img { max-height:86vh; }
.lb-close {
  position:absolute !important; top:16px; right:16px; z-index:2;
  font-size:12px !important; padding:5px 11px !important;
}
.lb-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  font-size:14px !important; padding:12px 15px !important;
}
.lb-prev { left:16px; }
.lb-next { right:16px; }
.lb-counter { font-size:8px; color:var(--accent); }

@media (max-width:1500px) { .pf-group[data-kaynak="Behance"] .pf-grid { column-count:4; } }
@media (max-width:1150px) { .pf-group[data-kaynak="Behance"] .pf-grid { column-count:3; } }
@media (max-width:820px)  { .pf-group[data-kaynak="Behance"] .pf-grid { column-count:2; } }
@media (max-width:560px) {
  .subpage-full { padding:20px 12px 40px; }
  .pf-group[data-kaynak="Behance"] .pf-grid { column-count:1; }
  .pf-group[data-kaynak="Atölye"] .pf-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .pf-behance { margin-left:0; }
  .lb-nav { font-size:11px !important; padding:9px 11px !important; }
  .lb-prev { left:6px; } .lb-next { right:6px; }
  .lb-stage { max-width:96vw; }
}
}