*{box-sizing:border-box}



body{

  margin:0;

  font-family:Arial,Helvetica,sans-serif;

  background:#f4f4f4;

  color:#111;

}



a{

  text-decoration:none;

  color:inherit;

}



.container{

  max-width:1180px;

  margin:auto;

  padding:0 24px;

}



/* HEADER */

.nav{

  height:72px;

  background:#fff;

  border-bottom:1px solid #eee;

  position:sticky;

  top:0;

  z-index:100;

}



.nav .container,

.nav-inner{

  height:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

}



.logo{

  display:flex;

  align-items:center;

  gap:10px;

  font-weight:900;

}



.logo img{

  height:36px;

  width:auto;

  display:block;

}



.mobile-menu-btn{

  display:none;

  border:0;

  background:#111;

  color:#fff;

  width:42px;

  height:42px;

  border-radius:12px;

  font-size:24px;

  cursor:pointer;

}



.menu{

  display:flex;

  align-items:center;

  gap:28px;

  font-size:14px;

  color:#555;

}



.menu a,

.menu-item > a{

  position:relative;

  display:inline-flex;

  align-items:center;

  height:40px;

}



.menu a.active{

  background:#111;

  color:#fff;

  padding:9px 16px;

  border-radius:999px;

}



.menu a::after,

.menu-item > a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-6px;

  width:0;

  height:2px;

  background:#111;

  transition:.25s ease;

}



.menu a:hover::after,

.menu-item > a:hover::after{

  width:100%;

}



.menu-item{

  position:relative;

  display:inline-flex;

  align-items:center;

  height:40px;

}



.submenu{

  position:absolute;

  top:100%;

  left:50%;

  transform:translateX(-50%);

  min-width:210px;

  background:#fff;

  border:1px solid #eee;

  border-radius:14px;

  padding:8px;

  box-shadow:0 18px 45px rgba(0,0,0,.10);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  z-index:99999;

}



.submenu a{

  display:block;

  height:auto;

  padding:11px 13px;

  border-radius:10px;

  white-space:nowrap;

  color:#111;

}



.submenu a:hover{

  background:#f5f5f5;

}



.menu-item:hover .submenu{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}



/* BUTTONS */

.btn{

  border:1px solid #ddd;

  border-radius:999px;

  padding:10px 18px;

  font-weight:700;

  font-size:14px;

  background:#fff;

  display:inline-block;

}



.btn.dark{

  background:#111;

  color:#fff;

  border:0;

}



.btn.soft{

  background:#f1f1f1;

  color:#111;

  border:0;

}



/* HERO */

.hero{

  background:#fff;

  overflow:hidden;

}



.hero .container.hero-grid{

  max-width:1500px;

  margin:0 auto;

  padding:0 24px;

  display:grid;

  grid-template-columns:.9fr 1.3fr;

  min-height:720px;

  align-items:stretch;

  background:#fff;

}



.hero-text{

  height:720px;

  padding:80px 56px;

  display:flex;

  align-items:center;

  position:relative;

  overflow:hidden;

}



