body {
      font-family: 'Inter', sans-serif;
      background: #f9f9f9;
      color: #111;
    }

    .layout {
      min-height: 100vh;
    }

    /* Left profile */
    .profile {
      background: #d1d1d1;
      padding: 40px;
      border-right: 1px solid #eee;
    }

    .profile-img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 20px;
    }

    .profile-name {
  font-size: 1.4rem;   /* istediğin kadar küçült */
  font-weight: 600;
  margin-bottom: 6px;
}


    /* Tabs */
    .nav-pills .nav-link {
      color: #555;
      border-radius: 0;
      padding: 14px 0;
      font-weight: 600;
      position: relative;
      transition: color 0.25s ease;
    }

    .nav-pills .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0;
      height: 3px;
      background: #111;
      transition: width 0.3s ease;
    }

    .nav-pills .nav-link.active::after {
      width: 100%;
    }

    .nav-pills .nav-link.active {
      background: none;
      color: #111;
      border-bottom: 2px solid #111;
    }

    .nav-pills .nav-link:hover {
      color: #111;
    }

    /* Content */
    .tab-content {
      padding: 60px;
    }

    /* ✅ General tab animation (CONTACT excluded) */
    .tab-pane:not(#contact) {
      animation: fadeSlide 0.45s ease;
    }

    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

  /* Photos */
    .photo-grid img {
      width: 100%;
      border-radius: 8px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

 .photo-grid img:hover {
      transform: scale(1.03);
    }

    /* Lightbox */
    #lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      z-index: 9999;
    }
 #lightbox img {
      max-width: 90%;
      max-height: 75vh;
      border-radius: 10px;
    }

    #lightbox-caption {
      margin-top: 12px;
      color: #ccc;
      font-size: 0.95rem;
    }
     #lightbox .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 32px;
      color: white;
      cursor: pointer;
    }

    /* =========================
       CONTACT (single animation)
       ========================= */

    #contact .contact a {
      opacity: 0;
      transform: translateY(6px);
      animation: contactFade 0.4s ease forwards;
    }

    #contact .contact a:nth-of-type(1) {
      animation-delay: 0.1s;
    }

    #contact .contact a:nth-of-type(2) {
      animation-delay: 0.2s;
    }

    @keyframes contactFade {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .contact a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-right: 24px;
      color: #111;
      text-decoration: none;
      font-weight: 500;
      position: relative;
    }

    .contact a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background: #111;
      transition: width 0.3s ease;
    }

    .contact a:hover::after {
      width: 100%;
    }

    .contact a i {
      font-size: 1.1rem;
      opacity: 0.7;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .contact a:hover i {
      opacity: 1;
      transform: translateY(-1px);
    }

    footer a {
      color: #555;
    }

    footer a:hover {
      color: #111;
      text-decoration: underline;
    }

    /* =====================
   COOKIE BANNER
   ===================== */
    .cookie-banner {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      max-width: 520px;
      margin: auto;
      background: #162818;
      color: #fff;
      padding: 14px 18px;
      border-radius: 8px;
      z-index: 9999;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .cookie-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-size: 0.9rem;
    }

    .cookie-content a {
      color: #bbb;
      text-decoration: underline;
    }

    .cookie-buttons {
      display: flex;
      gap: 10px;
      white-space: nowrap;
    }

    .cookie-buttons .btn {
      font-size: 0.8rem;
      padding: 4px 10px;
    }

    /* container for cards */
.experiment-grid{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
    justify-content:center;

}

/* card styles */
.experiment-card{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:28px;

  border:1px solid #e6e6e6;
  border-radius:12px;

  background:#fff;
  text-decoration:none;
  color:#111;

  width:220px;
  aspect-ratio:1/1;

  transition:transform .25s ease, box-shadow .25s ease;
}

.experiment-card h5{
  font-size:1.25rem;
  margin-bottom:8px;
}

.experiment-card p{
  margin:0;
  color:#6c757d;
  font-size:0.9rem;
}

/* hover effect */
.experiment-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/*hover*/

/* GRID */

.hover-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  margin-top:40px;
}


/* DEMO BOX */

.demo-box{
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:20px;
  background:#fff;
  text-align:center;
}



/* =======================
   HOVER 1
   IMAGE OVERLAY
   ======================= */

.hover-overlay{
  position:relative;
  overflow:hidden;
  border-radius:8px;
}

.hover-overlay img{
  width:100%;
  display:block;
  transition:transform .3s ease;
}

.hover-overlay-text{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;
  font-weight:600;

  opacity:0;
  transition:opacity .3s ease;
}

.hover-overlay:hover img{
  transform:scale(1.1);
}

.hover-overlay:hover .hover-overlay-text{
  opacity:1;
}



/* =======================
   HOVER 2
   CARD LIFT
   ======================= */

.hover-lift{
  transition:transform .25s ease, box-shadow .25s ease;
}

.hover-lift:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}



/* =======================
   HOVER 3
   UNDERLINE
   ======================= */

.hover-underline{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:#111;
}

.hover-underline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:#111;
  transition:width .3s ease;
}

.hover-underline:hover::after{
  width:100%;
}