/* Genel Ayarlar */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


:root{
  --accent:#f17300;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(2,6,23,.10);
  --shadow: 0 24px 70px rgba(2,6,23,.10);
  --shadow2: 0 14px 40px rgba(2,6,23,.10);
  --nav-h: 84px;
  --max: 1220px;
}



/* ====== NAVBAR (sticky + glass) ====== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(2,6,23,.08);
}

.nav-inner{
  height: var(--nav-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* BRAND */
.brand{ min-width: 190px; }
.brand a{ display:flex; align-items:center; text-decoration:none; }
.brand img{
  height: 64px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
}

/* Desktop links */
.nav-links{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.62);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(2,6,23,.06);
}

.nav-links a,
.drop-btn{
  appearance:none;
  border:0;
  background: transparent;
  font: inherit;
  cursor:pointer;
  text-decoration:none;

  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .25px;

  padding: 10px 12px;
  border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  outline: none;
}

/* hover glow */
.nav-links a::before,
.drop-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: radial-gradient(120px 60px at 50% 50%, rgba(241,115,0,.22), transparent 60%);
  opacity: 0;
  transition: opacity .15s ease;
  z-index:-1;
}

.nav-links a:hover,
.drop-btn:hover{
  background: rgba(241,115,0,.10);
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(241,115,0,.12);
}
.nav-links a:hover::before,
.drop-btn:hover::before{ opacity: 1; }

.nav-links a:focus-visible,
.drop-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(241,115,0,.20);
}

.nav-links a.is-active{
  background: linear-gradient(135deg, rgba(241,115,0,.18), rgba(255,154,47,.14));
  color: #111;
  border: 1px solid rgba(241,115,0,.20);
}

/* Dropdown */
.dropdown{ position:relative; }
.drop-btn .chev{ font-size: 12px; opacity: .85; transform: translateY(1px); }

.dropdown-menu{
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 210px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--shadow);
  display:none;
  transform-origin: top left;
  animation: pop .16s ease-out;
}

@keyframes pop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.dropdown-menu a{
  width:100%;
  border-radius: 12px;
  padding: 11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--accent);
  font-weight: 800;
}

.dropdown-menu a:hover{
  background: rgba(2,6,23,.04);
  color:#111;
}

.dropdown.open .dropdown-menu{ display:block; }

/* Right actions */
.actions{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 160px;
  justify-content: flex-end;
}

.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.8);
  box-shadow: 0 14px 34px rgba(2,6,23,.07);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration:none;
}
.action-btn i{ color: var(--accent); }
.action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
  background: rgba(255,255,255,.95);
}

/* Burger */
.burger{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
  cursor:pointer;
  padding: 10px;
  position: relative;
  overflow:hidden;
}
.burger::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 25%, rgba(241,115,0,.20), transparent 50%);
  opacity:.75;
  pointer-events:none;
}
.burger span{
  display:block;
  height: 3px;
  border-radius: 99px;
  background: var(--accent);
  margin: 6px 0;
  transition: transform .18s ease, opacity .18s ease;
  position: relative;
  z-index: 1;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* Mobile overlay + panel */
.overlay{
  position: fixed;
  inset:0;
  background: rgba(2,6,23,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 999;
}
.overlay.active{ opacity:1; pointer-events:auto; }

.mobile-panel{
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  left: 12px;
  right: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transform: translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 1001;
  overflow:hidden;
}
.mobile-panel.active{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}

.mobile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
}
.mobile-header b{ font-size: 13px; letter-spacing:.2px; }

.mobile-links{
  padding: 12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.m-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(241,115,0,.06);
  color: var(--accent);
  font-weight: 900;
  text-decoration:none;
  letter-spacing: .2px;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.m-item:hover{
  background: rgba(241,115,0,.10);
  color:#111;
  transform: translateY(-1px);
}

.m-drop{ cursor:pointer; user-select:none; }

.m-sub{
  display:none;
  padding: 4px 6px 8px 6px;
  margin-top: -2px;
}
.m-sub a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.92);
  text-decoration:none;
  color: var(--accent);
  font-weight: 900;
  margin-top: 8px;
  transition:.12s;
}
.m-sub a:hover{ background: rgba(2,6,23,.04); color:#111; }

.m-meta{
  display:flex;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.75);
}

