* {
	     margin: 0;
	     padding: 0;
	     box-sizing: border-box;
	     font-family: Arial, sans-serif;
	   }

	   :root {
	     --left-bg: url('/public/assets/media/evde-fiber-vdsl-internet.png');
	     --right-bg: url('/public/assets/media/veri-merkezi.jpg');
	   }

	   body {
	     display: flex;
	     height: 100vh;
	     background: #0a0a0a;
	   }

	   .container {
	     position: relative;
	     display: flex;
	     width: 100%;
	     height: 100%;
	     overflow: hidden;
	   }

	   .left, .right {
	     flex: 1;
	     display: flex;
	     flex-direction: column;
	     justify-content: center;
	     align-items: center;
	     padding: 40px;
	     text-align: center;
	     position: relative;
	     background-position: center;
	     background-size: cover;
	     background-repeat: no-repeat;
	     color: #fff;
	   }

	   .left, .right {  text-align: left; }
	   .content { width: 100%; max-width: 540px; }

	   .left::before, .right::before {
	     content: "";
	     position: absolute;
	     inset: 0;
	     z-index: 0;
	     pointer-events: none;
	   }

	   .left > *, .right > * { position: relative; z-index: 1; }

	   .left { background-image: var(--left-bg); }
	   .left::before { background: rgba(0, 120, 204, 0.82); }

	   .right { color: #0f0f10; background-image: var(--right-bg); }
	   .right::before { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(1px); }

	   .brand { width: 190px; position: absolute; top: 24px; left: 24px; filter: brightness(0) invert(1); z-index: 2; }

	   .left h1 { font-size: 74px; line-height: 1; font-weight: 800; letter-spacing: -1px; }
	   .left h2 { font-size: 26px; font-weight: 400; opacity: 0.95; margin-bottom: 26px; }
	   .left p, .right p { font-size: 18px; line-height: 1.6; margin-top: 8px; margin-bottom: 50px;}

	   .right h1 { font-size: 74px; line-height: 1; font-weight: 800; color: #0f0f10; letter-spacing: -1px; }
	   .right h2 { font-size: 58px; font-weight: 300; margin-bottom: 26px; color: #0f0f10; }

	   .btn { width:100%; text-align:center;display: inline-block; padding: 16px 32px; margin-top: 50px;  border: 2px solid currentColor; background: transparent; text-decoration: none; transition: background .25s, color .25s; font-weight: 700; font-size: 18px; }
	   .left .btn { color: #ffffff; }
	   .left .btn:hover { background: #ffffff; color: #0078cc; }
	   .right .btn { color: #0f0f10; }
	   .right .btn:hover { background: #0f0f10; color: #ffffff; }

	   .divider { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; z-index: 50; pointer-events: auto; }
	   .divider svg { width: 100%; height: 100%; display: block; pointer-events: none; }
	   .divider a { position: absolute; top: 0; height: 100%; width: 50%; display: block; }
	   .divider a.left-area { left: 0; }
	   .divider a.right-area { right: 0; }
	   .divider a:hover { cursor: pointer; }

	 h1 { font-size:64px; font-weight:800; font-family:sans-serif; }

    .letter {
        display: inline-block;
        opacity: 0;
        transform: translateX(-30px);
        animation: letterInLeft 0.4s forwards;
    }
    .letter.rightt {
        transform: translateX(30px);
        animation: letterInRight 0.4s forwards;
    }

    @keyframes letterInLeft {
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes letterInRight {
        to { opacity: 1; transform: translateX(0); }
    }
    @media (max-width: 768px) {

    .container {
        flex-direction: column;
    }

    
    .left, .right {
        flex: none; 
        width: 100%; 
        height: 50vh; 
        text-align: center; 
        padding: 30px 20px; 
    }

    .content {
        max-width: 100%;
    }
    
    .left h1, .right h1 {
        font-size: 42px;
        letter-spacing: -0.5px;
    }
    .left h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .right h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .left h2 span {
        font-size: 38px !important;
    }

    .left p, .right p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .brand {
        width: 140px;
        top: 20px;
        left: 20px;
    }

    .divider {
        transform: translate(-50%, -50%) rotate(90deg);
        width: 64px;
        height: 64px;
    }
    
    .btn {
        width: auto; 
        display: inline-block;
        padding: 14px 28px;
        font-size: 16px;
        margin-top: 0;
    }
    }