/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Zeminler */
  --bg:        #F5F3EA;              /* Warm Ivory  */
  --bg-alt:    #E9EFE9;              /* Soft Sage zemin */
  --white:     #FFFFFF;

  /* Koyu tonlar */
  --dark:      #123D2B;              /* Deep Forest */
  --graphite:  #202522;              /* Graphite    */
  --ink:       #0C2A1D;              /* En koyu geçiş tonu */

  /* Metin */
  --mid:       #55655C;              /* 5.6:1 — gövde ikincil */
  --light:     #61726A;   /* 4.6:1 — ince metin de okunur */

  /* Vurgu — yeşil */
  --accent:      #39C96B;            /* Emerald Lime — dolgu, ışıma, koyu zeminde metin */
  --accent-ink:  #12793C;            /* 4.9:1 — açık zeminde okunabilir yeşil metin */
  --accent-dk:   #1E9E52;
  --accent-lt:   #A8C5AE;            /* Soft Sage */
  --accent-soft: #E6F4EA;
  --accent-tint: rgba(57,201,107,0.10);

  /* Vurgu — altın */
  --gold:      #B79A5B;              /* Muted Gold — dolgu, koyu zeminde metin */
  --gold-ink:  #7E6A32;              /* 4.7:1 — açık zeminde okunabilir altın metin */
  --gold-lt:   #D9C08A;

  /* Bağlama duyarlı metin rengi.
     Açık zeminde okunabilir koyu tona düşer; koyu bölümlerde
     aşağıdaki kural ile otomatik olarak parlak tona yükselir. */
  --accent-text: var(--accent-ink);
  --gold-text:   var(--gold-ink);

  /* Degradeler — token'lardan türer, admin panelinden renk değişince
     otomatik olarak birlikte güncellenir */
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%);
  --grad-dark:   linear-gradient(160deg, var(--dark) 0%, var(--graphite) 58%, #151A17 100%);
  --grad-gold:   linear-gradient(120deg, var(--gold) 0%, var(--gold-lt) 100%);
  --grad-text:   linear-gradient(100deg, var(--accent) 0%, var(--dark) 100%);
  --glow-accent: 0 8px 26px rgba(57,201,107,0.34);
  --glow-soft:   0 4px 16px rgba(18,61,43,0.10);

  --font-head: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Koyu bağlamlarda vurgu metinleri parlak tona döner */
.section-dark,
.pk-dark,
footer,
.page-hero[style*="var(--dark)"],
[style*="background:var(--dark)"],
[style*="background: var(--dark)"] {
  --accent-text: var(--accent);
  --gold-text:   var(--gold-lt);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* overflow-x buradan KALDIRILDI — yatay taşma koruması artık dosyanın
     sonunda html üzerinde "overflow-x: clip" ile yapılıyor. Sebebi orada
     ayrıntılı yazılı; kısaca: ikisi birlikte sticky'yi bozuyor. */
}

/* ── Typography ───────────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: var(--font-head); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(3rem, 8vw, 7rem); font-weight: 200; }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 400; }
p  { color: var(--mid); line-height: 1.75; }
.accent { color: var(--accent-text); }
.label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-dark {
  background: var(--dark); color: #fff;
  padding: 0.85rem 2rem; border-radius: 5px;
  text-decoration: none; font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-block; position: relative; isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn-dark::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--grad-accent);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--glow-accent); color: var(--ink); }
.btn-dark:hover::after { opacity: 1; }

.btn-outline {
  border: 1px solid rgba(18,61,43,0.28); color: var(--dark);
  padding: 0.85rem 2rem; border-radius: 5px;
  text-decoration: none; font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: all 0.3s var(--ease); display: inline-block;
}
.btn-outline:hover {
  border-color: var(--accent); color: var(--accent-text);
  background: var(--accent-tint); transform: translateY(-2px);
}

.btn-accent {
  background: var(--grad-accent); color: var(--ink);
  padding: 0.85rem 2.2rem; border-radius: 5px;
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-block; box-shadow: var(--glow-accent);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s;
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(57,201,107,0.45);
  filter: saturate(1.12);
}

/* Altın çerçeveli ikincil buton — koyu bölümler için */
.btn-gold {
  border: 1px solid var(--gold); color: var(--gold-text);
  padding: 0.85rem 2rem; border-radius: 5px;
  text-decoration: none; font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: all 0.3s var(--ease); display: inline-block;
}
.btn-gold:hover { background: var(--grad-gold); color: var(--ink); border-color: transparent; }

/* ── Page Hero ────────────────────────────────────────────────── */
.page-hero { padding: 10rem 4rem 6rem; }
.page-hero-text > * + * { margin-top: 1rem; }


/* ── Navigation ───────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s;
}
#navbar.scrolled {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(57,201,107,0.15);
  box-shadow: 0 4px 30px rgba(0,0,0,0.04);
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--dark);
  letter-spacing: 0.1em;
  text-decoration: none;
}
.nav-links { display: flex; gap: 0.9rem; list-style: none; align-items: center; white-space: nowrap; }
.nav-links li {
  display: flex;
  align-items: center;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--mid);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--dark); }
.nav-links a.nav-active { color: var(--accent-text) !important; }

.nav-cta {
  background: var(--dark);
  color: var(--white) !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 2px;
  transition: background 0.3s !important;
}
.nav-cta:hover { background: var(--accent) !important; color: var(--white) !important; }

/* ── Dark Page Hero Transparent Navbar Theme ─────────────────── */
/* Default transparent navbar when loading on a dark page-hero */
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .logo-default {
  display: none !important;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .logo-white {
  display: inline-block !important;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-links a {
  color: rgba(255, 255, 255, 0.75);
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-links a:hover {
  color: #ffffff;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .dropdown-trigger .arrow {
  color: rgba(255, 255, 255, 0.75);
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-burger span {
  background: #ffffff;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-cta {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent-text) !important;
  color: var(--white) !important;
}

/* Ensure default logo and layout is clean on scroll or toggle menu */
#navbar.nav-dark-theme.scrolled .logo-default,
#navbar.nav-dark-theme.menu-open .logo-default {
  display: inline-block !important;
}
#navbar.nav-dark-theme.scrolled .logo-white,
#navbar.nav-dark-theme.menu-open .logo-white {
  display: none !important;
}

/* ── Navigation Dropdowns ────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.dropdown-trigger .arrow {
  font-size: 0.5rem;
  transition: transform 0.3s var(--ease);
  display: inline-block;
  vertical-align: middle;
}
.nav-dropdown:hover .dropdown-trigger .arrow {
  transform: rotate(180deg);
}

/* Dropdown Menu Box */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(57,201,107,0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 4px;
  padding: 0.8rem 0;
  min-width: 200px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 1002;
}

/* Hover Show on Desktop */
@media (min-width: 769px) {
  .nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
  }
}

.dropdown-menu li {
  width: 100%;
}
.dropdown-menu a {
  display: block !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.3s, color 0.3s;
}
.dropdown-menu a:hover {
  background: rgba(57,201,107,0.08);
  color: var(--dark) !important;
}
.dropdown-menu a.nav-active {
  color: var(--accent-text) !important;
  background: rgba(57,201,107,0.05);
}

.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; position: relative; z-index: 1001; }
.nav-burger span { display: block; width: 24px; height: 1.5px; background: var(--dark); transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); transform-origin: left center; }
.nav-burger.open span:nth-child(1) { transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg); }

/* ── 3D Scene ─────────────────────────────────────────────────── */
#scene-container {
  position: relative;
  height: 1100vh;
}
#scene-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
#box-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ── Scene Panels ─────────────────────────────────────────────── */
.scene-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.scene-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Text content wrapper — white frosted glass backdrop */
.scene-panel > div:not(.scroll-hint) {
  position: relative;
  z-index: 2;
}
.panel-glass {
  background: rgba(245,243,234,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 10px;
  padding: 2rem 2.2rem;
  border: 1px solid rgba(57,201,107,0.18);
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
  max-width: 440px;
}

/* Fiyat aracı sahnesi — panel soldan efektle girer/çıkar */
.scene-panel-calc .calc-promo {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.scene-panel-calc.active .calc-promo {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .scene-panel-calc { align-items: stretch !important; }
  .scene-panel-calc .calc-promo { margin-left: 0 !important; }
}

/* ── Ne Üretiyoruz: büyük görselli kartlar ───────────────────── */
.pk-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.pk-prod-card {
  background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pk-prod-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.12); }
.pk-prod-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.pk-prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.pk-prod-card:hover .pk-prod-media img { transform: scale(1.06); }
.pk-prod-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(18,61,43,0.82); color: var(--accent-text); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.pk-prod-body { padding: 1.7rem 1.6rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.pk-prod-body h3 { font-size: 1.28rem; font-weight: 400; color: var(--dark); margin-bottom: 0.6rem; }
.pk-prod-body p { font-size: 0.88rem; color: var(--mid); line-height: 1.65; margin-bottom: 1.1rem; }
.pk-prod-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pk-prod-list li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; color: var(--mid); }
.pk-prod-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.pk-prod-link {
  margin-top: auto; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem;
}
.pk-prod-card:hover .pk-prod-link { gap: 0.75rem; }

/* ── Neden Packro: görsel + metin split ─────────────────────── */
.pk-why { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.pk-why-img { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.13); }
.pk-why-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; }
.pk-why-item { display: flex; gap: 1rem; margin-bottom: 1.7rem; }
.pk-why-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(57,201,107,0.13); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 500;
}
.pk-why-item h4 { font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: 0.3rem; }
.pk-why-item p { font-size: 0.86rem; color: var(--mid); line-height: 1.6; margin: 0; }
.pk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.08); }
.pk-stat-v { font-family: var(--font-head); font-size: 1.9rem; font-weight: 200; color: var(--dark); line-height: 1; }
.pk-stat-l { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); margin-top: 0.4rem; }