.pill{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  text-decoration:none;
  color:#111;
  font-weight: 900;
  font-size: 13px;
}
.pill i{ color: var(--accent); }

/* Responsive */
@media (max-width: 920px){
  .nav-links{ display:none; }
  .actions .action-btn{ display:none; }
  .burger{ display:inline-block; }
}
@media (max-width: 420px){
  .mobile-panel{ left: 10px; right: 10px; top: calc(var(--nav-h) + 8px); }
  .brand img{ height: 58px; }
  .burger{ width: 44px; height: 44px; }
}


/* HERO SECTION */

.hk-hero{
position:relative;
overflow:hidden;

background:linear-gradient(180deg,#ffffff,#f8f8f8);

min-height:100vh;

padding:110px 6% 40px;

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

gap:40px;
}


/* glow */

.hk-hero-glow{

position:absolute;

top:50%;
right:8%;

transform:translateY(-50%);

width:520px;
height:520px;

background:radial-gradient(circle,rgba(241,115,0,.14),transparent 70%);

filter:blur(36px);

pointer-events:none;
z-index:0;

}


/* text */

.hk-hero-content{

position:relative;
z-index:2;

flex:1;
max-width:560px;

}

.hk-hero-badge{

display:inline-block;

margin-bottom:18px;

padding:8px 14px;

border-radius:999px;

background:rgba(241,115,0,.08);

border:1px solid rgba(241,115,0,.18);

color:#f17300;

font-size:13px;
font-weight:600;

}

.hk-hero-title{

font-size:clamp(34px,4.8vw,60px);

line-height:1.05;

color:#f17300;

margin-bottom:18px;

font-weight:800;

}

.hk-hero-text{

font-size:16px;

line-height:1.7;

color:#333;

margin-bottom:28px;

}


/* buttons */

.hk-hero-buttons{

display:flex;

gap:12px;

margin-bottom:22px;

flex-wrap:wrap;

}

.hk-btn{

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

padding:13px 24px;

border-radius:12px;

text-decoration:none;

font-weight:700;

font-size:14px;

transition:.25s;

}

.hk-btn-main{

background:#f17300;

color:#fff;

box-shadow:0 12px 28px rgba(241,115,0,.28);

}

.hk-btn-main:hover{

background:#d86100;

transform:translateY(-2px);

}

.hk-btn-outline{

background:#fff;

border:1px solid rgba(0,0,0,.1);

color:#111;

}


/* features */

.hk-hero-features{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.hk-feature{

padding:10px 14px;

border-radius:999px;

background:#fff;

border:1px solid rgba(0,0,0,.08);

box-shadow:0 8px 20px rgba(0,0,0,.05);

font-size:13px;

font-weight:600;

}


/* image */

.hk-hero-image{

position:relative;

flex:1;

display:flex;

align-items:center;

justify-content:center;

z-index:2;

}

.hk-hero-image img{

width:min(430px,100%);

height:auto;

filter:drop-shadow(0 28px 45px rgba(0,0,0,.16));

animation:hkFloatDoor 4.5s ease-in-out infinite;

}


/* shadow */

.hk-door-shadow{

position:absolute;

bottom:-15px;

width:260px;
height:40px;

background:radial-gradient(ellipse at center,
rgba(0,0,0,.25),
transparent 70%);

filter:blur(10px);

}


/* animation */

@keyframes hkFloatDoor{

0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}

}


/* TRUST AREA */

.hk-trust{

background:linear-gradient(180deg,#ffffff,#f7f7f7);

padding:40px 16px 60px;

}

.hk-trust-wrapper{

max-width:1200px;

margin:auto;

display:flex;

gap:18px;

justify-content:center;

}

.hk-trust-card{

flex:1;

display:flex;

gap:14px;

padding:20px 18px;

background:#fff;

border-radius:20px;

border:1px solid rgba(0,0,0,.08);

box-shadow:0 14px 35px rgba(0,0,0,.06);

transition:.25s;

}

.hk-trust-card:hover{

transform:translateY(-4px);

box-shadow:0 22px 45px rgba(0,0,0,.1);

}

.hk-trust-icon{

width:50px;
height:50px;

border-radius:14px;

background:linear-gradient(135deg,#f17300,#ff9f43);

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

color:#fff;

font-weight:800;

box-shadow:0 10px 24px rgba(241,115,0,.3);

}

.hk-trust-title{

margin-bottom:6px;

font-size:17px;

}

.hk-trust-text{

font-size:13px;

color:#555;

line-height:1.6;

}


/* mobile */

@media(max-width:768px){

.hk-hero{

flex-direction:row;

min-height:auto;

padding:90px 16px 30px;

gap:16px;

}

.hk-hero-image{

flex:.9;

justify-content:flex-end;

}

.hk-hero-image img{

max-width:160px;

}

.hk-hero-title{

font-size:22px;

}

.hk-hero-text{

font-size:13px;

}

.hk-btn{

padding:9px 16px;

font-size:12px;

}

.hk-feature{

font-size:10px;

padding:7px 10px;

}

.hk-trust-wrapper{

overflow-x:auto;

scroll-snap-type:x mandatory;

}

.hk-trust-card{

min-width:260px;

scroll-snap-align:start;

}

}

.hk-trust-wrapper::-webkit-scrollbar{
display:none;
}

.trust-wrapper::-webkit-scrollbar{
display:none;
}

html,body{margin:0;padding:0}

.hero-cover{
  width:100%;
  height: clamp(240px, 38vw, 520px);
  position:relative;

  /* görseli arka plan yap */
  background-image: url("resim/klasikmodel.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  /* kapı solda kalsın, duvar alanı da gözüksün */
  background-position: 20% center;
}

/* yazı okunurluğu için hafif overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.78) 100%
  );
}

/* yazı alanı */
.hero-text{
  position:absolute;
  right: min(5vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  max-width: 640px;
  padding: 12px 0;
}

.hero-text h1{
  margin:0 0 10px;
  font-size: clamp(20px, 3.6vw, 48px);
  color:#f17300;
  letter-spacing: -.5px;
  font-weight: 800;
}

.hero-text p{
  margin:0;
  font-size: clamp(14px, 1.6vw, 20px);
  color:#111;
  opacity:.85;
  font-weight: 600;
}

/* Mobilde yazıyı ortaya al */
@media (max-width: 768px){
  .hero-text{
  right: 20px;      /* sağdan boşluk */
  left: auto;
  text-align: right; 
  max-width: 75%;
}
.hero-text h1{
  font-size: 24px;
}

.hero-text p{
  font-size: 14px;
}

}
  .hero-overlay{
    background: linear-gradient(180deg,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.70) 70%,
      rgba(255,255,255,.85) 100%
    );
  }

 .hero-coverr{
  width:100%;
  height: clamp(240px, 38vw, 520px);
  position:relative;

  /* görseli arka plan yap */
  background-image: url("resim/lakemodell.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  /* kapı solda kalsın, duvar alanı da gözüksün */
  background-position: 20% center;
}

/* yazı okunurluğu için hafif overlay */
.hero-overlayy{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.78) 100%
  );
}

/* yazı alanı */
.hero-textt{
  position:absolute;
  right: min(5vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  max-width: 640px;
  padding: 12px 0;
}

.hero-textt h1{
  margin:0 0 10px;
  font-size: clamp(20px, 3.6vw, 48px);
  color:#f17300;
  letter-spacing: -.5px;
  font-weight: 800;
}

.hero-textt p{
  margin:0;
  font-size: clamp(14px, 1.6vw, 20px);
  color:#111;
  opacity:.85;
  font-weight: 600;
}

/* Mobilde yazıyı ortaya al */
@media (max-width: 768px){
  .hero-textt{
  right: 20px;      /* sağdan boşluk */
  left: auto;
  text-align: right; 
  max-width: 75%;
}
.hero-textt h1{
  font-size: 24px;
}

.hero-textt p{
  font-size: 14px;
}

}
  .hero-overlayy{
    background: linear-gradient(180deg,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.70) 70%,
      rgba(255,255,255,.85) 100%
    );
  } 


.door-section{
  text-align:center;
  background:#fff;
  font-family:'Segoe UI',sans-serif;
  padding:40px 15px;
}

/* başlık */

.section-title{
  max-width:700px;
  margin:auto;
}

.section-title h2{
  color:#f17300;
  font-size:26px;
  margin-bottom:10px;
}

.section-title p{
  font-size:14px;
  color:#666;
  margin-bottom:35px;
}

/* GALERİ */

.door-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 kapı yan yana */
  gap:18px;
  max-width:800px;
  margin:auto;
}

/* KART */
/* KLASİK BÖLÜM GENEL */
.klasik-section{
  background:#fff;
  padding-bottom:40px;
  text-align:center;
  font-family:'Segoe UI', sans-serif;
}

/* üst görsel alan */
.klasik-hero{
  width:100%;
  height:clamp(220px, 34vw, 500px);
  position:relative;
  background-image:url("resim/klasikmodel.jpg"); /* kendi kapak görselin */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.klasik-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.38) 45%,
    rgba(255,255,255,0.72) 100%
  );
}

