/* ==========================================================================
   HÜSEYİN YAMAN — Web Yazılım / Mobil Uygulama / Dijital Pazarlama
   ========================================================================== */

:root{
  --color-primary: #ff6a13;
  --color-primary-soft: rgba(255,106,19,.6);
  --color-secondary: #101010;
  --color-black: #000000;
  --color-soft-black: #0b0b0b;
  --color-glow: rgba(255,106,19,.25);
  --color-mist: rgba(255,255,255,.06);
  --color-line: rgba(255,106,19,.2);
  --color-text: #ffffff;
  --color-text-dim: rgba(255,255,255,.68);
  --color-text-faint: rgba(255,255,255,.42);

  --font-head: "Montserrat", "sans-serif";
  --font-body: "Inter", "sans-serif";

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.22,.9,.35,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--color-black);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 860px){ body{ cursor: auto; } }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font: inherit; background:none; border:none; color:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

::selection{ background: var(--color-primary); color:#000; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--color-black); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--color-primary), #7a3200); border-radius:10px; }

/* ==========================================================================
   Custom cursor — "TargetCursor" style: a dot + 4 corner brackets that
   smoothly follow the mouse and snap onto the bounding box of any
   [data-cursor] element, plus a faint trailing dot chain.
   ========================================================================== */
.target-cursor-wrapper{
  position: fixed; top:0; left:0; width:0; height:0;
  pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
}
.target-cursor-dot{
  position:absolute; left:50%; top:50%; width:5px; height:5px;
  background: var(--color-primary); border-radius:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px rgba(255,106,19,.6);
}
.target-cursor-corner{
  position:absolute; left:50%; top:50%; width:12px; height:12px;
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 6px rgba(255,106,19,.4);
  transition: opacity .2s ease;
}
.corner-tl{ border-right:none; border-bottom:none; }
.corner-tr{ border-left:none; border-bottom:none; }
.corner-bl{ border-right:none; border-top:none; }
.corner-br{ border-left:none; border-top:none; }

.cursor-trail{
  position: fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background: var(--color-primary); pointer-events:none; z-index:9998;
  mix-blend-mode: screen; opacity:.8;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--color-primary); color:#111; box-shadow: 0 8px 24px rgba(255,106,19,.28); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,106,19,.45); }
.btn--outline{ background: rgba(16,16,16,.4); color: var(--color-primary); border-color: rgba(255,106,19,.45); backdrop-filter: blur(8px); }
.btn--outline:hover{ background: rgba(255,106,19,.1); border-color: var(--color-primary); transform: translateY(-2px); }
.btn--sm{ padding:10px 20px; font-size:12px; }

/* ==========================================================================
   Header — logo left / nav center / CTA right (deliberately different
   rhythm from a centered-logo layout)
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:200;
  height:96px; display:flex; align-items:center;
  background: linear-gradient(120deg,rgba(10,10,10,.9),rgba(16,10,6,.9)),
              radial-gradient(circle at 10% 10%, rgba(255,106,19,.1), transparent 45%);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,106,19,.12);
  transition: height .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ height:68px; box-shadow: 0 16px 30px rgba(0,0,0,.35); }
.site-header__bar{
  width:100%; max-width: var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand-mark{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand-mark img{ width:42px; height:42px; border-radius:50%; }
.brand-mark__name{ font-family: var(--font-head); font-weight:800; font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:#fff; }

.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a:not(.btn){
  font-family: var(--font-head); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.82);
  position:relative; padding-bottom:4px;
}
.site-nav a:not(.btn):hover{ color: var(--color-primary); }
.site-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--color-primary); transition: width .3s var(--ease);
}
.site-nav a:not(.btn):hover::after{ width:100%; }
.site-nav__cta{ display:none; }

.header-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border:1px solid rgba(255,106,19,.35); border-radius:10px;
}
.nav-toggle span{ width:18px; height:2px; background: var(--color-primary); margin:0 auto; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height: 92vh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom: 80px; background: var(--color-black);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,106,19,.16), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(255,106,19,.08), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; }
.hero__kicker{ font-family: var(--font-head); font-weight:700; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color: rgba(255,106,19,.85); margin-bottom:18px; }
.hero__title{
  font-family: var(--font-head); font-weight:900; text-transform:uppercase;
  font-size: clamp(30px, 5vw, 68px); line-height:1.08; letter-spacing:-.01em; max-width:20ch;
  background: linear-gradient(96deg,#fff 40%, var(--color-primary) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__subtitle{ margin-top:22px; max-width:620px; font-size:16px; color: var(--color-text-dim); }
.hero__type{ margin-top:30px; font-family: var(--font-head); font-weight:800; text-transform:uppercase; font-size: clamp(16px,2vw,22px); color: var(--color-primary); min-height:1.4em; }
.hero__type .type-cursor{ color:#fff; animation: blink 1s step-end infinite; }
.hero__ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero__stat{ display:flex; flex-direction:column; gap:4px; }
.hero__stat strong{ font-family: var(--font-head); font-weight:800; font-size:20px; color:#fff; }
.hero__stat span{ font-size:12px; color: var(--color-text-faint); text-transform:uppercase; letter-spacing:.06em; }
.hero__scroll{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,255,255,.5); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scroll .stick{ width:1px; height:32px; background: linear-gradient(var(--color-primary), transparent); animation: scrollStick 1.8s ease-in-out infinite; }

@keyframes blink{ 50%{ opacity:0; } }
@keyframes scrollStick{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ==========================================================================
   Sections / headings
   ========================================================================== */
.section{ padding: 110px 0; position:relative; }
.section-heading{ margin-bottom:48px; max-width:760px; }
.section-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color: rgba(255,106,19,.85); margin-bottom:14px; font-weight:700; font-family: var(--font-head); }
.section-title{ font-family: var(--font-head); font-size: clamp(26px,4.2vw,44px); font-weight:800; text-transform:uppercase; line-height:1.15; color:#fff; }
.section--alt{ background: linear-gradient(180deg, rgba(255,106,19,.05), transparent 40%); }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  position:relative; overflow:hidden;
  background: rgba(16,16,16,.65);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform: translateY(-6px); border-color: rgba(255,106,19,.5); box-shadow: 0 26px 50px rgba(0,0,0,.5); }
