﻿/* =========================
   MEDIA QUERIES
   Moved from styles.css
========================= */

@media (min-width: 851px) and (max-width: 1600px){
  .container{ --container: 1200px; }
}

@media (max-width: 1500px){
   .section__text {
      font-size: 18px;
      line-height: 1.8;
      margin-bottom: 25px;
  }
  .follow__imglink {
      width: 350px;
  }

  .center-title__headline {
      font-size: 60px;
  }

  .center-title__eyebrow {
      font-size: 35px;
  }

  .pill {
      min-height: 42px;
      font-size: 14px;
      width: 310px;
  }

  .hero__title {
      font-size: 40px;
  }

  .hero__eyebrow {
      font-size: 26px;
  }

  .hero__desc {
      font-size: 16px;
  }

  .hero__panel {
      max-width: 480px;
  }
  .navpill__link {
      padding: 13px 10px;
      font-size: 13px;
  }
  .hero__shade {
    /* clip-path: polygon(0 0, 47% 0, 32% 100%, 0 100%); */
    width: 45%;
  }
  .side-cta__pill {
      font-size: 13px;
      padding: 20px 11px;
      min-height: 100px;
  }

  .hero__side-cta {
      top: 57%;
  }
  .cta-top__eyebrow {
    font-size: 43px;
}
}

@media (max-width: 1100px){
  .header__menu{ width: min(840px, 100%); }
  .navpill{ width: min(820px, 100%); gap: 4px; }
  .navpill__link{ padding-inline: 8px; font-size: 11px; }
  .hero__inner{ padding-top: 148px; }
  .hero__eyebrow{ font-size: 30px; }
  .hero__desc{ font-size: 18px; line-height: 1.7; max-width: 610px; }
  .hero__loc{ font-size: 20px; }
  .hero__side-cta{ right: 10px; }
  .side-cta__pill{ min-height: 148px; font-size: 20px; }
  .split{grid-template-columns: 1fr;flex-direction: column;row-gap: 35px;}
  .gallery{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 220px);
    gap: 14px;
  }
  #galeri .hand{
    font-size: 100px;
    margin-left: 0;
  }
  .gallery__item--a,
  .gallery__item--b,
  .gallery__item--c,
  .gallery__item--d,
  .gallery__item--e,
  .gallery__item--f{
    grid-column: auto;
    grid-row: auto;
    border-radius: 16px;
  }
    .split__left {
      width: 100% !important;
  }

  .split__right {
      width: 100%;
  }
}

@media (max-width: 1100px){
  .video-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-showcase{
    padding: 34px 20px 24px;
  }
  .video-showcase__eyebrow{
    font-size: 24px;
  }
}