.klasik-hero-text{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  text-align:right;
  max-width:650px;
  z-index:2;
}

.klasik-hero-text h1{
  margin:0 0 10px;
  font-size:clamp(24px, 3.8vw, 50px);
  color:#f17300;
  font-weight:800;
  letter-spacing:-0.5px;
  text-shadow:0 4px 16px rgba(0,0,0,0.10);
}

.klasik-hero-text p{
  margin:0;
  font-size:clamp(14px, 1.5vw, 21px);
  color:#111;
  font-weight:600;
  opacity:.88;
}

.klasik-showcase {
  padding: 60px 20px;
  background: #fff;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.klasik-title {
  max-width: 800px;
  margin: 0 auto 35px;
}

.klasik-title h2 {
  font-size: 28px;
  color: #f17300;
  margin-bottom: 12px;
  font-weight: 700;
}

.klasik-title p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

.klasik-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* HER ZAMAN 3 */
  gap: 28px;
  max-width: 1300px;
  margin: 0 auto;
}

.klasik-card {
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
  position: relative;
}

.klasik-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #f17300;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.klasik-card:hover::before {
  transform: scaleX(1);
}

.klasik-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}

.klasik-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #f17300;
  color: #fff;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
}

.klasik-card img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.35s ease;
}

.klasik-card:hover img {
  transform: scale(1.03);
}

