#project-filters{display:flex;flex-wrap:wrap;gap:50px;margin:100px 0 75px}
#project-filters .filter{display:inline-block;padding:14px 20px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.08);color:var(--text);font-weight:700;text-decoration:none;cursor:pointer;font-size:1.05rem;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
#project-filters .filter.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101a;border:none}
#project-filters .filter:hover{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(255,255,255,.04) inset}
#project-filters .filter.active:hover{filter:brightness(1.05)}

/* Mobile centering for projects heading */
@media (max-width: 768px){
  #projects .container{text-align:center}
  #projects .pill{display:none}
  #projects .section-title{margin-left:auto;margin-right:auto;text-align:center;max-width:22ch}
  #projects .section-title:after{display:none}
  #project-filters{overflow-x:auto;flex-wrap:nowrap;gap:12px;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px;scroll-snap-type:x proximity}
  #project-filters .filter{flex:0 0 auto;scroll-snap-align:start}
}
#blog-mini .blog-more{display:grid;place-items:center;margin-top:56px}
#blog-mini .blog-more .btn{color:var(--text) !important}
/* Careers Page */
body.careers-page{background:var(--bg)}
.careers-marquee{position:relative;background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(96,165,250,.08)), var(--bg);color:var(--text);overflow:hidden;padding:8px 0}
/* fade edges left/right for a cleaner look */
.careers-marquee{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.careers-marquee .rail{display:flex;width:200%;animation:careerMoveRTL 38s linear infinite;filter:drop-shadow(0 14px 34px rgba(0,0,0,.25))}
.careers-marquee .track{flex:0 0 50%;display:flex;gap:0;align-items:center}
.careers-marquee span{font-size:clamp(58px,12.5vw,150px);font-weight:900;font-style:italic;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.94);text-shadow:0 6px 18px rgba(0,0,0,.28);-webkit-text-stroke:2px rgba(255,255,255,.08);font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
@media(max-width:780px){
  .careers-marquee .track{gap:50px}
  .careers-marquee span{font-size:clamp(44px,14vw,120px);letter-spacing:1.2px}
}
/* Blog page: smaller proportional ARLINK marquee - single line */
.blog-page .careers-marquee{padding:4px 0}
.blog-page .careers-marquee span{font-size:clamp(20px,5.4vw,64px)}
.blog-page .careers-marquee .track{gap:20px; display:inline-flex; align-items:center}
.blog-page .careers-marquee .rail{height:auto; flex-direction:row}
.blog-page .careers-marquee .track{height:auto}
@keyframes careerMoveRTL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.careers-hero{padding:80px 0}
.careers-title{font-size:clamp(40px,6vw,72px);font-weight:900;margin:12px 0 6px;color:#0b1020}
.careers-lead{color:#0b1020;font-weight:700;opacity:.9;margin:0}

.careers-roles .jobs{display:grid;gap:12px}
.job{border:1px solid var(--stroke);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));overflow:hidden}
.job-head{width:100%;text-align:left;background:transparent;color:var(--text);display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:14px;border:none;cursor:pointer}
.job-title{font-weight:900}
.job-meta{color:var(--muted);font-size:14px}
.job-toggle{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--stroke)}
.job-body{max-height:0;overflow:hidden;opacity:0;padding:0 14px;transition:max-height .35s ease, opacity .25s ease, padding .25s ease}
.job.open .job-body{max-height:420px;opacity:1;padding:0 14px 14px}
.job-body ul{margin:8px 0 10px}
.job-body li{margin:6px 0}

.careers-benefits .benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1024px){.careers-benefits .benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.careers-benefits .benefits-grid{grid-template-columns:1fr}}
.careers-benefits .card{min-height:140px}

.careers-cta .cta-card{border:1px solid var(--stroke);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));padding:24px;display:grid;gap:8px;text-align:center}
:root{
  --bg:#100E09;           /* site genel arka plan */
  --bg-alt:#100E09;       /* alternatif arka plan */
  --text:#e6eefc;
  --muted:#9fb0cf;
  --accent:#22d3ee;       /* cyan-400 */
  --accent-2:#60a5fa;     /* blue-400 */
  --card:#0f1a33;
  --stroke:rgba(255,255,255,.08);
}

/* Page Loader (lightweight, auto hides) */
#pageLoader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(11,16,32,.86);backdrop-filter:saturate(120%) blur(6px);transition:opacity .28s ease}
#pageLoader.is-done{opacity:0;pointer-events:none}
#pageLoader .pl-box{display:grid;gap:10px;place-items:center;padding:18px 20px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--stroke);color:var(--text);box-shadow:0 20px 60px -30px rgba(0,0,0,.6)}
#pageLoader .pl-spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:var(--accent);animation:plSpin 1s linear infinite}
#pageLoader .pl-text{font-weight:800;letter-spacing:.3px;font-size:14px;color:var(--text)}
@keyframes plSpin{to{transform:rotate(360deg)}}
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
/* Subtle dark scrollbar to avoid white bar on the right */
*{scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:10px}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}
.section-title{font-size:34px;margin:0 0 28px;font-weight:900;letter-spacing:.2px;position:relative}
.section-title:after{content:"";display:block;width:78px;height:4px;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#001627;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}

/* Small pill label */
.pill{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);font-weight:800;font-size:12px;letter-spacing:.6px}

/* Blog Page */
body.blog-page{background:var(--bg)}
.blog-hero{padding:80px 0 30px}
.blog-hero .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
.blog-hero .pill.dark{background:#0b1020;color:#fff;border-color:rgba(0,0,0,.2)}
.blog-hero__title{font-size:clamp(42px,7vw,86px);line-height:1.02;margin:12px 0 6px;font-weight:900;letter-spacing:1px;color:var(--text);text-shadow:0 2px 0 rgba(0,0,0,.18);font-style:italic;text-transform:uppercase}
.blog-hero__lead{color:var(--text);font-weight:700;opacity:.92;margin:0}
.blog-page #blog-posts .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}

.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:1024px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.posts-grid{grid-template-columns:1fr}}

.post-card{border-radius:18px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -36px rgba(0,0,0,.6)}
.post-media{position:relative;display:block;min-height:220px;background:#0a1227}
.post-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.post-date{position:absolute;left:10px;top:10px;background:#fff;color:#0b1020;font-weight:900;border-radius:8px;padding:6px 8px;font-size:12px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.post-body{padding:14px 14px 18px}
.post-title{margin:8px 0 8px;font-size:20px;font-weight:900}
.post-title a{color:var(--text);text-decoration:none}
.post-title a:hover{text-decoration:underline}
.post-excerpt{margin:0 0 10px;color:var(--muted)}

/* Header */
.nav{position:static;top:auto;z-index:auto;background:transparent;backdrop-filter:none;border-bottom:none;--nav-h:72px}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:0;min-height:var(--nav-h)}
.nav .logo{display:inline-block; width:160px; /* reserve space to prevent CLS when logo fades */}
.logo img{
  height:calc(var(--nav-h) - 12px);   /* fill nav vertically with small inset */
  max-height:calc(var(--nav-h) - 12px);
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))
}
.menu{display:flex;gap:16px;align-items:center}
.menu a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.menu a:hover{border-color:var(--stroke);background:rgba(255,255,255,.04)}
.menu .btn{margin-left:4px}
.lang{opacity:.85}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:14px;border:1px solid var(--stroke);color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.2px;transition:.25s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -15px rgba(34,211,238,.45)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101a;border:none}
.btn-ghost{background:transparent}
.btn-accent{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.35);color:var(--accent)}
.btn.sm{padding:8px 12px;border-radius:10px;font-weight:600;font-size:14px}

/* Grid */
.grid{display:grid;gap:18px}
.services{grid-template-columns:repeat(3,1fr)}
.portfolio{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.services,.portfolio{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.services,.portfolio{grid-template-columns:1fr}}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--stroke);border-radius:16px;padding:20px;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease}
.card h3{margin:0 0 8px;font-size:20px}
.card:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.35);box-shadow:0 20px 50px -30px rgba(96,165,250,.45)}
.card.link{cursor:pointer;text-decoration:none;color:var(--text)}

/* Clients list (project + tags) */
.clients-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.clients-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.clients-list{grid-template-columns:1fr}}
.client{padding:18px;border:1px solid var(--stroke);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.client h3{margin:0 0 8px;font-size:18px}
.client .tags{display:flex;flex-wrap:wrap;gap:8px}
.badge-sm{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);font-size:12px;color:var(--muted);font-weight:700}

/* Removed Steps, Testimonials, FAQ to match reference */

/* Hero */
.hero{position:relative;padding:86px 0 40px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center}
.hero-copy h1{font-size:clamp(40px,6vw,64px);line-height:1.06;margin:10px 0 12px;font-weight:900;letter-spacing:.2px}
.hero-copy p{color:var(--muted);max-width:58ch}
.hero .cta{display:flex;gap:12px;margin-top:14px}
.hero-visual{position:relative;height:420px}
.mockup{position:absolute;inset:0;border-radius:22px;background:
 linear-gradient(135deg, rgba(34,211,238,.4), rgba(96,165,250,.25)),
 radial-gradient(800px 400px at 70% 0%, rgba(34,211,238,.15), transparent 60%),
 linear-gradient(180deg, var(--card), #0a1227);
 border:1px solid rgba(255,255,255,.12);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -40px rgba(96,165,250,.5);
}
.hero-gradient{position:absolute;inset:auto -10% -30% -10%;height:320px;background:radial-gradient(60% 100% at 50% 0%, rgba(34,211,238,.25), transparent 60%)}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-visual{height:300px}}