/* ── Sektör şeridi ──────────────────────────────────────────── */
.pk-sector-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.pk-sector {
  position: relative; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  text-decoration: none; display: block; background: var(--dark);
}
.pk-sector img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: all 0.55s var(--ease); }
.pk-sector:hover img { opacity: 0.95; transform: scale(1.07); }
.pk-sector span {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 0.8rem 0.9rem;
  color: #fff; font-size: 0.8rem; font-weight: 600; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
}

/* ── Süreç adımları + kapanış CTA (hesaplayıcı altı) ─────────── */
.pk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pk-step { text-align: center; padding: 2rem 1.2rem; background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.pk-step:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,0.08); }
.pk-step-n { font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent-text); font-weight: 600; margin-bottom: 0.7rem; }
.pk-step h4 { font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: 0.45rem; }
.pk-step p { font-size: 0.83rem; color: var(--mid); line-height: 1.6; margin: 0; }
.pk-final-cta { background: var(--dark); border-radius: 16px; padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden; }
.pk-final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(57,201,107,0.18), transparent 62%); pointer-events: none; }
.pk-final-cta > * { position: relative; z-index: 2; }
.pk-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.pk-cta-wa { display: inline-flex; align-items: center; gap: 0.5rem; background: #25D366; color: #fff; padding: 0.9rem 1.8rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: opacity 0.3s; }
.pk-cta-wa:hover { opacity: 0.88; }

@media (max-width: 991px) {
  .pk-prod-grid { grid-template-columns: 1fr; }
  .pk-why { grid-template-columns: 1fr; gap: 2.5rem; }
  .pk-sector-row { grid-template-columns: repeat(3, 1fr); }
  .pk-steps { grid-template-columns: repeat(2, 1fr); }
  .pk-final-cta { padding: 3rem 1.5rem; }
}
@media (max-width: 576px) {
  .pk-sector-row { grid-template-columns: repeat(2, 1fr); }
  .pk-steps { grid-template-columns: 1fr; }
  .pk-stats { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ── İç sayfa zenginleştirme: güven şeridi ──────────────────── */
.pz-trust { background: var(--dark); padding: 2.2rem 4rem; }
.pz-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.pz-trust-item { display: flex; gap: 0.8rem; align-items: flex-start; }
.pz-trust-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(57,201,107,0.16); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.pz-trust-item strong { display: block; color: #fff; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.15rem; }
.pz-trust-item span:last-child { display: block; color: rgba(255,255,255,0.5); font-size: 0.76rem; line-height: 1.5; }

/* ── SSS akordiyon ──────────────────────────────────────────── */
.pz-faq { display: flex; flex-direction: column; gap: 0.8rem; }
.pz-faq-item { background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 10px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.pz-faq-item[open] { border-color: rgba(57,201,107,0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.pz-faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.5rem;
  font-size: 0.95rem; font-weight: 500; color: var(--dark);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pz-faq-item summary::-webkit-details-marker { display: none; }
.pz-faq-ico { color: var(--accent-text); font-size: 1.25rem; font-weight: 300; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.pz-faq-item[open] .pz-faq-ico { transform: rotate(45deg); }
.pz-faq-a { padding: 0 1.5rem 1.3rem; font-size: 0.88rem; color: var(--mid); line-height: 1.75; }

/* ── İlgili sayfalar ────────────────────────────────────────── */
.pz-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.pz-rel-card {
  background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pz-rel-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,0,0,0.11); }
.pz-rel-media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.pz-rel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.pz-rel-card:hover .pz-rel-media img { transform: scale(1.07); }
.pz-rel-body { padding: 1.3rem 1.4rem 1.5rem; }
.pz-rel-body h3 { font-size: 1.08rem; font-weight: 500; color: var(--dark); margin-bottom: 0.4rem; }
.pz-rel-body p { font-size: 0.84rem; color: var(--mid); line-height: 1.6; margin-bottom: 0.9rem; }
.pz-rel-link { font-size: 0.73rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }

/* ── İç sayfa CTA bandı ─────────────────────────────────────── */
.pz-cta {
  background: var(--dark); border-radius: 16px; padding: 3.2rem 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;
  position: relative; overflow: hidden;
}
.pz-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(57,201,107,0.18), transparent 60%); pointer-events: none; }
.pz-cta > * { position: relative; z-index: 2; }
.pz-cta-btns { display: flex; gap: 0.9rem; flex-shrink: 0; flex-wrap: wrap; }
.pz-cta-ghost {
  display: inline-block; padding: 0.85rem 1.7rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.28); color: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; transition: all 0.3s;
}
.pz-cta-ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--accent-text); }

@media (max-width: 991px) {
  .pz-trust { padding: 2rem 1.5rem; }
  .pz-trust-row { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .pz-rel-grid { grid-template-columns: 1fr; }
  .pz-cta { flex-direction: column; align-items: flex-start; padding: 2.4rem 1.6rem; }
}
@media (max-width: 576px) {
  .pz-trust-row { grid-template-columns: 1fr; }
}

/* ── Estetik Video Alanı (her sayfada) ─────────────────────────── */
.pk-video-band { padding: 5rem 0; background: var(--bg-alt); }
.pk-video-head { text-align: center; margin-bottom: 2.5rem; }
.pk-video-head h2 { font-weight: 300; }
.pk-video-sub { color: var(--mid); max-width: 520px; margin: 0.7rem auto 0; font-size: 0.95rem; line-height: 1.6; }
.pk-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: var(--dark);
  box-shadow: 0 30px 70px rgba(0,0,0,0.14); border: 1px solid rgba(57,201,107,0.18);
}
.pk-video-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.3rem;
  background: linear-gradient(135deg, #2a2a2a 0%, var(--dark) 55%, #111 100%);
}
.pk-video-placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(57,201,107,0.16), transparent 62%);
  pointer-events: none;
}
.pk-video-play {
  position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(57,201,107,0.14); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.pk-video-play svg { margin-left: 5px; }
.pk-video-frame:hover .pk-video-play { transform: scale(1.09); background: rgba(57,201,107,0.24); }
.pk-video-ph-label {
  position: relative; z-index: 2; color: rgba(255,255,255,0.55);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
@media (max-width: 768px) { .pk-video-band { padding: 3.5rem 0; } .pk-video-frame { border-radius: 10px; } }

/* hero uses same panel-minimal as others — no special overrides */
.scroll-hint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.scroll-hint span { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light); }
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.5)} 50%{opacity:1;transform:scaleY(1)} }

/* ── Panel: minimal (no backdrop) ────────────────────────────── */
.panel-minimal {
  position: relative; z-index: 2;
  max-width: 400px;
}
.panel-minimal h2 { color: var(--dark); text-shadow: 0 1px 20px rgba(245,243,234,0.8); }
.panel-minimal p  { color: var(--mid);  text-shadow: 0 1px 12px rgba(245,243,234,0.7); }
.panel-minimal .label { color: var(--accent-text); }
.panel-link {
  display: inline-block; margin-top: 1.2rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
  transition: opacity 0.3s;
}
.panel-link:hover { opacity: 0.7; }

/* ── Panel: Lid Open specs (dark pill, right side) ───────────── */
.panel-lid-details {
  position: relative; z-index: 2;
  background: rgba(18,61,43,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(57,201,107,0.3);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin-right: 4rem;
  max-width: 280px;
}
.lid-badge {
  display: inline-block;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid rgba(57,201,107,0.4);
  padding: 0.25rem 0.65rem; border-radius: 20px;
  margin-bottom: 0.9rem;
  animation: lidPulse 2s ease-in-out infinite;
}
@keyframes lidPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(57,201,107,0); }
  50%      { box-shadow: 0 0 0 5px rgba(57,201,107,0.12); }
}
.lid-specs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
}
.lid-spec {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.lid-spec-value {
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 200;
  color: #fff; line-height: 1;
}
.lid-spec-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-text);
}

/* ── Panel layout constraints ────────────────────────────── */
/* Hero panel-minimal included in the shared rule below */
#panel-hero .panel-minimal,
#panel-about .panel-minimal,
#panel-tilt .panel-minimal,
#panel-standup .panel-minimal,
#panel-lid-close .panel-minimal {
  max-width: min(400px, 42vw);
}

#panel-hero     { align-items: flex-start; padding: 18vh 4rem 0; justify-content: flex-start; }
#panel-about    { align-items: flex-start; padding: 0 4rem; justify-content: center; }
#panel-tilt     { align-items: flex-start; padding: 0 4rem; }
#panel-standup  { align-items: flex-start; padding: 0 4rem; }
#panel-lid-close { align-items: flex-start; padding: 0 4rem; }
#panel-lid-open { align-items: flex-end; padding: 0 4rem; }
#panel-cta-teaser { align-items: center; text-align: center; padding: 0 2rem; }
#panel-cta-teaser .panel-glass { max-width: min(420px, 50vw); }