.klasik-card p {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.klasik-show-all {
  margin-top: 35px;
}

/* buton */
.klasik-show-all{
  margin-top:35px;
}

.klasik-show-all button{
  background:#f17300;
  border:none;
  color:#fff;
  padding:12px 28px;
  border-radius:30px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:all .3s ease;
}

.klasik-show-all button:hover{
  background:#d35c00;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(241,115,0,.35);
}


/* Mobil */
@media (max-width:768px){

  .klasik-gallery{
    gap:10px;
  }

  .klasik-card{
    padding:8px;
    border-radius:12px;
  }

  .klasik-card img{
    height:160px;
  }

  .klasik-card p{
    font-size:11px;
  }

}




:root{
  --accent:#f17300;
  --accent-soft:rgba(241,115,0,.16);
  --text:#ffffff;
  --shadow:0 22px 55px rgba(0,0,0,.14);
  --shadow-hover:0 30px 80px rgba(0,0,0,.22);
  --radius:22px;
}

/* GENEL ALAN */
.premium-products{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:40px 16px 50px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

/* KART */
.premium-card{
  display:block;
  text-decoration:none;
  color:inherit;
  perspective:1400px;
  -webkit-tap-highlight-color: transparent;
}

.premium-card .scene{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  aspect-ratio:3 / 4.2;
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease;
  background:#ececec;
  isolation:isolate;
}

/* GÖRSELLER */
.bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .5s ease;
  will-change:transform, opacity;
}

/* ilk görsel */
.closed-bg{
  opacity:1;
  z-index:1;
  transform:scale(1);
}

/* ikinci görsel */
.open-bg{
  opacity:0;
  z-index:2;
  transform:scale(1.04);
}

/* alt derinlik katmanı */
.depth-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.04) 0%,
      rgba(0,0,0,.00) 25%,
      rgba(0,0,0,.12) 65%,
      rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* parlama efekti */
