/* buunhouse.com — 3D ana sayfa (örnek). Dış yazı tipi/görsel yok. */
:root {
  --zemin: #090a12; --zemin2: #0f1120; --yuzey: rgba(255,255,255,.045); --cizgi: rgba(255,255,255,.09);
  --yazi: #eeedf6; --soluk: #a3a5bd; --sonuk: #8b8ea9;
  --altin: #f2c46d; --mor: #8b7cff; --turkuaz: #4fdcc4;
  --r: 22px; --gen: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.08; font-weight: 700; }
p { margin: 0; }
.kap { width: min(var(--gen), 100% - 48px); margin: 0 auto; }
.gec { position: absolute; left: -999px; top: 8px; background: var(--altin); color: #1a1408; padding: 8px 14px; border-radius: 10px; z-index: 99; }
.gec:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 6px; }

/* Arka plan: derin mürekkep + renkli ışık lekeleri */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% 12%, rgba(139,124,255,.18), transparent 70%),
    radial-gradient(50vw 45vh at 10% 40%, rgba(242,196,109,.08), transparent 70%),
    radial-gradient(70vw 60vh at 50% 110%, rgba(79,220,196,.07), transparent 70%),
    linear-gradient(180deg, #0b0c17 0%, var(--zemin) 40%, #0a0b13 100%);
}

/* Üst çubuk */
.ust { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top); transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.ust.dolu { background: rgba(10,11,20,.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--cizgi); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo img { width: 158px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { text-decoration: none; color: var(--soluk); font-size: 15px; padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.menu a:hover { color: var(--yazi); background: var(--yuzey); }
.menu .dil { font-weight: 600; letter-spacing: .04em; }
.menu .dugme.kucuk { color: #17120a; margin-left: 8px; }

/* Düğmeler */
.dugme { --d: var(--altin); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; font-size: 16px; color: #17120a; padding: 14px 24px; border-radius: 14px;
  background: linear-gradient(180deg, #ffe0a0, var(--d)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -10px rgba(242,196,109,.7), 0 2px 6px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.dugme:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px -12px rgba(242,196,109,.85), 0 2px 6px rgba(0,0,0,.3); }
.dugme.ikincil { color: var(--yazi); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px var(--cizgi) inset; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dugme.ikincil:hover { background: rgba(255,255,255,.1); }
.dugme.kucuk { padding: 9px 16px; font-size: 14px; border-radius: 11px; }
.dugme.buyuk { padding: 18px 30px; font-size: 18px; border-radius: 16px; }

/* Kahraman */
.kahraman { position: relative; min-height: max(720px, 100svh); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.sahne { position: absolute; inset: 0; z-index: -1; }
.sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.sahne.hazir canvas { opacity: 1; }
.sahne-yedek { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity 1.2s ease; }
.sahne.hazir .sahne-yedek { opacity: 0; }
.kahraman::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(transparent, var(--zemin)); z-index: -1; pointer-events: none; }
.kahraman-ic { padding: 120px 0 80px; }
.kahraman-ic > * { max-width: 600px; }
.etiket { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding: 7px 14px 7px 10px; border-radius: 99px; background: var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi) inset; }
.etiket i { width: 8px; height: 8px; border-radius: 50%; background: var(--turkuaz); box-shadow: 0 0 12px var(--turkuaz); }
.kahraman h1 { font-size: clamp(42px, 6.2vw, 80px); margin: 22px 0 22px; font-weight: 750; letter-spacing: -0.035em; }
.kahraman h1 em { font-style: normal; background: linear-gradient(100deg, #ffe3a8 0%, var(--altin) 35%, #c9b8ff 75%, var(--mor) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman .alt { font-size: clamp(17px, 1.6vw, 20px); color: var(--soluk); max-width: 520px; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.platformlar { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--sonuk); font-size: 14px; }
.platformlar li { display: flex; align-items: center; gap: 8px; }
.platformlar li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sonuk); }
.asagi { position: absolute; left: 50%; bottom: 28px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.25) inset; }
.asagi span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--yazi); animation: tekerlek 2s ease-in-out infinite; }
@keyframes tekerlek { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Bölümler */
.bolum { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.bolum-bas { max-width: 720px; margin-bottom: clamp(40px, 6vw, 70px); }
.ust-yazi { display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--altin); margin-bottom: 16px; }
.bolum-bas h2, .kod-metin h2, .cta h2 { font-size: clamp(32px, 4.4vw, 56px); }
.bolum-bas p { color: var(--soluk); font-size: 19px; margin-top: 18px; }

/* Belirme */
.js .belir { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .belir.gorundu { opacity: 1; transform: none; }
.adimlar .belir:nth-child(2), .hizmet-izgara .belir:nth-child(2) { transition-delay: .08s; }
.adimlar .belir:nth-child(3), .hizmet-izgara .belir:nth-child(3) { transition-delay: .16s; }
.adimlar .belir:nth-child(4), .hizmet-izgara .belir:nth-child(4) { transition-delay: .24s; }

/* Ürün kartları: derinlik + paralaks */
.urun-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.kart3d { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --vurgu: 139,124,255; perspective: 1100px; }
.kart3d[data-renk="altin"] { --vurgu: 242,196,109; }
.kart3d[data-renk="turkuaz"] { --vurgu: 79,220,196; }
.kart3d[data-renk="yesil"] { --vurgu: 128,214,120; }
.kart3d[data-renk="kahve"] { --vurgu: 214,160,110; }
.kart3d.genis { grid-column: 1 / -1; }
.kart-ic { position: relative; height: 100%; border-radius: 28px; padding: clamp(28px, 4vw, 48px); overflow: hidden; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 45%, rgba(var(--vurgu),.06));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.12) inset, 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 0 rgba(var(--vurgu),0); }
.kart3d.ustunde .kart-ic { transition: transform .08s linear, box-shadow .5s; box-shadow: 0 0 0 1px rgba(var(--vurgu),.28) inset, 0 1px 0 rgba(255,255,255,.14) inset, 0 50px 90px -40px rgba(0,0,0,.85), 0 30px 80px -50px rgba(var(--vurgu),.6); }
.kart-isik { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx) var(--my), rgba(var(--vurgu),.16), transparent 60%); opacity: .7; transition: opacity .4s; }
.kart3d.ustunde .kart-isik { opacity: 1; }
.kart-ic::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -15%; top: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--vurgu),.22), transparent); filter: blur(10px); pointer-events: none; }
.kart-metin { position: relative; transform: translateZ(30px); }
.kart-etiket { display: inline-block; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--vurgu)); margin-bottom: 12px; }
.kart-metin h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; }
.kart-metin p { color: var(--soluk); max-width: 480px; }
.kart-metin p.not { font-size: 13px; color: var(--sonuk); margin-top: 10px; }
.kart-bag { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; font-weight: 600; text-decoration: none; color: var(--yazi); padding: 10px 0; }
.kart-bag span { transition: transform .25s; }
.kart-bag:hover span { transform: translateX(5px); }
.kart-gorsel { position: relative; transform: translateZ(60px); transform-style: preserve-3d; display: flex; justify-content: center; margin-bottom: 30px; }