.hero-text:before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(circle at 20% 20%,#ddd,transparent 28%),

    radial-gradient(circle at 80% 75%,#e9e9e9,transparent 30%);

  opacity:.65;

}



.hero-content{

  position:relative;

  z-index:2;

}



.tag{

  display:inline-block;

  border:1px solid #ddd;

  border-radius:999px;

  padding:8px 14px;

  font-size:12px;

  letter-spacing:2px;

  color:#555;

  margin-bottom:22px;

}



.hero-title,

.hero h1{

  font-size:clamp(42px,4.5vw,58px);

  line-height:1;

  font-weight:900;

  letter-spacing:-2px;

  margin:0 0 22px;

  max-width:560px;

}



.hero-title span{

  display:block;

  opacity:0;

  transform:translateY(28px);

  animation:fadeUp .8s ease forwards;

}



.hero-title span:nth-child(1){animation-delay:.1s}

.hero-title span:nth-child(2){animation-delay:.25s}

.hero-title span:nth-child(3){animation-delay:.4s}

.hero-title span:nth-child(4){animation-delay:.55s}



@keyframes fadeUp{

  to{

    opacity:1;

    transform:translateY(0);

  }

}



.hero p{

  color:#666;

  line-height:1.7;

  max-width:430px;

  font-size:16px;

}



.hero-actions{

  margin-top:22px;

  display:flex;

  gap:12px;

  flex-wrap:wrap;

}



.hero-stats{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:14px;

  margin-top:28px;

  max-width:560px;

}



.hero-stats div{

  background:#f5f5f5;

  border:1px solid #eee;

  padding:16px 18px;

  border-radius:18px;

  box-shadow:0 10px 25px rgba(0,0,0,.06);

}



.hero-stats b{

  display:block;

  font-size:24px;

  font-weight:900;

  line-height:1;

}



.hero-stats span{

  display:block;

  margin-top:6px;

  font-size:12px;

  color:#666;

}



.hero-img{

  width:100vw;

  margin-right:calc(-50vw + 50%);

  height:720px;

  overflow:hidden;

  background:#111;

  border-radius:0 0 0 40px;

}



.hero-img img{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  object-position:center center;

  filter:grayscale(1);

}



.hero-badge{

  position:absolute;

  left:28px;

  bottom:28px;

  background:rgba(255,255,255,.9);

  backdrop-filter:blur(10px);

  border-radius:20px;

  padding:18px 22px;

  box-shadow:0 20px 50px rgba(0,0,0,.18);

}



.hero-badge strong{

  display:block;

  font-size:28px;

}



.hero-badge span{

  font-size:13px;

  color:#555;

}



/* CATEGORIES */

.categories{

  background:#111;

  color:#fff;

  padding:0;

}



.cat-wrap{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:0;

  text-align:center;

}



.cat{

  padding:18px 20px;

  font-size:14px;

  font-weight:700;

  color:#fff;

  background:#111;

}



.cat.active,

.cat:hover{

  background:#1d1d1d;

}



/* TRUST */

.trust-strip{

  background:#111;

  color:#fff;

  padding:14px 0;

}



.trust-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:14px;

  text-align:center;

}



.trust-grid div{

  font-size:12px;

  color:#ddd;

  letter-spacing:.3px;

}



/* SECTIONS */

section{

  background:#fff;

}



.section-title{

  text-align:center;

  padding:50px 0 28px;

}



.section-title h2{

  font-size:30px;

  margin:0 0 10px;

}



.section-title p{

  margin:0;

  color:#777;

}



.section-soft{

  background:#fafafa;

}



.section-head{

  display:flex;

  align-items:end;

  justify-content:space-between;

  margin-bottom:28px;

  padding-top:50px;

}



.section-head h2{

  font-size:34px;

  margin:6px 0 0;

}



.mini-title{

  font-size:12px;

  letter-spacing:2px;

  text-transform:uppercase;

  color:#777;

  font-weight:600;

}



.section-link{

  font-weight:800;

  font-size:14px;

}



/* PROJECTS / CARDS */

.projects{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;

  padding-bottom:60px;

}



.card{

  border:1px solid #eee;

  border-radius:24px;

  background:#fff;

  overflow:hidden;

  box-shadow:0 8px 24px rgba(0,0,0,.04);

  transition:.25s;

}



.card:hover{

  transform:translateY(-4px);

  box-shadow:0 18px 40px rgba(0,0,0,.09);

}



.card img{

  width:100%;

  height:190px;

  object-fit:cover;

  filter:grayscale(1);

}



.card-body{

  padding:20px;

}



.card h3{

  margin:0 0 10px;

}



.card p{

  color:#666;

  line-height:1.6;

  font-size:14px;

}



.project-card small{

  color:#777;

  font-weight:700;

}



.project-card img{

  width:100%;

  height:220px;

  object-fit:cover;

  object-position:center;

}



.circle{

  width:34px;

  height:34px;

  border-radius:50%;

  background:#f1f1f1;

  display:grid;

  place-items:center;

  margin-top:14px;

}



/* SERVICES */

.services{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:28px;

  padding-bottom:70px;

}



.service{

  border:1px solid #eee;

  border-radius:24px;

  padding:28px;

  background:#fff;

  box-shadow:0 12px 30px rgba(0,0,0,.04);

}



.service span{

  font-size:24px;

}



.service h3{

  margin:18px 0 10px;

}



.service p{

  color:#666;

  line-height:1.7;

  font-size:14px;

}



.service-panel-no{

  color:#aaa;

  font-weight:600;

}



/* CTA */

.cta-home{

  background:#fff;

  padding:60px 0;

}



.cta-box{

  background:#111;

  color:#fff;

  border-radius:28px;

  padding:42px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

}