.light-sweep{
  position:absolute;
  inset:-30%;
  z-index:4;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.00) 34%,
      rgba(255,255,255,.20) 46%,
      rgba(255,255,255,.00) 58%,
      transparent 100%);
  transform:translateX(-120%) rotate(8deg);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

/* badge */
.card-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.35px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

/* alt içerik */
.card-content{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(10,10,10,.28);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.card-title{
  color:var(--text);
  font-size:19px;
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:0 4px 18px rgba(0,0,0,.30);
}

.card-arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(241,115,0,.88);
  box-shadow:0 10px 22px rgba(241,115,0,.28);
  font-size:22px;
  flex-shrink:0;
  transform:translateX(0);
  transition:transform .3s ease, background-color .3s ease;
}

/* MASAÜSTÜ PREMIUM ANİMASYON */
.premium-card:hover .scene{
  transform:rotateX(2deg) rotateY(-4deg) translateY(-8px);
  box-shadow:var(--shadow-hover);
}

.premium-card:hover .closed-bg{
  opacity:0;
  transform:scale(1.03);
  filter:brightness(.98);
}

.premium-card:hover .open-bg{
  opacity:1;
  transform:scale(1.01);
}

.premium-card:hover .light-sweep{
  transform:translateX(120%) rotate(8deg);
}

.premium-card:hover .card-arrow{
  transform:translateX(3px);
  background:#111;
}

/* aktif tıklama hissi */
.premium-card:active .scene{
  transform:scale(.992);
}

/* TABLET */
@media (max-width:900px){
  .premium-products{
    gap:16px;
    padding:28px 14px 40px;
  }

  .premium-card .scene{
    aspect-ratio:3 / 4.35;
  }

  .card-title{
    font-size:16px;
  }

  .card-content{
    padding:12px 13px;
  }
}

/* MOBİL - YAN YANA KALSIN */
@media (max-width:640px){
  .premium-products{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:22px 10px 34px;
  }

  .premium-card .scene{
    border-radius:18px;
    aspect-ratio:3 / 4.5;
  }

  .card-badge{
    top:10px;
    left:10px;
    padding:6px 9px;
    font-size:10px;
  }

  .card-content{
    left:10px;
    right:10px;
    bottom:10px;
    padding:10px 10px;
    border-radius:14px;
  }

  .card-title{
    font-size:13px;
    letter-spacing:.25px;
  }

  .card-arrow{
    width:28px;
    height:28px;
    font-size:18px;
  }
}

/* ÇOK KÜÇÜK EKRAN */
@media (max-width:380px){
  .premium-products{
    gap:10px;
    padding:18px 8px 28px;
  }

  .card-title{
    font-size:12px;
  }

  .card-content{
    padding:8px 8px;
  }

  .card-arrow{
    width:26px;
    height:26px;
    font-size:16px;
  }
}