.card-spotlight{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition: opacity .5s ease;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,106,19,.16), transparent 70%);
}
.card:hover .card-spotlight{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card-pattern{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }

.pattern-circuit{ background-image: linear-gradient(rgba(255,106,19,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,106,19,.14) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%); }
.pattern-dots{ background-image: radial-gradient(rgba(255,106,19,.35) 1.4px, transparent 1.4px); background-size: 16px 16px; mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 65%); }
.pattern-grid{ background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 75%); }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.service-card__icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(255,106,19,.12); color: var(--color-primary); margin-bottom:20px; }
.service-card__icon svg{ width:22px; height:22px; }
.service-card h3{ font-family: var(--font-head); font-size:19px; font-weight:800; text-transform:uppercase; margin-bottom:12px; }
.service-card p{ color: var(--color-text-dim); font-size:14.5px; margin-bottom:18px; }
.service-card ul{ display:grid; gap:9px; }
.service-card li{ position:relative; padding-left:20px; font-size:13.5px; color: var(--color-text-dim); }
.service-card li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--color-primary); }

/* ---------- Why us ---------- */
.whyus-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.whyus-card{ padding:28px; border-radius: var(--radius-lg); border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.whyus-card__icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,106,19,.12); color: var(--color-primary); margin-bottom:18px; }
.whyus-card__icon svg{ width:20px; height:20px; }
.whyus-card h3{ font-size:16px; font-weight:800; margin-bottom:10px; font-family: var(--font-head); text-transform:uppercase; }
.whyus-card p{ font-size:13.5px; color: var(--color-text-dim); line-height:1.55; }