/* Telefon çerçevesi */
.tel { --py: 0px; margin: 0; width: min(210px, 60%); aspect-ratio: 540 / 1170; padding: 7px; border-radius: 34px; position: relative;
  background: linear-gradient(145deg, #3a3b46, #121319 40%, #24252e); transform: translateY(var(--py));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 1px rgba(255,255,255,.25) inset, 0 30px 60px -20px rgba(0,0,0,.85), 0 60px 90px -50px rgba(var(--vurgu),.5); }
.tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }
.tel::after { content: ""; position: absolute; inset: 7px; border-radius: 27px; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 30%); pointer-events: none; }

.kart3d.genis .kart-ic { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; min-height: 480px; }
.kart3d.genis.ters .kart-ic { grid-template-columns: 1fr 1.15fr; }
.kart3d.genis .kart-gorsel { margin: 0; }
.kart-gorsel.iki { height: 440px; align-items: center; }
.kart-gorsel.iki .tel { position: absolute; width: 196px; }
.kart-gorsel.iki .tel:first-child { left: 50%; margin-left: -150px; transform: translateY(var(--py)) rotate(-5deg) translateZ(40px); z-index: 2; }
.kart-gorsel.iki .tel.arka { left: 50%; margin-left: -20px; top: 30px; transform: translateY(var(--py)) rotate(6deg); opacity: .9; filter: saturate(.9) brightness(.85); }
.kart3d:not(.genis) .kart-gorsel .tel { width: min(200px, 55%); transform: translateY(var(--py)) rotate(-3deg); }
.diorama { height: 420px; }
.diorama .dio-ana { --py: 0px; position: absolute; width: 92%; left: 4%; top: 6%; border-radius: 22px; transform: translateY(var(--py)) rotateX(8deg) rotateZ(-2deg); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 70px -30px rgba(0,0,0,.9); }
.diorama .dio-on { --py: 0px; position: absolute; width: 46%; right: -2%; bottom: -2%; border-radius: 18px; transform: translateY(var(--py)) translateZ(50px) rotate(3deg); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.9); }