/* DOKUNMATİK CİHAZLARDA hover yerine active class */
@media (hover:none){
  .premium-card:hover .scene{
    transform:none;
    box-shadow:var(--shadow);
  }

  .premium-card:hover .closed-bg{
    opacity:1;
    transform:scale(1);
    filter:none;
  }

  .premium-card:hover .open-bg{
    opacity:0;
    transform:scale(1.04);
  }

  .premium-card:hover .light-sweep{
    transform:translateX(-120%) rotate(8deg);
  }

  .premium-card:hover .card-arrow{
    transform:none;
    background:rgba(241,115,0,.88);
  }

  .premium-card.is-open .closed-bg{
    opacity:0;
    transform:scale(1.03);
  }

  .premium-card.is-open .open-bg{
    opacity:1;
    transform:scale(1.01);
  }

  .premium-card.is-open .light-sweep{
    transform:translateX(120%) rotate(8deg);
  }

  .premium-card.is-open .card-arrow{
    transform:translateX(3px);
    background:#111;
  }

  .premium-card.is-open .scene{
    box-shadow:var(--shadow-hover);
  }
}

/* Katalog Ortak Stil */
.catalog-full,
.catalog-v2 {
  position: relative;
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 50px;
   margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  overflow: hidden;
}

.catalog-kapi {
  background-image: url("resim/ChatGPT\ Image\ 13\ Tem\ 2025\ 13_29_27.jpg");
  
}


.catalog-overlay {
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catalog-content {
  position: absolute;
  left: 40px;
  top: 40px;
  transform: none;
  color: white;
  max-width: 350px;
}

.catalog-content h2 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0;
  white-space: pre-line;
}

.catalog-buttons {
  position: absolute;
  bottom: 40px;
  right: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.catalog-button {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.catalog-button:hover {
  background-color: #fff;
  color: #21414d;
}

.catalog-button .icon-eye::before {
  content: "\1F441";
  font-size: 26px;
  margin-bottom: 5px;
}

.catalog-button .icon-download::before {
  content: "\2B07";
  font-size: 26px;
  margin-bottom: 5px;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}





/* ARA BÖLÜM */
.black-section{
  width: 100%;
  background:
    radial-gradient(circle at top left, rgba(241,115,0,0.08), transparent 35%),
    linear-gradient(180deg, #ffffff, #f7f7f7);
  padding: 70px 18px;
  overflow: hidden;
}

/* iç alan */
.black-container{
  max-width: 1300px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 42px;
}

/* görsel alanı */
.image-side{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* hafif arka glow */
.image-side::before{
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  background: radial-gradient(circle, rgba(241,115,0,0.16), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}

/* görsel */
.custom-image{
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: auto;
  display: block;
  border-radius: 22px;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
  transition: transform .2s ease-out;
  will-change: transform;
}

.custom-image:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

/* yazı alanı */
.text-side{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 32px 30px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.text-side h2{
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.18;
  margin-bottom: 16px;
  color: #f17300;
  letter-spacing: -0.5px;
}

.text-side p{
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  color: #222;
  max-width: 60ch;
}

/* özellikler */
.feature-list{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:22px;
}

.feature-item{
display:flex;
align-items:center;
gap:8px;

background:#fff;
border-radius:30px;
padding:8px 14px;

font-size:14px;
font-weight:600;
color:#333;

border:1px solid rgba(0,0,0,0.08);

box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* ikon */
.feature-icon{
display:flex;
align-items:center;
justify-content:center;

width:26px;
height:26px;

background:#f17300;
color:white;
border-radius:50%;

font-size:13px;
font-weight:700;
}

/* mobil */
@media (max-width:768px){

.feature-list{
gap:8px;
margin-top:14px;
}

.feature-item{
font-size:11px;
padding:6px 10px;
}

.feature-icon{
width:20px;
height:20px;
font-size:10px;
}

}

/* TABLET */
@media (max-width: 992px){
  .black-container{
    gap: 28px;
  }

  .text-side{
    padding: 24px 22px;
  }

  .text-side h2{
    font-size: 30px;
  }

  .text-side p{
    font-size: 16px;
  }
}

/* MOBİL - YAN YANA KALSIN */
@media (max-width: 768px){
  .black-section{
    padding: 42px 12px;
  }

  .black-container{
    grid-template-columns: 0.95fr 1.05fr; /* görsel + yazı yan yana */
    gap: 14px;
    align-items: center;
  }

  .custom-image{
    width: 100%;
    max-width: 220px;
    padding: 6px;
    border-radius: 16px;
  }

  .text-side{
    padding: 16px 14px;
    border-radius: 18px;
  }

  .text-side h2{
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.22;
  }

  .text-side p{
    font-size: 13px;
    line-height: 1.55;
  }
}

/* ÇOK KÜÇÜK MOBİL */
@media (max-width: 480px){
  .black-container{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 10px;
  }

  .custom-image{
    max-width: 170px;
  }

  .text-side{
    padding: 12px 10px;
  }

  .text-side h2{
    font-size: 15px;
    margin-bottom: 8px;
  }

  .text-side p{
    font-size: 11.5px;
    line-height: 1.45;
  }
}


/* LAKE BÖLÜM GENEL */
.lake-section{
  background:#fff;
  padding-bottom:40px;
  text-align:center;
  font-family:'Segoe UI', sans-serif;
}

/* üst görsel alan */
.lake-hero{
  width:100%;
  height:clamp(220px, 34vw, 500px);
  position:relative;
  background-image:url("resim/lakeust.jpg"); /* kapak görselin */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.lake-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.38) 45%,
    rgba(255,255,255,0.72) 100%
  );
}

.lake-hero-text{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  text-align:right;
  max-width:650px;
  z-index:2;
}

.lake-hero-text h1{
  margin:0 0 10px;
  font-size:clamp(24px, 3.8vw, 50px);
  color:#f17300;
  font-weight:800;
  letter-spacing:-0.5px;
  text-shadow:0 4px 16px rgba(0,0,0,0.10);
}

.lake-hero-text p{
  margin:0;
  font-size:clamp(14px, 1.5vw, 21px);
  color:#111;
  font-weight:600;
  opacity:.88;
}

/* başlık alanı */
.lake-title{
  max-width:700px;
  margin:35px auto 0;
  padding:0 15px;
}

.lake-title h2{
  color:#f17300;
  font-size:26px;
  margin-bottom:10px;
}

.lake-title p{
  font-size:14px;
  color:#666;
  margin-bottom:35px;
}

.lake-showcase {
  padding: 60px 20px;
  background: #fff;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.lake-title {
  max-width: 800px;
  margin: 0 auto 35px;
}

.lake-title h2 {
  font-size: 28px;
  color: #f17300;
  margin-bottom: 12px;
  font-weight: 700;
}

.lake-title p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

.lake-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* HER ZAMAN 3 */
  gap: 28px;
  max-width: 1300px;
  margin: 0 auto;
}

.lake-card {
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
  position: relative;
}

.lake-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #f17300;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.lake-card:hover::before {
  transform: scaleX(1);
}

.lake-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}

.lake-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #f17300;
  color: white;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
}

.lake-card img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.35s ease;
}

