/*
01 - genel font isleri
02 - markalarimiz duzeni
03 - menu nav vb her sey (114-522)
04- tab duzeni ve diger hersey
05- contact form
06- urun listesi
07- footer  (726 ..)
*/

:root{
   /* fonts */
   --f-1                 :"Arya", Arial, Helvetica, sans-serif;
   --f-2                 :Arial, Helvetica, Roboto, "Futura", sans-serif;
   /* Colors */
   --c-green             :#005640;
   --c-apple             :#91d754;
   --c-red               :#e31319;
   --c-black-metin       :#5d5d5d;
   --c-primary-blue      :#2095f1;
   --c-dark-blue         :#2c3581;
   --c-light-grey        :#bdc3c7;
   --c-white             :#fff;
   --c-light-grey-border :#e3e3e3;
   --c-light-grey-alt    :#eee;
   /* Transparent Colors */
   --c-black-t20         :rgba(0, 0, 0, 0.2);
   --c-blue-t25          :rgba(32, 149, 241, 0.25);
   --c-blue-t60          :rgba(32, 149, 241, 0.6);
   --c-white-t70         :rgba(255, 255, 255, 0.80001);
   --header-height       :100px;
   --hamburger-height    :10em;
}

/*  -----------------------------------------------------------------
    01 - genel font isleri
 --------------------------------------------------------------------*/
h1{font-size :2.9em;}
h3{font-size :2.2em;}
h4{
   font-size   :1.8em;
   padding-top :.2em
}
h5{font-size :1.5em;}
h1, h2, h3, h4, h5, .h3buyuk{
   color       :var(--c-green);
   font-family :var(--f-1);
}
.h3buyuk{font-size :3.31em;}
.tepeBosluk{
   margin-top    :calc(var(--header-height) + 4em);
   margin-bottom :100px;
}
.justify{ text-align :justify }
.araBosluk{height :7em;} /* baby sfda yeterli yukseklik olussun diye*/
/*  -----------------------------------------------------------------
    font isleri //
 --------------------------------------------------------------------*/

/* 02 markalarimiz duzeni -------------------------------------------*/
.markalarimiz{
   height          :250px;
   width           :250px;
   margin          :0 auto;
   border          :3px solid var(--c-white);
   box-shadow      :0 5px 5px var(--c-light-grey);
   text-align      :center;
   font-family     :var(--f-1);
   display         :flex;
   align-items     :center;
   justify-content :center;
   overflow        :hidden;
}
.markalarimiz:hover{
   border :3px solid var(--c-apple);
   cursor :pointer;
}
.yesilKutu:hover{
   border :3px solid var(--c-apple);
   cursor :pointer;
}
.markalarimiz img{
   max-width  :65%;
   max-height :65%;
   object-fit :contain;
   transition :none;
}
.marka{
   min-height      :unset;
   height          :auto;
   padding         :1.2em;
   display         :flex;
   justify-content :center;
}
.marka-metin{
   color       :var(--c-green);
   font-size   :1em;
   padding-top :1em;
   text-align  :left;
   line-height :1.15;
}
@media (max-width :768px){
   .marka{
      min-height :auto;
      padding    :1em;
   }
   .marka-metin{font-size :0.9em;}
   .markalarimiz{
      width  :200px;
      height :200px;
   }
}
/*  ----------------------------------------------------------------
    03 - menu nav vb her sey bu aralikta
 -------------------------------------------------------------------*/