/* About */
.cols{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:12px 0 0}
.checks li{margin:8px 0;padding-left:26px;position:relative}
.checks li:before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.about-card{min-height:180px}

/* Contact */
.form{display:grid;gap:12px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.02);color:var(--text)}
.form .hp{display:none}
.contact-card .cta{display:flex;gap:10px}

/* Contact Info Band */
.contact-band{background:#100E09;background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.2)), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));padding:20px 20px;position:relative;overflow:hidden}
.contact-band__inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:nowrap;margin-bottom:14px}
.contact-band__item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.contact-band__label{font-size:13px;font-weight:800;letter-spacing:.6px;color:#fff;text-transform:uppercase}
.contact-band__link{color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:color .2s ease}
.contact-band__link:hover{color:var(--accent)}
.contact-band__text{color:#fff;font-size:15px;font-weight:500}
.contact-band__copyright{text-align:center;color:var(--muted);font-size:10px;margin:0;padding-top:12px;max-width:1400px;margin:0 auto}
.contact-band__copyright a{color:var(--text);text-decoration:none;font-weight:600;transition:color .2s ease}
.contact-band__copyright a:hover{color:var(--accent)}
@media(max-width:1200px){
  .contact-band__inner{gap:20px;font-size:11px}
  .contact-band__link,.contact-band__text{font-size:11px}
}
@media(max-width:900px){
  .contact-band{padding:20px 16px 100px 16px}
  .contact-band__inner{display:none}
  .contact-band__copyright{font-size:11px;text-align:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:8px;line-height:1.6}
  .contact-band__copyright a{display:inline-block}
}

/* Footer */
.footer{border-top:1px solid var(--stroke);padding:22px 0;background:rgba(255,255,255,.02)}
.footer .container{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer p{margin:0;color:var(--muted);font-size:14px}
.footer nav{display:flex;gap:20px;align-items:center}
.footer nav a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s ease}
.footer nav a:hover{color:var(--text)}
.footer .contact{display:flex;gap:10px;align-items:center}

/* KVKK consent */
.kvkv-consent{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--text)}
.kvkk-consent input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent-2);cursor:pointer}
.kvkk-consent a{color:var(--accent-2);text-decoration:underline}

/* WhatsApp Button */
.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  z-index: 999;
  animation: whatsappPulse 2s infinite;
}
@media(max-width:900px){
  .whatsapp-btn{display:none !important}
}

/* Teklif Al button - position in bottom left corner */
.side-cta {
  z-index: 1001 !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  transform: translateY(0) !important;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
}

.whatsapp-btn svg {
  width: 26px;
  height: 26px;
  fill: white;
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Hover Services (accordion-like on hover) */
.hover-services{display:flex;flex-direction:column;border-top:1px solid var(--stroke)}
.hs-item{position:relative;border-bottom:1px solid var(--stroke)}
.hs-title{display:block;text-decoration:none;color:var(--text);font-weight:900;font-size:clamp(22px,3.2vw,34px);letter-spacing:.3px;padding:18px 10px;}
.hs-title:hover{background:rgba(255,255,255,.04)}
.hs-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease, opacity .35s ease, padding .35s ease; padding:0 10px}
.hs-media{border-radius:16px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));min-height:180px}
.hs-media .hs-ph{height:100%;border-radius:16px;background:radial-gradient(800px 400px at 70% 0%, rgba(34,211,238,.18), transparent 60%),linear-gradient(180deg, var(--card), #0a1227)}
.hs-media img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.hs-media--logo{display:grid;place-items:center;position:relative;overflow:hidden}
.hs-media--logo .star{position:absolute;inset:0;margin:auto;width:78%;height:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,.35));pointer-events:none}
.hs-media--logo .star svg{display:none}
.hs-media--logo .star::before{content:"";display:block;width:100%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(96,165,250,.26) 0deg 2deg,
    rgba(34,211,238,0) 2deg 11.25deg);
  animation:raysSpin 16s linear infinite;
}
.hs-media--logo .hs-logo{position:relative;z-index:1;width:clamp(120px,26vw,240px);height:auto;object-fit:cover;border-radius:50%;background:#0b1020;padding:8px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}
.hs-copy h3{margin:14px 0 6px;font-size:22px}
.hs-copy p{margin:0 0 10px;color:var(--muted)}
.hs-item:hover .hs-panel{max-height:420px;opacity:1;padding:14px 10px 18px}
@media(max-width:900px){.hs-panel{grid-template-columns:1fr}.hs-media{min-height:140px}}

/* Reveal - No Animation */
.reveal{opacity:1}
.revealed{opacity:1}

/* Who section (yellow) */
.section-yellow{background:linear-gradient(180deg, rgba(34,211,238,.28), rgba(96,165,250,.26)), #11273f; color:var(--text)}
.section-yellow .pill.dark{background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.28)}
.who-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,8.5vw,150px);align-items:center}
.who-right p{color:rgba(255,255,255,.92); line-height:1.7; font-size:clamp(15px,1.15vw,18px)}
.section .pill{transition:filter .25s ease}
.section .pill:hover{filter:brightness(1.1)}
@media(max-width:900px){.who-grid{grid-template-columns:1fr}}
/* Make 'Ne Yapıyoruz' pill match Biz Kimiz */
#who .pill{font-size:clamp(12px,1.1vw,16px);padding:10px 16px;border-radius:14px;letter-spacing:.8px;border-width:2px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
/* Slightly bigger title on 'Ne Yapıyoruz' */
#who .biz-title{font-size:clamp(32px,5.2vw,56px)}
/* Match container width and inner paddings with Biz section */
#who .container{width:min(1360px,98%)}
#who .who-left{padding-left:clamp(12px,2.2vw,28px)}
#who .who-right{padding-right:clamp(12px,2.2vw,28px)}
/* Stick marquee right above Services */
#who.section{padding-bottom:0}
#who .careers-marquee{padding-bottom:0; margin-bottom:0}
#services.section{padding-top:0}
/* Only move the Services title down for visual spacing */
#services .section-title{margin-top:0 !important}
#services .container{padding-top:50px}
/* Match Services container to Biz/Ne Yapıyoruz width and inner spacing */
#services .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
/* Services text colors to match Biz Kimiz */
#services .section-title{color:var(--text)}
#services .hs-copy h3{color:var(--text)}
#services .hs-copy p{color:rgba(255,255,255,.92)}

