@charset "UTF-8";
@import url('style0.css');
:root{
  --rf:#fff;--r0:#000;--r01:#222;--r02:#555;--r03:#aaa;--r04:#eee;--r1:#2d120a;--r2:#f80;--r3:#5b2104;--r4:#766f7f;--r5:#fa0;--r6:#fc0;--r7:#d33;
  --rafc:#ffffffcc;--raf9:#ffffff99;--raf6:#ffffff66;--raf3:#ffffff33;--ra0c:#00070fcc;--ra09:#00070f99;--ra06:#00070f66;--ra03:#00070f33;--ra:#00070f00;
  --ra1c:#093a96cc;--ra19:#093a9699;--ra16:#093a9666;--ra13:#093a9633;--ra2c:#0073ffcc;--ra29:#0073ff99;--ra26:#0073ff66;--ra23:#0073ff33;--ra6c:#ffcc00cc;--ra69:#ffcc0099;--ra66:#ffcc0066;--ra63:#ffcc0033;
  --rg1:linear-gradient(-45deg,var(--r2),var(--r1));--rg2:linear-gradient(135deg,var(--r2),var(--r4));
  --rg3:linear-gradient(135deg,var(--r6) 25%,var(--r5));--rg4:linear-gradient(135deg,var(--r2),var(--r1));
  --rg5:linear-gradient(-45deg,var(--r6) 25%,var(--r5));--rg6:linear-gradient(var(--rf),var(--r03));--rg7:linear-gradient(var(--ra06),var(--r0));
  --font1:'Poppins', sans-serif;
  --brm:3px;--brn:5px;--brb:8px;
  --bs:1px 1px 5px -2px #00000099;
  --p1:10px;--p2:20px;
  }

  html{scroll-behavior:smooth;width:100%}

  h3{color:var(--r2)}
  .hep,.yek{position:relative;width:100%}
  .tek{max-width:1200px;margin:auto;position:relative}


  header{height:100px;position:relative}
  header .tek::after{content:"";background:var(--r1);position:absolute;width:100%;height:100px;right:99.9%;top:0;z-index:-1}
  .logo{display:inline-block;height:100px;width:300px;max-width:calc(100% - 100px);background:var(--r1) url(societa-logo.svg) no-repeat;background-size:cover;position:relative}
  .logo.bekle{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;height:100%;z-index:99;background-size:20%;background-position:center}
  .logo::after{content:"";position:absolute;bottom:0;left:calc(100% - 100px);width:0;height:0;border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:100px solid var(--r1);z-index:-1}
  header ul{float:right}
  header li{list-style:none;display:inline-block}
  header li a{display:inline-block;line-height:100px;margin:0 20px;font-size:14px;font-weight:bold;color:var(--r1)}
  header li a:hover{color:var(--r2)}
  #ac{display:none}

  .ekran{width:100%;height:calc(100dvh - 100px);position:relative;overflow:hidden}
  #video{width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1}
  .not{position:absolute;bottom:0;left:0;margin:100px;max-width:500px;z-index:2;overflow:hidden;padding:50px;color:var(--rf);border-radius:3px}
  .not::after{content:"";position:absolute;inset:0;background:var(--r1);opacity:0.8;z-index:-1}
  .not a{display:inline-block;margin-top:10px;padding:10px 15px;background:var(--r2);color:var(--r1);font-weight:bold;border-radius:5px}
  .not a:hover{background:var(--rf)}

  .bilgi{background:var(--r2);color:var(--r1);padding:25px;font-size:16px;background:linear-gradient(0deg, var(--r2) 90%, var(--r5) 100%);border-top:1px solid var(--r6)}
  .bilgi strong{display:block;font-size:22px;padding-bottom:10px;color:var(--r3)}
  .bil{float:left;padding:25px;width:33%}
  .bil a{color:var(--rf);text-decoration:underline}
  .bil a:hover{color:var(--r3);font-weight:bold}

  .bilgi2{padding:50px 50px 100px;font-size:24px;line-height:40px;letter-spacing:1px;color:var(--r02)}
  .bilgi2 h2{font-size:34px;line-height:100px;font-weight:normal;color:var(--r2)}

  .bilgi3{padding:100px;background:var(--r04)}
  .bilgi3 h2{font-size:34px;padding-bottom:50px;font-weight:normal;color:var(--r4)}
  .ref{float:left;width:25%;padding:10px}
  .res{width:80%;height:0;padding-top:80%;overflow:hidden;position:relative;margin:auto 25px;border:5px solid var(--rf)}
  .res img{display:block;height:100%;position:absolute;top:0;left:0}
  .refs span{clear:both;display:block;padding-top:25px}
  .refs strong{display:block;color:var(--r2)}

  .bilgi4{padding:50px 0;margin-top:50px;background:var(--r2) url(dalga.svg) no-repeat;background-size:100%;background-position:top center}
  .bilgi4 .sol{float:left;width:50%;padding:50px 25px}
  .bilgi4 h2{color:var(--rf);font-size:46px;line-height:60px;margin-bottom:25px}
  .bilgi4 .sol p{font-size:18px;line-height:30px;color:var(--r1)}
  .bilgi4 .sag{padding:50px;float:left;width:50%;color:var(--r1)}
  .bilgi4 .sag h2{font-size:42px;color:var(--r3);line-height:54px;font-weight:normal}
  .bilgi4 .sag div{padding:25px}
  .bilgi4 .sag img{height:100px;float:left;margin:0 25px 25px 0}
  .bilgi4 .sag strong{display:block;font-size:18px;font-weight:normal;color:var(--rf)}

  .bilgi5{padding-top:50px}
  .bilgi5 h3{font-size:52px;padding:50px 50px 100px;font-weight:normal}
  .bilgi5 .form{max-width:800px;margin:0 auto 75px;padding-bottom:25px;border:1px solid var(--r2)}
  .bilgi5 .form input, .bilgi5 .form textarea{letter-spacing:0.5px;display:block;width:100%;line-height:30px;padding:5px;border-radius:5px;border:1px solid var(--r03)}
  .bilgi5 .form textarea{height:200px}
  .bilgi5 .form .bt{margin-top:30px}
  .bilgi5 strong{display:block;line-height:30px;padding:5px;color:var(--r02)}
  .bilgi5 .sol{float:left;width:50%;padding:25px}
  .bilgi5 .sag{float:left;width:50%;padding:25px}
  .bilgi5 iframe{width:100%;height:250px}
  .dip img{height:100px;max-width:75%}

  .products{background:var(--r4);padding:100px 25px;/*background:radial-gradient(#b4abbf, var(--r4))*/}
  .products h2{font-weight:normal;font-size:52px;text-align:center;line-height:52px;padding-bottom:100px;color:var(--rf)}
  .products .pr{display:flex;flex-direction:row-reverse}
  .pr a{display:block;padding:15px;margin:10px;border:1px solid var(--r03);border-radius:10px;background:var(--rf)}
  .pr .img{display:block;width:100%;position:relative;height:0;padding-top:100%;overflow:hidden}
  .pr img{width:max-content;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1}
  .pr a:hover img{transform:translate(-50%, -50%) scale(1.1)}
  .pr strong{display:block;font-size:12px;text-align:center;color:var(--r1);padding:25px 0}
  .pr em{display:block;font-size:24px;font-weight:bold;color:var(--r4);text-align:center}
  .pr a:hover em{color:var(--r2)}
  .products h5{color:var(--rf);text-align:center;padding-top:50px;font-weight:normal}


  a, .pr img{transition:.2s all;-webkit-transition:.2s all;-o-transition:.2s all;-moz-transition:.2s all;-ms-transition:.2s all}
  .bekle::before{content:"";animation:don 2s linear infinite;position:absolute;left:50%;top:50%;width:0;height:0;padding:11%;border:2px solid var(--rf);margin:calc(-11% - 1px);border-radius:100%;border-top-color:transparent}
  @keyframes don {0% {transform:rotate(0deg)}100% {transform:rotate(360deg)}}


  @media only screen and (max-width:800px){
    .not{margin:25px;padding:25px;max-width:60%}
    .ref{float:none;width:100%;padding-bottom:50px}
    .bil, .bilgi4 .sol,.bilgi4 .sag,.bilgi5 .sol,.bilgi5 .sag{width:100%;text-align:center}
    .products .pr{flex-wrap:wrap}
    .pr a{flex:1 1 40%}
    header ul{position:fixed;z-index:9;top:0;right:0;width:100px;height:100px;overflow:hidden;padding-top:100px}
    header ul.ac{width:100%;height:100%;background:var(--r2)}
    header ul li{display:block;text-align:right;padding-right:50px;border-top:1px solid var(--raf3);border-bottom:1px solid var(--ra03);}
    #ac{display:block;position:absolute;top:0;right:0;width:70px;height:70px;line-height:65px;text-align:left;background:var(--rf);border:none;border-radius:0 0 0 100%;text-indent:17px}
    }