/* Kod bölümü */
.kod-ic { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.kod-metin p { color: var(--soluk); font-size: 18px; margin-top: 18px; max-width: 500px; }
.editor { --py: 0px; margin: 0; border-radius: 20px; overflow: hidden; transform: translateY(var(--py)) perspective(1200px) rotateY(-8deg) rotateX(3deg);
  background: linear-gradient(180deg, rgba(22,24,40,.92), rgba(14,15,27,.92)); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 50px 100px -40px rgba(0,0,0,.9), 0 30px 120px -60px rgba(139,124,255,.55); }
.editor-bas { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.editor-bas i { width: 11px; height: 11px; border-radius: 50%; background: #3b3d52; }
.editor-bas i:first-child { background: #ff6b6b; } .editor-bas i:nth-child(2) { background: #f2c46d; } .editor-bas i:nth-child(3) { background: #4fdcc4; }
.editor-bas span { margin-left: 10px; font: 500 12.5px var(--mono); color: var(--sonuk); }
.editor pre { margin: 0; padding: 22px 24px 26px; overflow-x: auto; font: 13.5px/1.75 var(--mono); color: #d8d9ec; }
.editor .k { color: #c3a6ff; } .editor .f { color: #ffd88a; } .editor .s { color: #7fe6d2; } .editor .y { color: #6c7090; font-style: italic; }

/* Hizmetler */
.hizmet-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hizmet { padding: 28px 26px 30px; border-radius: var(--r); background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: 0 0 0 1px var(--cizgi) inset, 0 30px 60px -40px rgba(0,0,0,.8); transition: transform .35s, box-shadow .35s; }
.hizmet:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(242,196,109,.25) inset, 0 40px 70px -40px rgba(0,0,0,.9); }
.simge { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 22px; background: linear-gradient(145deg, rgba(242,196,109,.22), rgba(139,124,255,.18)); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 24px -10px rgba(139,124,255,.6); }
.simge svg { width: 26px; height: 26px; fill: none; stroke: #f5e6c8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hizmet h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.015em; }
.hizmet p { color: var(--soluk); font-size: 15.5px; }

/* Süreç */
.adimlar { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: a; position: relative; }
.adimlar::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242,196,109,.5), rgba(139,124,255,.5), transparent); }
.adimlar li { position: relative; padding-top: 74px; }
.adimlar b { position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 650 15px var(--mono); color: var(--altin); background: radial-gradient(circle at 35% 30%, #23253a, #121320); box-shadow: 0 0 0 1px rgba(242,196,109,.35) inset, 0 12px 30px -10px rgba(0,0,0,.9); }
.adimlar h3 { font-size: 21px; margin-bottom: 8px; }
.adimlar p { color: var(--soluk); font-size: 15.5px; max-width: 260px; }

/* İletişim */
.cta { position: relative; text-align: center; padding: clamp(48px, 7vw, 90px) 24px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(80% 120% at 50% 0%, rgba(139,124,255,.25), transparent 60%), radial-gradient(60% 100% at 50% 100%, rgba(242,196,109,.16), transparent 60%), linear-gradient(180deg, #14162a, #0e0f1d);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 60px 120px -60px rgba(0,0,0,.9); }
.cta p { color: var(--soluk); font-size: 19px; margin: 18px auto 34px; max-width: 520px; }

/* Alt bilgi */
.alt-bilgi { border-top: 1px solid var(--cizgi); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--sonuk); font-size: 14.5px; }
.alt-ic { display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center; }
.alt-logo { width: 120px; opacity: .85; }
.alt-bilgi nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.alt-bilgi nav a { text-decoration: none; color: var(--soluk); }
.alt-bilgi nav a:hover { color: var(--yazi); }
.alt-bilgi p { grid-column: 1 / -1; }

/* Tablet */
@media (max-width: 1020px) {
  .hizmet-izgara, .adimlar { grid-template-columns: repeat(2, 1fr); }
  .adimlar::before { display: none; }
  .kod-ic { grid-template-columns: 1fr; }
  .editor { transform: translateY(var(--py)); }
}
/* Telefon */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .kap { width: calc(100% - 36px); }
  .ust-ic { height: 62px; }
  .logo img { width: 134px; }
  .menu a:not(.dugme):not(.dil) { display: none; }
  .kahraman { align-items: flex-start; min-height: max(900px, 106svh); }
  .kahraman h1 { font-size: 38px; }
  .kahraman .alt { font-size: 16px; }
  .kahraman-ic { padding: 92px 0 0; }
  .kahraman h1 { margin: 18px 0 16px; }
  .dugmeler { margin-top: 24px; }
  .dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
  .platformlar { display: none; }
  .sahne-yedek { object-position: 50% 100%; }
  .asagi { display: none; }
  .urun-izgara { grid-template-columns: 1fr; gap: 18px; }
  .kart3d.genis .kart-ic, .kart3d.genis.ters .kart-ic { grid-template-columns: 1fr; min-height: 0; gap: 26px; }
  .kart3d.genis.ters .kart-gorsel, .kart3d.genis .kart-gorsel { order: -1; }
  .kart-gorsel.iki { height: 380px; }
  .kart-gorsel.iki .tel { width: 170px; }
  .kart-gorsel.iki .tel:first-child { margin-left: -135px; }
  .diorama { height: 280px; }
  .hizmet-izgara, .adimlar { grid-template-columns: 1fr; }
  .alt-ic { grid-template-columns: 1fr; }
  .alt-bilgi nav { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .belir { opacity: 1; transform: none; }
}