.header-container{
   display     :flex;
   align-items :center;
   height      :100%;
   max-width   :1200px;
   margin      :0 auto;
   padding     :0 15px;
}
.main-logo{
   height     :100%;
   max-height :80px;
   padding    :5px 0;
}
.main-logo img{
   height :100%;
   width  :auto;
}
.lvqr-section,
.kiri-section{
   display     :flex;
   align-items :center;
   height      :100%;
   padding     :0 20px;
}
.lvqr-section{
   background-color :var(--c-red);
   margin-left      :auto;
}
.kiri-section{background-color :var(--c-primary-blue);}
.lvqr-section .brand-logo{
   height           :30px;
   width            :30px;
   margin-right     :15px;
   border-radius    :50%; /* yuvarlak*/
   aspect-ratio     :1/1;
   background-color :var(--c-white);
   padding          :3px;
   object-fit       :contain;
   display          :flex;
   align-items      :center;
   justify-content  :center;
}
.kiri-section .brand-logo{ /* Kiri için kare stil */
   height           :30px;
   width            :30px;
   margin-right     :15px;
   border-radius    :0;
   aspect-ratio     :1/1;
   background-color :var(--c-white);
   padding          :2px;
   object-fit       :contain;
   display          :flex;
   align-items      :center;
   justify-content  :center;
}
.social-icons{
   display :flex;
   gap     :15px;
}
.social-icons a{
   color      :#fff;
   font-size  :18px;
   transition :opacity 0.3s;
}
.social-icons a:hover{color :var(--c-apple);}
.navbar-toggler{
   background   :none;
   border       :none;
   padding      :10px;
   cursor       :pointer;
   position     :relative;
   z-index      :1000;
   margin-right :15px;
}
.navbar-toggler-icon{
   display    :block;
   width      :25px;
   height     :2px;
   background :#333;
   position   :relative;
}
.navbar-toggler-icon::before{top :-8px;}
.navbar-toggler-icon::after{bottom :-8px;}
#top-header{
   position         :fixed;
   top              :0;
   left             :0;
   width            :100%;
   background       :var(--c-white);
   height           :var(--header-height);
   box-shadow       :0 4px 4px var(--c-black-t20);
   z-index          :1000;
}
/* Ana menü stili */
.primary-menu .inner{
   padding         :15px 2.8% 15px; /*top, L+R, bottom*/
   display         :flex;
   justify-content :center;
   width           :100%;
   font-family     :var(--f-2);
   font-size       :1em;
}
.primary-menu .menu{
   display         :flex;
   flex-direction  :row;
   width           :100%;
   text-align      :center;
   align-items     :center;
   max-width       :1200px;
   flex-wrap       :wrap;
   justify-content :center;
   gap             :1rem;
   padding         :1rem;
   margin          :0 auto;
   list-style      :none;
   max-height      :none;
   overflow        :visible;
}
.primary-menu .menu li i{
   font-size     :24px;
   margin-bottom :12px;
   color         :var(--c-white);
}
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
   display    :block;
   width      :25px;
   height     :2px;
   background :#333;
   transition :all 0.3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
   content    :"";
   position   :absolute;
   left       :0;
   width      :25px;
   height     :2px;
   background :#333;
}
.navbar-toggler-icon::before{top :-8px;}
.navbar-toggler-icon::after{bottom :-8px;}
.navbar-toggler.active .navbar-toggler-icon{background :transparent;}
.video-baslik{
   color       :var(--c-red);
   font-size   :25px;
   text-align  :center;
   padding-top :15px;
}
img.img-responsive{display :inline-block;}
.menu{
   width       :150px;
   float       :left;
   margin-top  :-25px;
   color       :var(--c-primary-blue);
   text-align  :center;
   font-family :var(--f-1);
}
.menu a:hover{text-decoration :none;}
.menu a{
   color           :var(--c-primary-blue);
   text-decoration :none;
}
.menu .fa{
   color     :var(--c-primary-blue);
   font-size :25px;
}
.is-home #top-header{background :var(--c-white);}
a:hover{
   color           :var(--c-primary-blue);
   text-decoration :none;
}
.dropdown-toggle::after{
   display        :none;
   margin-left    :0.255em;
   vertical-align :0.255em;
   content        :"";
   border-top     :0.3em solid;
   border-right   :0.3em solid transparent;
   border-left    :0.3em solid transparent;
}
#top-header .header-items{
   position :absolute;
   right    :100px;
   bottom   :50px;
   left     :50px;
}
.primary-menu{
   width      :100%;
   height     :0;
   top        :var(--header-height);
   left       :0;
   background :var(--c-white-t70);
   box-shadow :0 4px 4px var(--c-black-t20);
   overflow   :hidden;
   transition :all 0.3s ease;
   z-index    :999;
   opacity    :0;
   visibility :hidden;
   position   :fixed; /* hamburger e gore konumlan  */
   transform  :translateY(0); /* scroll pozisyonunu takip et */
}
.primary-menu.show{
   opacity    :1;
   visibility :visible;
}
.menu-item{
   display         :flex;
   flex-direction  :column;
   align-items     :center;
   text-decoration :none;
   padding         :0.3rem;
   transition      :transform 0.3s ease;
   gap             :0.3rem;
}
.menu-item:hover{transform :translateY(-5px);}
.menu-icon{
   width      :40px;
   height     :40px;
   object-fit :contain;
}
.menu-text{
   font-family :var(--f-1);
   font-size   :1rem;
   font-weight :500;
}
@media (max-width :480px){
   .primary-menu .menu li{
      width      :calc(50% - 1rem);
      min-height :80px;
   }
}
@media (min-width :769px){
   .primary-menu.show{
      height   :auto !important; /* important gerekli yoksa patliyor*/
      overflow :visible;
   }
}
@media (max-width :768px){
   .social-icons{display :none;}
   .mobile-top-5{margin-top :1em;}
   .lvqr-section,
   .kiri-section{padding :0 10px;}
   .menu-icon{margin-bottom :8px;}
   .menu-text{
      font-size   :0.9rem;
      line-height :1.2;
   }
   .brand-logo{
      height :25px;
      width  :25px;
   }
   .primary-menu.show{
      height     :auto;
      max-height :100vh;
      overflow-y :auto;
   }
   .primary-menu{padding :0.5em;}
   .primary-menu .inner{padding :10px 2% 10px;}
   .primary-menu .menu{
      flex-wrap :wrap;
      margin    :0.5em 0;
      padding   :1rem;
      gap       :0.5rem 1.5rem; /* row-gap, column-gap*/
   }
   .primary-menu .menu li{
      display         :flex;
      flex-direction  :column;
      align-items     :center;
      text-align      :center;
      padding         :10px;
      margin-bottom   :10px;
      font-size       :20px;
      width           :calc(33.333% - 1rem);
      min-height      :90px;
      justify-content :space-between;
   }
}
.navbar-toggler.active .navbar-toggler-icon{background :transparent;}
.navbar-toggler.active .navbar-toggler-icon::before{
   transform :rotate(45deg);
   top       :0;
}
.navbar-toggler.active .navbar-toggler-icon::after{
   transform :rotate(-45deg);
   bottom    :0;
}
a.dropdown-toggle{
   position    :absolute;
   bottom      :50px;
   right       :40px;
   font-family :var(--f-2);
   font-weight :400;
   font-size   :14px;
   color       :var(--c-white);
   z-index     :1;
}
.social-items{align-content :center;}
.social-items i{
   color     :var(--c-white);
   font-size :25px;
}
.social-items i:hover{color :var(--c-red);}
.nav-tabs{
   border-bottom :1px solid var(--c-primary-blue);
   padding       :50px 0 0 0;
}
.nav-tabs > li{
   float         :left;
   margin-bottom :-1px;
   width         :25%;
   font-family   :var(--f-1);
   font-size     :18px;
   text-align    :center;
   border-right  :1px solid var(--c-light-grey-alt);
}
.nav-tabs > li:not(:last-child){border-right :1px solid var(--c-light-grey-alt);}
.nav-tabs > li > a{
   display         :block;
   padding         :10px 15px;
   margin-right    :0;
   line-height     :1.42857143;
   color           :var(--c-primary-blue);
   text-decoration :none;
   border          :1px solid transparent;
   border-radius   :4px 4px 0 0;
}
.nav-tabs > li > a:hover{
   color            :var(--c-red);
   background-color :var(--c-white);
   border-color     :var(--c-primary-blue);
   border-bottom    :none;
}
.nav-tabs > li.active{
   border-right :none !important;
   color        :var(--c-red);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
   color               :var(--c-red);
   background-color    :var(--c-white);
   border              :1px solid var(--c-primary-blue);
   border-bottom-color :transparent;
   cursor              :default;
}
.nav-tabs > li > a.active,
.nav-tabs > li > a.active:focus,
.nav-tabs > li > a.active:hover{
   color            :var(--c-red);
   background-color :var(--c-white);
   border           :2px solid var(--c-primary-blue);
   border-bottom    :2px solid var(--c-white);
   margin-bottom    :-2px;
   cursor           :default;
}
.nav > li > a:focus,
.nav > li > a:hover{
   color            :var(--c-red);
   text-decoration  :none;
   background-color :var(--c-white);
}
/* NAV bitti */
@media (max-width :767px){
   #top-header .logo img{
      position :absolute;
      top      :-50px;
      bottom   :0;
      left     :0;
      right    :0;
      margin   :auto;
      width    :64%;
   }
}
@media (max-width :992px){
   .navbar-nav{
      align-items :center;
      text-align  :center;
   }
   .navbar-nav .social-items{
      display         :flex;
      justify-content :center;
      align-items     :center;
      padding         :0;
      margin-top      :1rem;
      list-style      :none;
   }
   .navbar-nav .social-item{margin :0 10px;}
   .navbar-nav .social-items img{
      margin-bottom :1rem;
      max-width     :200px;
   }
}
.nav-tabs .nav-link.active{
   color               :var(--c-dark-blue) !important;
   font-weight         :bold;
   border-color        :var(--c-dark-blue) !important;
   border-bottom-color :transparent !important;
}
/*  03- menu nav vb bitti  // --------------------------------------*/