.cta-box h2{

  font-size:34px;

  margin:8px 0;

}



.cta-box p{

  color:#bbb;

}



.cta-box .btn.dark{

  background:#fff;

  color:#111;

}



/* DETAIL */

.narrow{

  max-width:780px;

}



.detail-card{

  background:#fff;

  border:1px solid #eee;

  border-radius:18px;

  padding:14px;

  margin-bottom:28px;

  text-align:center;

  box-shadow:0 12px 35px rgba(0,0,0,.05);

}



.detail-card img{

  width:100%;

  height:340px;

  object-fit:cover;

  border-radius:14px;

}



.detail-card h3{

  font-size:24px;

  margin:18px 0 8px;

}



.detail-card p{

  color:#666;

  line-height:1.7;

}



/* ABOUT */

.about-hero{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:50px;

  align-items:center;

  padding:70px 24px;

}



.about-hero h2{

  font-size:38px;

  line-height:1.05;

  margin:0 0 18px;

}



.about-hero p{

  color:#666;

  line-height:1.8;

}



.about-hero img{

  width:100%;

  height:300px;

  object-fit:cover;

  border-radius:18px;

  filter:grayscale(1);

}



.stats-row{

  background:#111;

  color:#fff;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  text-align:center;

  padding:30px;

}



.stats-row b{

  display:block;

  font-size:28px;

}



.stats-row span{

  font-size:13px;

  color:#aaa;

}



.about-premium-hero{

  padding:90px 0;

  background:#fff;

  border-bottom:1px solid #eee;

}



.about-premium-grid,

.about-content-grid{

  display:grid;

  grid-template-columns:1.1fr .9fr;

  gap:70px;

  align-items:center;

}



.about-premium-hero h1,

.about-content-grid h2{

  font-size:clamp(40px,5vw,76px);

  line-height:1;

  letter-spacing:-2px;

  margin:18px 0 24px;

}



.about-premium-hero p,

.about-content-grid p{

  color:#555;

  font-size:17px;

  line-height:1.8;

}



