/*
Copied and adapted from örnek site/templatemo-3d-coverflow.css
*/
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;max-width:100%;overflow-x:hidden;position:relative;background:#000;margin:0}
.section{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center}
#home{background:radial-gradient(ellipse at center,#1a1a2e 0%,#0f0f0f 100%)}
#about{background:linear-gradient(135deg,#0f0f0f 0%,#1a1a2e 100%)}
#contact{background:radial-gradient(ellipse at center,#1a1a2e 0%,#0f0f0f 100%)}
.header{position:fixed;top:0;left:0;right:0;height:80px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 40px;transition:all .3s ease}
.header.scrolled{background:rgba(0,0,0,.95);height:70px}
.logo-container{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;transition:transform .3s ease}
.logo-container:hover{transform:translateY(-2px)}
.logo{width:auto;height:auto;display:flex;align-items:center;justify-content:center;font-size:24px}
.logo-container{color:#fff !important}
.header .logo svg{color:#fff !important;stroke:#fff !important;width:1em !important;height:1em !important;display:block}
.header .logo svg path,
.header .logo svg line,
.header .logo svg polygon{stroke:#fff !important}
.logo-text{color:#fff;font-size:24px;font-weight:600;letter-spacing:-.5px}
.header a.logo-container:link,
.header a.logo-container:visited,
.header a.logo-container:hover,
.header a.logo-container:active{color:#fff !important}
.main-menu{display:flex;align-items:center;gap:20px}
.menu-item{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:600;transition:all .3s ease;position:relative;padding:8px 12px;border-radius:10px}
.menu-item:hover{color:#fff;transform:translateY(-2px)}
.menu-item.cta{background:linear-gradient(90deg,#4f46e5,#06b6d4);color:#fff}
.menu-toggle{display:none;flex-direction:column;cursor:pointer;padding:4px}
.menu-toggle span{width:25px;height:3px;background:#fff;margin:3px 0;transition:.3s;border-radius:2px}
.coverflow-wrapper{width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;overflow:hidden}
.coverflow-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1200px;position:relative;overflow:hidden}
.coverflow{display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;position:relative;width:100%;height:400px}
.coverflow-item{position:absolute;width:300px;height:300px;transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);cursor:pointer;user-select:none}
.coverflow-item .cover{width:100%;height:100%;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.8);position:relative;overflow:hidden;transform-style:preserve-3d;background:#333}
.coverflow-item .cover img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.coverflow-item .reflection{position:absolute;top:100%;left:0;width:100%;height:100%;border-radius:10px;transform:scaleY(-1);opacity:.2;filter:blur(2px);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 50%,rgba(0,0,0,1) 100%);overflow:hidden}
.coverflow-item.active{z-index:100;transform:translateX(0) translateZ(0) rotateY(0)}
.coverflow-item.active .cover{box-shadow:0 30px 60px rgba(0,0,0,.9)}
.nav-button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);color:#fff;width:60px;height:60px;border-radius:50%;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;backdrop-filter:blur(10px);z-index:200}
.nav-button:hover{background:rgba(255,255,255,.2);transform:translateY(-50%) scale(1.1)}
.nav-button.prev{left:50px}
.nav-button.next{right:50px}
.dots-container{position:absolute;bottom:220px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:200}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s ease}
.dot.active{background:rgba(255,255,255,.8);transform:scale(1.3)}
.info{position:absolute;top:120px;left:50%;transform:translateX(-50%);color:#fff;text-align:center;z-index:200}
.info h2{font-size:32px;margin-bottom:10px;opacity:0;animation:fadeIn .6s forwards}
.info p{font-size:16px;opacity:.7}
@keyframes fadeIn{to{opacity:1}}
.play-pause-button{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);color:#fff;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;backdrop-filter:blur(10px);z-index:200}
.play-pause-button:hover{background:rgba(255,255,255,.2);transform:translateX(-50%) scale(1.1)}
.play-pause-button .pause-icon{font-size:16px;letter-spacing:2px}
/* Bottom centered CTA replacing play/pause */
.menu-cta-bottom{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);background:var(--btn-bg);color:var(--btn-text);text-decoration:none;font-weight:800;letter-spacing:.3px;padding:16px 28px;font-size:20px;border-radius:999px;border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 28px rgba(0,0,0,.3);backdrop-filter:blur(8px);z-index:200;transition:transform .18s,box-shadow .18s}
.menu-cta-bottom:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.footer{color:#9ca3af;text-align:center;padding:24px}
.scroll-to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
.scroll-to-top.visible{opacity:1;pointer-events:auto}
/* Bottom texts (between dots and CTA) */
.bottom-texts{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;z-index:200;text-align:center;color:#fff;display:flex;flex-direction:column;gap:6px}
.bottom-texts .t1{font-size:16px;opacity:.95;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.bottom-texts .t2{font-size:14px;opacity:.85;text-shadow:0 2px 8px rgba(0,0,0,.45)}

/* Responsive adjustments */
@media (max-width: 1024px){
  .coverflow{height:360px}
  .coverflow-item{width:260px;height:260px}
  .nav-button.prev{left:30px}
  .nav-button.next{right:30px}
}
@media (max-width: 768px){
  .header{height:64px;padding:0 20px}
  .coverflow-wrapper{padding-top:16px}
  .info h2{font-size:26px}
  .info p{font-size:14px}
  .coverflow{height:320px}
  .coverflow-item{width:220px;height:220px}
  .nav-button{width:48px;height:48px;font-size:20px}
  .nav-button.prev{left:18px}
  .nav-button.next{right:18px}
  .dots-container{bottom:212px}
  .bottom-texts{bottom:164px}
  .menu-cta-bottom{bottom:152px;font-size:17px;padding:14px 22px}
}
@media (max-width: 480px){
  .info h2{font-size:22px}
  .coverflow{height:280px}
  .coverflow-item{width:180px;height:180px}
  .nav-button{width:42px;height:42px;font-size:18px}
  .nav-button.prev{left:12px}
  .nav-button.next{right:12px}
  .dots-container{bottom:196px}
  .bottom-texts{bottom:148px}
  .menu-cta-bottom{bottom:138px;font-size:16px;padding:13px 20px}
}