/* Yılmaz Dijital — premium 3D katmanı. Mevcut CSS'in üstüne en son yüklenir. */
:root{
  --p-ink:#070b16;--p-ink2:#0d1426;--p-ink3:#141d34;
  --p-line:rgba(148,170,220,.14);--p-line2:rgba(148,170,220,.24);
  --p-txt:#eef2fb;--p-mute:#9aa8c6;--p-dim:#6f7d9c;
  --p-a1:#4f7cff;--p-a2:#8b5cf6;--p-a3:#22d3ee;
  --p-grad:linear-gradient(135deg,#4f7cff 0%,#7c5cff 55%,#a855f7 100%);
  --p-r:22px;--p-r2:16px;
  --p-sh1:0 1px 2px rgba(16,24,48,.06),0 4px 12px rgba(16,24,48,.06);
  --p-sh2:0 2px 4px rgba(16,24,48,.05),0 12px 28px -6px rgba(16,24,48,.12),0 32px 64px -24px rgba(32,48,110,.22);
  --p-sh3:0 4px 8px rgba(16,24,48,.06),0 24px 48px -12px rgba(24,36,90,.22),0 60px 120px -40px rgba(79,124,255,.35);
  --p-ease:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth}
html body{background:#f4f6fb;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Gezinme çubuğu: koyu cam ---------- */
html body .navbar{background:rgba(7,11,22,.94);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
html body .navbar .logo,html body .navbar .logo span{color:#fff}
html body .navbar .logo-icon{color:#fff;background:var(--p-grad);border-radius:10px;width:34px;height:34px;display:inline-grid;place-items:center;box-shadow:0 6px 18px -6px rgba(124,92,255,.8),inset 0 1px 0 rgba(255,255,255,.35)}
html body .navbar .logo-icon svg{width:19px;height:19px}
html body .nav-links a{color:#b9c4dd;border-radius:10px;transition:color .2s,background .2s}
html body .nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
html body .nav-links a.active,html body .nav-links a[aria-current]{color:#fff;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html body .nav-cart{color:#dbe3f5}
html body .nav-cart .badge{background:var(--p-grad);color:#fff}
html body .lang-switch a{color:#7f8cab}
html body .lang-switch a.active{color:#fff}
html body .nav-right .btn-ghost{color:#dbe3f5;background:transparent;border-color:transparent}
html body .nav-right .btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff}
html body .nav-btn{background:#fff;color:#0a1020;border-radius:12px;box-shadow:0 6px 20px -8px rgba(255,255,255,.5);transition:transform .2s var(--p-ease),box-shadow .2s}
html body .nav-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(255,255,255,.6)}
html body .nav-toggle span{background:#fff}
@media (max-width:1024px){
  html body .navbar .nav-links.open{background:#0a0f1e!important;padding:12px!important;border-bottom:1px solid rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
}

/* ---------- Butonlar ---------- */
html body .btn{border-radius:14px;transition:transform .22s var(--p-ease),box-shadow .22s var(--p-ease),background .2s,color .2s}
html body .btn:active{transform:scale(.97)}
html body .btn.btn-primary,html body .btn.btn-purple,html body .depth-intro .depth-actions .btn-primary{background:var(--p-grad);color:#fff;border:0;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px rgba(91,92,255,.75),0 2px 6px rgba(40,40,120,.2)}
html body .btn.btn-primary:hover,html body .btn.btn-purple:hover,html body .depth-intro .depth-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 34px -12px rgba(91,92,255,.85),0 2px 6px rgba(40,40,120,.2);color:#fff}
html body .btn-outline{border-radius:14px;background:#fff;box-shadow:var(--p-sh1)}
html body .btn-outline:hover{transform:translateY(-2px);box-shadow:var(--p-sh2)}

/* ---------- Ana sayfa hero: koyu sahne + 3D tuval ---------- */
html body .depth-intro{position:relative;background:radial-gradient(1200px 600px at 78% 30%,rgba(79,124,255,.22),transparent 60%),radial-gradient(900px 500px at 10% 0%,rgba(139,92,246,.18),transparent 60%),linear-gradient(180deg,#070b16 0%,#0a1122 100%);color:var(--p-txt);border-bottom:0;padding-top:64px;isolation:isolate}
html body .depth-intro:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(148,170,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,170,220,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 75%)}
html body .depth-intro:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:-1;background:linear-gradient(180deg,transparent,#0a1122)}
html body .depth-hero{grid-template-columns:1fr 1.1fr;gap:40px;padding-bottom:40px;min-height:520px}
html body .depth-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#c9d4ee;background:rgba(255,255,255,.05);border:1px solid var(--p-line2);padding:7px 14px;border-radius:999px;font-size:11px;letter-spacing:.12em;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html body .depth-copy .status-dot{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18),0 0 12px #34d399}
html body .depth-copy h1{color:#fff;font-size:clamp(40px,4.3vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:750;margin:22px 0 20px}
html body .depth-copy h1{background:linear-gradient(180deg,#fff 30%,#b7c3e6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .depth-lead{color:var(--p-mute);font-size:17px;line-height:1.7;max-width:520px}
html body .depth-actions{gap:14px;margin-top:30px}
html body .depth-actions .btn{padding:15px 24px;font-size:15px}
html body .depth-how{color:#dbe3f5}
html body .depth-how span{color:var(--p-a3)}
html body .depth-search{background:rgba(255,255,255,.05);border:1px solid var(--p-line2);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 40px -20px rgba(0,0,0,.6);margin-top:28px}
html body .depth-search input{color:#fff;background:transparent}
html body .depth-search input::placeholder{color:#7d8aa8}
html body .depth-search .icon,html body .depth-search svg{color:#8b98b8}
html body .depth-search button{background:var(--p-grad);color:#fff;border-radius:11px;border:0}
html body .depth-tags span{color:#7d8aa8}
html body .depth-tags i{background:#3a4766}

html body .depth-stage{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--p-line2);border-radius:var(--p-r);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);color:var(--p-txt)}
html body .depth-stage .stage-heading{color:#9aa8c6;border-color:var(--p-line)}
html body .depth-stage .stage-heading span{color:#9aa8c6}
html body .depth-stage .stage-product,html body .depth-stage .stage-foot{border-color:var(--p-line)}
html body .depth-stage .stage-product span{color:#8fa0c8}
html body .depth-stage .stage-product h2 a,html body .depth-stage .stage-price{color:#fff}
html body .depth-stage .stage-foot span{color:#7d8aa8}
html body .depth-stage .stage-foot a{color:#c7d2ff}
/* WebGL hazırsa kart yerine 3D sahne */
html body .depth-stage.p3d-on{background:none;border:0;box-shadow:none;min-height:540px;overflow:visible;padding:0}
html body .depth-stage.p3d-on>*:not(.p3d-canvas):not(.stage-product){display:none!important}
html body .p3d-canvas{position:absolute;inset:-40px -60px -40px -40px;width:calc(100% + 100px);height:calc(100% + 80px);display:block;pointer-events:none}
html body .depth-stage.p3d-on .stage-product{position:absolute;left:4%;bottom:26px;z-index:2;display:flex;align-items:center;gap:22px;padding:14px 18px;border:1px solid var(--p-line2);border-radius:18px;background:rgba(10,16,32,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px -16px rgba(0,0,0,.7);animation:p3dFloat 6s ease-in-out infinite}
html body .depth-stage.p3d-on .stage-product h2{font-size:14px;margin:2px 0 0;max-width:240px}
html body .depth-stage.p3d-on .stage-product span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
html body .depth-stage.p3d-on .stage-price{font-weight:800;font-size:16px;background:var(--p-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
@keyframes p3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

html body .depth-assurances{position:relative;z-index:2;border:0;gap:16px;padding:0 0 56px;display:grid;grid-template-columns:repeat(3,1fr)}
html body .depth-assurances>div{background:rgba(255,255,255,.04);border:1px solid var(--p-line);border-radius:18px;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .3s var(--p-ease),border-color .3s,background .3s;border-left:1px solid var(--p-line)!important}
html body .depth-assurances>div:hover{transform:translateY(-3px);border-color:var(--p-line2);background:rgba(255,255,255,.06)}
html body .depth-assurances strong{color:#fff}
html body .depth-assurances small{color:var(--p-mute)}
html body .assurance-icon{background:linear-gradient(135deg,rgba(79,124,255,.25),rgba(139,92,246,.25));border:1px solid rgba(139,160,255,.3);color:#c7d2ff;border-radius:12px;box-shadow:0 8px 20px -8px rgba(79,124,255,.6)}

/* ---------- Koleksiyon ve ürün kartları ---------- */
html body .collection-section{background:#f4f6fb;position:relative}
html body .collection-heading h2,html body .store-faq h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.04em;font-weight:720;color:#0b1224}
html body .eyebrow{letter-spacing:.14em}
html body .collection-section .eyebrow,html body .store-faq .eyebrow{color:#5b6bff}
html body .collection-categories{border:0;gap:8px;display:flex;flex-wrap:wrap}
html body .collection-categories a{border:1px solid #dfe5f0;border-radius:999px;padding:8px 14px;background:#fff;box-shadow:var(--p-sh1);transition:all .2s var(--p-ease)}
html body .collection-categories a:hover{transform:translateY(-1px);box-shadow:var(--p-sh2)}
html body .collection-categories a.active{background:#0b1224;color:#fff;border-color:#0b1224}
html body .collection-categories a.active span{color:#9fb0d8}
html body .collection-categories a:after{display:none}

html body .product-grid{perspective:1400px}
html body .product-card{background:#fff;border:1px solid rgba(220,227,240,.9);border-radius:var(--p-r);padding:12px 12px 0;box-shadow:var(--p-sh2);transform-style:preserve-3d;transition:transform .45s var(--p-ease),box-shadow .45s var(--p-ease);will-change:transform;overflow:hidden}
html body .product-card:hover{box-shadow:var(--p-sh3);border-color:rgba(160,175,255,.5)}
html body .product-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 40%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
html body .product-card:hover:after{opacity:1}
html body .product-card-cover{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,24,48,.06)}
html body .product-cover{border-radius:16px;background:linear-gradient(160deg,#eef2ff,#e9edf7)}
html body .product-cover img{transition:transform .8s var(--p-ease)}
html body .product-card:hover .product-cover img{transform:scale(1.04)}
html body .preview-browser{background:rgba(255,255,255,.85)}
html body .product-cover--tool{background:radial-gradient(400px 200px at 50% 30%,rgba(124,92,255,.35),transparent 70%),linear-gradient(160deg,#0d1426,#141d34)}
html body .product-cover--tool .tool-product-art{color:#c7d2ff}
html body .product-cover--tool .tool-product-art span{color:#8f9cc0}
html body .product-cover--tool .tool-product-caption{color:#fff;font-weight:700}
html body .product-category{color:#5b6bff;letter-spacing:.12em}
html body .product-card h3,html body .product-title{color:#0b1224;font-weight:680;letter-spacing:-.03em}
html body .product-price{font-weight:800;font-size:22px;letter-spacing:-.02em;color:#0b1224}
html body .product-card-action{border-radius:10px;padding:7px 12px;background:#f1f4fb;color:#27325a;transition:background .2s,color .2s}
html body .product-card-action:hover{background:#0b1224;color:#fff}
html body .preview-open{background:var(--p-grad);color:#fff;border-radius:12px;box-shadow:0 10px 20px -8px rgba(91,92,255,.8)}

/* ---------- Nasıl çalışır: koyu, 3D basamaklar ---------- */
html body .depth-guide{background:radial-gradient(900px 500px at 85% 20%,rgba(79,124,255,.18),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(139,92,246,.16),transparent 60%),#080d1a}
html body .depth-guide h2{font-weight:720;font-size:clamp(32px,3.6vw,46px);color:#fff}
html body .depth-guide .eyebrow{color:#8ea0ff}
html body .depth-guide .guide-steps{display:grid;gap:14px;perspective:1000px}
html body .depth-guide .guide-steps li{border:1px solid var(--p-line)!important;border-radius:20px;padding:22px 24px!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 40px -24px rgba(0,0,0,.7);transition:transform .4s var(--p-ease),border-color .3s}
html body .depth-guide .guide-steps li:hover{transform:translateX(6px) rotateY(-4deg);border-color:var(--p-line2)!important}
html body .depth-guide .guide-steps li>span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--p-grad);color:#fff!important;font-weight:800!important;font-size:14px!important;box-shadow:0 12px 24px -10px rgba(124,92,255,.9),inset 0 1px 0 rgba(255,255,255,.3)}
html body .depth-guide .guide-steps h3{color:#fff;font-size:17px}
html body .depth-guide .guide-steps p{color:var(--p-mute);font-size:13px}

/* ---------- SSS ---------- */
html body .store-faq{background:#f4f6fb}
html body .faq-list{display:grid;gap:12px}
html body .faq-list details{background:#fff;border:1px solid #e3e8f2!important;border-radius:18px;padding:4px 20px;box-shadow:var(--p-sh1);transition:box-shadow .3s}
html body .faq-list details[open]{box-shadow:var(--p-sh2)}
html body .faq-list summary{color:#0b1224;font-weight:650}

/* ---------- Kapanış bandı ---------- */
html body .depth-closing{background:#f4f6fb;padding:20px 0 80px;border:0}
html body .depth-closing .container{position:relative;overflow:hidden;border-radius:28px;padding:56px;background:radial-gradient(600px 300px at 90% 0%,rgba(168,85,247,.45),transparent 60%),radial-gradient(500px 300px at 0% 100%,rgba(34,211,238,.25),transparent 60%),linear-gradient(135deg,#0b1226,#131c3a);box-shadow:var(--p-sh3);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
html body .depth-closing h2{color:#fff;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;font-weight:720}
html body .depth-closing .eyebrow{color:#a5b4ff}
html body .depth-closing .btn.btn-primary{background:#fff;color:#0b1224;box-shadow:0 14px 30px -10px rgba(255,255,255,.45)}

/* ---------- Footer ---------- */
html body .footer{background:#fff;border-top:1px solid #e6eaf2}

/* ---------- Kaydırınca beliren öğeler ---------- */
.p3d-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--p-ease),transform .9s var(--p-ease)}
.p3d-reveal.p3d-in{opacity:1;transform:none}

@media (max-width:1024px){
  html body .depth-hero{grid-template-columns:1fr;min-height:0;gap:20px}
  html body .depth-stage.p3d-on{min-height:420px}
  html body .p3d-canvas{inset:-20px -16px;width:calc(100% + 32px);height:calc(100% + 40px)}
}
@media (max-width:680px){
  html body .depth-intro{padding-top:36px}
  html body .depth-copy h1{font-size:40px}
  html body .depth-lead{font-size:15px}
  html body .depth-stage.p3d-on{min-height:340px;margin-right:0}
  html body .depth-stage.p3d-on .stage-product{left:0;right:0;bottom:6px;gap:12px}
  html body .depth-assurances{grid-template-columns:1fr;gap:10px}
  html body .depth-closing .container{padding:34px 24px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .p3d-reveal{opacity:1;transform:none;transition:none}
  html body .depth-stage.p3d-on .stage-product{animation:none}
}

/* ---------- Katalog sayfası ---------- */
html body .catalog-intro{position:relative;overflow:hidden;border-radius:28px;padding:48px 48px 44px;margin-top:28px;color:#fff;border:0;background:radial-gradient(600px 300px at 92% 10%,rgba(124,92,255,.45),transparent 60%),radial-gradient(500px 260px at 0% 100%,rgba(34,211,238,.22),transparent 60%),linear-gradient(135deg,#080d1a,#131c3a);box-shadow:var(--p-sh3)}
html body .catalog-intro:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,170,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,170,220,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}
html body .catalog-intro *{position:relative;color:inherit}
html body .catalog-intro h1{color:#fff;font-weight:750;letter-spacing:-.04em}
html body .catalog-intro p{color:var(--p-mute)}
html body .catalog-eyebrow{color:#a5b4ff!important}
html body .catalog-sidebar{border-radius:20px;box-shadow:var(--p-sh2);border:1px solid #e3e8f2;padding:18px}
html body .catalog-sidebar a{border-radius:12px}
html body .catalog-input-wrap{border-radius:14px;box-shadow:var(--p-sh1)}

/* ---------- Ürün detay sayfası ---------- */
html body .card{border-radius:var(--p-r);border-color:#e3e8f2;box-shadow:var(--p-sh2)}
html body .product-gallery{perspective:1600px}
html body .product-gallery .product-cover{border-radius:22px;box-shadow:0 2px 4px rgba(16,24,48,.06),0 30px 60px -20px rgba(24,36,90,.35),0 80px 120px -60px rgba(79,124,255,.45);transition:transform .6s var(--p-ease);transform-style:preserve-3d}
html body .product-detail-sidebar .card{position:sticky;top:96px;overflow:hidden}
html body .product-detail-sidebar .card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--p-grad)}
html body .product-detail-price{font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#0b1224,#3b4a8a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .product-detail-actions .btn{min-height:50px}
html body .related-products-heading h2{font-weight:720;letter-spacing:-.04em}

@media (max-width:680px){
  html body .depth-stage.p3d-on .stage-product{display:none!important}
  html body .depth-stage.p3d-on{min-height:300px}
  html body .catalog-intro{padding:30px 22px;border-radius:22px;margin-top:16px}
}