.about-premium-card{

  background:linear-gradient(145deg,#222,#0b0b0b);

  color:#fff;

  border-radius:34px;

  padding:44px;

  min-height:360px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  box-shadow:0 35px 90px rgba(0,0,0,.14);

}



.about-premium-card span{

  margin-bottom:auto;

  color:#999;

  letter-spacing:4px;

  font-size:12px;

}



.about-premium-card h3{

  font-size:34px;

  line-height:1.1;

  margin-bottom:14px;

}



.about-premium-card p{

  color:#aaa;

}



.about-content-section,

.about-values-section{

  padding:80px 0;

}



.about-content-section{

  background:#f6f6f6;

}



.about-values{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:20px;

}



.about-values div{

  background:#fff;

  border:1px solid #eee;

  border-radius:24px;

  padding:28px;

}



.about-values span{

  color:#999;

  font-size:13px;

}



.about-values h3{

  margin:22px 0 10px;

  font-size:22px;

}



.about-values p{

  color:#666;

  line-height:1.7;

}



/* KURUMSAL */

.kurumsal-hero{

  display:grid;

  grid-template-columns:1.2fr 1fr;

  gap:60px;

  align-items:center;

  padding:80px 0;

}



.kurumsal-hero h1{

  font-size:clamp(44px,6vw,82px);

  font-weight:800;

  line-height:1.1;

  margin-bottom:20px;

}



.kurumsal-hero p{

  font-size:16px;

  color:#555;

  max-width:520px;

}



.kurumsal-card{

  background:linear-gradient(145deg,#111,#1a1a1a);

  border-radius:28px;

  padding:40px;

  color:#fff;

  min-height:380px;

  display:flex;

  flex-direction:column;

  justify-content:center;

}



.kurumsal-card h3{

  font-size:28px;

  margin-bottom:10px;

}



.kurumsal-card p{

  color:#aaa;

}



/* BLOG */

.blog-list{

  display:grid;

  gap:18px;

  padding-bottom:70px;

}



.blog-list article{

  display:grid;

  grid-template-columns:180px 1fr 30px;

  gap:20px;

  align-items:center;

  background:#fff;

  border:1px solid #eee;

  border-radius:16px;

  padding:14px;

  box-shadow:0 12px 35px rgba(0,0,0,.05);

}



.blog-list img{

  width:180px;

  height:85px;

  object-fit:cover;

  border-radius:12px;

  filter:grayscale(1);

}



.blog-list h3{

  margin:0 0 8px;

}



.blog-list p{

  margin:0;

  color:#777;

}



.blog-list span{

  font-size:28px;

}



.blog-content{

  text-align:left;

  max-width:700px;

  margin:40px auto 0;

}



.blog-content h3{

  font-size:22px;

  margin:30px 0 10px;

}



.blog-content p{

  margin-bottom:16px;

  line-height:1.8;

  color:#555;

}



.blog-content ul{

  padding-left:20px;

  margin:15px 0;

}



.blog-content li{

  margin-bottom:8px;

}



/* CONTACT */

.contact-light{

  background:#fff;

  padding:70px 0;

}



.contact-grid{

  display:grid;

  grid-template-columns:1fr 1.2fr;

  gap:80px;

  align-items:start;

}



.contact-light h2{

  font-size:30px;

  margin:0 0 14px;

}



.contact-light p{

  color:#666;

  line-height:1.7;

  max-width:430px;

}



.contact-info h1{

  font-size:34px;

  font-weight:600;

  letter-spacing:-.5px;

  margin:10px 0 14px;

}



.contact-info p{

  font-size:15px;

  color:#555;

  max-width:420px;

}



.contact-form input,

.contact-form textarea{

  width:100%;

  border:1px solid #eee;

  border-radius:14px;

  padding:14px;

  margin-bottom:14px;

}



.contact-form textarea{

  min-height:140px;

  resize:vertical;

}



.two{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;

}



.contact-form button{

  background:#2458ff;

  color:#fff;

  border:0;

  border-radius:999px;

  padding:12px 18px;

  font-weight:800;

}



/* FOOTER */

.footer-main{

  background:#fff;

  padding:70px 0;

  color:#111;

  border-top:1px solid #eee;

}



.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:60px;

}



.footer-main p{

  color:#666;

  line-height:1.7;

  max-width:360px;

}



.footer-main h4{

  margin:0 0 14px;

}



.footer-main a{

  display:block;

  color:#555;

  font-size:14px;

  margin:9px 0;

}



.footer-logo{

  display:inline-flex;

  align-items:center;

  margin-bottom:14px;

}



.footer-logo img{

  height:42px;

  width:auto;

  display:block;

}



.footer-bottom{

  margin-top:35px;

  padding-top:18px;

  border-top:1px solid #eee;

  color:#999;

  font-size:13px;

  text-align:center;

}



/* ALERTS */

.notice{

  padding:14px;

  border-radius:14px;

  margin-bottom:20px;

}



.success{

  background:#dcfce7;

  color:#166534;

}



.error{

  background:#fee2e2;

  color:#991b1b;

}



.empty-message{

  padding:20px;

  background:#fff;

  border:1px solid #eee;

  border-radius:16px;

  color:#777;

}



/* MOBILE */

@media(max-width:900px){

  .container{

    padding:0 18px;

  }



  .nav-inner{

    position:relative;

  }



  .mobile-menu-btn{

    display:block;

  }



  .btn.top{

    display:none;

  }



  .menu{

    display:none;

    position:absolute;

    top:72px;

    left:14px;

    right:14px;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    background:#fff;

    border:1px solid #eee;

    border-radius:18px;

    padding:12px;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    z-index:9999;

    max-height:calc(100vh - 90px);

    overflow-y:auto;

  }



  body.menu-open .menu{

    display:flex;

  }



  .menu a,

  .menu-item > a{

    width:100%;

    height:auto;

    padding:13px 14px;

    border-radius:12px;

    color:#111;

  }



  .menu a:hover,

  .menu-item > a:hover{

    background:#f5f5f5;

  }



  .menu a::after,

  .menu-item > a::after{

    display:none;

  }



  .menu a.active{

    background:#111!important;

    color:#fff!important;

  }



  .menu-item{

    display:block;

    height:auto;

    width:100%;

    border-radius:14px;

    background:#f5f5f5;

    margin:4px 0;

  }



  .menu-item > a{

    background:#f5f5f5!important;

    color:#111!important;

    border-radius:14px 14px 0 0!important;

    border-bottom:1px solid #ddd;

  }



  .submenu{

    position:static;

    transform:none;

    min-width:100%;

    box-shadow:none;

    border:0;

    background:#f5f5f5!important;

    margin:0!important;

    display:block!important;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    border-radius:0 0 14px 14px!important;

    padding:6px 0 10px!important;

  }



  .submenu a{

    padding:10px 18px!important;

    font-size:14px!important;

    border-radius:10px!important;

    background:transparent!important;

  }



  .submenu a:hover{

    background:#eaeaea!important;

  }



  .hero .container.hero-grid{

    display:flex;

    flex-direction:column;

    min-height:auto;

    padding:0 18px;

  }



  .hero-text{

    height:auto;

    padding:42px 4px 22px;

  }



  .tag{

    font-size:10px;

    letter-spacing:1.4px;

    padding:8px 12px;

    margin-bottom:18px;

  }



  .hero-title,

  .hero h1{

    font-size:38px;

    line-height:1.05;

    letter-spacing:-1.5px;

    margin-bottom:18px;

  }



  .hero p{

    font-size:15px;

    line-height:1.65;

  }



  .hero-actions{

    margin-top:20px;

    gap:8px;

  }



  .hero-actions .btn{

    padding:10px 14px;

    font-size:13px;

  }



  .hero-stats{

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:24px;

  }



  .hero-stats div{

    padding:12px 8px;

    text-align:center;

    border-radius:15px;

  }



  .hero-stats b{

    font-size:20px;

  }



  .hero-stats span{

    font-size:10px;

  }



  .hero-img{

    width:100%;

    height:260px;

    margin:20px 0 26px;

    border-radius:24px;

  }



  .hero-img img{

    object-position:center center;

  }



  .cat-wrap{

    display:flex;

    overflow-x:auto;

    flex-wrap:nowrap;

    justify-content:flex-start;

  }



  .cat{

    white-space:nowrap;

    padding:15px 22px;

    min-width:max-content;

  }



  .trust-strip{

    margin:0 18px;

    border-radius:18px;

    padding:14px;

  }



  .trust-grid{

    grid-template-columns:1fr 1fr;

    gap:10px;

  }



  .trust-grid div{

    background:rgba(255,255,255,.08);

    border-radius:12px;

    padding:10px;

    font-size:11px;

  }



  .about-hero,

  .contact-grid,

  .about-premium-grid,

  .about-content-grid,

  .about-values,

  .kurumsal-hero{

    grid-template-columns:1fr;

    gap:34px;

  }



  .projects,

  .services,

  .footer-grid,

  .stats-row{

    grid-template-columns:1fr;

  }



  .section-head{

    display:block;

  }



  .section-link{

    display:inline-block;

    margin-top:12px;

  }



  .blog-list article{

    grid-template-columns:1fr;

  }



  .blog-list img{

    width:100%;

  }



  .two{

    grid-template-columns:1fr;

  }



  .cta-box{

    display:block;

    padding:28px;

  }



  .cta-box .btn{

    margin-top:18px;

  }



  .about-premium-hero{

    padding:70px 0 55px;

  }



  .about-premium-hero h1{

    letter-spacing:-2px;

  }



  .about-premium-card{

    min-height:300px;

  }

}



@media(max-width:480px){

  .container{

    padding:0 16px;

  }



  .hero-text{

    padding:38px 2px 22px;

  }



  .hero-title,

  .hero h1{

    font-size:34px;

  }



  .hero-img{

    height:230px;

  }



  .contact-info h1{

    font-size:30px;

  }

}



/* HERO ACİL DÜZELTME */

.hero .container.hero-grid{

  max-width:1320px !important;

  padding:0 24px !important;

  grid-template-columns:1fr 1.15fr !important;

  min-height:680px !important;

  gap:0 !important;

}



.hero-text{

  height:680px !important;

  padding:70px 56px !important;

}



.hero-title,

.hero h1{

  font-size:clamp(42px,4.2vw,58px) !important;

  line-height:1.02 !important;

}



.hero-img{

  width:100% !important;

  margin:0 !important;

  height:680px !important;

  border-radius:0 0 0 36px !important;

}



.hero-img img{

  object-fit:cover !important;

  object-position:center center !important;

}



/* MOBİL */

@media(max-width:900px){

  .hero .container.hero-grid{

    display:flex !important;

    flex-direction:column !important;

    min-height:auto !important;

    padding:0 18px !important;

  }



  .hero-text{

    height:auto !important;

    padding:40px 4px 22px !important;

  }



  .hero-img{

    width:100% !important;

    height:250px !important;

    margin:18px 0 24px !important;

    border-radius:24px !important;

  }

}