/* Sticky subnav */
.subnav{
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(2,6,23,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.15);
}
.subnav-link{
  color: rgba(226,232,240,.88);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.04);
  padding: .38rem .6rem;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease;
}
.subnav-link:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.subnav-cta{
  color: #0b1220;
  background: #f59e0b;
  padding: .42rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(245,158,11,.35);
  transition: transform .15s ease, filter .15s ease;
}
.subnav-cta:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* Switch (finder) */
.switchDot{
  width:44px; height:26px;
  border-radius:999px;
  background:#e2e8f0;
  position:relative;
  flex:0 0 auto;
  transition: background .18s ease;
}
.switchDot::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 16px rgba(2,6,23,.12);
  transition: transform .18s ease;
}
#pfHpSwitch[data-on="1"] .switchDot{ background:#f59e0b; }
#pfHpSwitch[data-on="1"] .switchDot::after{ transform: translateX(18px); }

/* Horizontal scroller (timeline) */
.hs-wrap{
  overflow:auto;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.hs-track{
  display:flex;
  gap:.75rem;
  padding:.75rem;
  min-width: max-content;
}
.hs-card{
  width: 240px;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: .9rem .95rem;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.hs-kicker{ font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color:#64748b; }
.hs-title{ font-weight: 700; margin-top: .2rem; color:#0f172a; }
.hs-desc{ font-size:.82rem; color:#475569; margin-top:.25rem; }

.hs-btn{
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
  transition: transform .15s ease, background .15s ease;
}
.hs-btn:hover{ background:#f1f5f9; transform: translateY(-1px); }

/* Reveal (index hissi) */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* Catalog rows */
.cat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.cat-row:hover{ background:#f8fafc; }
.cat-name{ font-weight:600; color:#0f172a; }
.cat-meta{ font-size:.75rem; color:#64748b; }
.cat-tag{
  font-size:.7rem;
  padding:.15rem .5rem;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#334155;
}
.cat-tag.hp{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.25);
  color:#92400e;
}

/* Tesis hikayesi section arka plan görseli */
.kagit-story-bg{
  position: relative;
  overflow: hidden;
  background: #0b1220; /* fallback */
}

/* Arka plan foto */
.kagit-story-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/assets/eregli-tesis.jpg"); /* <-- burayı değiştir */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.02);
  z-index:0;
}

/* Okunabilirlik için overlay (isteğe göre güçlendirebilirsin) */
.kagit-story-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.72));
  z-index:0;
}

/* İçerik üstte kalsın */
.kagit-story-bg > *{
  position: relative;
  z-index:1;
}

/* Kartların hafif “premium” görünmesi için opsiyonel */
#hikaye .card{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-color: rgba(226,232,240,.85);
}
#hikaye .card-soft,
#hikaye .rounded-2xl.border.bg-white{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

#urunler .card{
  transition: transform .18s ease, box-shadow .18s ease;
}
#urunler .card:hover{
  transform: translateY(-2px);
}

/* Ürün kataloğu section arka plan görseli */
.kagit-katalog-bg{
  position: relative;
  overflow: hidden;
  background: #0b1220; /* fallback */
}

/* Arka plan görsel */
.kagit-katalog-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/assets/kagit/katalog-bg1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.08) brightness(.92);
  z-index: 0;
}

/* Overlay (foto görünür, yazı okunur) */
.kagit-katalog-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.16), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.62));
  z-index: 0;
}

/* İçerik üstte kalsın */
.kagit-katalog-bg > *{
  position: relative;
  z-index: 1;
}

/* Kartlar (fotoğrafı öldürmesin diye biraz daha saydam) */
#katalog .card{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226,232,240,.90);
}

.kagit-katalog-bg h2,
.kagit-katalog-bg p{
  text-shadow: 0 8px 22px rgba(2,6,23,.55);
}

/* ===========================
   MOMENTS STRIP (cinematic)
   =========================== */
.moments-wrap{
  position: relative;
  overflow: hidden;
  background: #0b1220;
}
.moments-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(16,185,129,.14), transparent 50%),
    linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.85));
  z-index:0;
}
.moments-wrap > *{ position:relative; z-index:1; }

.moments-stage{
  display:grid;
  gap: 14px;
  padding: 14px;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
}

/* rows */
.moments-row{
  overflow:hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* track */
.moments-track{
  display:flex;
  gap: 12px;
  padding: 12px;
  width: max-content;
  animation: moments-marquee var(--dur) linear infinite;
  animation-direction: var(--dir);
}
.moments-row:hover .moments-track{ animation-play-state: paused; }

@keyframes moments-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* card */
.mom{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  padding:0;
  width: 260px;
  height: 150px;
  box-shadow: 0 18px 45px rgba(2,6,23,.35);
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, filter .22s ease;
}
.mom img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.02);
  transition: transform .35s ease, filter .25s ease;
}

/* size variants */
.mom--tall{ height: 175px; width: 240px; }
.mom--wide{ width: 320px; height: 145px; }

.mom::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,23,0) 35%, rgba(2,6,23,.70) 100%),
    radial-gradient(circle at top left, rgba(245,158,11,.20), transparent 55%);
  pointer-events:none;
}
.mom::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform: translateX(-60%) rotate(8deg);
  opacity:.0;
  transition: opacity .25s ease, transform .55s ease;
  pointer-events:none;
}

.mom:hover{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(245,158,11,.35);
}
.mom:hover img{
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.06);
}
.mom:hover::before{
  opacity:.9;
  transform: translateX(20%) rotate(8deg);
}

/* caption */
.mom-cap{
  position:absolute;
  left: 10px;
  bottom: 10px;
  font-size: 12px;
  color: rgba(226,232,240,.92);
  background: rgba(2,6,23,.40);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* Lightbox */
.moments-lightbox{
  position: fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(10px);
  z-index: 9999;
  padding: 18px;
}
.moments-lightbox.is-open{ display:flex; }

.moments-lb-inner{
  position:relative;
  width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 40px 120px rgba(2,6,23,.60);
}
.moments-lb-inner img{
  width:100%;
  height: 86vh;
  object-fit: contain;
  display:block;
  background: rgba(2,6,23,.55);
}
.moments-lb-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(2,6,23,.45);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  cursor:pointer;
}
.moments-lb-close:hover{ background: rgba(2,6,23,.62); }