@media (max-width: 860px){
  .header__menu{ display: none; }
  .header__burger{ display: inline-flex; justify-self: end; }
  .header__inner{ grid-template-columns: auto 1fr auto; }
  .hero__inner{ padding-top: 124px; }
  .hero__shade{/* clip-path: polygon(0 0, 92% 0, 58% 100%, 0 100%); */}
  .hero__eyebrow{ font-size: 24px; }
  .hand{ font-size: 44px; }
  .section__title{font-size: 7vw;line-height: 1.3;}
  .center-title__headline{font-size: 7vw;}
  .hero__title{ font-size: 40px; }
  .hero__desc{ font-size: 17px; line-height: 1.65; }
  .hero__side-cta{
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    z-index: 1200;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    align-items: center;
    gap: 0;
    /* background: #2037c9; */
    /* box-shadow: 0 -8px 22px rgba(0,0,0,.25); */
    padding: 0 0 env(safe-area-inset-bottom);
    display: flex;
  }
  .side-cta__pill{
    writing-mode: horizontal-tb;
    transform: none;
    min-height: 62px;
    width: 100%;
    padding: 0 14px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .side-cta__pill--blue,
  .side-cta__pill--green{
    font-size: 0;
    position: relative;
  }
  .side-cta__pill--blue::before,
  .side-cta__pill--green::before{
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-1px);
  }
  .side-cta__pill--blue::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
  }
  .side-cta__pill--green::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .7 2.9a2 2 0 0 1-.5 2.1L9.1 11a16 16 0 0 0 3.9 3.9l1.3-1.3a2 2 0 0 1 2.1-.5c.9.4 1.9.6 2.9.7a2 2 0 0 1 1.7 2.1z'/%3E%3C/svg%3E");
  }
  .side-cta__pill--blue::after{
    content: "İLETİŞİME GEÇ";
    font-size: 14px;
    letter-spacing: .3px;
  }
  .side-cta__pill--green::after{
    content: "İletişime Geç";
    font-size: 14px;
    letter-spacing: .3px;
  }
  .side-cta__pill--blue{ background: #2947df; }
  .side-cta__pill--green{ background: #2340d0; }
  .side-cta__wa{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -45%);
    width: 58px;
    height: 58px;
    border-width: 3px;
    z-index: 2;
    transform: translate(-50%, -25%);
    right: 10px;
    left: initial;
    transform: initial;
    top: initial;
    bottom: 10px;
  }
  .side-cta__wa svg{
    width: 24px;
    height: 24px;
  }
  body{ padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .hero__loc{ right: 18px; font-size: 16px; }
  .contact-drawer__panel{
    width: min(420px, 100%);
    padding: 20px 16px;
  }
  .contact-drawer__title{
    font-size: 26px;
  }


  .section {
      padding: 30px 0px;
  }

  .follow {padding: 50px 0px 0px;}
  #yaklasimimiz .hand {
      font-size: 70px;
  }
  
  .center-title__eyebrow {
      font-size: 5vw;
  }
  
 .follow__imglink {
    width: 70%;
}

.slider-arrow--right {
    right: -15px;
}

.slider-arrow--left {
    left: -15px;
}

.slider-arrow {
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    padding-bottom: 10px;
    background-color: rgb(255 137 208);
    border: 2px solid #fff;
}
  :root{ --gutter: 18px; --header-h: 84px; --header-h-sticky: 66px; }
  .brand__img{ width: 128px; }
  .hero__inner{padding-top: 140px;padding-bottom: 90px;height: auto;min-height: auto;}
  .hero__shade{/* clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); */width: 105%;bottom: 0;}
  .hero__eyebrow{font-size: 4.5vw;}
  .hero__title{font-size: 7vw;margin-bottom: 14px;}
  .hero__desc{font-size: 13px;max-width: 86%;margin-bottom: 15px;line-height: 1.3;}
  .pill{font-size: 3.5vw;min-height: auto;padding: 10px 10px;width: 80%;}
  .hero__side-cta{
    padding: 0 0 env(safe-area-inset-bottom);
  }
  .side-cta__pill{
    min-height: 56px;
    padding: 0 10px;
    font-size: 0;
  }
  .side-cta__pill--blue::after,
  .side-cta__pill--green::after{
    font-size: 4vw;
  }
  .side-cta__wa{
    width: 65px;
    height: 65px;
  }
  .side-cta__wa svg{
    width: 36px;
    height: 36px;
  }
  body{ padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .card--single img{/* height: 280px; */}
  .gallery{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .gallery__item img{height: 160px;}
  #galeri .hand{font-size: 80px;text-align: center;}
  .slide img{ height: 260px; }
  .hero__loc{right: 0;bottom: 20px;font-size: 5vw;}
  .hero__loc svg{ width: 18px; height: 18px; }
  .contact-drawer__panel{
    width: 100%;
    padding: 18px 14px;
  }
  .contact-drawer__title{
    font-size: 24px;
  }
  .contact-form__submit{
    min-height: 42px;
  }
  .hero {
    height: auto;
    min-height: auto;
}

header#top {padding-top: 5px;}

.header__burger {
    flex-direction: column;
}
  .mobile-nav {
    margin-top: 0;
}
  .cta-top{ padding: 66px 0 62px; }
  .cta-top__logo{ width: 148px; margin-bottom: 18px; }
  .cta-top__eyebrow{ font-size: 36px; }
  .cta-top__desc{ font-size: 15px; max-width: 640px; }
  .side-cta__pill.side-cta__pill--blue {
    padding-right: 35px;
    width: calc(100% - 85px);
    border-radius: 0px 10px 0px 0px;
  }

  .side-cta__pill.side-cta__pill--green {
      padding-left: 35px;
  }
  .cta-top{ padding: 48px 0 44px; }
  .cta-top__logo{ width: 128px; }
  .cta-top__eyebrow{ font-size: 29px; margin-bottom: 6px; }
  .cta-top__title{ font-size: 46px; margin-bottom: 12px; }
  .cta-top__desc{ font-size: 14px; line-height: 1.5; }
  .cta-bottom{padding: 20px 0 90px;}
  .cta-bottom__icon{ width: 28px; height: 28px; font-size: 14px; }
  .cta-bottom__copy{ font-size: 12px; }
  .hide-mobile{ display: none; }
  .slider-wrap {
    padding-bottom: 40px;
}
}




@media (max-width: 600px){
  .video-item__cta {
    gap: 5px;
    margin-bottom: -25px;
}
  .video-showcase{
    margin-top: -1px;
    padding: 24px 14px 58px;
  }
  .video-grid{
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }
  .video-showcase__eyebrow{
    font-size: 20px;
  }
  .video-showcase__title{
    font-size: 48px;
    margin-bottom: 25px;
  }
  .video-item{
    border-radius: 22px;
  }
  .video-item__thumb{
    aspect-ratio: 3 / 3.9;
  }
  .video-item__icon,
  .video-item__text{
    min-height: 34px;
    height: 34px;
  }
  .video-item__text{
    font-size: 3vw;
    padding: 0 10px;
  }
}