/* ── Finish Cards ─────────────────────────────────────────────── */
.finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
.finish-card {
  background: var(--white);
  border: 1px solid rgba(57,201,107,0.2);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}
.finish-card h4 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.2rem; color: var(--dark); }
.finish-card p  { font-size: 0.72rem; color: var(--light); line-height: 1.4; }
.finish-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-bottom: 0.5rem; }

/* ── Divider ──────────────────────────────────────────────────── */
.divider { width: 60px; height: 1px; background: var(--accent); margin: 1.2rem 0; }
.divider-center { margin: 1.2rem auto; }

/* ── Sections (after sticky) ──────────────────────────────────── */
.section { padding: 8rem 4rem; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--dark); color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.55); }
.section-dark .divider { background: var(--accent); }
.container { max-width: 1200px; margin: 0 auto; }

/* ── Sizes Grid ───────────────────────────────────────────────── */
.sizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.size-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  padding: 2rem 1.2rem;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.size-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.size-visual {
  margin: 0 auto 1.2rem;
  background: linear-gradient(160deg, #e8e4dc, var(--bg));
  border: 1px solid rgba(57,201,107,0.3);
  border-radius: 4px 4px 2px 2px;
}
.size-card h4 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
.size-card p  { font-size: 0.72rem; color: var(--light); }

/* ── Process ──────────────────────────────────────────────────── */
.process-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem; margin-top: 3rem; }
.process-step { position: relative; padding-left: 1.5rem; border-left: 1px solid rgba(57,201,107,0.3); }
.step-num {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 200;
  color: rgba(57,201,107,0.25);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.process-step h4 { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--white); }
.process-step p  { font-size: 0.82rem; color: rgba(255,255,255,0.45); }

/* ── Gallery ──────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  margin-top: 3rem;
}
.gallery-item {
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid rgba(0,0,0,0.06);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item:nth-child(1) { grid-column: span 2; aspect-ratio: 2/1; }
.gallery-item:nth-child(5) { grid-column: span 2; aspect-ratio: 2/1; }
.gallery-swatch {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.5rem;
}
.gallery-icon { font-size: 2rem; opacity: 0.3; }
.gallery-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(18,61,43,0.75) 0%, transparent 100%);
  padding: 1.2rem 1rem 0.9rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── Quote Form ───────────────────────────────────────────────── */
#quote {
  background: var(--bg);
  padding: 8rem 4rem;
}
.quote-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: start;
}
.quote-info h2 { font-size: clamp(2rem,4vw,3.2rem); }
.quote-info p  { margin-top: 1rem; }
.quote-specs { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.quote-spec {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.82rem; color: var(--mid);
}
.quote-spec::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.quote-form { background: var(--white); border-radius: 8px; padding: 2.5rem; border: 1px solid rgba(0,0,0,0.07); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--dark);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent-text); }
.form-group textarea { resize: vertical; min-height: 100px; }
.btn-submit {
  width: 100%;
  background: var(--dark);
  color: var(--white);
  border: none;
  padding: 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
.btn-submit:hover { background: var(--accent); transform: translateY(-1px); }
.form-alert {
  padding: 0.85rem 1rem;
  border-radius: 4px;
  font-size: 0.84rem;
  margin-bottom: 1.2rem;
}
.form-alert.success { background: #f0faf0; border: 1px solid #86c98e; color: #2d6a34; }
.form-alert.error   { background: #fff0f0; border: 1px solid #f0a0a0; color: #8b2020; }

/* ── Footer ───────────────────────────────────────────────────── */
footer {
  background: var(--dark);
  color: rgba(255,255,255,0.5);
  padding: 3rem 4rem 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.25fr;
  gap: 2.6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .nav-logo { color: var(--white); font-size: 1.6rem; }
.footer-brand p { margin-top: 1rem; font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.4); }
.footer-social-link {
  color: var(--white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-social-link:hover {
  color: var(--accent-text) !important;
  transform: translateY(-2px);
}
.footer-col h5 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul li a { font-size: 0.82rem; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--accent-text); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
}

/* ── Bento Grid ───────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 1.5rem;
}
.bento-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.bento-content {
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease);
}
.bento-card:hover .bento-content {
  transform: translateY(-4px);
}
.bento-card h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.bento-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.8;
}
.bento-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
  opacity: 0;
  transform: translate(-10px, 10px);
  transition: all 0.4s var(--ease);
  z-index: 2;
}
.bento-card:hover .bento-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* Bento Themes */
.bento-light {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--dark);
}
.bento-light .bento-arrow { color: var(--accent-text); }

.bento-dark {
  background: var(--dark);
  color: var(--white);
}
.bento-dark .bento-arrow { color: var(--accent-text); }

.bento-accent {
  background: var(--accent);
  color: var(--white);
}
.bento-accent .bento-arrow { color: var(--white); }

.bento-image {
  color: var(--white);
  justify-content: space-between;
}
.bento-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
  z-index: 0;
}
.bento-card:hover .bento-bg-img {
  transform: scale(1.05);
}
.bento-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,61,43,0.9) 0%, rgba(18,61,43,0.2) 60%, rgba(18,61,43,0.1) 100%);
  z-index: 1;
}

/* ── Animations ───────────────────────────────────────────────── */
.fade-up { 
  opacity: 0; 
  transform: translateY(12px); 
  transition: opacity 0.28s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.28s cubic-bezier(0.215, 0.61, 0.355, 1); 
  transition-delay: var(--stagger, 0s);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-links {
    gap: 0.5rem;
  }
  .nav-links a {
    font-size: 0.68rem;
  }
  .nav-cta {
    padding: 0.4rem 0.8rem !important;
  }
}

@media (max-width: 768px) {
  #navbar {
    /* Logo büyüdüğü için dikey boşluk kısıldı — menü çubuğu ~62 px'te kalıyor,
       böylece 3D kutuya ayrılan alan yukarıdan genişliyor. */
    padding: 0.85rem 1.5rem;
    align-items: center;
  }
  
  .nav-logo img {
    height: 24px !important;
  }
  
  /* When menu is open, the navbar itself expands to fill the screen */
  #navbar.menu-open {
    bottom: 0;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: flex-start;
  }

  .nav-links {
    display: none; /* hidden by default on mobile */
    flex-direction: column; gap: 1.2rem;
    position: absolute; top: 80px; left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: flex-start;
    padding-top: 1rem;
    padding-bottom: 4rem; /* Buffer for Safari bottom bar */
    overflow-y: auto; /* Enable scrolling for long menus */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    z-index: 999; font-size: 1.2rem;
  }

  .nav-burger { display: flex; }

  /* Show links when menu is open */
  #navbar.menu-open .nav-links {
    display: flex;
    animation: fadeInMenu 0.3s forwards;
  }
  @keyframes fadeInMenu { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
  }

  /* Mobile Dropdowns */
  .dropdown-menu {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    min-width: 100%;
    opacity: 1;
    visibility: visible;
    display: none; /* Controlled by JS toggle class 'active' */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: rgba(57,201,107,0.04);
    border-radius: 4px;
    padding: 0.5rem 0;
  }
  .dropdown-menu.active {
    display: flex;
  }
  .dropdown-trigger.active .arrow {
    transform: rotate(180deg);
  }
  .dropdown-menu a {
    text-align: center;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 950px) {
  .section { padding: 5rem 1.5rem; }
  #quote { padding: 5rem 1.5rem; }
  .quote-inner { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) { grid-column: span 2; }
  
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card { grid-column: span 1 !important; grid-row: span 1 !important; }
  .bento-card:nth-child(1), .bento-card:nth-child(4), .bento-card:nth-child(7), .bento-card:nth-child(14) { grid-column: span 2 !important; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  footer { padding: 3rem 1.5rem 1.5rem; }
}

/* ── Mobile 3D Scene ──────────────────────────────────────────── */
@media (max-width: 768px) {
  #scene-container { height: 800vh; }

  /* Kutunun oturduğu bant.
     Kutu bu bandın tam ortasına yerleşir; bant ne kadar genişse kutunun
     çevresindeki boşluk o kadar büyür. Bu yüzden hem bandı daralttık
     (%64 → %54) hem de kutuyu küçülttük (box.js içinde 1.26).
     Üstteki 58 px, mobil menü çubuğunun yüksekliğidir. */
  #box-canvas {
    top: 58px !important;
    height: calc(54% - 58px) !important;
  }

  /* All panels: text anchored strictly to bottom of viewport, overriding ID selectors */
  #panel-hero,
  #panel-about,
  #panel-tilt,
  #panel-standup,
  #panel-lid-close,
  #panel-lid-open,
  #panel-cta-teaser,
  #panel-coin-spin,
  .scene-panel {
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* Hide scroll hint on mobile to avoid overlap */
  .scroll-hint {
    display: none !important;
  }

  /* All panels use panel-minimal on mobile — premium full-width frosted glass backdrop at bottom */
  .panel-minimal {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.8rem 1.5rem !important;
    background: rgba(245,243,234,0.90) !important;
    border-top: 1px solid rgba(57,201,107,0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03) !important;
  }
  .panel-minimal h2 { 
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important; 
    line-height: 1.25 !important;
    text-shadow: none !important;
  }
  .panel-minimal p { 
    font-size: 0.88rem !important; 
    line-height: 1.5 !important;
    text-shadow: none !important;
    margin-top: 0.6rem !important;
  }

  /* Lid-open panel: full width at bottom */
  .panel-lid-details {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 1.8rem 1.5rem !important;
    background: rgba(18,61,43,0.90) !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(57,201,107,0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) !important;
  }
  .lid-specs-grid { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
  .lid-spec-value { font-size: 1.1rem; }

  /* CTA Panel minimal full-width glass bottom override */
  #panel-cta-teaser .panel-glass { 
    margin: 0 !important; 
    max-width: 100% !important;
    padding: 2rem 1.5rem !important; 
    background: rgba(245,243,234,0.90) !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(57,201,107,0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03) !important;
  }
}

@media (max-width: 480px) {
  .sizes-grid { grid-template-columns: repeat(2, 1fr); }
  .finish-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) { grid-column: span 1; aspect-ratio: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  
  .bento-grid { grid-template-columns: 1fr; }
  
  /* Reset ALL cards, including the specific nth-child overrides from the 950px breakpoint */
  .bento-card,
  .bento-card:nth-child(1), 
  .bento-card:nth-child(4), 
  .bento-card:nth-child(7), 
  .bento-card:nth-child(14) { 
    grid-column: span 1 !important; 
    grid-row: span 1 !important; 
  }
  
  .lid-specs-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Inline Grid Mobile Resets ──────────────────────────────────── */
@media (max-width: 900px) {
  .responsive-grid-2,
  .responsive-grid-3,
  .responsive-grid-4,
  .responsive-grid-split {
    grid-template-columns: 1fr !important;
  }
  .responsive-grid-split { gap: 3rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RENK KATMANI — kurumsal altın tonunun zemin ve vurgularda
   kontrollü kullanımı (minimal çizgi korunur)
   ═══════════════════════════════════════════════════════════════ */

/* Alternatif bölümler: ivory → sage yumuşak geçiş */
.section-alt {
  background: linear-gradient(180deg, #F5F3EA 0%, #E4ECE4 100%);
  position: relative;
}
/* Bölüm başlangıcına ince altın ayraç */
.section-alt::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* İç sayfa hero'ları: üstte ince altın çizgi + yumuşak altın ışık */
.page-hero { position: relative; }
.page-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-lt) 45%, transparent 100%);
}
.page-hero:not([style*="var(--dark)"])::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 15%, rgba(57,201,107,0.16), transparent 58%);
  pointer-events: none;
}
.page-hero-text { position: relative; z-index: 2; }