/* ---------- Process ---------- */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.process-card{ padding:28px; border-radius: var(--radius-lg); border:1px solid var(--color-line); background: rgba(16,16,16,.5); position:relative; }
.process-card__no{ font-family: var(--font-head); font-weight:900; font-size:34px; color: rgba(255,106,19,.35); display:block; margin-bottom:14px; }
.process-card h3{ font-size:16px; font-weight:800; text-transform:uppercase; margin-bottom:10px; font-family: var(--font-head); }
.process-card p{ font-size:13.5px; color: var(--color-text-dim); line-height:1.55; }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns: .8fr 1.2fr; gap:64px; align-items:center; }
.about__avatar{ aspect-ratio: 4/5; border-radius: 20px; position:relative; overflow:hidden; background: linear-gradient(155deg, #1a1a1a, #0b0b0b 60%, #2a1204); border:1px solid rgba(255,106,19,.25); }
.about__avatar::before{ content:"HY"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--font-head); font-weight:900; font-size:110px; color: rgba(255,106,19,.16); }
.about__lead{ font-family: var(--font-head); font-weight:800; font-size: clamp(22px,3vw,32px); text-transform:uppercase; margin-bottom:20px; white-space:pre-line; line-height:1.25; }
.about__body{ color: var(--color-text-dim); font-size:16px; max-width:56ch; }

/* ---------- Contact ---------- */
.contact-cta{ text-align:center; max-width:720px; margin:0 auto; }
.contact-cta .section-title{ margin-top:6px; }
.contact-cta__desc{ margin-top:20px; color: var(--color-text-dim); font-size:16px; }
.cta-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.contact-bar{
  margin-top:56px; padding:30px; border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.contact-bar p{ font-size:14px; color: var(--color-text-dim); }
.contact-bar strong{ color:#fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding-top:60px; margin-top:60px; }
.footer-top{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-brand img{ width:46px; height:46px; border-radius:50%; margin-bottom:16px; }
.footer-brand p{ color: var(--color-text-faint); font-size:14px; max-width:34ch; }
.footer-col h5{ font-family: var(--font-head); font-size:12px; text-transform:uppercase; letter-spacing:.14em; color: rgba(255,255,255,.4); margin-bottom:18px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ font-size:14px; color: var(--color-text-dim); }
.footer-col a:hover{ color: var(--color-primary); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:24px 0; text-align:center; font-size:13px; color: var(--color-text-faint); }

/* ==========================================================================
   Stagger reveal delays
   ========================================================================== */
.stagger .reveal:nth-child(1){ transition-delay:.05s; }
.stagger .reveal:nth-child(2){ transition-delay:.15s; }
.stagger .reveal:nth-child(3){ transition-delay:.25s; }
.stagger .reveal:nth-child(4){ transition-delay:.35s; }
.stagger .reveal:nth-child(5){ transition-delay:.45s; }
.stagger .reveal:nth-child(6){ transition-delay:.55s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .whyus-grid, .process-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px){
  .about{ grid-template-columns:1fr; }
  .about__avatar{ max-width:280px; margin:0 auto; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .site-nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:68px; left:0; right:0; z-index:150;
    background: rgba(8,8,8,.98); backdrop-filter: blur(20px);
    border-bottom:1px solid rgba(255,106,19,.15);
    padding: 10px 24px 24px;
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .site-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .site-nav a:not(.btn){ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
  .site-nav__cta{ display:inline-flex; margin-top:16px; }
  .header-actions__cta{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header{ height:68px; }
}
@media (max-width: 640px){
  .services-grid, .whyus-grid, .process-grid, .footer-top{ grid-template-columns:1fr; }
  .section{ padding:72px 0; }
  .hero{ min-height:100vh; padding-bottom:56px; }
  .hero__stats{ gap:24px; }
  .contact-bar{ flex-direction:column; align-items:flex-start; }
}