/*  -----------------------------------------------------------------
    04- tab duzeni ve diger hersey
 --------------------------------------------------------------------*/
.manset{
   margin-top :var(--header-height); /* foto menuden sonra baslasin */
   width      :100%;
}
/*sayfa ici tab*/
.content-wrapper{
   display    :flex;
   background :var(--c-white);
}
.left-tabs{
   width        :250px;
   min-width    :250px;
   background   :var(--c-white);
   border-right :1px solid var(--c-light-grey-border);
   padding      :20px 0;
}
.left-tabs .tab-button{
   display     :block;
   width       :100%;
   padding     :15px 20px;
   text-align  :left;
   background  :none;
   border      :none;
   border-left :4px solid transparent;
   color       :var(--c-green);
   font-family :var(--f-1);
   font-size   :16px;
   cursor      :pointer;
   transition  :all 0.3s ease;
}
.left-tabs .tab-button:hover{
   background-color  :var(--c-apple);
   border-left-color :color-mix(
           in srgb,
           var(--c-apple) 70%, black 40% /* koyulastir*/
   );
}
.left-tabs .tab-button.active{
   background-color  :var(--c-apple);
   border-left-color :var(--c-green);
   color             :var(--c-green);
   font-weight       :bold;
}
.main-content{
   flex        :1;
   padding     :30px;
   font-family :var(--f-2);
   overflow-x  :hidden;
   width       :100%;
   word-wrap   :break-word;
   color       :var(--c-black-metin);
}
.main-content p{
   line-height   :1.55;
   max-width     :90ch;
   overflow-wrap :break-word;
   font-size     :0.95em;
}
.main-content ul{
   padding-left        :1em;
   list-style-position :inside;
   padding-bottom      :0.5em;
}
.main-content ul li{
   line-height :1.45;
   margin-left :2em;
   list-style  :square;
}
.main-content ul li::marker{color :var(--c-green);}
.tab-content{display :none;}
.tab-content.active{display :block;}
.main-content img{
   max-width :100%;
   height    :auto;
   display   :block;
   margin    :1em auto;
}
@media (min-width :768px) and (max-width :1024px){
   .main-content{padding :1em;}
   .content-wrapper{
      flex-direction :row;
      flex-wrap      :wrap;
   }
   .left-tabs{
      width     :200px;
      min-width :200px;
   }
}
@media (max-width :768px){
   .content-wrapper{flex-direction :column;}
   .left-tabs{
      width         :100%;
      border-right  :none;
      border-bottom :1px solid var(--c-light-grey-border);
   }
}
/* sayfa ici tab bitti */
.manset-foto{
   width   :100%;
   height  :auto;
   display :block;
}
.manset-foto img{
   width      :100%;
   height     :auto;
   object-fit :cover;
   max-height :577px;
}
.table{width :35%;}
.anahtar{
   color          :var(--c-primary-blue);
   width          :2em;
   height         :2em;
   vertical-align :-0.52em;
}
@media (max-width :768px){
   .carousel-item .col-md-4{
      width   :100%;
      flex    :0 0 100%;
      padding :0.3em;
   }
}
/*  tab duzeni ve diger hersey // ---------------------------------*/

