/* ===========================================================
   GURIZON · Özel Yazılım Geliştirme landing page styles
   (/ozel-yazilim-gelistirme)
   LIGHT THEME — the live site runs the cream/light skin from
   index1-mix.css (html,body bg #f3ece0, dark text). This file
   styles page-specific components natively for that palette:
     card #ffffff · soft #fbf6ed · border #ecdfd9
     heading #0a0a0a · body #3f3a32 · secondary #71717a
     red #dc2626 / deep #7f1d1d · check green #16a34a
   The hero browser-mock stays DARK on purpose — same contrast
   rule as the code block / ticker / footer in index1-mix.
   =========================================================== */

/* ---- spec chips ---- */
.spec-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.spec{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #ecdfd9;
  border-radius:999px;background:rgba(255,255,255,.75);font-size:13px;font-weight:700;color:#3f3a32;
  box-shadow:0 2px 10px -4px rgba(127,20,20,.08)}
.spec i{color:#dc2626}

/* ============ HERO ============ */
.oy-hero{position:relative;overflow:hidden}
.oy-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
@media(max-width:900px){.oy-hero-grid{grid-template-columns:1fr;gap:34px}}
.oy-hero h1{font-size:clamp(33px,4.4vw,56px);line-height:1.07;margin-bottom:20px}
.oy-hero .eyebrow{margin-bottom:20px}

.oy-hero h1 .strike{position:relative;color:#a8a08c;font-weight:800}
.oy-hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;
  background:linear-gradient(120deg,#dc2626 0%,#7f1d1d 100%);transform:rotate(-3deg);border-radius:3px}
/* static headline gradient — own class so no global typewriter script hooks it */
.oy-hero h1 .oy-grad{
  background:linear-gradient(120deg,#dc2626 0%,#b91c1c 50%,#7f1d1d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:none}
.oy-hero .hero-sub{max-width:560px;font-size:16px;line-height:1.6}
.oy-hero .hero-sub strong{color:#7f1d1d !important;font-weight:800}

.oy-hero-trust{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(220,38,38,.15)}
.oy-hero-trust .stars{color:#d97706;font-size:14px;letter-spacing:2px}
.oy-hero-trust .t{font-size:13px;color:#3f3a32}
.oy-hero-trust .t b{color:#0a0a0a}
.oy-hero-trust .sep{width:1px;height:18px;background:rgba(127,20,20,.15)}

/* ===========================================================
   HERO "APP BUILDS ITSELF" ANIMATION (.oyb)
   Dark browser mock (contrast piece, like the code block):
   code lines type on the left, UI blocks assemble on the right,
   progress bar fills, ship badge pops. 9s loop. Pure CSS;
   static finished state for reduced-motion.
   =========================================================== */
.oyb{position:relative;border:1px solid rgba(127,20,20,.25);border-radius:24px;overflow:hidden;
  box-shadow:0 40px 90px -35px rgba(127,20,20,.45),0 10px 30px -10px rgba(127,20,20,.20);
  background:radial-gradient(120% 90% at 80% -12%,rgba(239,68,68,.16),transparent 60%),
    linear-gradient(165deg,#1a1a1d,#0a0a0b)}
.oyb-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03)}
.oyb-dot{width:10px;height:10px;border-radius:50%}
.oyb-dot.r{background:#f87171}.oyb-dot.y{background:#fbbf24}.oyb-dot.g{background:#34d399}
.oyb-url{flex:1;margin-left:8px;padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);font:600 11px "JetBrains Mono",monospace;color:#a1a1aa}
.oyb-url b{color:#f87171}

.oyb-body{display:grid;grid-template-columns:1fr 1.15fr;gap:0;min-height:250px}
@media(max-width:560px){.oyb-body{min-height:210px}}

/* --- left: code panel, lines "type" in --- */
.oyb-code{padding:18px 16px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:9px;overflow:hidden}
.oyb-ln{height:9px;border-radius:5px;background:linear-gradient(90deg,rgba(239,68,68,.6),rgba(255,255,255,.16));
  transform-origin:left center;transform:scaleX(0);animation:oybLn 9s ease-in-out infinite}
.oyb-ln:nth-child(1){width:72%;animation-delay:.15s}
.oyb-ln:nth-child(2){width:88%;animation-delay:.5s;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.09))}
.oyb-ln:nth-child(3){width:58%;animation-delay:.85s}
.oyb-ln:nth-child(4){width:80%;animation-delay:1.2s;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.09))}
.oyb-ln:nth-child(5){width:66%;animation-delay:1.55s}
.oyb-ln:nth-child(6){width:84%;animation-delay:1.9s;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.09))}
.oyb-ln:nth-child(7){width:48%;animation-delay:2.25s}
@keyframes oybLn{
  0%{transform:scaleX(0);opacity:0}
  6%{transform:scaleX(1);opacity:1}
  88%{transform:scaleX(1);opacity:1}
  96%,100%{transform:scaleX(0);opacity:0}
}

/* --- right: UI assembles from blocks --- */
.oyb-ui{padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.oyb-el{border-radius:9px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);
  opacity:0;transform:translateY(10px) scale(.96);animation:oybEl 9s ease-in-out infinite}
.oyb-el.hd{height:30px;background:linear-gradient(90deg,rgba(239,68,68,.32),rgba(255,255,255,.06));animation-delay:2.7s}
.oyb-el.hr{height:44px;animation-delay:3.15s;background:linear-gradient(160deg,rgba(239,68,68,.22),rgba(255,255,255,.04))}
.oyb-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.oyb-cards .oyb-el{height:38px}
.oyb-cards .oyb-el:nth-child(1){animation-delay:3.6s}
.oyb-cards .oyb-el:nth-child(2){animation-delay:3.85s}
.oyb-cards .oyb-el:nth-child(3){animation-delay:4.1s}
.oyb-el.ft{height:24px;width:56%;animation-delay:4.5s}
@keyframes oybEl{
  0%,20%{opacity:0;transform:translateY(10px) scale(.96)}
  32%{opacity:1;transform:translateY(0) scale(1)}
  88%{opacity:1;transform:translateY(0) scale(1)}
  96%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}

/* progress + ship badge */
.oyb-foot{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}
.oyb-prog{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.oyb-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(120deg,#ef4444,#dc2626);
  transform-origin:left center;transform:scaleX(0);animation:oybProg 9s ease-in-out infinite;
  box-shadow:0 0 12px rgba(239,68,68,.6)}
@keyframes oybProg{0%{transform:scaleX(0)}55%{transform:scaleX(.72)}72%{transform:scaleX(1)}90%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
.oyb-ship{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:700 11px "JetBrains Mono",monospace;letter-spacing:.5px;
  background:rgba(16,185,129,.14);border:1px solid rgba(52,211,153,.45);color:#6ee7b7;
  opacity:0;transform:scale(.8);animation:oybShip 9s ease-in-out infinite}
@keyframes oybShip{0%,68%{opacity:0;transform:scale(.8)}75%{opacity:1;transform:scale(1.06)}78%{transform:scale(1)}90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.8)}}

/* tech chips under the mock */
.oyb-stack{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.oyb-tech{font:700 11px "JetBrains Mono",monospace;color:#d4d4d8;padding:5px 11px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.oyb-cap{text-align:center;padding:0 16px 18px;font:600 12px "JetBrains Mono",monospace;color:#a1a1aa;letter-spacing:.3px}
.oyb-cap b{color:#fff}

@media(prefers-reduced-motion:reduce){
  .oyb-ln{transform:scaleX(1);opacity:1;animation:none}
  .oyb-el{opacity:1;transform:none;animation:none}
  .oyb-prog i{transform:scaleX(1);animation:none}
  .oyb-ship{opacity:1;transform:none;animation:none}
}

/* ============ IDEA / USE-CASE GRID ============ */
.oy-idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.oy-idea-grid{grid-template-columns:1fr}}
.oy-idea{border:1px solid #ecdfd9;border-radius:18px;padding:24px;background:#ffffff;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.10),0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.oy-idea:hover{transform:translateY(-4px);border-color:rgba(220,38,38,.40);
  box-shadow:0 30px 60px -25px rgba(220,38,38,.30),0 6px 18px rgba(220,38,38,.10)}
.oy-idea-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:18px;
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.18);color:#dc2626;margin-bottom:16px}
.oy-idea h3{font-size:17px;margin:0 0 8px;color:#0a0a0a}
.oy-idea p{color:#3f3a32;font-size:14px;line-height:1.6;margin:0}
.oy-idea .ex{display:block;margin-top:10px;font-size:12px;color:#71717a;line-height:1.5}
.oy-idea .ex b{color:#7f1d1d;font-weight:800}

/* ============ WHY FAST ============ */
.oy-fast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.oy-fast-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.oy-fast-grid{grid-template-columns:1fr}}
.oy-fast{border:1px solid #ecdfd9;border-radius:18px;padding:24px 20px;background:#ffffff;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.10);
  transition:transform .22s,border-color .22s,box-shadow .22s}
.oy-fast:hover{transform:translateY(-4px);border-color:rgba(220,38,38,.40);
  box-shadow:0 28px 56px -25px rgba(220,38,38,.28)}
.oy-fast i{font-size:22px;color:#dc2626;margin-bottom:14px;display:block}
.oy-fast h3{font-size:16px;margin:0 0 8px;color:#0a0a0a}
.oy-fast p{color:#3f3a32;font-size:13.5px;line-height:1.6;margin:0}

/* ============ COMPARISON TABLE (Ajans vs Gurizon vs Ekip) ============ */
.oy-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px 8px}
.oy-cmp{width:100%;min-width:720px;max-width:980px;margin:0 auto;border-collapse:separate;border-spacing:0;
  border:1px solid #ecdfd9;border-radius:20px;overflow:hidden;background:#ffffff;
  box-shadow:0 20px 50px -20px rgba(127,20,20,.18)}
.oy-cmp th,.oy-cmp td{padding:16px 18px;text-align:center;font-size:14px;border-bottom:1px solid #f1e6dc}
.oy-cmp tr:last-child td{border-bottom:0}
.oy-cmp th{font-size:15px;font-weight:900;color:#0a0a0a;background:#fbf6ed}
.oy-cmp td:first-child,.oy-cmp th:first-child{text-align:left;color:#1a1612;font-weight:800;font-size:13.5px}
.oy-cmp td{color:#3f3a32}
.oy-cmp td i.fa-xmark{color:#b91c1c;margin-right:6px;opacity:.75}
.oy-cmp td i.fa-check{color:#16a34a;margin-right:6px}
/* highlighted Gurizon column */
.oy-cmp .hl{background:linear-gradient(180deg,#fff5f3,rgba(220,38,38,.06));color:#7f1d1d;font-weight:800}
.oy-cmp th.hl{background:linear-gradient(120deg,#dc2626,#7f1d1d);color:#fff;position:relative}
.oy-cmp th.hl .star{margin-right:6px}
.oy-cmp td.hl b{color:#0a0a0a}
.oy-cmp td.hl i.fa-check{color:#16a34a}
.oy-cmp-note{max-width:980px;margin:22px auto 0;text-align:center;padding:16px 20px;border-radius:14px;
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#7f1d1d;font-weight:800;font-size:15px}
.oy-cmp-note b{color:#0a0a0a}
.oy-cmp-hint{text-align:center;color:#71717a;font-size:12.5px;margin-top:12px;display:none}
.oy-cmp-hint i{color:#dc2626}
@media(max-width:780px){.oy-cmp-hint{display:block}}

/* ============ PROCESS / TIMELINE ============ */
.oy-steps{position:relative;max-width:860px;margin:0 auto;display:grid;gap:20px}
.oy-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  border:1px solid #ecdfd9;border-radius:18px;padding:22px 24px;background:#ffffff;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.08);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.oy-step:hover{border-color:rgba(220,38,38,.40);transform:translateX(4px);
  box-shadow:0 24px 50px -22px rgba(220,38,38,.28)}
.oy-step-num{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  font:900 18px "Manrope",sans-serif;background:linear-gradient(120deg,#dc2626,#7f1d1d);color:#fff;
  box-shadow:0 12px 28px -8px rgba(220,38,38,.50)}
.oy-step h3{margin:0 0 6px;font-size:18px;color:#0a0a0a}
.oy-step p{margin:0;color:#3f3a32;font-size:14px;line-height:1.65}
.oy-step p strong{color:#0a0a0a}
.oy-step .when{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;
  font-weight:800;color:#b91c1c}

/* ============ TRANSPARENCY / WEEKLY DEMO STRIP ============ */
.oy-demo{max-width:920px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.oy-demo{grid-template-columns:1fr}}
.oy-demo-item{display:flex;gap:14px;align-items:flex-start;border:1px solid #ecdfd9;border-radius:16px;
  padding:20px;background:#ffffff;box-shadow:0 6px 24px -8px rgba(127,20,20,.08)}
.oy-demo-item i{font-size:18px;color:#dc2626;margin-top:2px}
.oy-demo-item strong{display:block;font-size:15px;margin-bottom:4px;color:#0a0a0a}
.oy-demo-item span{font-size:13px;color:#3f3a32;line-height:1.55}

/* ============ LEAD FORM ============ */
.oy-form-wrap{max-width:680px;margin:0 auto}
.oy-form{border:1px solid #ecdfd9;border-radius:22px;padding:32px;
  background:#ffffff;
  box-shadow:0 30px 70px -30px rgba(127,20,20,.25),0 10px 26px -8px rgba(127,20,20,.10)}
@media(max-width:560px){.oy-form{padding:22px}}
.oy-field{margin-bottom:18px}
.oy-field label{display:block;font-size:13px;font-weight:800;margin-bottom:8px;color:#1a1612}
.oy-field label .req{color:#dc2626}
.oy-input,.oy-textarea,.oy-select{width:100%;background:#fbf6ed;border:1px solid #ecdfd9;
  border-radius:12px;padding:14px 16px;color:#1a1612;font:500 15px "Manrope",sans-serif;
  transition:border-color .2s,background .2s}
.oy-input:focus,.oy-textarea:focus,.oy-select:focus{outline:none;border-color:#dc2626;background:#fff5f3}
.oy-input::placeholder,.oy-textarea::placeholder{color:#a8a08c}
.oy-textarea{resize:vertical;min-height:110px}
.oy-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237f1d1d' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.oy-select option{background:#ffffff;color:#1a1612}
.oy-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.oy-row{grid-template-columns:1fr}}

.oy-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#3f3a32;line-height:1.5;margin:6px 0 18px}
.oy-consent input{margin-top:2px;accent-color:#dc2626;width:16px;height:16px;flex-shrink:0}
.oy-consent a{color:#7f1d1d;border-bottom:1px solid currentColor}
.oy-submit{width:100%;justify-content:center;font-size:16px;padding:16px;border:0;cursor:pointer}
.oy-submit:disabled{opacity:.6;cursor:not-allowed}
.oy-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:18px;
  font-size:12px;color:#71717a;font-weight:600}
.oy-trust span i{color:#16a34a;margin-right:5px}

.oy-alert{border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:16px;display:none}
.oy-alert.err{display:block;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.35);color:#b91c1c;font-weight:600}
.oy-success{display:none;text-align:center;padding:30px 10px}
.oy-success.show{display:block}
.oy-success .ic{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-size:28px;background:rgba(22,163,74,.10);color:#16a34a;border:1px solid rgba(22,163,74,.30)}
.oy-success h3{font-size:22px;margin:0 0 10px;color:#0a0a0a}
.oy-success p{color:#3f3a32;font-size:15px;line-height:1.6;margin:0 auto;max-width:420px}
.oy-success p a{color:#7f1d1d !important;border-bottom:1px solid currentColor}