@font-face { font-family:'Bac Bebas'; font-style:normal; font-weight:400; font-display:swap; src:url('/img/fonts/bebas-neue-book.woff') format('woff'); }
@font-face { font-family:'Bac Bebas'; font-style:normal; font-weight:700; font-display:swap; src:url('/img/fonts/bebas-neue-bold.woff') format('woff'); }
/* Customer revisions: tighter rhythm, readable type and an abstract brand globe. */
:root { --display:'Bac Bebas',system-ui,sans-serif; }
h1,h2,h3,h4,.section-title,.hero-heading h1,.ph-title,.main-nav a,.nav-cta,.btn-primary,.btn-ghost,.eyebrow,.hm-label,.hm-block h2,.mn-grid li span,.service-grid .txt,.sw-grid h3,.pc-body h3,.cta-inner h2,.c-l,.crumbs { text-transform:none; letter-spacing:0; }
.hero { padding:112px 0 36px; background:var(--bg); }
.hero-inner { max-width:1160px; grid-template-columns:0.9fr 1.1fr; gap:28px 48px; text-align:left; }
.hero-heading { grid-column:2; grid-row:1; text-align:left; }
.hero-heading h1 { font-size:clamp(30px,3.2vw,46px); font-weight:600; line-height:1.18; letter-spacing:-.045em; margin:0; }
.hero-heading h1 .accent { font-weight:700; }
.hero-heading .hero-actions { margin-top:26px; justify-content:flex-start; gap:14px 22px; flex-direction:row; }
.btn-primary,.btn-ghost { font-size:12px; padding:14px 20px; font-weight:700; text-transform:none; letter-spacing:0; }
.btn-ghost { padding-inline:0; border-bottom-color:var(--accent); }
.hero-visual { grid-column:1; grid-row:1; min-height:0; max-width:420px; margin:0 auto; }
.hero-text { grid-column:1/-1; }
.hero-mission { max-width:none; margin:0; gap:32px; }
.hero-mission .hm-block { padding-top:16px; align-self:start; width:100%; position:relative; z-index:5; }
.hero-mission .hm-block:first-child { border-top: 0; border-bottom: 0; padding-bottom: 0; }
.hero-mission .hm-block:last-child { border-top: 0; border-bottom: 0; padding-bottom: 0; }
.hm-label { font-size:10px; font-weight:600; letter-spacing:.04em; }
/* harita: form/bilgi satirinin altinda, tam genislik */
.contact-inner.has-map { margin-bottom: 34px; }
#map.contact-map,
.contact .container > #map {
  width: 100% !important;
  height: 340px !important;
  border: 1px solid var(--line);
  border-radius: 0;
  margin-top: 0;
  filter: grayscale(1) contrast(1.08);
}
.hm-block h2 { font-size:21px; line-height:1.25; font-weight:700; margin-bottom:10px; }
.hm-block p { font-size:14px; line-height:1.75; }
.mission,.services,.software,.clients,.contact,.blog-teaser,.process,.why,.faq,.network,.medianet,.collab { padding:48px 0; background:var(--bg); }
.head-center,.medianet .head-center,.collab .head-center { margin-bottom:26px; }
.section-title { font-size:clamp(25px,2.7vw,36px); line-height:1.2; font-weight:700; }
.section-title strong { font-weight:700; }
.medianet .section-title,.collab .section-title { font-size:clamp(25px,2.6vw,34px); }
.mn-grid { gap:12px; }
.mn-grid li { padding:20px 16px; background:var(--surface); }
.mn-grid li span,.cb-grid li span { font-size:14px; font-weight:600; line-height:1.45; text-transform:none; }
.cb-grid li { padding:18px 14px; gap:8px; }
.cb-grid li i { font-size:11px; }
.service-grid .txt,.sw-grid h3 { font-size:21px; line-height:1.3; }
.service-grid li,.sw-grid li { min-height:0; padding:24px 0; }
.page-hero { padding:112px 0 36px; background:var(--bg); }
.ph-title { font-size:clamp(28px,3.4vw,44px); font-weight:700; line-height:1.2; }
.ph-lead,.head-sub { font-size:15px; line-height:1.75; }
.page-hero+section { padding-top:40px; }
.main-nav a { font-size:12px; font-weight:700; letter-spacing:0; }
.ct-title { font-family:var(--display); font-size:24px; font-weight:700; line-height:1.2; }
.contact { padding-bottom:52px; }
.contact-inner { gap:42px!important; }
.contact-right { gap:20px; }
.ct-big,.ct-big a { font-family:var(--display)!important; font-size:clamp(20px,2vw,28px); font-weight:650; line-height:1.4; letter-spacing:-.025em; }
.ct-big.ct-addr { font-size:clamp(17px,1.7vw,22px); line-height:1.6; }
#contact-form input::placeholder,#contact-form textarea::placeholder { text-transform:none; letter-spacing:0; font-size:14px; }
#contact-form button { text-transform:none; letter-spacing:0; }
.cta-band { padding:44px 0; }
.cta-inner h2 { font-size:clamp(24px,3vw,36px); line-height:1.2; }
.site-footer { padding-top:44px; }
.to-top,.to-top:hover { width:46px; height:46px; background:#d44715; color:#fff; border:1px solid #d44715; z-index:1090; box-shadow:0 5px 20px #0002; }
.to-top svg { display:block; width:22px; height:22px; stroke:#fff; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; margin-left:14px; padding:8px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:50%; cursor:pointer; }
.theme-toggle svg { width:19px; height:19px; }
.theme-toggle .theme-sun { display:none; }
.site-header .header-inner { gap:16px; }
.header-inner .main-nav { margin-left:auto; }
.brand-logo img { width:140px; height:auto; aspect-ratio:827/281; object-fit:contain; }
.brand-globe { width:100%; aspect-ratio:1.1; position:relative; perspective:900px; z-index:1; }
.globe-stage { width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .5s ease; }
.globe-halo { position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle,#ff8a4f20,transparent 70%); }
.globe-sphere { position:absolute; width:72%; aspect-ratio:1; left:14%; top:9%; transform-style:preserve-3d; transform:rotateZ(-18deg) rotateX(15deg); }
.globe-rotor { position:absolute; inset:0; transform-style:preserve-3d; animation:brand-sphere-turn 24s linear infinite; }
.globe-meridian { position:absolute; inset:0; border:1.8px solid #ef652c; border-radius:50%; transform:rotateY(var(--angle)); backface-visibility:visible; }
.globe-latitude { position:absolute; left:50%; top:calc(50% + var(--latitude)); width:var(--size); aspect-ratio:1; border:1.5px solid #f88d535c; border-radius:50%; transform:translate(-50%,-50%) rotateX(90deg); }
.globe-water { position:absolute; left:14%; top:9%; width:72%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 40% 35%,#ffad6a0d,transparent 72%); }
/* balik kurenin icinde: buyuk daire cizgilerinin ICINDE kalir */
.swimming-fish { position:absolute; left:50%; top:50%; width:26%; aspect-ratio:120/64; transform:translate(-50%,-50%) rotate(-8deg); transition:transform .5s cubic-bezier(.2,.8,.25,1), filter .5s; z-index:2; }
.swimming-fish svg { display:block; width:100%; height:100%; overflow:hidden; filter:drop-shadow(0 3px 3px #9a310c18); }
/* balik sabit: merkezde durur, kuyruk ve yuzgec canli kalir */
.swimming-fish:hover { transform:translate(-50%,-50%) rotate(-8deg) scale(1.12); filter:drop-shadow(0 6px 10px #9a310c28); }
.swimming-fish:hover .fish-tail { animation-duration:.32s; }
.swimming-fish:hover .fish-fin { animation-duration:.45s; }
.fish-tail { transform-origin:30px 32px; animation:tail-beat .65s ease-in-out infinite alternate; }
.fish-fin { transform-origin:74px 34px; animation:fin-beat .9s ease-in-out infinite alternate; }
.fish-1 .fish-tail,.fish-3 .fish-tail { animation-delay:-.3s; }
.globe-shadow { position:absolute; width:52%; height:10px; left:24%; bottom:5%; background:#18262e16; border-radius:50%; filter:blur(6px); }
@keyframes brand-sphere-turn { to { transform:rotateY(360deg); } }
@keyframes tail-beat { from { transform:perspective(80px) rotateY(-32deg) rotate(-5deg); } to { transform:perspective(80px) rotateY(35deg) rotate(5deg); } }
@keyframes fin-beat { to { transform:rotate(-18deg) scaleY(.65); } }
.globe-paused .globe-rotor,.globe-paused .fish-tail,.globe-paused .fish-fin { animation-play-state:paused; }
/* Light is always the initial theme; dark is explicitly chosen. */
html[data-theme=dark] { color-scheme:dark; --bg:#12191e; --bg-2:#12191e; --surface:#192329; --surface-2:#202c33; --text:#edf0f1; --text-2:#c4cdd1; --muted:#9aabb3; --line:#32414a; --band:#0c1216; --hero-text:#edf0f1; --hero-text-2:#c4cdd1; --nav-ink:#edf0f1; --accent:#fa8954; }
html[data-theme=dark] .site-header,html[data-theme=dark] .site-header.solid { background:#12191ef5; }
html[data-theme=dark] .main-nav { background:var(--bg); }
html[data-theme=dark] .brand-logo .lg-dark,html[data-theme=dark].menu-open .brand-logo .lg-dark { display:none; }
html[data-theme=dark] .brand-logo .lg-light,html[data-theme=dark].menu-open .brand-logo .lg-light { display:block; }
html:not([data-theme=dark]) .brand-logo .lg-dark,html:not([data-theme=dark]).menu-open .brand-logo .lg-dark { display:block; }
html:not([data-theme=dark]) .brand-logo .lg-light,html:not([data-theme=dark]).menu-open .brand-logo .lg-light { display:none; }
html[data-theme=dark] .theme-toggle .theme-moon { display:none; }
html[data-theme=dark] .theme-toggle .theme-sun { display:block; }
html[data-theme=dark] .btn-primary,html[data-theme=dark] .nav-cta { background:#ed682e; border-color:#ed682e; color:#101820!important; }
html[data-theme=dark] .mn-grid li:hover,html[data-theme=dark] .mn-grid li:hover span { color:#12191e; }
html[data-theme=dark] #contact-form input,html[data-theme=dark] #contact-form textarea { background:var(--surface); color:var(--text); border-color:var(--line); }
html[data-theme=dark] .ct-big.ct-addr { color:var(--text-2); }
html[data-theme=dark] .cookie-bar { background:var(--surface); border-color:var(--line); }
html[data-theme=dark] .cookie-ok { background:#ed682e; color:#101820; }
html[data-theme=dark] .post-card,html[data-theme=dark] .why-grid li,html[data-theme=dark] .faq-item { background:var(--surface); }
html[data-theme=dark] .nav-toggle span,html[data-theme=dark] .nav-toggle.open span { background:var(--text); }
.cookie-error { color:var(--accent); font-size:12px; margin-top:10px; }
.cookie-manage { display:block; margin-top:16px; padding:4px 0; border:0; background:transparent; color:var(--text-2); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.cookie-head b,.cookie-actions button { text-transform:none; letter-spacing:0; }
.preference-status:not(:empty) { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2000; width:min(90%,420px); padding:16px; background:var(--surface); color:var(--text); border:1px solid var(--accent); box-shadow:0 5px 25px #0002; font-size:14px; }
@media(max-width:900px) {
 .hero-inner { gap:26px 30px; grid-template-columns:0.85fr 1.15fr; }
 .hero-heading h1 { font-size:32px; }
 .hero-heading .hero-actions { gap:12px; }
 .hero-mission { grid-template-columns:1fr 1fr; gap:24px; }
 .contact-inner { gap:28px!important; }
 .header-inner .theme-toggle { margin-left:auto; }
 .header-inner .main-nav { margin-left:0; }
 .brand-logo img { width:120px; }
}
@media(max-width:600px) {
 .hero { padding:98px 0 28px; }
 .hero-inner { display:flex; flex-direction:column; gap:22px; padding-inline:22px; }
 .hero-heading { order:0; text-align:center; width:100%; }
 .hero-heading h1 { font-size:clamp(25px,7.4vw,33px); line-height:1.2; }
 .hero-heading .hero-actions { margin-top:19px; justify-content:center; gap:10px 16px; }
 .hero-actions .btn-primary,.hero-actions .btn-ghost { width:auto; font-size:11px; padding:12px 15px; }
 .hero-actions .btn-ghost { padding-inline:0; }
 .hero-visual { order:1; width:100%; max-width:300px; margin:0 auto; }
 .hero-text { order:2; width:100%; }
 .hero-mission { grid-template-columns:1fr; gap:20px; margin:0; }
 .hm-block { padding-top:13px; }
 .hm-block h2 { font-size:19px; }
 .hm-block p { font-size:13px; line-height:1.7; }
 .hm-label { font-size:10px; }
 .mission,.services,.software,.clients,.contact,.blog-teaser,.process,.why,.faq,.network,.medianet,.collab { padding:32px 0; }
 .head-center,.medianet .head-center,.collab .head-center { margin-bottom:20px; }
 .section-title,.medianet .section-title,.collab .section-title { font-size:25px; }
 .mn-grid { gap:9px; }
 .mn-grid li,.cb-grid li { padding:16px 11px; }
 .mn-grid li span,.cb-grid li span { font-size:12px; }
 .ct-title { font-size:22px; }
 .ct-big,.ct-big a { font-size:clamp(18px,5.8vw,23px); }
 .ct-big.ct-addr { font-size:17px; }
 .contact-right { gap:14px; }
 #contact-form input,#contact-form textarea { font-size:16px; }
 .theme-toggle { width:36px; height:36px; }
 .site-header .header-inner { gap:12px; }
 .brand-logo img { width:113px; }
 .globe-fish { width:38px; height:25px; }
 .page-hero { padding:104px 0 30px; }
 .to-top { right:16px; bottom:16px; }
}
@media(prefers-reduced-motion:reduce) { .globe-rotor,.fish-tail,.fish-fin { animation:none!important; }.globe-stage { transform:none!important; } }

/* Typography matched to the reference site's Bebas Neue / Open Sans pairing. */
body,input,textarea,select,button { font-family:'Open Sans',Arial,sans-serif; }
h1,h2,h3,h4,.hero-heading h1,.section-title,.hm-block h2,.ct-title,.ph-title { font-family:var(--display); font-weight:400; letter-spacing:.005em; }
.hero-heading h1 .accent,.section-title strong { font-weight:400; }
.ct-title { display:block; margin:0 0 18px; font-size:28px; }
.globe-sphere { border:1px solid #ef652c55; border-radius:50%; }
.globe-meridian { border-width:1.3px; border-color:#ef652c80; }
@media(max-width:600px) {
 .brand-globe { aspect-ratio:1; }
 .hero-visual { max-width:290px; }
 .globe-sphere,.globe-water { width:88%; left:6%; top:5%; }
 .globe-shadow { bottom:2%; }
 .hero-heading h1 { font-size:34px; line-height:1.08; }
 .ct-title { font-size:26px; margin-bottom:16px; }
 #map, .contact .container > #map { height: 260px !important; }
}

.swimming-fish { transition:transform .5s cubic-bezier(.2,.8,.25,1), filter .5s; }
/* kalin glob modunda merkez balik biraz buyuk durur */
.globe-fish { width:38px; height:25px; }
.btn-primary,.btn-ghost,.hero-actions .btn-primary,.hero-actions .btn-ghost,.main-nav a { font-family:var(--display); font-size:16px; font-weight:400; letter-spacing:.02em; }
/* misyon bolum basligi: medya agi baskisiyla ayni format (tek, ortali, buyuk) */
.hero-mission-head { text-align: center; margin-bottom: 26px; }
.hero-mission-head .section-title {
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.hm-label { display: none; }
.hm-block p,.mn-grid li span,.cb-grid li span,.ph-lead,.head-sub { font-family:'Open Sans',Arial,sans-serif; }
@media(prefers-reduced-motion:reduce) { .swimming-fish { transition:none; } }

/* The reference uses the original Book and Bold cuts, not Google Fonts Regular. */
.hero-heading h1 { font-weight:700; font-synthesis:none; letter-spacing:0; }
.hero-heading h1 .accent { font-weight:400; }
.main-nav a,.btn-primary,.btn-ghost,.hero-actions .btn-primary,.hero-actions .btn-ghost,.nav-cta,.hm-block h2,.section-title,.ct-title { font-weight:700; font-synthesis:none; }
.main-nav a { font-size:21px; }
.ct-big,.ct-big a { font-weight:400; }

/* Contact uses sentence-case typography independently of display headings. */
.contact .ct-title,.contact .ct-big,.contact .ct-big a,.contact .char-counter,
.contact input,.contact textarea,.contact button {
  font-family:'Open Sans',Arial,sans-serif!important;
  text-transform:none;
  letter-spacing:0;
}
.contact .ct-title { font-size:22px; font-weight:600; line-height:1.4; }
.contact .ct-big,.contact .ct-big a { font-size:22px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.contact .ct-big.ct-addr { font-size:17px; font-weight:400; line-height:1.7; }
@media(max-width:600px) {
 .contact .ct-title { font-size:21px; }
 .contact .ct-big,.contact .ct-big a { font-size:19px; }
 .contact .ct-big.ct-addr { font-size:16px; }
}

/* Misyon & vizyon bloklari: baslik ile ilk blok arasi daraltildi ve turuncu
   ayrac cizgisi VIZYON basliginin hemen ustune alindi. Vizyonun altinda cizgi
   yok; cizgi yalnizca bloklar alt alta dizildiginde (tek sutun) gorunur. */
.hero-mission-head { margin-bottom: 12px; }
.hero-mission .hm-block:first-child { padding-top: 0; }
@media (max-width: 760px) {
  .hero-mission { gap: 0; }
  .hero-mission .hm-block:last-child {
    border-top: 2px solid var(--accent);
    padding-top: 16px;
    margin-top: 22px;
  }
}

/* ---------- iletisim: bilgiler formun altinda, haritanin ustunde ---------- */
.contact-inner { grid-template-columns: 1fr !important; }
.contact-inner .contact-left { max-width: 640px; }
.ct-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 40px;
  align-items: start;
  padding-top: 26px;
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
}
.ct-info .ct-big { margin: 0; }

/* ---------- mobil giris: baslik + globe tek ekrani doldurur ---------- */
@media (max-width: 600px) {
  .ct-info { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; }
  .hero { padding: 88px 0 24px; }
  .hero-inner { gap: 18px; }
  .hero-visual {
    max-width: min(88vw, 400px);
    min-height: 56svh;
    display: flex;
    align-items: center;
  }
  .hero-visual .brand-globe { width: 100%; }
  /* misyon bolumu katlamanin altinda kalsin */
  .hero-text { margin-top: 30px; }
}

/* ---------- globe: balik kurenin merkezinde, sabit, cizgilerin arkasinda ---------- */
/* Balik kure duzleminin bir tik gerisinde durur; boylece one gelen meridyenler
   balgin uzerinden gecer ve balik kurenin icindeymis gibi gorunur. */
.globe-water { z-index: 0; transform: translateZ(-1px); }
.globe-sphere { z-index: 1; }
.swimming-fish {
  width: 34%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: none;
}
.swimming-fish svg { filter: none; overflow: visible; }
/* hareket yok: yuzme, kuyruk ve yuzgec animasyonlari ile hover buyutmesi kapali */
.swimming-fish:hover { transform: translate(-50%, -50%); filter: none; }
.fish-tail, .fish-fin { animation: none !important; transform: none !important; }
@media (max-width: 600px) { .swimming-fish { width: 36%; } }

/* ---------- iletisim: formun yanindaki kaya (yalnizca masaustu) ---------- */
.contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px) !important; align-items: center; }
.contact-inner .contact-left { max-width: 640px; }
.ct-rock { position: relative; justify-self: end; width: 100%; max-width: 400px; }
.ct-rock svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 45px #0000003d); }
.ct-rock-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 0 14%;
}
.ct-rock-text .rk-1 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.22em;
  color: #ffffffd9;
}
.ct-rock-text .rk-2 {
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.ct-rock-text .rk-3 {
  font-size: 15px;
  font-style: italic;
  color: #ffffffbf;
}
/* mobilde ve dar ekranda kaya gizlenir, form tek basina kalir */
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr !important; }
  .ct-rock { display: none; }
}

/* is birligi kutulari: numaralar kaldirildi */
.cb-grid li i { display: none; }

/* ---------- iletisim: form | uc adim | kaya ---------- */
.contact-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 380px) !important;
  gap: 48px !important;
  align-items: center;
}
.ct-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.ct-steps li {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ct-steps i {
  font-family: var(--display);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.ct-steps span {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

@media (max-width: 1150px) {
  .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) !important; }
  .ct-rock { display: none; }
}
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr !important; gap: 34px !important; }
  .ct-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .ct-steps { grid-template-columns: 1fr; gap: 14px; }
  .ct-steps span { font-size: 17px; }
}

/* ---------- kaya mobilde de gorunur: "Bize Ulas"in hemen ustunde ---------- */
/* 1150px altinda sutunlar alt alta dizilir ve kaya order:-1 ile en basa gecer,
   yani is birligi bolumu ile formun arasinda kendi blogu olarak durur. */
@media (max-width: 1150px) {
  .contact-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ct-rock {
    display: block;
    order: -1;
    justify-self: center;
    width: 100%;
    max-width: 300px;
    margin-bottom: 4px;
  }
  .ct-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .ct-rock { max-width: 260px; }
  .ct-steps { grid-template-columns: 1fr; gap: 14px; }
}