/*  05 contact form ---------------------------------------------*/
.form-control{background-color :var(--c-apple) !important;}
.btn-primary{
   background-color :var(--c-green) !important;
   border-color     :var(--c-green) !important;
   color            :var(--c-white) !important;
}
.btn-primary:hover{
   background-color :var(--c-apple) !important;
   color            :var(--c-green) !important;
}
input:focus,
textarea:focus,
select:focus{
   outline    :0.1em solid var(--c-black-metin) !important;
   box-shadow :0 0 6px var(--c-green) !important;
}
/*  contact form // --------------------------------------- */

/* --------------------------------------------------------- */
/* 06 - urun listesi                                         */
/* --------------------------------------------------------- */
.urun-listesi{
   display               :grid;
   grid-template-columns : repeat(5, 1fr);
   margin                :0 auto;
   gap                   :1.4rem;
   padding               :0.25rem 0;
   width                 :100%;
}
.urun-item{
   position        :relative;
   display         :block;
   text-decoration :none;
   transition      :transform 0.3s ease;
   width           :100%;
}
.urun-item img{
   width         :100%;
   height        :auto;
   display       :block;
   border-radius :8px;
}
.urun-detay{
   position      :absolute;
   bottom        :0;
   left          :0;
   right         :0;
   background    :rgba(145, 215, 84, 0.8);
   color         :var(--c-green);
   padding       :0.4rem;
   text-align    :center;
   border-radius :0 0 8px 8px;
   opacity       :0;
   transition    :opacity 0.3s ease;
   font-size     :0.8em;
}
.urun-item:hover{transform :scale(1.05);}
.urun-item:hover .urun-detay{opacity :1;}
@media (max-width :768px){
   .urun-listesi{
      grid-template-columns : repeat(3, 1fr);
      gap                   :1rem;
      padding               :1rem 0;
      max-width             :none;
      margin                :0;
   }
}
/*  06 - urun listesi  bitti  //--------------------------- */

