/* ===========================================================
   GURIZON · WEB TASARIM & YAZILIM — page-specific
   index1-mix.css ve logo-tasarimi.css'in üzerine yüklenir.
   Sadece bu sayfaya özel bileşenler buradadır.
   =========================================================== */

/* Hero özelleştirmeleri — logo sayfasındaki .lg-hero ile aynı pattern */
.wy-hero{padding:140px 0 60px;position:relative;overflow:hidden}
.wy-hero-grid{display:grid;gap:60px;grid-template-columns:1fr;align-items:center;position:relative;z-index:2}
@media(min-width:1024px){.wy-hero-grid{grid-template-columns:1fr 1.05fr;gap:70px}}
.wy-hero h1{
  font-size:clamp(40px,6.4vw,80px);font-weight:900;line-height:1;letter-spacing:-.03em;
  color:#0a0a0a !important;margin:0 0 24px;
}
.wy-hero h1 .strike{
  text-decoration:line-through;text-decoration-thickness:5px;
  text-decoration-color:#dc2626;color:#a8a08c;font-weight:800;
}

/* ===== Browser Mockup ===== */
.bm-stage{
  position:relative;perspective:1500px;transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
  min-height:540px;
}
.browser-mockup{
  width:100%;max-width:580px;
  background:#ffffff;
  border:1px solid #ecdfd9;border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 30px 80px -20px rgba(127,20,20,.30),
    0 16px 40px -16px rgba(127,20,20,.18),
    0 1px 0 rgba(255,255,255,.7) inset;
  transform:rotateY(-4deg) rotateX(2deg);
  transform-origin:center center;
  transition:transform .5s ease;
}
.browser-mockup:hover{transform:rotateY(0deg) rotateX(0deg)}
.bm-bar{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;
  background:linear-gradient(180deg,#fbf6ed,#f5efe3);
  border-bottom:1px solid #ecdfd9;
}
.bm-dots{display:flex;gap:6px}
.bm-dots span{width:11px;height:11px;border-radius:50%;background:#d4cdba}
.bm-dots span:first-child{background:#dc2626}
.bm-dots span:nth-child(2){background:#facc15}
.bm-dots span:nth-child(3){background:#16a34a}
.bm-url{
  flex:1;padding:5px 12px;
  background:#fff;border:1px solid #ecdfd9;border-radius:8px;
  font:600 12px/1 'JetBrains Mono', monospace;
  color:#525252;letter-spacing:.2px;
}
.bm-url i{color:#16a34a;margin-right:6px;font-size:10px}
.bm-meta{
  font:800 10.5px/1 'JetBrains Mono', monospace;
  letter-spacing:1px;color:#16a34a;
  padding:5px 9px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.25);
  border-radius:999px;text-transform:uppercase;
  white-space:nowrap;
}

.bm-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.bm-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #f1e6dc}
.bm-logo{
  font:900 14px/1 'Manrope';color:#0a0a0a;letter-spacing:-.02em;
  display:flex;align-items:center;gap:6px;
}
.bm-logo::before{content:"";width:14px;height:14px;border-radius:4px;background:linear-gradient(120deg,#dc2626,#7f1d1d)}
.bm-nav-links{display:flex;gap:14px}
.bm-nav-links span{height:6px;width:38px;border-radius:3px;background:#f1e6dc}
.bm-nav-cta{height:24px;width:80px;border-radius:999px;background:linear-gradient(120deg,#dc2626,#7f1d1d)}

.bm-hero-section{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px}
.bm-line{height:14px;border-radius:4px;background:linear-gradient(90deg,#0a0a0a,#3f3a32)}
.bm-line.alt{background:linear-gradient(90deg,#dc2626,#7f1d1d)}
.bm-line.thin{height:6px;background:#e8dfd0}
.bm-line.w90{width:90%}.bm-line.w70{width:70%}.bm-line.w50{width:50%}.bm-line.w40{width:40%}
.bm-cta-row{display:flex;gap:8px;margin-top:6px}
.bm-cta-row > div{height:30px;border-radius:999px}
.bm-cta-row .p{width:120px;background:linear-gradient(120deg,#dc2626,#7f1d1d)}
.bm-cta-row .s{width:90px;background:transparent;border:1.5px solid #0a0a0a}

.bm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.bm-card{
  height:74px;background:#fbf6ed;border:1px solid #ecdfd9;border-radius:10px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:10px;gap:5px;
}
.bm-card .ic{width:18px;height:18px;border-radius:5px;background:rgba(220,38,38,.18);margin-bottom:auto}
.bm-card .l{height:5px;border-radius:3px;background:#0a0a0a}
.bm-card .l2{height:4px;border-radius:3px;background:#d4cdba;width:70%}

/* Floating perf badge */
.bm-badge{
  position:absolute;
  padding:11px 16px;border-radius:999px;
  background:#ffffff;border:1.5px solid #7f1d1d;
  box-shadow:5px 5px 0 #7f1d1d;
  font:800 12px/1 'Manrope';color:#0a0a0a;
  display:inline-flex;align-items:center;gap:8px;
  z-index:5;
}
.bm-badge .pi{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#fff;
}
.bm-badge.b1{top:-12px;left:-22px}
.bm-badge.b1 .pi{background:#16a34a}
.bm-badge.b2{bottom:24px;right:-30px}
.bm-badge.b2 .pi{background:#dc2626}
@media(max-width:760px){.bm-badge{display:none}}
@media(max-width:1023px){.browser-mockup{transform:none}}

/* ===== Tech Stack ===== */
.tech-wrap{padding:80px 0;position:relative}
.tech-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:1180px;margin:0 auto;
}
@media(min-width:640px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.tech-grid{grid-template-columns:repeat(6,1fr)}}
.tech{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px 18px;
  background:#ffffff;border:1px solid #ecdfd9;border-radius:14px;
  transition:transform .2s,border-color .2s,box-shadow .25s;
  text-align:center;
}
.tech:hover{
  transform:translateY(-3px);border-color:rgba(220,38,38,.35);
  box-shadow:0 14px 28px -14px rgba(220,38,38,.30);
}
.tech-ic{
  width:48px;height:48px;border-radius:12px;
  background:#fbf6ed;border:1px solid #ecdfd9;
  display:grid;place-items:center;
  color:#0a0a0a;font-size:22px;
}
.tech strong{font:800 12px/1 'JetBrains Mono', monospace;letter-spacing:.6px;color:#0a0a0a;text-transform:uppercase}
.tech span{font:600 10.5px/1.3 'Manrope';color:#71717a;letter-spacing:.3px}

/* ===== Service grid (modüllerden farklı, 6 kart hero card) ===== */
.svc-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
  max-width:1240px;margin:0 auto;
}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.wy-svc{
  background:#ffffff;border:1px solid #ecdfd9;border-radius:18px;
  padding:28px 26px;
  box-shadow:0 8px 28px -10px rgba(127,20,20,.10),0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .25s,border-color .25s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.wy-svc::before{
  content:"";position:absolute;top:-30%;right:-30%;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(220,38,38,.10),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.wy-svc:hover{
  transform:translateY(-4px);border-color:rgba(220,38,38,.40);
  box-shadow:0 24px 50px -20px rgba(220,38,38,.30);
}
.wy-svc:hover::before{opacity:1}
.wy-svc-ic{
  width:54px;height:54px;border-radius:14px;
  background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.18);
  color:#dc2626;display:grid;place-items:center;font-size:21px;
  margin-bottom:18px;
}
.wy-svc h3{font-size:20px;font-weight:900;color:#0a0a0a;margin:0 0 10px;letter-spacing:-.01em}
.wy-svc p{font-size:14px;color:#525252;line-height:1.6;margin:0 0 14px;font-weight:500}
.wy-svc p strong{color:#0a0a0a;font-weight:700}
.wy-svc ul{list-style:none;padding:0;margin:0}
.wy-svc li{
  display:flex;align-items:center;gap:8px;
  font:600 12.5px/1.4 'Manrope';color:#3f3a32;
  padding:5px 0;
}
.wy-svc li i{color:#dc2626;font-size:11px}