html { zoom: 0.9; }


:root{
      --bg:#fafafa; --card:#ffffff; --muted:#6b7280; --accent:#ea580c; --text:#0f172a;
      --border:#e5e7eb; --hover:#f3f4f6; --shadow:rgba(0,0,0,0.08);
      --max-width:1400px; --gap:24px; --radius:20px;
    }
    [data-theme="dark"]{
      --bg:#0a0a0a; --card:#171717; --muted:#a1a1aa; --text:#f4f4f5;
      --border:#27272a; --hover:#1f1f1f; --shadow:rgba(0,0,0,0.4);
    }
    *{box-sizing:border-box; margin:0; padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:Inter,system-ui,sans-serif; 
      background:var(--bg); 
      color:var(--text);
      -webkit-font-smoothing:antialiased; 
      transition:background 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    }
    a{color:inherit; text-decoration:none}

    /* Header */
    header{
      max-width:var(--max-width); margin:0 auto; padding:16px 40px;
      display:flex; align-items:center; justify-content:space-between;
      position:sticky; top:0; z-index:50; background:var(--bg);
      backdrop-filter:blur(16px); transition:all 0.4s ease;
    }
    .brand{display:flex; align-items:center; gap:16px}
    .logo{
      width:56px; height:56px; border-radius:16px; 
      background:linear-gradient(135deg,#ea580c,#dc2626); 
      display:flex; align-items:center; justify-content:center;
      color:white; font-weight:800; font-family:Montserrat; font-size:1.5rem;
      transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow:0 8px 24px rgba(234,88,12,0.3);
    }
    .logo:hover{transform:rotate(12deg) scale(1.1)}
    .brand-text h1{font-size:1.3rem; font-weight:800; margin-bottom:2px; font-family:Montserrat}
    .brand-text p{font-size:0.85rem; color:var(--muted); font-weight:500}
    
    .theme-toggle{
      width:52px; height:52px; border-radius:14px; background:var(--card);
      border:2px solid var(--border); cursor:pointer; display:flex;
      align-items:center; justify-content:center; font-size:1.5rem;
      transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 4px 12px var(--shadow);
    }
    .theme-toggle:hover{transform:rotate(20deg) scale(1.1); box-shadow:0 8px 20px var(--shadow)}

    /* Hero */
    .hero{
      max-width:var(--max-width); margin:0 auto 60px; padding:0 40px;
      display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
    }
    .hero-content h2{
      font-size:3rem; font-weight:800; font-family:Montserrat;
      margin-bottom:20px; line-height:1.2;
      background:linear-gradient(135deg, var(--text), var(--accent));
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .hero-content p{font-size:1.1rem; color:var(--muted); line-height:1.8; margin-bottom:16px}
    .hero-stats{display:flex; gap:32px; margin-top:24px}
    .stat{text-align:center}
    .stat-num{font-size:2rem; font-weight:800; color:var(--accent); font-family:Montserrat}
    .stat-label{font-size:0.85rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px}
    
    .hero-card{
      background:var(--card); padding:32px; border-radius:24px;
      box-shadow:0 12px 40px var(--shadow); border:2px solid var(--border);
      transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hero-card:hover{transform:translateY(-8px); box-shadow:0 20px 60px var(--shadow)}
    .info-item{margin-bottom:24px}
    .info-item:last-child{margin-bottom:0}
    .info-label{font-size:0.8rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px}
    .info-value{font-size:1rem; color:var(--text); font-weight:500; line-height:1.6}
    .social-links{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
    .social-btn{
      padding:12px 20px; background:var(--hover); border-radius:12px;
      border:2px solid var(--border); font-weight:600; font-size:0.9rem;
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; gap:8px;
    }
    .social-btn:hover{background:var(--accent); color:white; border-color:var(--accent); transform:translateY(-2px)}
    .social-btn i{font-size:1.1rem}




/* 🔹 Text + Photo side by side */
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.info-text {
  flex: 1;
}

/* 🔹 Profile image aligned beside text */
.profile-photo {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.profile-photo img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.profile-photo img:hover {
  transform: scale(1.05);
}

/* 🔹 Responsive (stack layout on small screens) */
@media (max-width: 768px) {
  .card-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-photo {
    justify-content: center;
    margin-top: 0.5rem;
  }
}




    /* About & Contact Section */
    .about-contact-section{
      max-width:var(--max-width); margin:0 auto 60px; padding:0 40px;
      display:grid; grid-template-columns:1fr 1fr; gap:40px;
    }
    .about-card, .contact-card{
      background:var(--card); padding:40px; border-radius:24px;
      box-shadow:0 12px 40px var(--shadow); border:2px solid var(--border);
      transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .about-card:hover, .contact-card:hover{
      transform:translateY(-8px); box-shadow:0 20px 60px var(--shadow);
    }
    .section-title-main{
      font-size:2rem; font-weight:800; font-family:Montserrat;
      margin-bottom:24px; color:var(--accent);
    }
    .about-text{font-size:1rem; line-height:1.9; color:var(--text); margin-bottom:20px}
    .about-text strong{color:var(--accent); font-weight:700}
    
    .contact-form{display:flex; flex-direction:column; gap:20px}
    .form-group{display:flex; flex-direction:column; gap:8px}
    .form-label{font-size:0.85rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px}
    .form-input, .form-textarea{
      padding:14px 18px; border:2px solid var(--border); border-radius:12px;
      background:var(--bg); color:var(--text); font-size:0.95rem;
      font-family:Inter; transition:all 0.3s ease;
    }
    .form-input:focus, .form-textarea:focus{
      outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(234,88,12,0.1);
    }
    .form-textarea{resize:vertical; min-height:120px}
    .submit-btn{
      padding:16px 32px; background:var(--accent); color:white;
      border:none; border-radius:12px; font-weight:700; font-size:1rem;
      cursor:pointer; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      font-family:Montserrat;
    }
    .submit-btn:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(234,88,12,0.4)}

    /* Gallery Controls */
    .gallery-section{max-width:var(--max-width); margin:0 auto; padding:0 40px 60px}
    .section-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:32px}
    .section-header h2{font-size:2.5rem; font-weight:800; font-family:Montserrat}
    
    .controls{
      background:var(--card); padding:28px; border-radius:20px;
      box-shadow:0 8px 24px var(--shadow); border:2px solid var(--border);
      margin-bottom:40px; transition:all 0.4s ease;
    }
    
    .search-wrapper{position:relative; margin-bottom:24px}
    .search-input{
      width:100%; padding:16px 52px 16px 20px; border:2px solid var(--border);
      border-radius:14px; background:var(--bg); color:var(--text);
      font-size:1rem; font-weight:500; transition:all 0.4s ease;
    }
    .search-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(234,88,12,0.1)}
    .search-icon{
      position:absolute; right:20px; top:50%; transform:translateY(-50%);
      color:var(--muted); font-size:1.4rem; pointer-events:none;
    }
    
    .controls-row{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
    .filter-group{display:flex; gap:12px; flex-wrap:wrap; flex:1}
    .filter-btn{
      padding:12px 20px; border-radius:12px; border:2px solid var(--border);
      background:var(--bg); cursor:pointer; font-weight:600; font-size:0.92rem;
      color:var(--text); transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .filter-btn.active{
      background:var(--accent); color:white; border-color:var(--accent);
      transform:translateY(-3px) scale(1.05); box-shadow:0 6px 20px rgba(234,88,12,0.4);
    }
    .filter-btn:hover:not(.active){background:var(--hover); transform:translateY(-2px)}
    .count{opacity:0.8; margin-left:6px; font-weight:700}
    
    .view-mode{display:flex; gap:8px; background:var(--bg); padding:6px; border-radius:12px; border:2px solid var(--border)}
    .view-btn{
      padding:10px 16px; border-radius:10px; background:transparent;
      border:none; cursor:pointer; font-size:1.1rem; color:var(--muted);
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; gap:6px;
    }
    .view-btn.active{background:var(--card); color:var(--accent); box-shadow:0 4px 12px var(--shadow)}
    .view-btn i{font-size:1rem}

    /* Gallery */
    .gallery{transition:opacity 0.5s ease}
    .masonry{columns:3; column-gap:var(--gap)}
    @media(min-width:1000px) and (max-width:1199px){.masonry{columns:2}}
    @media(max-width:999px){.masonry{columns:1}}
    
    .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); gap:var(--gap)}
    .landscape{display:grid; grid-template-columns:repeat(auto-fill, minmax(450px, 1fr)); gap:var(--gap)}
    .portrait{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--gap)}
    
    .timeline{display:flex; flex-direction:column; gap:48px}
    .timeline-group h3{
      font-size:1.6rem; font-weight:800; color:var(--accent);
      margin-bottom:24px; font-family:Montserrat;
      padding-bottom:16px; border-bottom:3px solid var(--accent);
    }
    .timeline-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:24px}

    /* Photo Card */
    .photo-card{
      background:var(--card); display:inline-block; width:100%;
      margin-bottom:var(--gap); border-radius:20px; overflow:hidden;
      position:relative; cursor:pointer; box-shadow:0 8px 24px var(--shadow);
      border:2px solid var(--border);
      transition:all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .photo-card:hover{
      transform:translateY(-16px) scale(1.03) rotate(1deg);
      box-shadow:0 24px 60px var(--shadow); border-color:var(--accent);
    }
    
    .img-wrap{position:relative; overflow:hidden; background:var(--hover)}
    .img-wrap img{
      width:100%; height:auto; display:block;
      transition:transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .photo-card:hover .img-wrap img{transform:scale(1.2) rotate(2deg)}
    
    .card-info{
      position:absolute; bottom:0; left:0; right:0; padding:28px;
      background:linear-gradient(180deg, transparent, rgba(0,0,0,0.95));
      color:white; opacity:0; transform:translateY(24px);
      transition:all 0.5s ease;
    }
    .photo-card:hover .card-info{opacity:1; transform:translateY(0)}
    .card-title{font-size:1.2rem; font-weight:700; margin-bottom:8px; text-shadow:0 2px 8px rgba(0,0,0,0.8)}
    .card-caption{font-size:0.9rem; color:#e5e7eb; line-height:1.6; text-shadow:0 1px 4px rgba(0,0,0,0.6)}
    .card-meta{font-size:0.85rem; color:#d1d5db; margin-top:8px; display:flex; gap:16px; flex-wrap:wrap}
    
    .badge{
      position:absolute; top:16px; right:16px; padding:8px 16px;
      background:var(--accent); color:white; border-radius:10px;
      font-size:0.8rem; font-weight:700; opacity:0; transform:scale(0.8);
      transition:all 0.4s ease; box-shadow:0 4px 16px rgba(234,88,12,0.6);
    }
    .photo-card:hover .badge{opacity:1; transform:scale(1)}

    /* Lightbox */
    .lightbox{
      position:fixed; inset:0; background:rgba(0,0,0,0.98);
      z-index:1000; display:none; opacity:0;
      transition:opacity 0.4s ease;
    }
    .lightbox.open{display:flex; opacity:1}
    
    .lb-content{
      display:flex; width:100%; height:100%; position:relative;
      transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .lb-main{
      flex:1; display:flex; align-items:center; justify-content:center;
      padding:100px 80px; transition:padding 0.5s ease;
    }
    .lb-main.with-panel{padding-right:calc(420px + 80px)}
    
    .lb-image-container{
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:28px; max-width:100%; max-height:100%;
    }
    .lb-img{
      max-width:calc(100vw - 200px); max-height:calc(100vh - 240px);
      border-radius:16px; box-shadow:0 40px 100px rgba(0,0,0,0.9);
      object-fit:contain; transition:all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor:zoom-in;
    }
    .lb-img.zoomed{cursor:zoom-out; transform:scale(2.5)}
    .lb-img.with-panel{max-width:calc(100vw - 620px)}
    
    .lb-info{
      text-align:center; color:white; max-width:800px;
      opacity:1; transition:opacity 0.4s ease;
    }
    .lb-info.hidden{opacity:0; pointer-events:none; position:absolute}
    .lb-info h3{
      font-size:1.8rem; font-weight:800; margin-bottom:12px;
      font-family:Montserrat; text-shadow:0 4px 16px rgba(0,0,0,0.8);
    }
    .lb-info p{font-size:1rem; color:#e5e7eb; line-height:1.7; text-shadow:0 2px 8px rgba(0,0,0,0.6)}
    
    .details-btn{
      margin-top:20px; padding:12px 28px; background:rgba(255,255,255,0.15);
      border:2px solid rgba(255,255,255,0.3); border-radius:12px;
      color:white; font-weight:700; cursor:pointer; font-size:0.95rem;
      backdrop-filter:blur(16px); transition:all 0.4s ease;
      display:inline-block;
    }
    .details-btn:hover{
      background:rgba(255,255,255,0.25); border-color:rgba(255,255,255,0.5);
      transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.6);
    }

    /* Details Panel - Compact */
    .lb-panel{
      position:fixed; right:40px; top:80px; bottom:80px; width:420px;
      background:var(--card); border-radius:24px; overflow:hidden;
      transform:translateX(calc(100% + 40px)); transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index:1001; box-shadow:-12px 0 80px rgba(0,0,0,0.8);
      border:3px solid var(--border); display:flex; flex-direction:column;
    }
    .lb-panel.open{transform:translateX(0)}
    
    .panel-header{
      padding:24px; border-bottom:2px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      background:var(--card); position:sticky; top:0; z-index:10;
      backdrop-filter:blur(16px);
    }
    .panel-header h3{font-size:1.3rem; font-weight:800; font-family:Montserrat}
    .panel-actions{display:flex; gap:10px}
    .action-btn{
      width:40px; height:40px; border-radius:10px; background:var(--hover);
      border:2px solid var(--border); cursor:pointer; display:flex;
      align-items:center; justify-content:center; font-size:1.1rem;
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color:var(--text);
    }
    .action-btn:hover{
      background:var(--accent); color:white; border-color:var(--accent);
      transform:scale(1.15) rotate(8deg); box-shadow:0 6px 20px rgba(234,88,12,0.4);
    }
    
    .panel-body{padding:24px; overflow-y:auto; flex:1}
    .detail-section{margin-bottom:28px}
    .section-title{
      font-size:0.8rem; font-weight:800; color:var(--accent);
      text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px;
      display:flex; align-items:center; gap:6px;
    }
    .detail-row{
      display:flex; padding:10px 0; border-bottom:1px solid var(--border);
      gap:16px; align-items:flex-start;
    }
    .detail-row:last-child{border-bottom:none}
    .detail-label{min-width:100px; font-weight:700; color:var(--muted); font-size:0.8rem}
    .detail-value{flex:1; font-weight:600; color:var(--text); font-size:0.85rem; line-height:1.5}
    
    .caption-full{
      font-size:0.95rem; line-height:1.7; color:var(--text);
      font-weight:500; margin-bottom:24px; padding-bottom:24px;
      border-bottom:2px solid var(--border);
    }
    
    .share-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
    .share-btn{
      padding:10px; border-radius:10px; border:2px solid var(--border);
      background:var(--bg); cursor:pointer; font-weight:600;
      transition:all 0.4s ease; display:flex; align-items:center;
      gap:8px; justify-content:center; font-size:0.85rem;
    }
    .share-btn:hover{
      background:var(--accent); color:white; border-color:var(--accent);
      transform:translateY(-3px); box-shadow:0 8px 20px rgba(234,88,12,0.4);
    }
    .share-btn i{font-size:1rem}

    /* Navigation */
    .lb-nav{
      position:fixed; background:rgba(255,255,255,0.15);
      backdrop-filter:blur(16px); border:2px solid rgba(255,255,255,0.3);
      color:white; border-radius:14px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      z-index:1002; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size:1.4rem;
      font-weight:800;
    }
    .lb-nav:hover{
      background:rgba(255,255,255,0.25); border-color:rgba(255,255,255,0.5);
      transform:scale(1.1);
    }
    .lb-nav:active{transform:scale(0.95)}
    
    .lb-close{top:32px; right:32px; width:56px; height:56px}
    .lb-close.shifted{right:calc(420px + 72px)}
    .lb-prev,.lb-next{top:50%; transform:translateY(-50%); width:60px; height:60px}
    .lb-prev{left:32px}
    .lb-next{right:32px}
    .lb-next.shifted{right:calc(420px + 72px)}

    /* Footer */
    footer{
      background:var(--card); border-top:2px solid var(--border);
      padding:60px 40px 40px; transition:all 0.4s ease;
    }
    .footer-content{
      max-width:var(--max-width); margin:0 auto;
      display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px;
    }
    .footer-brand{display:flex; flex-direction:column; gap:20px}
    .footer-logo{
      width:64px; height:64px; border-radius:16px;
      background:linear-gradient(135deg,#ea580c,#dc2626);
      display:flex; align-items:center; justify-content:center;
      color:white; font-weight:800; font-family:Montserrat; font-size:1.8rem;
      box-shadow:0 8px 24px rgba(234,88,12,0.3);
    }
    .footer-text{font-size:0.95rem; line-height:1.8; color:var(--muted)}
    .footer-socials{display:flex; gap:12px; margin-top:12px}
    .footer-social-btn{
      width:44px; height:44px; background:var(--hover); border-radius:12px;
      border:2px solid var(--border); display:flex; align-items:center;
      justify-content:center; transition:all 0.4s ease; font-size:1.2rem;
    }
    .footer-social-btn:hover{
      background:var(--accent); color:white; border-color:var(--accent);
      transform:translateY(-4px); box-shadow:0 8px 20px rgba(234,88,12,0.4);
    }
    
    .footer-section h4{
      font-size:1.1rem; font-weight:800; font-family:Montserrat;
      margin-bottom:20px; color:var(--accent);
    }
    .footer-links{display:flex; flex-direction:column; gap:12px}
    .footer-link{
      font-size:0.95rem; color:var(--muted); transition:all 0.3s ease;
      display:flex; align-items:center; gap:8px;
    }
    .footer-link:hover{color:var(--accent); transform:translateX(4px)}
    .footer-link i{font-size:0.9rem}
    
    .footer-bottom{
      max-width:var(--max-width); margin:40px auto 0;
      padding-top:32px; border-top:2px solid var(--border);
      text-align:center; color:var(--muted); font-size:0.9rem;
    }

    /* Scrollbar */
    .panel-body::-webkit-scrollbar{width:8px}
    .panel-body::-webkit-scrollbar-track{background:transparent}
    .panel-body::-webkit-scrollbar-thumb{background:var(--muted); border-radius:4px}
    .panel-body::-webkit-scrollbar-thumb:hover{background:var(--accent)}

    .no-results{text-align:center; padding:100px 20px; color:var(--muted); font-size:1.3rem; font-weight:600}

    @media(max-width:1200px){
      .about-contact-section{grid-template-columns:1fr}
      .footer-content{grid-template-columns:1fr; gap:40px}
      .lb-main{padding:100px 60px}
      .lb-main.with-panel{padding-right:60px}
      .lb-panel{width:90%; max-width:400px; right:5%; top:80px; bottom:80px}
      .lb-close.shifted, .lb-next.shifted{right:32px}
      .lb-img.with-panel{max-width:calc(100vw - 240px)}
    }
    
    @media(max-width:900px){
      .hero{grid-template-columns:1fr; gap:32px}
      .hero-content h2{font-size:2.2rem}
      .controls-row{flex-direction:column; align-items:stretch}
      .filter-group{width:100%}
    }
    
    @media(max-width:640px){
      header,.gallery-section{padding:0 20px}
      .hero{padding:0 20px}
      .about-contact-section{padding:0 20px}
      footer{padding:40px 20px 20px}
      .lb-main{padding:80px 20px}
      .lb-nav{width:52px; height:52px}
      .lb-prev{left:16px}
      .lb-next{right:16px}
      .lb-close{top:16px; right:16px}
      .lb-panel{width:calc(100% - 32px); left:16px; right:16px; top:60px; bottom:60px}
    }