/* Projects section: match Biz Kimiz frame, font, spacing */
#projects .container, #grafik-portfolio .container, #dijital-portfolio .container, #sosyal-portfolio .container, #video-portfolio .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
#projects .pill{font-size:clamp(12px,1.1vw,16px);padding:10px 16px;border-radius:14px;letter-spacing:.8px;border-width:2px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
#projects .section-title{font-size:clamp(28px,4.6vw,48px);line-height:1.04;font-weight:900;letter-spacing:.4px;font-style:italic;text-transform:uppercase;color:var(--text);margin-top:10px !important}
/* Blog mini: align with Biz Kimiz */
#blog-mini .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
#blog-mini .pill{font-size:clamp(12px,1.1vw,16px);padding:10px 16px;border-radius:14px;letter-spacing:.8px;border-width:2px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
#blog-mini .section-title{font-size:clamp(28px,4.6vw,48px);line-height:1.04;font-weight:900;letter-spacing:.4px;font-style:italic;text-transform:uppercase;color:var(--text)}
#blog-mini .posts-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){#blog-mini .posts-grid{grid-template-columns:1fr}}
/* Biz Kimiz (hero-like) */
.biz-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,8.5vw,150px);align-items:center}
#biz .container{width:min(1360px,98%)}
.biz-title{font-size:clamp(28px,4.6vw,48px);line-height:1.04;margin:10px 0 10px;font-weight:900;letter-spacing:.4px;font-style:italic;text-transform:uppercase}
.biz-brand{margin:0 0 10px;font-size:clamp(18px,1.9vw,24px);font-weight:900;color:var(--accent-2);display:flex;align-items:center;gap:14px}
.biz-brand .dash{display:inline-block;width:56px;height:5px;border-radius:4px;background:#fff;opacity:.92}
.biz-left{padding-left:clamp(12px,2.2vw,28px)}
.biz-right{padding-right:clamp(12px,2.2vw,28px)}
.biz-left p{max-width:70ch;color:rgba(255,255,255,.92);font-size:clamp(15px,1.15vw,18px)}
.biz-right{display:grid;place-items:center}
.biz-badge{position:relative;width:clamp(260px,40vw,520px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:transparent;border:none;box-shadow:none}
/* Remove spinning rays/background */
.biz-badge::before{display:none}
.biz-rotor{position:absolute;inset:0;display:grid;place-items:center}
.biz-rotor .rotor-svg{width:100%;height:100%;transform:rotate(0deg);animation:rotorSpin 16s linear infinite}
.biz-rotor text{font-size:6.2px;letter-spacing:2px;font-weight:900;fill:rgba(255,255,255,.88)}
@keyframes rotorSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.biz-badge img{position:relative;z-index:1;width:74%;height:auto;object-fit:contain;border-radius:50%;background:transparent;padding:0;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
@media(max-width:900px){.biz-grid{grid-template-columns:1fr}}
/* Slightly smaller pill only in Biz section */
#biz .pill{font-size:clamp(12px,1.1vw,16px);padding:10px 16px;border-radius:14px;letter-spacing:.8px;border-width:2px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
/* Team section: match Biz container width and paddings */
#team .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
/* Team grid responsive */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
/* Mission/Vision section: match Biz container width and paddings */
#mission-vision .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
/* Gap between stats and mission-vision equals stats grid gap (18px) */
#stats.section{padding-bottom:0}
#mission-vision.section{padding-top:0; margin-top:18px}
/* Bottom quote styling */
#bottom-quote .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
#bottom-quote .quote-text{font-weight:900;font-size:clamp(24px,4.8vw,48px);line-height:1.12;margin:0;text-align:center;color:var(--text)}
/* Highlighted words inside the quote */
#bottom-quote .quote-text .hl{color:#3B82F6; font-style:italic}
/* Stats section */
#stats .container{width:min(1360px,98%); padding-left:clamp(12px,2.2vw,28px); padding-right:clamp(12px,2.2vw,28px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.stats-grid{grid-template-columns:1fr}}
.stat{display:grid;gap:6px;place-items:center;text-align:center;padding:22px}
.stat .stat-num{font-weight:900;font-size:clamp(28px,4.2vw,48px);letter-spacing:.4px;color:#eaf2ff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.stat .stat-label{font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
/* Projects grid */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:20px}
@media(max-width:900px){.projects-grid{grid-template-columns:1fr}}
.project-card{position:relative;border-radius:24px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
.project-media{position:relative;background:#0a1227;min-height:clamp(280px,34vw,440px);overflow:hidden}
.project-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
/* Readability: subtle bottom gradient over images */
.project-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));pointer-events:none}
.project-meta{padding:16px 18px 20px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-start}
.project-title{font-size:22px;margin:0 0 12px;font-weight:900;color:#eaf2ff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.project-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip-tag{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.1);font-weight:700;color:var(--text);font-size:14px;backdrop-filter:blur(4px)}
.chip--web{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04101a; border:none}
.chip--grafik{background:rgba(96,165,250,.18); border-color:rgba(96,165,250,.35); color:#dbeafe}
.chip--sosyal{background:rgba(34,211,238,.18); border-color:rgba(34,211,238,.35); color:#ccfbf1}
.chip--dijital{background:rgba(250,204,21,.18); border-color:rgba(250,204,21,.35); color:#fde68a}
.chip--video{background:rgba(236,72,153,.18); border-color:rgba(236,72,153,.35); color:#fbcfe8}
.chip-tag:hover{filter:brightness(1.08)}
.project-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -36px rgba(0,0,0,.6)}
.project-card:hover .project-media img{transform:scale(1.06)}
/* Centered more button under projects */
#projects .projects-more{display:grid;place-items:center;margin-top:56px}
#projects .projects-more .btn{color:var(--text) !important}

/* Focus states */
.btn:focus-visible, .chip:focus-visible, .pill:focus-visible, .menu a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.7);backdrop-filter:blur(4px)}
.modal__dialog{position:relative;width:min(560px,92%);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:16px;padding:20px;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.modal__close{position:absolute;right:10px;top:8px;border:1px solid var(--stroke);background:transparent;color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}

/* Floating Nav Button (FAB) */
.nav-fab{position:fixed;top:13px;right:42px;z-index:70}
.nav-fab .fab{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:#fff;color:#0a1020;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 26px -12px rgba(0,0,0,.35);cursor:pointer;transition:width .25s ease, padding .25s ease;overflow:hidden}
.nav-fab .fab{width:118px;justify-content:flex-start}
.nav-fab .fab:hover{width:188px;padding-right:14px}
.nav-fab .fab:focus{outline:2px solid var(--accent)}
.nav-fab .burger{width:28px;height:18px;position:relative;display:inline-block}
.nav-fab .burger:before,.nav-fab .burger:after{content:"";position:absolute;left:8px;right:8px;height:3px;background:#0a1020;border-radius:3px;transition:.25s ease}
.nav-fab .burger:before{top:4px}
.nav-fab .burger:after{bottom:4px}
.nav-fab .fab.is-open .burger:before{top:50%;transform:translateY(-50%) rotate(45deg);left:6px;right:6px}
.nav-fab .fab.is-open .burger:after{bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);left:6px;right:6px}
.nav-fab .avatar{width:28px;height:28px;border-radius:999px;overflow:hidden;border:1px solid rgba(0,0,0,.08);margin-left:auto}
.nav-fab .avatar img{width:100%;height:100%;object-fit:cover}
.nav-fab .fab-label{opacity:0;transform:translateX(-6px);transition:.25s ease;font-weight:800;letter-spacing:.6px;font-size:12px;color:#0a1020;max-width:0;white-space:nowrap;overflow:hidden}
.nav-fab .fab:hover .fab-label{opacity:1;transform:none;max-width:90px}

/* Overlay Menu */
.overlay{position:fixed;inset:12px;z-index:65;display:none}
.overlay.is-open{display:block}
.overlay__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(6px);border-radius:18px}
.overlay__panel{position:absolute;inset:0;border-radius:18px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));padding:26px 26px 110px;overflow:hidden}
.overlay__panel{clip-path:circle(0% at 90% 8%);will-change:clip-path}
.overlay__close{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:12px;border:1px solid var(--stroke);background:transparent;color:var(--text);font-size:22px;line-height:1;cursor:pointer;z-index:3}
.overlay__close::after{content:"";position:absolute;inset:-6px} /* larger hit area */
/* Prevent overlay art from intercepting clicks near the close button */
.overlay-art, .overlay-art *{pointer-events:none}
/* Safari/Edge hit-testing stability */
.overlay__panel{transform:translateZ(0)}
.overlay__inner{position:relative;height:100%;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;overflow:hidden;padding-right:6px}
.overlay-menu{list-style:none;margin:125px 0 0;padding:0;display:grid;gap:10px;align-content:start;justify-items:start}
.overlay-lang{position:absolute;top:30px;left:52px;display:flex;gap:10px;align-items:center}
.overlay-lang .flag{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;border:1px solid var(--stroke);background:rgba(255,255,255,.08);text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;overflow:hidden}
.overlay-lang .flag svg{display:block;width:100%;height:100%;object-fit:cover}
.overlay-lang .flag:hover{transform:scale(1.05);background:rgba(255,255,255,.14);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.overlay-menu a{display:block;position:relative;text-decoration:none;color:#0b1020;font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.2px;text-transform:uppercase;font-size:clamp(22px,3.8vw,42px);padding:10px 14px 10px 52px;border-radius:0;border:none;background:transparent;transition:transform .25s ease, font-weight .1s}
.overlay-menu a::before{content:"→";position:absolute;left:12px;top:50%;transform:translate(-10px,-50%);width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101a;font-size:18px;font-weight:900;opacity:0;box-shadow:0 10px 24px -14px rgba(34,211,238,.55);transition:opacity .2s ease, transform .25s ease}
.overlay-menu a:hover{background:transparent;border-color:transparent;transform:translateX(12px);font-weight:800}
.overlay-menu a:focus,.overlay-menu a:active{background:rgba(255,255,255,.07)}
.overlay-menu a:hover::before{opacity:1;transform:translate(0,-50%)}
.overlay-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.overlay-menu a:active{transform:translateX(16px)}
.overlay-menu a:active::before{opacity:1;transform:translate(2px,-50%)}
.overlay-art{display:flex;align-items:center;justify-content:center}
.overlay-art .badge{font-size:12px; display:none !important}
/* New: rotating star + centered brand logo inside overlay art */
.overlay-art{position:relative;display:grid;place-items:center;width:var(--ov-size, 360px);height:var(--ov-size, 360px);margin:0 auto;place-self:center;transform:translateY(-16px)}
.overlay .overlay-art{--ov-size: 420px}
.overlay-art .ov-rotor{position:relative;width:var(--ov-size, 360px);height:var(--ov-size, 360px);display:grid;place-items:center}
.overlay-art .ov-rotor-svg{position:absolute;inset:0;margin:auto;width:100%;height:100%;animation:raysSpin 16s linear infinite;filter:drop-shadow(0 14px 40px rgba(0,0,0,.35))}
.overlay-art .ov-rotor text{font-size:11px;letter-spacing:2px;font-weight:900;fill:#000}
.overlay-art .ov-logo{position:relative;z-index:1;width:calc(var(--ov-size, 360px) * .78);height:calc(var(--ov-size, 360px) * .78);object-fit:cover;border-radius:50%;background:#0b1020;padding:6px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
/* Keep the same size on all screens (no responsive shrink) */
.overlay-card{position:relative;background:transparent;border-radius:0;padding:0;border:none;box-shadow:none}
.overlay-card__close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.overlay-card__close:hover{background:rgba(255,255,255,.18)}
.overlay-card .overlay-menu{gap:6px}
.overlay.overlay--light .overlay-card{background:transparent;border:none;box-shadow:none}
.overlay.overlay--light .overlay-card__close{border-color:rgba(255,255,255,.25)}
.overlay__panel > .overlay-chips{position:absolute;left:26px;right:100px;bottom:26px;width:auto;max-width:calc(100% - 190px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:flex-start}
.overlay__inner .overlay-chips{display:none}
.chip{padding:12px 24px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);color:var(--text);font-weight:700;text-decoration:none;box-shadow:0 10px 30px -18px rgba(0,0,0,.6);font-size:15px;opacity:0}
.chip:hover{background:rgba(255,255,255,.14)}

/* Mobile CTA button - hidden on desktop */
.overlay-cta-mobile{display:none}

/* Bottom-right social icons */
.overlay-social{position:absolute;right:26px;bottom:26px;display:flex;gap:12px;z-index:2}
.social{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:none;background:transparent;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .25s ease, box-shadow .25s ease;overflow:hidden}
.social:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.social svg{display:block;width:100%;height:100%}
.overlay.overlay--light .social{background:transparent;border:none}

/* Height-constrained screens: reduce further and hide art to avoid scroll */
@media (max-height:800px){
  .overlay-menu a{font-size:clamp(20px,3.2vw,36px);padding:8px 12px 8px 48px}
}

/* Light variant (high contrast on white panel) */
.overlay.overlay--light .overlay__backdrop{background:rgba(0,0,0,.35)}
.overlay.overlay--light .overlay__panel{background:#ffffff;border-color:rgba(0,0,0,.08)}
.overlay.overlay--light .overlay-menu a{color:#0b1020}
.overlay.overlay--light .overlay-menu a:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08)}
.overlay.overlay--light .chip{background:#ffffff;border-color:rgba(0,0,0,.12);color:#0b1020}
.overlay.overlay--light .chip:hover{background:rgba(0,0,0,.06)}
.overlay.overlay--light .overlay__close{color:#000;border-color:rgba(0,0,0,.18)}
@media(max-width:900px){
  .overlay__panel{display:flex;flex-direction:column;padding:20px 16px 24px;overflow:hidden}
  .overlay__panel > .overlay-chips{display:none !important}
  .overlay__inner{grid-template-columns:1fr;padding:0;display:flex;flex-direction:column;flex:1;align-items:stretch;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
  .overlay__inner::-webkit-scrollbar{width:6px}
  .overlay__inner::-webkit-scrollbar-track{background:transparent}
  .overlay__inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
  .overlay__inner .overlay-chips{display:flex !important;flex-wrap:wrap;justify-content:center}
  .overlay-art{display:none}
  .overlay-card{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .overlay-menu{margin:60px 0 0;flex-shrink:0;padding:0;display:flex;flex-direction:column;align-items:stretch;width:100%}
  .overlay-menu li{list-style:none;width:100%;margin:0;padding:0}
  .overlay-menu a{font-size:clamp(18px,4.5vw,22px);padding:14px 16px 14px 16px;font-weight:700;text-align:left;border-radius:0;background:transparent;font-family:Inter,system-ui,-apple-system,sans-serif;text-transform:none;border:none;box-shadow:none;display:block;width:100%;margin:0}
  .overlay-menu a::before{display:none !important}
  .overlay-menu a:hover{background:transparent;transform:none;border:none;box-shadow:none}
  .overlay-menu a:hover::before{display:none !important}
  .overlay.overlay--light .overlay-menu a:hover{background:transparent;border:none;box-shadow:none}
  .overlay-lang{top:20px;left:16px}
  .overlay-lang .flag{width:38px;height:38px}
  .overlay-chips{position:static;transform:none;max-width:100%;gap:8px;justify-content:center;margin:auto 0 20px;display:flex;flex-wrap:wrap;padding:0 8px}
  .chip{padding:10px 16px;font-size:13px;text-align:center}
  .overlay-social{position:static;transform:none;gap:14px;justify-content:center;margin:20px 0 24px;display:flex}
  .social{width:38px;height:38px}
  .overlay-cta-mobile{display:block;margin-top:24px}
  .overlay-cta-mobile .cta-btn{display:block;width:100%;padding:16px 24px;background:#0b1020;color:#fff;text-decoration:none;text-align:center;font-weight:900;font-size:15px;letter-spacing:.5px;border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(0,0,0,.3);transition:all .2s ease}
  .overlay-cta-mobile .cta-btn:hover{background:#151b2e;transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.45)}
  .overlay.overlay--light .overlay-cta-mobile .cta-btn{background:#0b1020;color:#fff;border:1px solid rgba(11,16,32,.2)}
  .overlay.overlay--light .overlay-cta-mobile .cta-btn:hover{background:#151b2e;box-shadow:0 6px 24px rgba(11,16,32,.25)}
}
@media(max-width:540px){
  .overlay-menu a{font-size:clamp(16px,5vw,20px);padding:13px 16px 13px 16px;font-weight:700;border:none;box-shadow:none;display:block;width:100%;text-align:left;margin:0}
  .overlay-menu a:hover{background:transparent;border:none;box-shadow:none}
  .overlay-menu li{width:100%;margin:0;padding:0}
  .overlay-chips{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 18px;padding:0 8px;justify-content:center}
  .chip{padding:9px 14px;font-size:12px;font-weight:600;text-align:center}
  .overlay-social{gap:12px;margin:18px 0 22px}
  .social{width:36px;height:36px}
  .overlay-cta-mobile .cta-btn{padding:15px 20px;font-size:14px}
}

/* Mobile Action Bar */
.mobile-action-bar{display:none}
@media(max-width:900px){
  .mobile-action-bar{
    position:fixed;
    bottom:16px;
    left:16px;
    right:16px;
    display:flex;
    gap:0;
    background:#fff;
    border-radius:50px;
    box-shadow:0 4px 24px rgba(0,0,0,.12);
    padding:4px 3px;
    z-index:999;
  }
  .mobile-action-bar .action-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:5px 4px;
    text-decoration:none;
    color:#0b1020;
    font-weight:700;
    font-size:9px;
    letter-spacing:.3px;
    transition:all .2s ease;
    white-space:nowrap;
    position:relative;
    border-right:1px solid rgba(0,0,0,.1);
  }
  .mobile-action-bar .action-btn svg{
    width:18px;
    height:18px;
    flex-shrink:0;
  }
  .mobile-action-bar .action-btn:last-child{
    border-right:none;
  }
  .mobile-action-bar .action-btn:hover{
    opacity:.7;
  }
  .mobile-action-bar .action-btn--phone svg{fill:#22D3EE}
  .mobile-action-bar .action-btn--mail svg{fill:#60A5FA}
  .mobile-action-bar .action-btn--whatsapp svg{fill:#3B82F6}
  .mobile-action-bar .action-btn--teklif svg{fill:#2563EB}
}

/* Hide site navbar links, keep logo */
header.nav .menu{display:none !important}
/* Hide menu on teklif page - only show floating nav */
body.teklif-page header.nav .menu{display:none !important}
/* Show floating nav button on teklif page */
body.teklif-page .nav-fab{display:block !important}
/* Make sure nav-fab is always visible on teklif page */
.teklif-page .nav-fab{display:block !important}
/* Hide header menu and floating button when overlay is open */
.overlay.is-open ~ header.nav .menu,
body:has(.overlay.is-open) header.nav .menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Hide floating nav button when overlay is open */
.overlay.is-open ~ .nav-fab,
body:has(.overlay.is-open) .nav-fab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Hide WhatsApp and Teklif Al buttons when overlay is open */
.overlay.is-open ~ .whatsapp-btn,
body:has(.overlay.is-open) .whatsapp-btn,
.overlay.is-open ~ .side-cta,
body:has(.overlay.is-open) .side-cta {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Show header menu when overlay is closed */
body.teklif-page header.nav .menu {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Ensure floating FAB is visible on mobile for opening overlay menu */
@media(max-width:900px){
  .nav-fab{display:block;right:16px}
}
/* Better tap targets for overlay menu on mobile */
@media(max-width:680px){
  .overlay__panel{padding:22px}
  .overlay__close{width:40px;height:40px}
}

/* Homepage full-screen video layout */
body.home-video{background:#100E09}
.fullvideo{position:relative;height:100vh;overflow:hidden;z-index:0;/* Keep static image under video to prevent blank */background:#100E09 url('/assets/img/og-image.svg') center/cover no-repeat}
.fullvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
/* When JS signals video is ready, fade it in */
.fullvideo.video-on video{opacity:1}
/* Static image fallback if video fails to load */
.fullvideo.video-fallback{background:#100E09 url('/assets/img/og-image.svg') center/cover no-repeat; min-height:100vh}
/* Show content normally after the video section */
body.home-video main, body.home-video footer{display:block}
/* Ensure header sits above video */
/* On home (video), overlay the transparent header over the video, but do not fix on scroll */
body.home-video .nav{position:absolute !important;left:0;right:0;top:0;z-index:2}

/* Tap-to-play button (mobile autoplay fallback) */
.fullvideo .video-tap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center;width:70px;height:70px;border-radius:999px;border:1px solid var(--stroke);background:rgba(0,0,0,.45);color:#fff;font-weight:900;font-size:28px;cursor:pointer;backdrop-filter:blur(2px);box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
.fullvideo .video-tap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fullvideo.video-on .video-tap{display:none}

/* Home video: larger logo, transparent nav over video, and hide logo after scroll */
body.home-video .nav{--nav-h:110px; background:transparent; border-bottom-color:transparent; backdrop-filter:none}
/* Push header content to the very left on home video */
body.home-video header.nav .container{width:100%; padding-left:24px;}
header.nav .logo{transition:opacity .3s ease, width .3s ease}
body.scrolled header.nav{background:transparent;backdrop-filter:none;border-bottom:none}
/* Fade the logo but keep its reserved width to avoid layout shift */
body.scrolled header.nav .logo{opacity:1; visibility:visible}
/* Always keep logo visible */
body.logo-hide-lock header.nav .logo{opacity:1 !important; visibility:visible !important}
/* Home (index) only: nudge logo a bit upwards without changing bar height */
body.home-video .logo img{transform:translateY(-16px)}

/* Ensure captions readable on background video */
.fullvideo video::cue{color:#fff; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.9)}

/* Centered logo on video with rotating star */
.video-overlay-logo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
.video-overlay-logo .star{position:absolute;width:clamp(220px,34vw,420px);height:auto;animation:starSpin 16s linear infinite;filter:drop-shadow(0 12px 50px rgba(0,0,0,.45))}
.video-overlay-logo__img{position:relative;z-index:2;width:clamp(140px,22vw,260px);height:auto;object-fit:contain;filter:drop-shadow(0 6px 24px rgba(0,0,0,.55))}
@keyframes starSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
/* Rotating rays for overlay/hs star */
@keyframes raysSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@media(max-width:680px){
  /* Smart crop for mobile: keep focal area higher */
  .fullvideo{height:100svh;}
  .fullvideo video{object-position:center 30%;}
  .video-overlay-logo .star{width:clamp(200px,62vw,320px)}
  .video-overlay-logo__img{width:clamp(120px,38vw,200px)}
}

/* Contact page: diagonal marquee ribbon */
.contact-ribbon{position:relative;padding:30px 0 10px}
.ribbon-strip{position:relative;left:-6vw;width:112vw;transform:rotate(-4deg);background:#ffffff;color:#0b1020;border-top:2px solid rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.08);box-shadow:0 10px 30px -18px rgba(0,0,0,.5);overflow:hidden}
.ribbon-content{position:relative;display:flex;width:200%;white-space:nowrap;align-items:center;padding:10px 0;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.ribbon-content .star{color:var(--accent)}
.ribbon-content .email{color:#0b1020}
.ribbon-track{display:flex;gap:34px;flex:0 0 50%;animation:ribbonSlide 20s linear infinite}
@keyframes ribbonSlide{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Bottom ticker (loop) */
.bottom-ticker{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(15,23,42,.9);backdrop-filter:blur(6px);border-top:1px solid var(--stroke)}
.bottom-ticker .container{overflow:hidden}
.ticker-row{display:flex;white-space:nowrap;align-items:center;color:var(--text);font-weight:800;letter-spacing:.3px;padding:8px 0}
.ticker-rail{position:relative;display:flex;width:200%;}
.ticker-track{display:flex;gap:26px;flex:0 0 50%;animation:tickerMove 30s linear infinite}
.ticker-track a{color:var(--text);text-decoration:none}
.ticker-track a:hover{text-decoration:underline}
.ticker-track .dot{color:var(--accent)}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(max-width:680px){.bottom-ticker .container{width:100%}}

/* On contact-v2 page, ticker sits directly above footer (not fixed) */
body.contact-v2 .bottom-ticker{position:static;left:auto;right:auto;bottom:auto;z-index:auto}
body.contact-v2 .footer{border-top:0}

/* Right-side vertical CTA */
.side-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101a;text-decoration:none;font-weight:800;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;letter-spacing:.4px;padding:12px 10px;border-top-left-radius:8px;border-bottom-left-radius:8px;border:1px solid rgba(96,165,250,.35);box-shadow:0 10px 30px -18px rgba(96,165,250,.45);writing-mode:vertical-rl;text-orientation:mixed}
.side-cta:hover{filter:brightness(1.06)}
@media(max-width:900px){.side-cta{display:none !important}}
@media(max-width:680px){.side-cta{top:auto;bottom:26px;transform:none;writing-mode:horizontal-tb;border-radius:999px;padding:10px 14px;right:18px}}

/* Start project (Teklif) page theme */
body.start-project-page main{background:linear-gradient(180deg,#0b2746,#081a32)}
body.start-project-page .section{background:transparent}
body.start-project-page .section .section-title{text-align:center}
/* Ensure readable text on dark start-project background */
body.start-project-page main, 
body.start-project-page .section, 
body.start-project-page .section p, 
body.start-project-page .section h1,
body.start-project-page .section h2,
body.start-project-page .section h3 {color:var(--text)}
body.start-project-page .form input,body.start-project-page .form textarea{background:#fff;border-color:rgba(0,0,0,.3);color:#0b1020;caret-color:#0b1020}
body.start-project-page .form input::placeholder,body.start-project-page .form textarea::placeholder{color:rgba(0,0,0,.45)}
body.start-project-page .form .row{gap:16px}
body.start-project-page .option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:12px 0}
body.start-project-page .option{display:block;text-align:center;padding:14px;border:1px solid rgba(0,0,0,.25);border-radius:12px;background:#fff;font-weight:700;color:#0b1020;text-decoration:none;cursor:pointer;user-select:none}
body.start-project-page .option.selected{background:#e6f6ff;border-color:rgba(34,211,238,.6);box-shadow:inset 0 0 0 2px rgba(34,211,238,.35)}
body.start-project-page .option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.start-project-page .option:hover{background:#f2faff}
/* Inline alerts */
body.start-project-page .notice{margin-top:14px;border-radius:12px;padding:12px 14px;font-weight:700}
body.start-project-page .notice.success{background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.45);color:#d1fae5}
body.start-project-page .notice.error{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.45);color:#fee2e2}

/* Merge CTA (final section) */
.merge-cta{padding:0}
.merge-stage{position:relative;isolation:isolate;width:100%;margin:0;height:100vh;border-radius:0;border:none;background:#100E09;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));overflow:hidden}
.merge-stage .merge-label{
  position:absolute;left:24px;top:18px;z-index:3;
  padding:10px 16px; border-radius:14px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.28);
  font-weight:800; font-size:clamp(12px,1.1vw,16px); letter-spacing:.8px
}
.merge-stage .merge-bg-title{position:absolute;left:4vw;right:4vw;top:6vh;z-index:0;margin:0;font-size:clamp(64px,14vw,220px);font-weight:900;letter-spacing:2px;color:rgba(255,255,255,.14);text-shadow:0 10px 40px rgba(0,0,0,.25);pointer-events:none;user-select:none;opacity:.14}
.merge-stage{--meet-overlap:0}
/* Each half container */
.merge-stage .hand-wrap{position:absolute;top:0;bottom:0;width:50%;z-index:1;overflow:visible}
.merge-stage .hand-wrap--left{left:0;z-index:1}
.merge-stage .hand-wrap--right{right:0;z-index:2}
/* Images inside */
.merge-stage .hand{position:absolute;top:50%;transform:translateY(-50%);width:122%;height:auto;object-fit:contain;pointer-events:none}
.merge-stage .hand--left{right:calc(-1 * var(--meet-overlap));}
.merge-stage .hand--right{left:calc(-1 * var(--meet-overlap));}
.merge-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:170px;height:170px;border-radius:999px;background:transparent;color:#04101a;text-decoration:none;font-weight:900;letter-spacing:.4px;z-index:2;opacity:1}

/* Fallback: slide-in effect without GSAP (triggered by .merge-in on .merge-stage) */
.merge-stage{--tx-left:-30vw; --tx-right:30vw}
.merge-stage .hand--left{transform:translate(var(--tx-left), -50%); transition:transform .6s cubic-bezier(.2,.7,.2,1);opacity:1}
.merge-stage .hand--right{transform:translate(var(--tx-right), -50%); transition:transform .6s cubic-bezier(.2,.7,.2,1);opacity:1}
.merge-stage .hand{opacity:1}
.merge-stage.merge-in{--tx-left:0; --tx-right:0}
.merge-stage.merge-in .hand--left,.merge-stage.merge-in .hand--right{opacity:1}
.merge-button .label{
  position:absolute;inset:0;
  display:grid;place-items:center;text-align:center;
  background:linear-gradient(135deg,#ffffff,#f7fbff);
  border-radius:50%;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 28px -10px rgba(0,0,0,.35);
  padding:6px;transition:transform .2s ease,box-shadow .2s ease;
  text-transform:uppercase;word-break:keep-all;
  line-height:1.02;font-size:clamp(12px,1.45vw,17px);font-weight:900;letter-spacing:.7px;font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
.merge-button .ring{position:absolute;inset:0;border-radius:999px;border:2px solid rgba(255,255,255,.75);pointer-events:none;animation: ringPulse 2.6s infinite ease-out;transform:scale(1.02)}
.merge-button .ring-1{animation-delay:0s}
.merge-button .ring-2{animation-delay:.8s}
.merge-button:hover{filter:brightness(1.06)}
@keyframes ringPulse{0%{opacity:.85; transform:scale(1.02)} 80%{opacity:.1} 100%{opacity:0; transform:scale(1.6)}}
@media(max-width:900px){
  .merge-stage{height:70vh;min-height:500px}
  .merge-stage .hand{width:105%;max-width:400px}
  .merge-stage .merge-bg-title{font-size:clamp(48px,12vw,120px);top:8vh;opacity:.14 !important}
  .merge-button{width:130px;height:130px}
  .merge-button .label{font-size:clamp(12px,3.2vw,15px);line-height:1.2;padding:16px;white-space:normal;word-spacing:100vw;display:grid;place-items:center}
}
@media(max-width:680px){
  .merge-stage{height:60vh;min-height:450px}
  .merge-stage .hand{width:100%;max-width:350px}
  .merge-stage .merge-bg-title{font-size:clamp(40px,11vw,100px);top:10vh;opacity:.14 !important}
  .merge-stage .merge-label{font-size:10px;padding:8px 12px}
  .merge-button{width:110px;height:110px}
  .merge-button .label{font-size:clamp(11px,3vw,14px);padding:12px}
}

/* Contact v2 page */
body.contact-v2{background:var(--bg)}
.contact-hero{position:relative;padding:110px 0 280px;background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}
/* Blog page: move turquoise band from hero to header (logo area) */
body.blog-page .contact-hero{background:transparent}
body.blog-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}
/* Hakkimizda page: dark background for hero text visibility */
body.about-page .contact-hero{background:transparent;padding:60px 0 10px}
/* Hakkimizda page: same header gradient as grafik-tasarim */
body.about-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}
/* KVKK page: same header gradient as blog page */
body.kvkk-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}
/* Cerez politikasi page: same header gradient as blog page */
body.cerez-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}

/* Web Tasarım page hero */
.web-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Web Tasarım page - remove spacing between sections */
body.web-tasarim-page .yellow-hero {
  padding-top: 0;
  margin-top: 0;
}

body.web-tasarim-page .reviews-marquee-section {
  margin: 0;
  padding: 0;
}

body.web-tasarim-page .yellow-services {
  padding-top: 0;
  margin-top: 0;
}

/* Grafik Tasarım page hero */
.grafik-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grafik-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.grafik-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Grafik Tasarım page - remove spacing between sections */
body.grafik-tasarim-page .yellow-hero {
  padding-top: 0;
  margin-top: 0;
}

body.grafik-tasarim-page .reviews-marquee-section {
  margin: 0;
  padding: 0;
}

body.grafik-tasarim-page .yellow-services {
  padding-top: 0;
  margin-top: 0;
}

/* Grafik Tasarım page - remove gap between reviews and services */
body.grafik-tasarim-page .reviews-marquee-section + .yellow-services {
  margin-top: -60px;
}

/* Grafik Tasarım page - hide border on services image */
body.grafik-tasarim-page .services-image {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Responsive improvements for hero sections */
@media (max-width: 768px) {
  /* Web Hero responsive */
  .web-hero {
    height: 40vh;
    min-height: 250px;
  }
  
  .web-hero-title {
    font-size: clamp(24px, 8vw, 48px);
  }
  
  /* Grafik Hero responsive */
  .grafik-hero {
    height: 40vh;
    min-height: 250px;
  }
  
  /* Reduce negative margins on mobile */
  body.grafik-tasarim-page .reviews-marquee-section + .yellow-services {
    margin-top: -30px;
  }
  
  body.web-tasarim-page .reviews-marquee-section {
    padding: 10px 0;
  }
  
  body.grafik-tasarim-page .reviews-marquee-section {
    padding: 10px 0;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .web-hero {
    height: 35vh;
    min-height: 200px;
  }
  
  .grafik-hero {
    height: 35vh;
    min-height: 200px;
  }
  
  .web-hero-title {
    font-size: clamp(20px, 10vw, 36px);
    margin: 12px 0 0;
  }
  
  /* Further reduce gaps on mobile */
  body.grafik-tasarim-page .reviews-marquee-section + .yellow-services {
    margin-top: -20px;
  }
  
  /* Ensure hero images are properly positioned */
  .web-hero-bg img,
  .grafik-hero-bg img {
    object-position: center center;
  }
}

.web-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.web-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.web-hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.web-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.web-hero-title {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 900;
  color: white;
  margin: 16px 0 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

.web-hero .pill {
  background: rgba(255,255,255,0.9);
  color: #0f172a;
  font-weight: 700;
}
.projects-hero-marquee{position:absolute;left:0;right:0;top:0;height:72px;display:grid;align-items:center;overflow:hidden}
/* Blog-specific: slightly taller marquee and larger type */
.blog-page .projects-hero-marquee{height:86px}
.blog-page .phm-rail{height:100%}
.blog-page .phm-track{align-items:center}
/* Perfect vertical centering for blog marquee text */
.blog-page .projects-hero-marquee{display:flex;align-items:center}
.blog-page .phm-rail{display:flex;align-items:center}
.blog-page .phm-track{display:flex;align-items:center;height:100%}
.blog-page .projects-hero-marquee span{line-height:1;display:inline-block}
.phm-rail{display:flex;width:200%;height:100%;overflow:hidden;animation:phmMove 38s linear infinite;will-change:transform}
.phm-track{position:static;display:flex;gap:0;white-space:nowrap;flex:0 0 50%}
.phm-track--b{left:auto}
.phm-track span{padding:0}
.projects-hero-marquee span{font-weight:900;font-style:italic;letter-spacing:.8px;color:#eaf2ff;opacity:.92}
@media(min-width:901px){.projects-hero-marquee span{font-size:28px}}
@media(min-width:901px){.blog-page .projects-hero-marquee span{font-size:32px}}
@media(max-width:900px){.projects-hero-marquee span{font-size:20px}}
@keyframes phmMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.contact-hero .pill.dark{background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.25)}
.contact-hero .pill.dark{position:absolute;top:18px;left:24px;z-index:2}
.hello-bg{position:absolute;left:4vw;right:4vw;top:-20px;margin:0;font-size:clamp(84px,20vw,280px);font-weight:900;letter-spacing:2px;color:rgba(0,0,0,.45);text-shadow:0 10px 40px rgba(0,0,0,.25);pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden;z-index:-1}
.contact-hero__lead{position:relative;margin-top:160px;color:var(--text);opacity:.9}
.contact-cta{position:relative;margin-top:16px}
.ribbon-strip--hero{position:absolute;left:-8vw;bottom:-28px;width:116vw;transform:rotate(-4deg)}

@media(max-width:900px){
  .contact-hero{padding:90px 0 190px}
}

.contact-title{padding:40px 0}
.big-title{font-size:clamp(32px,6vw,72px);font-weight:900;letter-spacing:.4px;margin:0;color:var(--text)}
.big-title .dash{display:inline-block;vertical-align:middle;width:64px;height:6px;background:#ffffff;border-radius:4px;margin:0 14px}
.big-title em{font-style:italic;color:#ffffff}

.offices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start}
@media(max-width:900px){.offices-grid{grid-template-columns:1fr}}
.office{border:1px solid var(--stroke);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));padding:16px}
.office .badge{margin-bottom:8px}
.office h3{margin:6px 0 10px;font-size:20px}
.map{width:100%;height:260px;border:0;border-radius:12px;background:#0a1227}
.map.placeholder{display:grid;place-items:center;color:#64748b}
.office address{margin-top:10px;color:var(--muted);line-height:1.7}
.office address a{color:var(--text);text-decoration:none}
.office address a:hover{text-decoration:underline}

/* Blog page nav - back to default height */
body.blog-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}

/* Enhanced Blog Article Styles */
.blog-hero {
  padding: 60px 0 40px;
  background: 
    linear-gradient(135deg, rgba(11,16,32,.75), rgba(16,14,9,.65)),
    url('../../blog/arlinkblogheader.png') center/cover no-repeat;
  border-bottom: 1px solid var(--stroke);
  position: relative;
}

.blog-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.blog-hero .pill {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #ffffff;
  backdrop-filter: blur(10px);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.blog-hero-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  margin: 16px 0 12px;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 12px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.6);
}

.blog-hero-subtitle {
  font-size: clamp(18px, 2.5vw, 24px);
  color: #e6eefc;
  margin: 0 0 24px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.blog-meta {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #e6eefc;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-meta span::before {
  content: "📅";
  font-size: 12px;
}

.blog-read-time::before {
  content: "⏱️" !important;
}

.blog-article {
  padding: 60px 0;
}

.blog-content {
  max-width: 800px;
  margin: 0 auto;
}

.blog-featured-image {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.3);
}

.blog-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.blog-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}

.blog-intro {
  margin-bottom: 40px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(96,165,250,.06));
  border-radius: 12px;
  border-left: 4px solid var(--accent);
}

.blog-intro .lead {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.blog-section-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  margin: 48px 0 20px;
  color: var(--text);
  position: relative;
  padding-left: 20px;
}

.blog-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

.blog-text p {
  margin: 20px 0;
  color: rgba(255,255,255,.9);
}

.blog-text strong {
  color: var(--accent);
  font-weight: 700;
}

.blog-highlight-box {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  backdrop-filter: blur(10px);
}

.blog-highlight-box h4 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.blog-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-checklist li {
  position: relative;
  padding: 8px 0 8px 32px;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
}

.blog-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #04101a;
}

.blog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.stat-item {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(96,165,250,.08));
  border-radius: 12px;
  border: 1px solid rgba(34,211,238,.2);
}

.stat-number {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.blog-quote {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, rgba(96,165,250,.15), rgba(34,211,238,.1));
  border-left: 4px solid var(--accent-2);
  border-radius: 0 12px 12px 0;
  font-size: 20px;
  font-style: italic;
  color: var(--text);
  position: relative;
}

.blog-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 60px;
  color: var(--accent-2);
  opacity: 0.3;
  font-family: Georgia, serif;
}

.blog-conclusion {
  margin: 48px 0;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 16px;
  border: 1px solid var(--stroke);
}

.blog-conclusion h3 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

.blog-conclusion p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
}

.blog-cta {
  margin: 48px 0 0;
  padding: 40px;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(96,165,250,.08));
  border-radius: 16px;
  border: 1px solid rgba(34,211,238,.2);
  text-align: center;
}

.blog-cta h3 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

.blog-cta p {
  margin: 0 0 24px;
  font-size: 18px;
  color: var(--muted);
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .blog-hero {
    padding: 40px 0 30px;
    background: 
      linear-gradient(135deg, rgba(11,16,32,.8), rgba(16,14,9,.7)),
      url('../../blog/arlinkblogheader.png') center/cover no-repeat;
  }
  
  .blog-article {
    padding: 40px 0;
  }
  
  .blog-content {
    padding: 0 20px;
  }
  
  .blog-text {
    font-size: 16px;
  }
  
  .blog-intro .lead {
    font-size: 18px;
  }
  
  .blog-stats {
    grid-template-columns: 1fr;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .blog-meta {
    flex-direction: column;
    gap: 12px;
  }
  
  .blog-highlight-box,
  .blog-conclusion,
  .blog-cta {
    padding: 20px;
  }
  
  .blog-quote {
    padding: 20px;
    font-size: 18px;
  }
}

/* Grafik Tasarım page header */
body.grafik-tasarim-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}
/* Web Tasarım page header - same gradient */
body.web-tasarim-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}

/* Service pages header background */
body.sosyal-medya-page header.nav,
body.dijital-pazarlama-page header.nav,
body.video-animasyon-page header.nav,
body.projects-page header.nav{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18))}

/* Blog simple marquee - single line */
.blog-marquee{
  position:relative;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(96,165,250,.08));
  color:var(--text);
  overflow:hidden;
  padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.blog-marquee-content{
  display:flex;
  white-space:nowrap;
  animation:blogMarqueeMove 25s linear infinite;
}
.blog-marquee span{
  font-size:clamp(20px,5.4vw,64px);
  font-weight:900;
  font-style:italic;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-text-stroke:2px rgba(255,255,255,.08);
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@keyframes blogMarqueeMove{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Grafik Tasarım marquee */
.grafik-marquee{
  position:relative;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(96,165,250,.08));
  color:var(--text);
  overflow:hidden;
  padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.grafik-marquee-content{
  display:flex;
  white-space:nowrap;
  animation:grafikMarqueeMove 25s linear infinite;
}
.grafik-marquee span{
  font-size:clamp(20px,5.4vw,64px);
  font-weight:900;
  font-style:italic;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-text-stroke:2px rgba(255,255,255,.08);
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@keyframes grafikMarqueeMove{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* All service page marquees */
.sosyal-marquee,
.dijital-marquee,
.video-marquee,
.projeler-marquee,
.iletisim-marquee{
  position:relative;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(96,165,250,.08));
  color:var(--text);
  overflow:hidden;
  padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sosyal-marquee-content,
.dijital-marquee-content,
.video-marquee-content,
.projeler-marquee-content,
.iletisim-marquee-content{
  display:flex;
  white-space:nowrap;
  animation:serviceMarqueeMove 25s linear infinite;
}
.sosyal-marquee span,
.dijital-marquee span,
.video-marquee span,
.projeler-marquee span,
.iletisim-marquee span{
  font-size:clamp(20px,5.4vw,64px);
  font-weight:900;
  font-style:italic;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-text-stroke:2px rgba(255,255,255,.08);
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@keyframes serviceMarqueeMove{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Web Tasarım Page Styles */
.web-marquee{
  position:relative;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(96,165,250,.08));
  color:var(--text);
  overflow:hidden;
  padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.web-marquee-content{
  display:flex;
  white-space:nowrap;
  animation:webMarqueeMove 25s linear infinite;
}
.web-marquee span{
  font-size:clamp(20px,5.4vw,64px);
  font-weight:900;
  font-style:italic;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-text-stroke:2px rgba(255,255,255,.08);
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@keyframes webMarqueeMove{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Hero Section with Square Images */
.yellow-hero{
  position:relative;
  background:var(--bg);
  color:var(--text);
  padding:120px 0 80px;
  text-align:left;
}
.yellow-hero .container{
  width:min(1360px,98%);
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}

/* Hero Content Layout */
.hero-content{
  margin-top:80px;
  position:relative;
  z-index:10;
}
.hero-main-title{
  font-size:clamp(32px,5.2vw,56px);
  font-weight:900;
  letter-spacing:.4px;
  margin:10px 0 100px;
  line-height:1.04;
  color:var(--text);
  text-transform:uppercase;
  font-style:italic;
  text-align:center;
}
.hero-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.hero-descriptions p{
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.7;
  margin:0 0 20px;
  color:rgba(255,255,255,.92);
}
.hero-descriptions p strong{
  color:var(--text);
  font-weight:700;
}
.hero-mockups{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:400px;
  border-radius:20px;
}
.hero-mockups img{
  width:80%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
}

@media(max-width:900px){
  .hero-content{
    margin-top:60px;
  }
  .hero-bottom{
    grid-template-columns:1fr;
    gap:40px;
  }
  .hero-mockups{
    min-height:300px;
  }
}

/* Hero Sliding Images */
.hero-squares-slider{
  margin-top:60px;
  position:relative;
  z-index:1;
  overflow:hidden;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hero-squares-track{
  display:flex;
  gap:26px;
  animation:heroSlide 20s linear infinite;
  will-change:transform;
  padding-left:100px;
}
.hero-square{
  flex:0 0 120px;
  height:120px;
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hero-square:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px -20px rgba(34,211,238,.3);
}
.hero-square img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .5s ease;
}
.hero-square:hover img{
  transform:scale(1.1);
}

@keyframes heroSlide{
  0%{transform:translateX(0)}
  100%{transform:translateX(-33.33%)}
}

/* Responsive */
@media(max-width:900px){
  .hero-square{
    flex:0 0 240px;
    height:240px;
  }
  .hero-squares-track{gap:20px}
}
@media(max-width:640px){
  .hero-square{
    flex:0 0 200px;
    height:200px;
  }
  .hero-squares-track{gap:16px}
  .hero-squares-slider{margin-top:40px}
}

/* Customer Reviews Marquee */
.reviews-marquee-section{
  background:transparent;
  padding:0;
  overflow:hidden;
}
.reviews-marquee{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.18));
  padding:20px 0;
  margin-bottom:20px;
}
.reviews-marquee:last-child{
  margin-bottom:0;
}
.reviews-track{
  display:inline-block;
  animation:reviewsMove 30s linear infinite;
  will-change:transform;
}
.reviews-marquee-reverse .reviews-track{
  animation:reviewsMoveReverse 35s linear infinite;
}
.reviews-track span{
  font-size:clamp(16px,1.4vw,20px);
  font-weight:600;
  color:var(--text);
  letter-spacing:.3px;
  line-height:1.4;
}

@keyframes reviewsMove{
  0%{transform:translateX(0%)}
  100%{transform:translateX(-100%)}
}
@keyframes reviewsMoveReverse{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(50%)}
}

/* Portfolio Grid */
#web-portfolio .container{
  width:min(1360px,98%);
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}
.web-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  margin-top:20px;
}
@media(max-width:900px){.web-portfolio-grid{grid-template-columns:1fr}}

.web-project-card{
  position:relative;
  border-radius:24px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.web-project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px -30px rgba(96,165,250,.45);
}
.web-project-media{
  position:relative;
  background:#0a1227;
  min-height:clamp(280px,34vw,440px);
  overflow:hidden;
}
.web-project-media::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
  pointer-events:none;
}
.web-project-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.web-project-meta{
  padding:16px 18px 20px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.web-project-title{
  font-size:22px;
  margin:0 0 12px;
  font-weight:900;
  color:#eaf2ff;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.web-project-chip{
  display:inline-block;
  padding:6px 10px;
  background:rgba(34,211,238,.12);
  color:var(--accent);
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  width:fit-content;
  border:1px solid rgba(34,211,238,.25);
}

/* Blog Style Services Section */
.yellow-services{
  background:var(--bg);
  color:var(--text);
  padding:80px 0;
}
.yellow-services .container{
  width:min(1360px,98%);
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}
.services-main-title{
  font-size:clamp(32px,5vw,56px);
  font-weight:900;
  text-align:center;
  margin:0 0 60px;
  letter-spacing:1px;
  color:var(--text);
}
.services-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media(max-width:900px){.services-content{grid-template-columns:1fr}}

.services-left p{
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.7;
  margin:0 0 20px;
  font-weight:500;
  color:var(--muted);
}
.services-list{
  list-style:none;
  padding:0;
  margin:0;
}
.services-list li{
  font-size:clamp(16px,1.2vw,20px);
  font-weight:800;
  font-style:italic;
  letter-spacing:.8px;
  margin:0 0 16px;
  color:var(--accent);
}

.services-why-title{
  font-size:clamp(28px,4.6vw,48px);
  line-height:1.04;
  margin:10px 0 10px;
  font-weight:900;
  letter-spacing:.4px;
  font-style:italic;
  text-transform:uppercase;
  color:var(--text);
}

.services-why-text{
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.7;
  color:rgba(255,255,255,.92);
  margin:0;
}

.services-image{
  width:100%;
  max-width:600px;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

/* FAQ Section */
#faq{
  padding:80px 0;
  background:var(--bg);
}
#faq .container{
  width:min(1360px,98%);
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}
#faq .section-title{
  font-size:clamp(28px,4.6vw,48px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:.4px;
  font-style:italic;
  text-transform:uppercase;
  color:var(--text);
  margin:10px 0 60px;
}
#faq .section-title:after{
  display:none;
}

/* CTA Text Section */
.cta-text-section{
  padding:60px 0;
  background:var(--bg);
  text-align:center;
}
.cta-text-section .container{
  width:min(1360px,98%);
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}
.cta-text-title{
  font-size:clamp(28px,4.6vw,48px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:.4px;
  font-style:italic;
  text-transform:uppercase;
  color:var(--text);
  margin:0 0 30px 0;
}
.cta-text-description{
  font-size:clamp(16px,1.2vw,20px);
  line-height:1.7;
  color:rgba(255,255,255,.92);
  margin:0 auto 40px auto;
  max-width:1000px;
  font-weight:500;
}

/* Grafik Services Grid */
.grafik-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px;
}
/* 6 elements: perfectly fits 3x2 grid, no special positioning needed */
@media(max-width:900px){
  .grafik-services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:600px){
  .grafik-services-grid{
    grid-template-columns:1fr;
  }
}
.grafik-service-item{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:18px 16px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.grafik-service-item:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px -25px rgba(96,165,250,.45);
}
.grafik-service-item h3{
  font-size:clamp(13px,1vw,16px);
  font-weight:800;
  color:var(--text);
  margin:0;
  letter-spacing:.4px;
  line-height:1.3;
}

.faq-list{
  max-width:1360px;
  width:98%;
  margin:0 auto;
  padding-left:clamp(12px,2.2vw,28px);
  padding-right:clamp(12px,2.2vw,28px);
}
.faq-item{
  margin-bottom:0;
}
.faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
  cursor:pointer;
  user-select:none;
  transition:color 0.3s ease;
}
.faq-question:hover{
  color:var(--accent);
}
.faq-question h3{
  font-size:clamp(20px,1.6vw,26px);
  font-weight:700;
  margin:0;
  color:var(--text);
  line-height:1.4;
}
.faq-toggle{
  font-size:24px;
  font-weight:300;
  color:var(--text);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  transition:all 0.3s ease;
  flex-shrink:0;
  margin-left:20px;
}
.faq-item.active .faq-toggle{
  background:var(--accent);
  color:#04101a;
  border-color:var(--accent);
  transform:rotate(45deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease, padding 0.4s ease;
  padding:0;
}
.faq-item.active .faq-answer{
  max-height:300px;
  padding:0 0 24px 0;
}
.faq-answer p{
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.7;
  color:rgba(255,255,255,.92);
  margin:0;
}
@media(max-width:768px){
  .faq-question{
    padding:20px 0;
  }
  .faq-toggle{
    margin-left:16px;
    width:28px;
    height:28px;
    font-size:20px;
  }
}

/* Web Services Grid - Same style as graphic design services */
.web-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: min(1360px,98%);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(12px,2.2vw,28px);
    padding-right: clamp(12px,2.2vw,28px);
}

.web-service-item {
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(13px,1vw,16px);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text);
    transition: all .3s ease;
    cursor: pointer;
}

.web-service-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34,211,238,.15);
    border-color: rgba(34,211,238,.3);
}

@media (max-width: 900px) {
    .web-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .web-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Grafik tasarım FAQ styles - using "Biz Kimiz" colors and fonts */
.grafik-tasarim-page #faq .section-title {
    color: var(--text);
    font-size: clamp(28px,4.6vw,48px);
    font-weight: 900;
    letter-spacing: .4px;
    line-height: 1.04;
    font-style: italic;
    text-transform: uppercase;
    margin: 10px 0 60px;
}

.grafik-tasarim-page #faq .faq-question {
    color: var(--text);
    font-size: clamp(20px,1.6vw,26px);
}

.grafik-tasarim-page #faq .faq-answer {
    color: rgba(255,255,255,.92);
    font-size: clamp(15px,1.15vw,18px);
    line-height: 1.7;
}

/* Teklif Page Styles - Eliz Yazılım Style */
.teklif-page .yellow-hero {
    min-height: 0;
    padding: 0;
}

.teklif-form-section {
    background: var(--bg);
    padding: 20px 0 60px 0;
}

.teklif-form-section .section-title {
    text-align: center;
    color: var(--text);
    font-size: clamp(28px,4.6vw,48px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: .4px;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 24px;
    margin-top: 10px;
}

.teklif-form-section .section-title:after {
    display: none;
}

.form-intro {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 40px;
    color: #ffffff;
    font-size: clamp(16px,1.2vw,18px);
    line-height: 1.6;
}

.eliz-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-step {
    margin-bottom: 40px;
}

.step-title {
    color: var(--text);
    font-size: clamp(18px,1.4vw,22px);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.step-subtitle {
    color: rgba(255,255,255,.7);
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step input[type="date"],
.form-step select,
.form-step textarea {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 16px 20px;
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.form-step input:focus,
.form-step select:focus,
.form-step textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 3px rgba(251,191,36,.1);
}

.contact-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .contact-inputs {
        grid-template-columns: 1fr;
    }
}

.service-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 900px) {
    .service-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .service-options {
        grid-template-columns: 1fr;
    }
}

.service-option {
    cursor: pointer;
}

.service-option input[type="checkbox"] {
    display: none;
}

.option-card {
    display: block;
    background: rgba(255,255,255,.03);
    border: 2px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-card:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
    transform: translateY(-2px);
}

.service-option input[type="checkbox"]:checked + .option-card {
    background: rgba(251,191,36,.1);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.option-title {
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.service-option input[type="checkbox"]:checked + .option-card .option-title {
    color: var(--accent);
}

.form-step textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.final-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 600px) {
    .final-inputs {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.input-group label {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.kvkk-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 32px 0;
    padding: 20px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
}

.kvkk-consent input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.kvkk-consent label {
    color: rgba(255,255,255,.8);
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.submit-btn {
    width: 100%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 8px;
    padding: 18px 32px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.submit-btn:hover {
    background: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251,191,36,.3);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Why Us Section */
.why-us-section {
    background: var(--bg);
    padding: 80px 0;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.why-us-item {
    text-align: center;
    padding: 32px 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.why-us-item:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
}

.why-us-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.why-us-item h3 {
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.why-us-item p {
    color: rgba(255,255,255,.8);
    font-size: 15px;
    line-height: 1.6;
}

/* CTA Contact Info */
.merge-contact-info {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.merge-contact-info p {
    color: rgba(255,255,255,.8);
    font-size: 16px;
    margin-bottom: 12px;
}

.merge-phone,
.merge-email {
    display: block;
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    margin: 8px 0;
    transition: all 0.3s ease;
}

.merge-phone:hover,
.merge-email:hover {
    color: #f59e0b;
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .teklif-form-wrap {
        margin: 0 20px;
        padding: 24px;
    }
    
    .teklif-form-section {
        padding: 40px 0;
    }
    
    .why-us-section {
        padding: 60px 0;
    }
    
    .why-us-grid {
        gap: 24px;
        margin-top: 32px;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .merge-contact-info {
        bottom: 20px;
    }
}