/* Etiketler biraz daha doygun altın */
.label { color: var(--accent-text); }

/* Güven şeridi: koyu yerine kurumsal altın zemin */
.pz-trust {
  background: var(--grad-dark);
  padding: 2.4rem 4rem;
}
.pz-trust-ic { background: rgba(57,201,107,0.18); color: var(--accent); }
.pz-trust-item strong { color: var(--white); }
.pz-trust-item span:last-child { color: rgba(255,255,255,0.62); }

/* Kartlar: üstte ince altın vurgu (hover'da belirir) */
.pk-prod-card, .pz-rel-card { position: relative; }
.pk-prod-card::before, .pz-rel-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--accent), var(--accent-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.pk-prod-card:hover::before, .pz-rel-card:hover::before { transform: scaleX(1); }

/* İstatistik rakamları altın */
.pk-stat-v { color: var(--accent-text); }

/* Sektör kartlarında altın tonlu perde */
.pk-sector::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(12,42,29,0.72) 100%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.pk-sector:hover::after { opacity: 1; }

/* Adım kartları: altın numara ve sol kenar vurgusu */
.pk-step { border-left: 3px solid transparent; }
.pk-step:hover { border-left-color: var(--accent-text); }

/* SSS: açık öğede sol altın şerit */
.pz-faq-item { border-left: 3px solid transparent; }
.pz-faq-item[open] { border-left-color: var(--accent-text); background: linear-gradient(90deg, var(--accent-tint), #fff 45%); }

/* Video alanı zemini sıcak tonda */
.pk-video-band { background: linear-gradient(180deg, #FFFFFF 0%, var(--accent-soft) 100%); }

/* Fiyat hesaplayıcı bölümü sıcak zemin */
/* Fiyat hesaplayıcı: koyu sahne — parlak yeşil burada tam gücüyle çalışır */
.kf-wrap {
  background: var(--grad-dark) !important;
  position: relative; overflow: hidden;
  --accent-text: var(--accent);
  --gold-text: var(--gold-lt);
}
.kf-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 320px at 82% 4%, rgba(57,201,107,0.30), transparent 62%),
    radial-gradient(420px 260px at 6% 100%, rgba(183,154,91,0.20), transparent 66%);
}
.kf-wrap > * { position: relative; z-index: 2; }

/* Footer üstünde ince altın çizgi */
footer { border-top: 3px solid transparent; border-image: var(--grad-accent) 1; }

/* Bölüm başlıklarındaki accent kelime biraz daha canlı */
.accent { color: var(--accent-text); }

@media (max-width: 991px) {
  .pz-trust { padding: 2rem 1.5rem; }
}

/* ── Kırıntı navigasyon (breadcrumb) ────────────────────────── */
.pk-bc {
  padding: 6.2rem 4rem 0;
  background: transparent;
  position: relative;
  z-index: 5;
}
.pk-bc .container { max-width: 1200px; margin: 0 auto; font-size: 0.76rem; letter-spacing: 0.02em; }
.pk-bc a { color: var(--mid); text-decoration: none; transition: color 0.25s; }
.pk-bc a:hover { color: var(--accent-text); }
.pk-bc-sep { color: var(--light); margin: 0 0.5rem; }
.pk-bc-now { color: var(--accent-text); font-weight: 600; }
/* Koyu hero'lu sayfalarda okunur kalsın */
.nav-dark-theme ~ .pk-bc a, .nav-dark-theme ~ .pk-bc .pk-bc-sep { color: rgba(255,255,255,0.55); }
.nav-dark-theme ~ .pk-bc .pk-bc-now { color: var(--accent-text); }
@media (max-width: 768px) { .pk-bc { padding: 5.4rem 1.5rem 0; } }

/* Breadcrumb eklenince sayfaların üst boşluğu azaltılır (çift boşluk olmasın) */
.pk-bc + .page-hero { padding-top: 3rem !important; }
.pk-bc + .container { padding-top: 2.5rem !important; }
.pk-bc + .container .sus-hero { padding-top: 2rem !important; }
@media (max-width: 768px) {
  .pk-bc + .page-hero { padding-top: 2rem !important; }
  .pk-bc + .container { padding-top: 1.5rem !important; }
}

/* ── Dil seçici + RTL (Arapça) ──────────────────────────────── */
.pk-lang .dropdown-trigger { font-weight: 600; letter-spacing: 0.06em; }
.pk-lang-menu { min-width: 165px; }
.pk-lang-menu a { text-transform: none !important; letter-spacing: 0.02em; font-size: 0.78rem !important; }

/* RTL düzeltmeleri */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .divider:not(.divider-center) { margin-left: auto; margin-right: 0; }
[dir="rtl"] .pk-prod-list li,
[dir="rtl"] .pz-trust-item,
[dir="rtl"] .pk-why-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pk-bc .container { direction: rtl; }
[dir="rtl"] .pz-faq-item { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .pz-faq-item[open] { border-right-color: var(--accent-text); background: linear-gradient(270deg, var(--accent-tint), #fff 45%); }
[dir="rtl"] .pk-step { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .pk-step:hover { border-right-color: var(--accent-text); }
[dir="rtl"] .panel-minimal, [dir="rtl"] .calc-promo { margin-left: 0 !important; margin-right: 4rem !important; }
[dir="rtl"] #pk-wp-widget { right: auto; left: 22px; }
[dir="rtl"] #pk-wp-panel { right: auto; left: 0; transform-origin: bottom left; }
[dir="rtl"] .kf-input-unit { right: auto; left: 0.75rem; }
[dir="rtl"] .kf-select { background-position: left 1rem center; }
@media (max-width: 768px) {
  [dir="rtl"] .panel-minimal, [dir="rtl"] .calc-promo { margin-right: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════
   BÖLÜM RİTMİ — koyu sahne / açık sahne geçişleri
   Emerald Lime paleti: parlak yeşil koyu zeminde ışır,
   açık zeminde okunabilir koyu yeşile (--accent-ink) düşer.
   ═══════════════════════════════════════════════════════════════ */

/* Koyu bölümler: düz siyah yerine Deep Forest → Graphite degradesi */
.section-dark {
  background: var(--grad-dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 340px at 84% 0%, rgba(57,201,107,0.26), transparent 62%),
    radial-gradient(460px 280px at 4% 100%, rgba(183,154,91,0.16), transparent 66%);
}
.section-dark > * { position: relative; z-index: 2; }
.section-dark p { color: rgba(255,255,255,0.62); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark .divider { background: var(--grad-accent); }

/* Koyu page-hero'lar da aynı degradeyi alsın */
.page-hero[style*="var(--dark)"] {
  background: var(--grad-dark) !important;
  position: relative; overflow: hidden;
}
.page-hero[style*="var(--dark)"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 340px at 88% 8%, rgba(57,201,107,0.28), transparent 60%);
}

/* Footer koyu sahne */
footer {
  background: var(--grad-dark);
  position: relative; overflow: hidden;
}
footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 300px at 92% 0%, rgba(57,201,107,0.18), transparent 64%);
}
footer > * { position: relative; z-index: 2; }

/* ── Degrade başlık kelimesi ─────────────────────────────────── */
/* Degrade metin — ÖNCE düz renk yazılır.
   Yalnızca tarayıcı background-clip:text destekliyorsa degradeye geçilir.
   Bu sıralama olmadan eski Safari'de (14 öncesi) metin görünmez oluyordu. */
.accent { color: var(--accent-text); }
.section-dark .accent,
.page-hero[style*="var(--dark)"] .accent,
footer .accent { color: var(--accent); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent {
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .section-dark .accent, .page-hero[style*="var(--dark)"] .accent, footer .accent {
    background: linear-gradient(100deg, #39C96B 0%, #A8C5AE 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ── Derinlik: kartlar ───────────────────────────────────────── */
.pk-prod-card, .pz-rel-card, .gallery-item, .proc-photo {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pk-prod-card:hover, .pz-rel-card:hover, .proc-photo:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(18,61,43,0.16);
}

/* ── Ayraçlar degrade ────────────────────────────────────────── */
.divider { background: var(--grad-accent) !important; }

/* ── İstatistikler ───────────────────────────────────────────── */
.pk-stat-v { color: var(--accent-text); font-weight: 500; }
.section-dark .pk-stat-v { color: var(--accent); }

/* ── Form odak durumu ────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(57,201,107,0.16);
}

/* ── Seçim ve kaydırma çubuğu ────────────────────────────────── */
::selection { background: rgba(57,201,107,0.28); color: var(--dark); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--accent-lt); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Hareketi azalt tercihi ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-dark, .btn-accent, .btn-outline,
  .pk-prod-card, .pz-rel-card, .proc-photo { transition: none; }
  .btn-dark:hover, .btn-accent:hover, .btn-outline:hover,
  .pk-prod-card:hover, .pz-rel-card:hover, .proc-photo:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — online fiyat butonu + tek renk dil seçici
   ═══════════════════════════════════════════════════════════════ */

/* İkincil CTA: dolgu yerine çerçeve, "Teklif Al"ı bastırmasın */
.nav-cta-live {
  background: transparent !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent) !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 2px;
  font-weight: 600;
  transition: background 0.3s, color 0.3s !important;
}
.nav-cta-live:hover {
  background: var(--grad-accent) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}
#navbar.nav-dark-theme:not(.scrolled):not(.menu-open) .nav-cta-live {
  color: var(--accent) !important;
  border-color: rgba(57,201,107,0.6) !important;
}

/* Dil seçici: emoji bayrak yerine tek renk kontur ikon */
.pk-lang-ic {
  vertical-align: -2px;
  margin-inline-end: 4px;
  opacity: 0.7;
  transition: opacity 0.25s;
}
.pk-lang:hover .pk-lang-ic { opacity: 1; }
.pk-lang-kod {
  display: inline-block;
  min-width: 22px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--light);
  margin-inline-end: 6px;
}
.pk-lang-menu .nav-active .pk-lang-kod { color: var(--accent-text); }

/* Sosyal medya ikonları da tek renk kalsın */
.footer-social-link { color: rgba(255,255,255,0.55); transition: color 0.3s, transform 0.3s; }
.footer-social-link:hover { color: var(--accent); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════
   ÇEREZ ŞERİDİ — sayfanın en altında ince, minimal bant
   ═══════════════════════════════════════════════════════════════ */
.pk-cerez {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.5rem;
  background: rgba(18, 61, 43, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(57, 201, 107, 0.28);
  font-family: var(--font-body);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
  will-change: transform;
}
.pk-cerez.acik { transform: translateY(0); }

.pk-cerez-metin {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
}
.pk-cerez-metin a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pk-cerez-btns { display: flex; gap: 0.5rem; flex-shrink: 0; }
.pk-cerez-b {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.pk-cerez-b1 { background: var(--grad-accent); color: var(--ink); }
.pk-cerez-b1:hover { filter: saturate(1.15); transform: translateY(-1px); }
.pk-cerez-b2 {
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.pk-cerez-b2:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* WhatsApp butonu şeridin üstünde kalsın */

@media (max-width: 760px) {
  .pk-cerez { gap: 0.7rem; padding: 0.7rem 1rem 0.8rem; justify-content: flex-start; }
  .pk-cerez-metin { font-size: 0.72rem; flex: 1 1 100%; }
  .pk-cerez-btns { flex: 1 1 100%; }
  .pk-cerez-b { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   DOSYA YÜKLEME ALANI
   ═══════════════════════════════════════════════════════════════ */
.pk-up {
  position: relative;
  border: 1.5px dashed rgba(57, 201, 107, 0.45);
  border-radius: 8px;
  background: var(--accent-tint);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pk-up.uzerinde { border-color: var(--accent); background: rgba(57, 201, 107, 0.14); }
.pk-up:hover    { border-color: var(--accent); }

.pk-up-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.pk-up-govde {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; flex-wrap: wrap;
  padding: 1.5rem 1rem;
  color: var(--accent-text);
  pointer-events: none;
  text-align: center;
}
.pk-up-btn {
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pk-up-drop { font-size: 0.8rem; color: var(--mid); }

.pk-up-hint {
  font-size: 0.74rem;
  color: var(--light);
  line-height: 1.55;
  margin: 0.5rem 0 0;
}
.pk-up-liste { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pk-up-ogesi {
  font-size: 0.78rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid rgba(18, 61, 43, 0.1);
  border-inline-start: 3px solid var(--accent);
  border-radius: 5px;
  padding: 0.45rem 0.7rem;
}
.pk-up-ogesi.hatali {
  border-inline-start-color: #C0392B;
  color: #922B21;
  background: rgba(192, 57, 43, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — iletişim sütunu + grup ibaresi
   ═══════════════════════════════════════════════════════════════ */
.footer-iletisim ul { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-iletisim li { display: flex; flex-direction: column; gap: 0.2rem; }
.footer-et {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.footer-dg {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.25s;
}
a.footer-dg:hover { color: var(--accent); }
.footer-tel { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; }
.footer-saat { font-size: 0.72rem; color: rgba(255, 255, 255, 0.42); margin-top: 0.15rem; }

.footer-grup { display: block; margin-top: 0.35rem; font-size: 0.78rem; opacity: 0.75; }
.footer-grup a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.footer-grup a:hover { border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   REFERANS LOGOLARI — sağa kayan sonsuz şerit
   ═══════════════════════════════════════════════════════════════ */
.pk-ref {
  padding: 4.5rem 0 4rem;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.pk-ref-ust { text-align: center; margin-bottom: 2.6rem; }
.pk-ref-alt {
  font-size: 0.88rem;
  color: var(--mid);
  margin-top: 0.9rem;
  max-width: 46ch;
  margin-inline: auto;
}

.pk-ref-serit {
  position: relative;
  /* İçindeki .pk-ref-akis "width: max-content" olduğu için fiziksel olarak
     ekrandan taşıyor. Maske yalnızca görsel silme yapar, taşmayı kesmez —
     kırpmayı bu satır yapıyor. Mobildeki yatay kaydırmanın ana sebebiydi. */
  overflow: hidden;
  /* kenarlarda yumuşak silinme */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pk-ref-akis {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  /* Süre yarıya inince şerit iki kat hızlı kayar. */
  animation: pk-ref-kay 23s linear infinite;
}
.pk-ref-serit:hover .pk-ref-akis { animation-play-state: paused; }

/* Sağa doğru akış: şerit soldan başlayıp sağa kayar */
@keyframes pk-ref-kay {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.pk-ref-oge {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: center;
  color: var(--dark);
  opacity: 0.42;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), color 0.35s var(--ease);
}
.pk-ref-oge:hover { opacity: 1; filter: grayscale(0); color: var(--accent-text); }
.pk-ref-oge img { height: 100%; width: auto; display: block; max-width: 190px; object-fit: contain; }

/* Koyu bölümlerde de kullanılabilsin */
.section-dark .pk-ref, .pk-ref.pk-dark { background: transparent; }
.pk-ref.pk-dark .pk-ref-oge { color: #fff; opacity: 0.5; }
.pk-ref.pk-dark .pk-ref-oge:hover { color: var(--accent); opacity: 1; }

@media (max-width: 760px) {
  .pk-ref { padding: 3.2rem 0 2.8rem; }
  .pk-ref-akis { gap: 2.8rem; animation-duration: 16s; }
  .pk-ref-oge { height: 36px; }
  .pk-ref-oge img { max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-ref-akis { animation: none; transform: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 2.5rem; }
  .pk-ref-serit { -webkit-mask-image: none; mask-image: none; }
}

/* ═══════════════════════════════════════════════════════════════
   KOYU HERO'LU SAYFALAR — navbar okunabilirliği
   Sorun: navbar sabit (fixed) olduğu için sayfanın en üstünde
   koyu hero'nun değil, onun ÜSTÜNDEKİ şeffaf kırıntı şeridinin
   üzerinde duruyordu. Beyaz menü yazıları açık zemine düşüyordu.
   Çözüm: koyu hero'lu sayfalarda kırıntı şeridi de koyu zemine alınır,
   böylece navbar + kırıntı + hero kesintisiz tek koyu blok olur.
   ═══════════════════════════════════════════════════════════════ */
.pk-ust-koyu .pk-bc {
  background: var(--dark);
  padding-bottom: 0.6rem;
  margin-bottom: -0.6rem;
}
.pk-ust-koyu .pk-bc a,
.pk-ust-koyu .pk-bc .pk-bc-sep { color: rgba(255, 255, 255, 0.55); }
.pk-ust-koyu .pk-bc a:hover     { color: var(--accent); }
.pk-ust-koyu .pk-bc .pk-bc-now  { color: var(--accent); }

/* Koyu hero'nun üst boşluğu kırıntı şeridi kadar azalsın */
.pk-ust-koyu .page-hero { padding-top: 3.5rem !important; }

/* Navbar kaydırıldığında zaten açık zemine oturuyor — yazılar koyuya döner */
.pk-ust-koyu #navbar.scrolled .nav-links a { color: var(--mid); }
.pk-ust-koyu #navbar.scrolled .nav-links a:hover { color: var(--dark); }
.pk-ust-koyu #navbar.scrolled .nav-links a.nav-active { color: var(--accent-text) !important; }

/* ═══════════════════════════════════════════════════════════════
   SİPARİŞ ONAY SAYFASI (teklif-onay.php)
   ═══════════════════════════════════════════════════════════════ */
.pk-onay-uyari {
  padding: 1rem 1.3rem; border-radius: 8px; font-size: 0.9rem; line-height: 1.6;
  margin-bottom: 2rem;
}
.pk-onay-hata { background: rgba(192,57,43,0.07); border: 1px solid rgba(192,57,43,0.28); color: #922B21; }

.pk-onay-tamam { text-align: center; padding: 2rem 0 1rem; }
.pk-onay-ikon {
  width: 68px; height: 68px; margin: 0 auto 1.4rem; border-radius: 50%;
  background: var(--grad-accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; box-shadow: var(--glow-accent);
}
.pk-onay-tamam h2 { color: var(--dark); margin-bottom: 0.8rem; }
.pk-onay-tamam p  { max-width: 52ch; margin: 0 auto; }

.pk-ozet {
  background: #fff; border: 1px solid rgba(18,61,43,0.1); border-radius: 12px;
  padding: 2rem; box-shadow: var(--glow-soft); margin-bottom: 2rem;
}
.pk-ozet-baslik {
  font-size: 1.15rem; font-weight: 600; color: var(--dark);
  margin-bottom: 1.2rem; letter-spacing: -0.01em;
}
.pk-ozet-tablo { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pk-ozet-tablo td { padding: 0.7rem 0; border-bottom: 1px solid rgba(18,61,43,0.07); }
.pk-ozet-tablo td:first-child { color: var(--mid); }
.pk-ozet-tablo td:last-child  { text-align: end; font-weight: 600; color: var(--dark); }

.pk-ozet-not {
  background: rgba(183,154,91,0.09); border: 1px solid rgba(183,154,91,0.3);
  border-radius: 8px; padding: 0.9rem 1.1rem; margin-top: 1.2rem;
  font-size: 0.86rem; color: var(--gold-ink); line-height: 1.6;
}
.pk-ozet-fiyat {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--accent);
}
.pk-ozet-fiyat span   { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); font-weight: 600; }
.pk-ozet-fiyat strong { font-family: var(--font-head); font-size: 2.1rem; font-weight: 600; color: var(--accent-text); }
.pk-ozet-kdv { font-size: 0.75rem; color: var(--light); text-align: end; margin-top: 0.3rem; }

.pk-onay-form {
  background: #fff; border: 1px solid rgba(18,61,43,0.1); border-radius: 12px;
  padding: 2rem; box-shadow: var(--glow-soft);
}
.pk-form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.pk-form-grup { margin-bottom: 1.2rem; }
.pk-form-grup label {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 0.4rem;
}
.pk-form-grup input, .pk-form-grup textarea {
  width: 100%; padding: 0.75rem 0.9rem; font-family: inherit; font-size: 0.92rem;
  color: var(--dark); background: #FAFBFA;
  border: 1.5px solid rgba(18,61,43,0.14); border-radius: 7px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pk-form-grup textarea { resize: vertical; }

.pk-odeme {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--accent-tint); border: 1px solid rgba(57,201,107,0.28);
  border-radius: 9px; padding: 1.1rem 1.2rem; margin: 0.6rem 0 1.4rem;
}
.pk-odeme-ikon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.pk-odeme strong { display: block; font-size: 0.92rem; color: var(--dark); margin-bottom: 0.25rem; }
.pk-odeme p { font-size: 0.82rem; line-height: 1.6; margin: 0; }

.pk-kabul { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--mid); margin-bottom: 1.6rem; }
.pk-kabul input { margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; }
.pk-kabul a { color: var(--accent-text); text-decoration: underline; }

.pk-onay-btn { width: 100%; text-align: center; padding: 1rem 2rem !important; font-size: 0.9rem !important; }

.pk-banka {
  background: #fff; border: 1px solid rgba(57,201,107,0.32); border-radius: 12px;
  padding: 1.8rem 2rem; margin-top: 2.2rem; box-shadow: var(--glow-soft);
}
.pk-banka h3 { font-size: 1.05rem; font-weight: 600; color: var(--dark); margin-bottom: 1rem; }
.pk-banka table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pk-banka td { padding: 0.65rem 0; border-bottom: 1px solid rgba(18,61,43,0.07); }
.pk-banka td:first-child { color: var(--mid); width: 38%; }
.pk-iban { letter-spacing: 0.06em; color: var(--accent-text); font-size: 1rem; }
.pk-banka-not { font-size: 0.8rem; color: var(--light); margin-top: 1rem; line-height: 1.6; }

@media (max-width: 700px) {
  .pk-form-satir { grid-template-columns: 1fr; gap: 0; }
  .pk-ozet, .pk-onay-form, .pk-banka { padding: 1.4rem; }
  .pk-ozet-fiyat strong { font-size: 1.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SEPET — menü ikonu, sepet sayfası, kasa
   ═══════════════════════════════════════════════════════════════ */
.pk-sepet-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 .2rem; }
.pk-sepet-rozet {
  position: absolute; top: -6px; inset-inline-end: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--grad-accent); color: var(--ink);
  border-radius: 9px; font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.pk-sepet-duzen { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }

.pk-sepet-kalemler { display: flex; flex-direction: column; gap: 1rem; }
.pk-kalem {
  background: #fff; border: 1px solid rgba(18,61,43,.1); border-radius: 12px;
  padding: 1.4rem 1.6rem; box-shadow: var(--glow-soft);
}
.pk-kalem-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pk-kalem-bas h3 { font-size: 1.05rem; font-weight: 600; color: var(--dark); margin: 0; }
.pk-kalem-no { font-size: .74rem; color: var(--light); font-family: ui-monospace, monospace; }
.pk-kalem-sil {
  background: none; border: 1px solid rgba(18,61,43,.15); color: var(--mid);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1; flex-shrink: 0; transition: all .25s;
}
.pk-kalem-sil:hover { border-color: #C0392B; color: #C0392B; }

.pk-kalem-ozet { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 1rem; }
.pk-kalem-ozet td { padding: .45rem 0; border-bottom: 1px solid rgba(18,61,43,.06); }
.pk-kalem-ozet td:first-child { color: var(--mid); }
.pk-kalem-ozet td:last-child { text-align: end; font-weight: 600; color: var(--dark); }

.pk-kalem-alt {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(18,61,43,.08);
}
.pk-kalem-adet { font-size: .8rem; color: var(--mid); }
.pk-kalem-tutar { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--accent-text); }

.pk-sepet-bosalt {
  background: none; border: none; color: var(--light); font-size: .8rem;
  cursor: pointer; text-decoration: underline; padding: .4rem 0; font-family: inherit;
}
.pk-sepet-bosalt:hover { color: #C0392B; }

.pk-sepet-ozet {
  background: #fff; border: 1px solid rgba(18,61,43,.1); border-radius: 12px;
  padding: 1.6rem; box-shadow: var(--glow-soft); position: sticky; top: 100px;
}
.pk-sepet-ozet h2 { font-size: 1.05rem; font-weight: 600; color: var(--dark); margin-bottom: 1.2rem; }
.pk-sepet-ozet table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pk-sepet-ozet td { padding: .55rem 0; }
.pk-sepet-ozet td:first-child { color: var(--mid); }
.pk-sepet-ozet td:last-child { text-align: end; font-weight: 600; color: var(--dark); }
.pk-ozet-belirsiz { font-size: .76rem; color: var(--light); font-weight: 400; }

.pk-ozet-kalemler { border-bottom: 1px solid rgba(18,61,43,.08); padding-bottom: .8rem; margin-bottom: .6rem; }
.pk-ozet-kalem { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; font-size: .84rem; }
.pk-ozet-kalem strong { color: var(--dark); font-weight: 600; display: block; }
.pk-ozet-kalem span { color: var(--mid); font-size: .76rem; }
.pk-ozet-kalem-tutar { font-weight: 700; color: var(--dark); white-space: nowrap; }

.pk-ozet-toplam {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--accent);
}
.pk-ozet-toplam span { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); font-weight: 700; }
.pk-ozet-toplam strong { font-family: var(--font-head); font-size: 1.7rem; font-weight: 600; color: var(--accent-text); }

.pk-sepet-devam { display: block; width: 100%; text-align: center; margin-top: 1.4rem; padding: .95rem 1.5rem !important; }
.pk-sepet-geri { display: block; text-align: center; margin-top: .8rem; font-size: .82rem; color: var(--mid); text-decoration: none; }
.pk-sepet-geri:hover { color: var(--accent-text); }
.pk-sepet-guven { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(18,61,43,.08); font-size: .78rem; color: var(--mid); }

.pk-sepet-bos { text-align: center; padding: 3rem 0; }
.pk-sepet-bos-ikon { font-size: 3rem; opacity: .35; margin-bottom: 1rem; }
.pk-sepet-bos h2 { color: var(--dark); margin-bottom: .7rem; }
.pk-sepet-bos p { max-width: 46ch; margin: 0 auto; }

/* ── Sipariş takip ─────────────────────────────────────────────── */
.pk-takip-bas {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid rgba(18,61,43,.1); border-radius: 12px;
  padding: 1.3rem 1.6rem; box-shadow: var(--glow-soft);
}
.pk-takip-no { font-family: ui-monospace, monospace; font-size: 1.1rem; font-weight: 700; color: var(--dark); letter-spacing: .04em; display: block; }
.pk-takip-tarih { font-size: .78rem; color: var(--light); }
.pk-takip-rozet { padding: .4rem 1rem; border-radius: 20px; border: 1px solid; font-size: .8rem; font-weight: 700; }

.pk-adimlar { display: flex; gap: .5rem; margin-top: 1.6rem; flex-wrap: wrap; }
.pk-adim { flex: 1; min-width: 92px; text-align: center; position: relative; }
.pk-adim-nokta {
  width: 30px; height: 30px; margin: 0 auto .5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--light);
  border: 2px solid rgba(18,61,43,.12); font-size: .78rem; font-weight: 700;
}
.pk-adim.gecti .pk-adim-nokta { background: var(--grad-accent); color: var(--ink); border-color: transparent; }
.pk-adim-ad { font-size: .72rem; color: var(--mid); line-height: 1.4; display: block; }
.pk-adim.gecti .pk-adim-ad { color: var(--dark); font-weight: 600; }

.pk-kargo-kutu {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--accent-tint); border: 1px solid rgba(57,201,107,.3);
  border-radius: 9px; padding: .9rem 1.2rem; margin-top: 1.4rem; font-size: .86rem;
}
.pk-kargo-kutu span { color: var(--mid); }
.pk-kargo-kutu strong { font-family: ui-monospace, monospace; color: var(--accent-text); letter-spacing: .04em; }

@media (max-width: 900px) {
  .pk-sepet-duzen { grid-template-columns: 1fr; }
  .pk-sepet-ozet { position: static; }
}

/* ── Yasal sayfa tablosu ─────────────────────────────────────────── */
.pk-yasal-tablo { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
.pk-yasal-tablo td { padding: 0.65rem 0; border-bottom: 1px solid rgba(18,61,43,0.08); }
.pk-yasal-tablo td:first-child { color: var(--mid); width: 40%; }
.pk-yasal-tablo td:last-child  { color: var(--dark); font-weight: 600; }

/* ── Ödeme yöntemi seçimi (kasa) ─────────────────────────────────── */
.pk-yontemler { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.4rem; }
.pk-yontem {
  display: flex; align-items: flex-start; gap: .9rem; cursor: pointer;
  padding: 1rem 1.2rem; border-radius: 9px;
  border: 1.5px solid rgba(18,61,43,.14); background: #FAFBFA;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.pk-yontem:hover  { border-color: rgba(57,201,107,.5); }
.pk-yontem.secili { border-color: var(--accent); background: var(--accent-tint); }
.pk-yontem input  { margin-top: .25rem; accent-color: var(--accent); flex-shrink: 0; }
.pk-yontem-ikon   { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.pk-yontem-metin strong { display: block; font-size: .92rem; color: var(--dark); margin-bottom: .2rem; }
.pk-yontem-metin span   { display: block; font-size: .8rem; line-height: 1.6; color: var(--mid); }

/* ── PayTR ödeme çerçevesi ───────────────────────────────────────── */
.pk-paytr-kutu {
  background: #fff; border: 1px solid rgba(18,61,43,.1); border-radius: 12px;
  padding: .8rem; box-shadow: var(--glow-soft); min-height: 460px;
}
.pk-paytr-kutu iframe { display: block; border-radius: 8px; }
.pk-odeme-guven {
  display: flex; gap: 1.6rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 1.6rem; font-size: .82rem; color: var(--mid);
}
.pk-odeme-guven a { color: var(--accent-text); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   ESKİ TARAYICI UYUMLULUK KATMANI
   Hedef: macOS Mojave/Catalina (Safari 12–13), iOS 12–14,
          eski Android WebView, Windows'ta güncellenmemiş tarayıcılar.
   Yöntem: modern kuralları bozmadan, altına yedek değer yazmak.
   ═══════════════════════════════════════════════════════════════ */

/* ── inset kısayolu (Safari 14.1 öncesi tanımıyor) ──────────────
   Desteklenmezse tüm kaplama katmanları konumlanmıyordu.        */
.section-dark::before, .kf-wrap::before, footer::before,
.page-hero[style*="var(--dark)"]::after, .page-hero:not([style*="var(--dark)"])::after,
.pk-sector::after, .pk-up-input, .mat-img-preview,
.lifestyle-banner > div, .pk-onay-uyari::before {
  top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
}

/* ── aspect-ratio (Safari 15 öncesi tanımıyor) ─────────────────
   Desteklenmezse galeri kutuları yükseklik alamıyordu.          */
@supports not (aspect-ratio: 1) {
  .gallery-item, .pk-sector, .proc-photo img { min-height: 260px; }
  .editorial-img > div { min-height: 380px; }
  .pk-ref-oge img { height: 46px; }
  .pk-gal i, .pk-kalem-ozet i { min-height: 120px; }
}

/* ── flexbox / grid gap (Safari 14.1 öncesi flex'te tanımıyor) ──
   Desteklenmezse öğeler birbirine yapışıyordu.                  */
@supports not (gap: 1rem) {
  .nav-links > li          { margin-inline-end: .9rem; }
  .pk-yontemler > *        { margin-bottom: .7rem; }
  .pk-sepet-kalemler > *   { margin-bottom: 1rem; }
  .pk-form-satir > *       { margin-inline-end: 1.2rem; }
  .pk-cerez-btns > *       { margin-inline-start: .5rem; }
  .footer-inner > *        { margin-inline-end: 2.6rem; margin-bottom: 2rem; }
  .pk-ref-akis > *         { margin-inline-end: 4.5rem; }
  .pk-adim                 { margin-inline-end: .5rem; }
  .pk-odeme-guven > *      { margin-inline-end: 1.6rem; }
}

/* ── :has() (Safari 15.4 / Chrome 105 öncesi tanımıyor) ─────────
   Hesaplayıcıdaki seçili özellik vurgusu için kardeş seçici yedeği.
   İşaret kutusu zaten ~ seçicisiyle çalışıyor, bu yalnızca çerçeve. */
.kf-feature input:checked + .kf-feature-box { box-shadow: 0 0 0 2px rgba(57,201,107,.45); }

/* ── mask-image (Safari 15.4 öncesi) ───────────────────────────
   Referans şeridinin kenar yumuşatması yoksa kesme daha sert olur;
   sorun değil ama şeridin taşmaması için taşma gizlenir.        */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .pk-ref-serit { overflow: hidden; }
}

/* ── backdrop-filter (eski Android WebView) ────────────────────
   Bulanıklık yoksa okunabilirlik için zemin opaklaştırılır.     */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  #navbar.scrolled { background: #FFFFFF; }
  .pk-cerez        { background: #123D2B; }
}

/* ── position: sticky (Safari 12 kısmi) ────────────────────────
   Desteklenmezse öğe normal akar; taşmayı önlemek için sınır.   */
@supports not (position: sticky) {
  .pk-sepet-ozet, .mat-showcase-left { position: relative; top: auto; }
}

/* ── Mantıksal özellikler (Safari 14.1 öncesi) ─────────────────
   inline-start/end tanınmazsa LTR karşılıkları devreye girer.   */
@supports not (padding-inline-start: 1rem) {
  .pk-bc, .pk-yasal-tablo, ol { padding-left: 1.2rem; }
  .pk-lang-ic  { margin-right: 4px; }
  .pk-lang-kod { margin-right: 6px; }
  .pk-sepet-rozet { right: -9px; }
}

/* ── clamp() (Safari 13.1 öncesi) ──────────────────────────────
   Desteklenmezse başlıklar sabit boyuta düşer.                  */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 1.4rem; }
  .kf-title { font-size: 2rem; }
}

/* ── Grid desteklemeyen çok eski tarayıcılar ───────────────────
   Tek sütuna düşer; içerik okunur kalır.                        */
@supports not (display: grid) {
  .responsive-grid-2, .responsive-grid-3, .responsive-grid-4,
  .responsive-grid-split, .gallery-grid, .pk-sepet-duzen,
  .footer-inner, .pk-form-satir { display: block; }
  .pk-sepet-duzen > *, .footer-inner > * { margin-bottom: 2rem; }
}

/* ── iOS Safari: form alanlarında otomatik yakınlaşmayı önle ───
   16px altındaki yazı boyutunda iOS sayfayı zorla yakınlaştırır. */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], select, textarea {
    font-size: 16px;
  }
}

/* ── iOS'ta 100vh adres çubuğu sorunu ──────────────────────────── */
@supports (-webkit-touch-callout: none) {
  .scene-panel, .lifestyle-banner { min-height: -webkit-fill-available; }
}

/* ── 3D sahne çalışmıyorsa (WebGL yok / JS engelli / eski tarayıcı) ──
   Paneller üst üste gizli kalmasın, sırayla normal akışta görünsün.  */
.pk-3d-yok #hero-3d,
.no-js      #hero-3d { height: auto !important; }
.pk-3d-yok #box-canvas,
.no-js      #box-canvas { display: none; }
.pk-3d-yok .scene-panel,
.no-js      .scene-panel {
  position: relative; opacity: 1; transform: none;
  pointer-events: auto; padding: 4rem 0;
  border-bottom: 1px solid rgba(18,61,43,.08);
}
.pk-3d-yok .scroll-hint,
.no-js      .scroll-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SAYFA İÇİ ÇAĞRI ŞERİDİ (ara CTA)
   Ziyaretçi sayfayı kaydırırken hiçbir noktada iletişimsiz kalmasın diye
   bölümlerin arasına konur. includes/cta_serit.php ile çağrılır.
   ═══════════════════════════════════════════════════════════════════════════ */
.pk-cta-serit { padding: 3.2rem 4rem; }
.pk-cta-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 2.2rem 2.6rem; border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(57, 201, 107, 0.22);
}
.pk-cta-yazi { flex: 1 1 320px; min-width: 0; }
.pk-cta-yazi h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.25;
  margin: 0 0 0.5rem; color: var(--dark); letter-spacing: -0.01em;
}
.pk-cta-yazi p { margin: 0; font-size: 0.92rem; color: var(--mid); line-height: 1.65; max-width: 52ch; }

.pk-cta-butonlar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }

.pk-cta-birincil {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.85rem 1.7rem; border-radius: 8px;
  background: var(--grad-accent); color: var(--white);
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(57, 201, 107, 0.28);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pk-cta-birincil:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(57, 201, 107, 0.38); }
.pk-cta-not { font-size: 0.66rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.04em; }

.pk-cta-ikincil {
  display: inline-flex; align-items: center;
  padding: 0.85rem 1.5rem; border-radius: 8px;
  border: 1px solid var(--dark); color: var(--dark);
  font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.pk-cta-ikincil:hover { background: var(--dark); color: var(--white); }

.pk-cta-tel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.85rem 0.4rem; color: var(--mid);
  font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.pk-cta-tel:hover { color: var(--accent-ink); }

/* Koyu varyant — açık zeminli bölümlerin arasında ritim değişikliği için */
.pk-cta-koyu .pk-cta-ic {
  background: var(--grad-dark); border-color: rgba(255, 255, 255, 0.1);
}
.pk-cta-koyu .pk-cta-yazi h2 { color: var(--white); }
.pk-cta-koyu .pk-cta-yazi p  { color: rgba(255, 255, 255, 0.66); }
.pk-cta-koyu .pk-cta-ikincil { border-color: rgba(255, 255, 255, 0.42); color: var(--white); }
.pk-cta-koyu .pk-cta-ikincil:hover { background: var(--white); color: var(--dark); }
.pk-cta-koyu .pk-cta-tel { color: rgba(255, 255, 255, 0.72); }
.pk-cta-koyu .pk-cta-tel:hover { color: var(--accent); }

@media (max-width: 991px) {
  .pk-cta-serit { padding: 2.4rem 1.5rem; }
  .pk-cta-ic { padding: 1.7rem 1.5rem; }
}
@media (max-width: 576px) {
  .pk-cta-butonlar { width: 100%; }
  .pk-cta-birincil, .pk-cta-ikincil { flex: 1 1 100%; justify-content: center; text-align: center; }
  .pk-cta-tel { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBİL SABİT AKSİYON ÇUBUĞU
   Masaüstünde menü hep ekranda olduğu için gerekmez; yalnızca mobilde çıkar.
   ═══════════════════════════════════════════════════════════════════════════ */
.pk-mobil-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: none; align-items: stretch;
  background: rgba(18, 61, 43, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.22);
  transform: translateY(105%);
  transition: transform 0.35s var(--ease), bottom 0.35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0);  /* iPhone alt çubuğu */
}
.pk-mobil-bar.acik { transform: translateY(0); }

.pk-mb-oge {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; padding: 0.7rem 0.4rem;
  color: rgba(255, 255, 255, 0.9); text-decoration: none;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-tap-highlight-color: transparent;
}
.pk-mb-oge:last-child { border-right: none; }
.pk-mb-oge:active { background: rgba(255, 255, 255, 0.08); }
.pk-mb-ikon { font-size: 1.05rem; line-height: 1; display: flex; align-items: center; }
.pk-mb-yazi { white-space: nowrap; }

.pk-mb-ana { background: var(--grad-accent); color: var(--white); }
.pk-mb-ana .pk-mb-yazi { font-weight: 700; }

/* Çerez şeridi açıkken çubuk onun üstüne çıkar */
body:has(.pk-cerez.acik) .pk-mobil-bar { bottom: 54px; }

/* WhatsApp balonu çubuğun altında kalmasın */

@media (max-width: 820px) { .pk-mobil-bar { display: flex; } }

/* Ekran okuyucu / hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
  .pk-mobil-bar { transition: none; }
  .pk-cta-birincil { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER LOGO BOYUTU
   Önceden 30 px'e satır içi yazılmıştı; %50 büyütülüp 45 px'e çıkarıldı.
   Boyut artık burada olduğu için mobilde küçültülebiliyor — 45 px küçük
   ekranda menü düğmesini sıkıştırıyordu.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-logo .logo-default,
.nav-logo .logo-white {
  height: 45px;
  width: auto;
  vertical-align: middle;
  display: block;
}
/* Koyu/açık geçişini yöneten mevcut kurallar bu ikisini görünür/gizli yapar */
.nav-logo .logo-white { display: none; }

@media (max-width: 991px) {
  .nav-logo .logo-default,
  .nav-logo .logo-white { height: 38px; }
}
@media (max-width: 576px) {
  .nav-logo .logo-default,
  .nav-logo .logo-white { height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHATSAPP BALONU — KONUM
   Konum önceden whatsapp.php içinde satır içi yazılıydı; satır içi stil CSS'i
   ezdiği için mobil alt çubuk açıldığında balon yerinde kalıp çubuğun
   üzerine biniyordu. Artık tek yerden yönetiliyor.
   ═══════════════════════════════════════════════════════════════════════════ */
.pk-wp-yer {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9990;                 /* alt çubukla aynı katman, üstünde değil */
  transition: bottom 0.35s var(--ease);
}

/* Çerez şeridi açıkken */
body:has(.pk-cerez.acik) .pk-wp-yer { bottom: 76px; }

/* Mobil alt çubuk görünürken — çubuğun tam üstüne çıkar */
body.pk-mb-acik .pk-wp-yer { bottom: 88px; }
body.pk-mb-acik:has(.pk-cerez.acik) .pk-wp-yer { bottom: 140px; }

/* :has() desteklemeyen eski tarayıcılar için JS yedeği (footer.php) */
body.pk-cerez-acik .pk-wp-yer { bottom: 76px; }
body.pk-mb-acik.pk-cerez-acik .pk-wp-yer { bottom: 140px; }

@media (max-width: 820px) {
  .pk-wp-yer { right: 14px; bottom: 16px; }
  body.pk-mb-acik .pk-wp-yer { bottom: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBİLDE YATAY KAYDIRMAYI ENGELLE

   body'de overflow-x: hidden vardı ama iOS Safari'de tek başına yetmiyor;
   html üzerinde de olmalı. Ayrıca genişliği aşabilecek öğeler tek tek
   sınırlandırıldı: görsel, tablo, kod bloğu, gömülü çerçeve ve kırılamayan
   uzun metinler (IBAN, e-posta, uzun adres).
   ═══════════════════════════════════════════════════════════════════════════ */
/*  ⚠ BURAYA "html { overflow-x: hidden }" YAZMAYIN.
    Bu kural html üzerinde yeni bir kaydırma bağlamı açar ve sayfadaki
    "position: sticky" öğelerini sessizce devre dışı bırakır. Ana sayfadaki
    3D sahne (#scene-wrapper) sticky ile çalıştığı için kaydırınca sahne
    yerinde durmaz, sayfa boş akar. 15.08.2026'da tam olarak bu oldu.

    Doğru yöntem "overflow: clip": taşmayı yine keser ama kaydırma bağlamı
    açmadığı için sticky bozulmaz. Desteklemeyen eski tarayıcılarda
    (Safari 16 öncesi) aşağıdaki body kuralı devreye girer.                */
html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  max-width: 100%;
}

/* Yedek: overflow:clip desteklenmiyorsa taşmayı body kesiyor.
   body'de hidden olması sticky'yi etkilemez — sorun yalnızca html'de. */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
}
img, svg, video { height: auto; }

/* Kırılamayan uzun diziler satırı taşırmasın */
.pk-iban, .footer-dg, .pk-yol, td, th { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* Bu bölümlerin mobil karşılığı yoktu; 4rem (64px) yan boşluk küçük
     ekranda içeriği sıkıştırıyordu. */
  .page-hero      { padding: 7rem 1.4rem 3rem !important; }
  .pz-trust       { padding: 2rem 1.4rem; }
  .pk-cta-serit   { padding: 2.2rem 1.2rem; }
  .container      { padding-left: 0; padding-right: 0; }

  /* Yatayda kayan tablolar kendi içinde kaysın, sayfayı taşırmasın */
  .table-scroll, .pk-ekstre-tablo { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}