/* ---------------------------------------------------------
    07- footer
 --------------------------------------------------------- */
.footer{
   background      :url("../images/footer-bg.svg") repeat-x 50% 0;
   background-size :1200px auto;
   color           :var(--c-green);
   position        :relative;
   width           :100%;
   margin          :0;
   padding         :0;
}
.footer__main{
   display         :flex;
   max-width       :1280px;
   margin          :0 auto;
   padding         :30px 20px;
   justify-content :space-between;
}
.footer__logo.site-logo{ width :16.95%;}
.footer__logo.site-logo .site-logo__img{
   width  :100px;
   height :auto;
}
.footer__content{
   width      :70%;
   text-align :right;
}
.footer__content h2{
   font-weight   :bold;
   color         :var(--c-white);
   font-size     :1em;
   margin-bottom :20px;
}
.footer__content p{
   font-size   :0.82em;
   font-weight :400;
   line-height :0.95;
   margin      :5px 0;
}
.footer__bottom{
   background-color :var(--c-green);
   width            :100%;
   padding          :10px 0;
}
.footer__bottom-content{
   display         :flex;
   align-items     :center;
   justify-content :center;
   max-width       :1280px;
   margin          :0 auto;
   padding         :0 20px;
   gap             :20px;
   font-size       :0.8em;
}
.footer__bottom-content a{
   color           :var(--c-light-grey-alt);
   text-decoration :none;
   font-size       :0.82em;
}
.footer__bottom-content a:hover{ opacity :0.8;}
@media (max-width :768px){
   .footer__main{
      flex-direction :column;
      align-items    :center;
      text-align     :center;
   }
   .footer__logo.site-logo{
      width         :100%;
      margin-bottom :20px;
   }
   .footer__content{
      width      :100%;
      text-align :center;
   }
   .footer__bottom-content{
      flex-direction :column;
      text-align     :center;
   }
}
@media (min-width :768px){
   .footer{background-size :1440px auto;}
}
@media (min-width :1025px){
   .footer{background-size :2400px auto;}
}
/*  07- footer  // ------------------------------------- */