.lake-card:hover img {
  transform: scale(1.03);
}

.lake-card p {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
/* buton */
.lake-show-all{
  margin-top:35px;
}

.lake-show-all button{
  background:#f17300;
  border:none;
  color:#fff;
  padding:12px 28px;
  border-radius:30px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:all .3s ease;
}

.lake-show-all button:hover{
  background:#d35c00;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(241,115,0,.35);
}

/* Mobilde sadece görseller küçülür */
@media (max-width: 768px) {

  .lake-gallery {
    gap: 10px;
  }

  .lake-card {
    padding: 8px;
    border-radius: 12px;
  }

  .lake-card img {
    height: 160px;
  }

  .lake-card p {
    font-size: 11px;
  }

}



/* watsapp */
.hk-wa-button{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* mesaj balonu */
.hk-wa-bubble{
  max-width: 240px;
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.06);

  display: flex;
  flex-direction: column;
  gap: 4px;

  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.hk-wa-bubble strong{
  font-size: 13px;
  color: #111;
  line-height: 1.3;
}

.hk-wa-bubble span{
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}

/* ikon alanı */
.hk-wa-icon{
  width: 56px;
  height: 56px;
  flex-shrink: 0;

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

  border-radius: 50%;
  background: linear-gradient(135deg,#25D366,#1ebe5d);
  box-shadow: 0 14px 35px rgba(0,0,0,.22);

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

/* pulse */
.hk-wa-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,.38);
  animation: hkWaPulse 2s infinite;
  z-index: -1;
}

@keyframes hkWaPulse{
  0%{ transform: scale(1); opacity: .75; }
  70%{ transform: scale(1.75); opacity: 0; }
  100%{ opacity: 0; }
}

.hk-wa-icon svg{
  width: 26px;
  height: 26px;
}

.hk-wa-text{
  display: none;
}

/* hover */
.hk-wa-button:hover .hk-wa-bubble{
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0,0,0,.20);
}

.hk-wa-button:hover .hk-wa-icon{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

/* mobil */
@media (max-width: 768px){
  .hk-wa-button{
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .hk-wa-bubble{
    max-width: 180px;
    padding: 10px 12px;
  }

  .hk-wa-bubble strong{
    font-size: 12px;
  }

  .hk-wa-bubble span{
    font-size: 11px;
  }

  .hk-wa-icon{
    width: 50px;
    height: 50px;
  }

  .hk-wa-icon svg{
    width: 23px;
    height: 23px;
  }
}

/* çok küçük ekranlarda sadece ikon */
@media (max-width: 480px){
  .hk-wa-bubble{
    display: none;
  }
}



/* ===== FOOTER ===== */

/* ===== FOOTER ===== */

#footer{
background:linear-gradient(180deg,#ffffff,#f7f7f7);
padding:0 20px 20px;
border-top:1px solid rgba(0,0,0,.08);
font-family:"Poppins",sans-serif;
position:relative;
overflow:hidden;
}

/* üst turuncu çizgi */

.footer-top-line{
width:100%;
height:4px;
background:linear-gradient(90deg,#f17300,#ff9f43,#f17300);
margin-bottom:25px;
}

/* ana yapı */

.footer-wrapper{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:30px;

position:relative;

}

/* sosyal medya masaüstü */

.footer-social{

position:absolute;

right:0;
top:-10px;

display:flex;
gap:10px;

}

.footer-social a{

width:38px;
height:38px;

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

border-radius:10px;

background:#fff;
color:#f17300;

border:1px solid rgba(0,0,0,.08);

transition:.3s;

}

.footer-social a:hover{

background:#f17300;
color:#fff;

transform:translateY(-3px);

}

/* logo */

.footer-logo img{

height:70px;
display:block;
margin-bottom:8px;

filter:drop-shadow(0 10px 20px rgba(0,0,0,.08));

}

.footer-logo p{

font-size:14px;
color:#444;

}

/* bağlantılar */

.footer-links{

display:flex;
flex-direction:column;
gap:10px;

}

.footer-links a{

text-decoration:none;
color:#555;

font-size:14px;

transition:.3s;

}

.footer-links a:hover{

color:#f17300;
transform:translateX(3px);

}

/* iletişim */

.footer-info{

display:flex;
flex-direction:column;
gap:10px;

}

.footer-info p{

display:flex;
align-items:center;
gap:10px;

margin:0;

color:#222;
font-size:14px;

}

.footer-info i{

color:#f17300;
width:18px;

}

/* alt satır */

.footer-bottom{

max-width:1200px;
margin:25px auto 0;

padding-top:15px;

border-top:1px solid rgba(0,0,0,.1);

text-align:center;

font-size:13px;
color:#555;

}

/* ===== MOBİL ===== */

@media(max-width:768px){

.footer-wrapper{

grid-template-columns:1fr 1fr 1fr;
gap:15px;

}

/* sosyal medya artık iletişimin altına gelsin */

.footer-social{

position:static;

grid-column:3;

margin-top:10px;

justify-content:flex-start;

}

.footer-social a{

width:30px;
height:30px;

}

.footer-logo img{

height:50px;

}

.footer-logo p{

font-size:11px;

}

.footer-links a{

font-size:11px;

}

.footer-info p{

font-size:11px;

}

}