/* JS kapalı fallback için */
noscript .pd-cover img[hidden] { display: none !important; }

/* ==================== THEME VARS ==================== */
.pd-crumbs{
  --crumb-bg: color-mix(in oklab, white 8%, transparent);
  --crumb-ring: color-mix(in oklab, white 14%, transparent);
  --crumb-text: rgba(255,255,255,.9);
  --crumb-dim: rgba(255,255,255,.65);
  --crumb-hover: #fff;
}

/* ==================== CONTAINER ==================== */
.pd-crumbs{
  position: relative;
  padding-block: .6rem;
  padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right));
  border-radius: 1rem;
  background: var(--crumb-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--crumb-ring);
}

.pd-crumbs .trail{
  margin:0; padding:0; list-style:none;
  display:flex; align-items:center; gap:.45rem;
  white-space:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none; -ms-overflow-style:none;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.pd-crumbs .trail::-webkit-scrollbar{ display:none; }

/* ==================== ITEMS ==================== */
.pd-crumbs .crumb{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: .95rem; color:var(--crumb-text);
  flex: 0 0 auto;
}
.pd-crumbs .home-icn{ display:grid; place-items:center; opacity:.9 }

.pd-crumbs .crumb .crumb-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem;
  min-height: 40px; /* Apple HIG */
  border-radius:.75rem; line-height:1.2;
  text-decoration:none; color:var(--crumb-text);
  border:1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
  touch-action: manipulation;
}
.pd-crumbs .crumb .crumb-link:hover{
  background: color-mix(in oklab, white 10%, transparent);
  color:var(--crumb-hover);
  border-color:var(--crumb-ring);
  transform: translateY(-1px);
}
.pd-crumbs .crumb .crumb-link:active{ transform: translateY(0); }
.pd-crumbs .crumb .crumb-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, #60a5fa 35%, transparent);
}

/* ==================== SEPARATORS ==================== */
.pd-crumbs .sep{
  display:inline-grid; place-items:center;
  width:18px; height:18px; flex:0 0 auto;
  color:var(--crumb-dim); opacity:.85;
}

/* ==================== CURRENT ==================== */
.pd-crumbs .current span{
  max-width: clamp(12ch, 70vw, 56ch);
  overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom;
  border-radius:.75rem; padding:.5rem .7rem; color:var(--crumb-hover);
  min-height: 40px; display:flex; align-items:center;
}

/* ==================== ELLIPSIS (MOBILE) ==================== */
.pd-crumbs .ellipsis{
  display:none; color:var(--crumb-dim);
  padding:.2rem .35rem; user-select:none;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px){
  .pd-crumbs{ padding-block: .55rem; }
  .pd-crumbs .crumb{ font-size:.95rem; }
  .pd-crumbs .crumb.mid{ display:none; }
  .pd-crumbs .ellipsis{ display:inline-block; }
  .pd-crumbs .sep svg{ width:14px; height:14px; }
}

/* Hareketi azalt */
@media (prefers-reduced-motion: reduce){
  .pd-crumbs *{ transition:none !important; }
}
/* ========= About görsel odak ========= */
.about-img { object-position: center 36%; }
@media (min-width:1024px){ .about-img { object-position: center 30%; } }

/* ========= Ufak animasyon & yardımcılar ========= */
@media (prefers-reduced-motion:no-preference){
  .animate-fade { animation: fade .12s ease-out both; }
}
@keyframes fade { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:translateY(0) } }

/* Custom select caret */
#topicBtn[aria-expanded="true"] #topicCaret{ transform: rotate(180deg) }

/* Listbox scrollbars */
#topicList{ max-height:220px; overflow:auto }
#topicList::-webkit-scrollbar{ width:8px; height:8px }
#topicList::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px }

/* Project card skeleton shimmer */
.card-shimmer{ position:relative; overflow:hidden }
.card-shimmer::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 55%, transparent 100%);
  animation: shimmer 1.6s linear infinite;
}