.elementor-2022 .elementor-element.elementor-element-a79bf3d{--display:flex;--min-height:750px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.5;}.elementor-2022 .elementor-element.elementor-element-a79bf3d:not(.elementor-motion-effects-element-type-background), .elementor-2022 .elementor-element.elementor-element-a79bf3d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.birlesiktextile.com/wp-content/uploads/2025/12/WhatsApp-Image-2025-12-18-at-09.05.06.jpeg");background-size:cover;}.elementor-2022 .elementor-element.elementor-element-a79bf3d::before, .elementor-2022 .elementor-element.elementor-element-a79bf3d > .elementor-background-video-container::before, .elementor-2022 .elementor-element.elementor-element-a79bf3d > .e-con-inner > .elementor-background-video-container::before, .elementor-2022 .elementor-element.elementor-element-a79bf3d > .elementor-background-slideshow::before, .elementor-2022 .elementor-element.elementor-element-a79bf3d > .e-con-inner > .elementor-background-slideshow::before, .elementor-2022 .elementor-element.elementor-element-a79bf3d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#141414;--background-overlay:'';}.elementor-2022 .elementor-element.elementor-element-4a22060.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-4a22060{text-align:center;}.elementor-2022 .elementor-element.elementor-element-4a22060 .elementor-heading-title{color:#FFFFFF;}.elementor-2022 .elementor-element.elementor-element-396c1a5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-396c1a5{text-align:center;color:#FFFFFF;}.elementor-2022 .elementor-element.elementor-element-775dc5d{--display:flex;--min-height:500px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2022 .elementor-element.elementor-element-324c34e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-172a1d1.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-35ef60b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-2022 .elementor-element.elementor-element-95113eb.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-95113eb{text-align:center;}.elementor-2022 .elementor-element.elementor-element-cf7e6f3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-cf7e6f3{text-align:center;}.elementor-2022 .elementor-element.elementor-element-6c6032d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-6c6032d{text-align:justify;}.elementor-2022 .elementor-element.elementor-element-778c627.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-778c627{text-align:center;}.elementor-2022 .elementor-element.elementor-element-f7ba6d6{--display:flex;--min-height:500px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2022 .elementor-element.elementor-element-e4a8b5d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-4203f9e.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-4203f9e{text-align:center;}.elementor-2022 .elementor-element.elementor-element-87faa8d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-87faa8d{text-align:center;}.elementor-2022 .elementor-element.elementor-element-f222c03.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-f222c03{text-align:justify;}.elementor-2022 .elementor-element.elementor-element-862e325.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-862e325{text-align:center;}.elementor-2022 .elementor-element.elementor-element-d9d291f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-af39215.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-9fa4f84{--display:flex;--min-height:433px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-2022 .elementor-element.elementor-element-7973832{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-a7532e5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-a7532e5 .elementor-icon-wrapper{text-align:center;}.elementor-2022 .elementor-element.elementor-element-65be74a.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-65be74a{text-align:center;}.elementor-2022 .elementor-element.elementor-element-be29a08.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-be29a08{text-align:justify;}.elementor-2022 .elementor-element.elementor-element-3f7a822{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-7f1ddf6.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-7f1ddf6 .elementor-icon-wrapper{text-align:center;}.elementor-2022 .elementor-element.elementor-element-0c28928.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-c295bf5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-804b2b1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-46a64b6.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-46a64b6 .elementor-icon-wrapper{text-align:center;}.elementor-2022 .elementor-element.elementor-element-a4dc60c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-c06d264.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-c06d264{text-align:justify;}.elementor-2022 .elementor-element.elementor-element-1f380ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2022 .elementor-element.elementor-element-b1f8841.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-b1f8841 .elementor-icon-wrapper{text-align:center;}.elementor-2022 .elementor-element.elementor-element-50e57b4.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-02b6446.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-02b6446{text-align:justify;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2022 .elementor-element.elementor-element-324c34e{--width:50%;}.elementor-2022 .elementor-element.elementor-element-35ef60b{--width:50%;}.elementor-2022 .elementor-element.elementor-element-e4a8b5d{--width:50%;}.elementor-2022 .elementor-element.elementor-element-d9d291f{--width:50%;}.elementor-2022 .elementor-element.elementor-element-7973832{--width:25%;}.elementor-2022 .elementor-element.elementor-element-3f7a822{--width:25%;}.elementor-2022 .elementor-element.elementor-element-804b2b1{--width:25%;}.elementor-2022 .elementor-element.elementor-element-1f380ec{--width:25%;}}@media(min-width:1025px){.elementor-2022 .elementor-element.elementor-element-a79bf3d:not(.elementor-motion-effects-element-type-background), .elementor-2022 .elementor-element.elementor-element-a79bf3d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-7973832 *//* Ana Kutu */ .elementor-2022 .elementor-element.elementor-element-7973832 { position: relative; overflow: visible; } /* Çizgiler (Sanal Katman) */ .elementor-2022 .elementor-element.elementor-element-7973832::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Tıklamayı Engelleme */ pointer-events: none; /* Katman Sırası */ z-index: 9; /* RENK: #979797 */ background-image: linear-gradient(to right, #979797 100%, transparent 0), /* Üst */ linear-gradient(to bottom, #979797 100%, transparent 0), /* Sağ */ linear-gradient(to left, #979797 100%, transparent 0), /* Alt */ linear-gradient(to top, #979797 100%, transparent 0); /* Sol */ background-repeat: no-repeat; /* Başlangıç Pozisyonları (Kritik Nokta Burası) */ background-position: 0 0, /* Üst: Sol Köşede */ 100% 0, /* Sağ: Üst Köşede */ 100% 100%,/* Alt: Sağ Köşede */ 0 100%; /* Sol: Alt Köşede */ /* Başlangıç Boyutu (Hepsi 0) */ background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; opacity: 1; } /* Hover Animasyonu */ .elementor-2022 .elementor-element.elementor-element-7973832:hover::before { /* Süreyi 2s yaptım ki yılanın hareketi net görünsün */ animation: snakeBorder 2s linear forwards; } @keyframes snakeBorder { /* 1. AŞAMA: Üst Çizgi Çiziliyor */ 0% { background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; } 20% { background-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%; /* Üst çizgi tam boy, pozisyon hala solda */ background-position: 0 0, 100% 0, 100% 100%, 0 100%; } /* 2. AŞAMA: Sağ Çiziliyor + Üst Siliniyor */ 20.1% { /* HİLE BURADA: Üst çizginin "çapasını" sağa taşıyoruz */ background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } 40% { /* Üst çizgi sağa doğru küçüldü (silindi), Sağ çizgi aşağı uzadı */ background-size: 0% 2px, 2px 100%, 0% 2px, 2px 0%; background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } /* 3. AŞAMA: Alt Çiziliyor + Sağ Siliniyor */ 40.1% { /* Sağ çizginin çapasını aşağı taşıyoruz */ background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } 60% { /* Sağ silindi, Alt sola doğru uzadı */ background-size: 0% 2px, 0% 100%, 100% 2px, 2px 0%; background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } /* 4. AŞAMA: Sol Çiziliyor + Alt Siliniyor */ 60.1% { /* Alt çizginin çapasını sola taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } 80% { /* Alt silindi, Sol yukarı uzadı */ background-size: 0% 2px, 0% 100%, 0% 2px, 2px 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } /* 5. AŞAMA: Sol Siliniyor (FİNAL) */ 80.1% { /* Sol çizginin çapasını yukarı taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 0; } 100% { /* Her şey silindi */ background-size: 0% 2px, 0% 100%, 0% 2px, 0% 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3f7a822 *//* Ana Kutu */ .elementor-2022 .elementor-element.elementor-element-3f7a822 { position: relative; overflow: visible; } /* Çizgiler (Sanal Katman) */ .elementor-2022 .elementor-element.elementor-element-3f7a822::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Tıklamayı Engelleme */ pointer-events: none; /* Katman Sırası */ z-index: 9; /* RENK: #979797 */ background-image: linear-gradient(to right, #979797 100%, transparent 0), /* Üst */ linear-gradient(to bottom, #979797 100%, transparent 0), /* Sağ */ linear-gradient(to left, #979797 100%, transparent 0), /* Alt */ linear-gradient(to top, #979797 100%, transparent 0); /* Sol */ background-repeat: no-repeat; /* Başlangıç Pozisyonları (Kritik Nokta Burası) */ background-position: 0 0, /* Üst: Sol Köşede */ 100% 0, /* Sağ: Üst Köşede */ 100% 100%,/* Alt: Sağ Köşede */ 0 100%; /* Sol: Alt Köşede */ /* Başlangıç Boyutu (Hepsi 0) */ background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; opacity: 1; } /* Hover Animasyonu */ .elementor-2022 .elementor-element.elementor-element-3f7a822:hover::before { /* Süreyi 2s yaptım ki yılanın hareketi net görünsün */ animation: snakeBorder 2s linear forwards; } @keyframes snakeBorder { /* 1. AŞAMA: Üst Çizgi Çiziliyor */ 0% { background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; } 20% { background-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%; /* Üst çizgi tam boy, pozisyon hala solda */ background-position: 0 0, 100% 0, 100% 100%, 0 100%; } /* 2. AŞAMA: Sağ Çiziliyor + Üst Siliniyor */ 20.1% { /* HİLE BURADA: Üst çizginin "çapasını" sağa taşıyoruz */ background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } 40% { /* Üst çizgi sağa doğru küçüldü (silindi), Sağ çizgi aşağı uzadı */ background-size: 0% 2px, 2px 100%, 0% 2px, 2px 0%; background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } /* 3. AŞAMA: Alt Çiziliyor + Sağ Siliniyor */ 40.1% { /* Sağ çizginin çapasını aşağı taşıyoruz */ background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } 60% { /* Sağ silindi, Alt sola doğru uzadı */ background-size: 0% 2px, 0% 100%, 100% 2px, 2px 0%; background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } /* 4. AŞAMA: Sol Çiziliyor + Alt Siliniyor */ 60.1% { /* Alt çizginin çapasını sola taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } 80% { /* Alt silindi, Sol yukarı uzadı */ background-size: 0% 2px, 0% 100%, 0% 2px, 2px 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } /* 5. AŞAMA: Sol Siliniyor (FİNAL) */ 80.1% { /* Sol çizginin çapasını yukarı taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 0; } 100% { /* Her şey silindi */ background-size: 0% 2px, 0% 100%, 0% 2px, 0% 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-804b2b1 *//* Ana Kutu */ .elementor-2022 .elementor-element.elementor-element-804b2b1 { position: relative; overflow: visible; } /* Çizgiler (Sanal Katman) */ .elementor-2022 .elementor-element.elementor-element-804b2b1::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Tıklamayı Engelleme */ pointer-events: none; /* Katman Sırası */ z-index: 9; /* RENK: #979797 */ background-image: linear-gradient(to right, #979797 100%, transparent 0), /* Üst */ linear-gradient(to bottom, #979797 100%, transparent 0), /* Sağ */ linear-gradient(to left, #979797 100%, transparent 0), /* Alt */ linear-gradient(to top, #979797 100%, transparent 0); /* Sol */ background-repeat: no-repeat; /* Başlangıç Pozisyonları (Kritik Nokta Burası) */ background-position: 0 0, /* Üst: Sol Köşede */ 100% 0, /* Sağ: Üst Köşede */ 100% 100%,/* Alt: Sağ Köşede */ 0 100%; /* Sol: Alt Köşede */ /* Başlangıç Boyutu (Hepsi 0) */ background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; opacity: 1; } /* Hover Animasyonu */ .elementor-2022 .elementor-element.elementor-element-804b2b1:hover::before { /* Süreyi 2s yaptım ki yılanın hareketi net görünsün */ animation: snakeBorder 2s linear forwards; } @keyframes snakeBorder { /* 1. AŞAMA: Üst Çizgi Çiziliyor */ 0% { background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; } 20% { background-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%; /* Üst çizgi tam boy, pozisyon hala solda */ background-position: 0 0, 100% 0, 100% 100%, 0 100%; } /* 2. AŞAMA: Sağ Çiziliyor + Üst Siliniyor */ 20.1% { /* HİLE BURADA: Üst çizginin "çapasını" sağa taşıyoruz */ background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } 40% { /* Üst çizgi sağa doğru küçüldü (silindi), Sağ çizgi aşağı uzadı */ background-size: 0% 2px, 2px 100%, 0% 2px, 2px 0%; background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } /* 3. AŞAMA: Alt Çiziliyor + Sağ Siliniyor */ 40.1% { /* Sağ çizginin çapasını aşağı taşıyoruz */ background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } 60% { /* Sağ silindi, Alt sola doğru uzadı */ background-size: 0% 2px, 0% 100%, 100% 2px, 2px 0%; background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } /* 4. AŞAMA: Sol Çiziliyor + Alt Siliniyor */ 60.1% { /* Alt çizginin çapasını sola taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } 80% { /* Alt silindi, Sol yukarı uzadı */ background-size: 0% 2px, 0% 100%, 0% 2px, 2px 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } /* 5. AŞAMA: Sol Siliniyor (FİNAL) */ 80.1% { /* Sol çizginin çapasını yukarı taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 0; } 100% { /* Her şey silindi */ background-size: 0% 2px, 0% 100%, 0% 2px, 0% 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1f380ec *//* Ana Kutu */ .elementor-2022 .elementor-element.elementor-element-1f380ec { position: relative; overflow: visible; } /* Çizgiler (Sanal Katman) */ .elementor-2022 .elementor-element.elementor-element-1f380ec::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Tıklamayı Engelleme */ pointer-events: none; /* Katman Sırası */ z-index: 9; /* RENK: #979797 */ background-image: linear-gradient(to right, #979797 100%, transparent 0), /* Üst */ linear-gradient(to bottom, #979797 100%, transparent 0), /* Sağ */ linear-gradient(to left, #979797 100%, transparent 0), /* Alt */ linear-gradient(to top, #979797 100%, transparent 0); /* Sol */ background-repeat: no-repeat; /* Başlangıç Pozisyonları (Kritik Nokta Burası) */ background-position: 0 0, /* Üst: Sol Köşede */ 100% 0, /* Sağ: Üst Köşede */ 100% 100%,/* Alt: Sağ Köşede */ 0 100%; /* Sol: Alt Köşede */ /* Başlangıç Boyutu (Hepsi 0) */ background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; opacity: 1; } /* Hover Animasyonu */ .elementor-2022 .elementor-element.elementor-element-1f380ec:hover::before { /* Süreyi 2s yaptım ki yılanın hareketi net görünsün */ animation: snakeBorder 2s linear forwards; } @keyframes snakeBorder { /* 1. AŞAMA: Üst Çizgi Çiziliyor */ 0% { background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; } 20% { background-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%; /* Üst çizgi tam boy, pozisyon hala solda */ background-position: 0 0, 100% 0, 100% 100%, 0 100%; } /* 2. AŞAMA: Sağ Çiziliyor + Üst Siliniyor */ 20.1% { /* HİLE BURADA: Üst çizginin "çapasını" sağa taşıyoruz */ background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } 40% { /* Üst çizgi sağa doğru küçüldü (silindi), Sağ çizgi aşağı uzadı */ background-size: 0% 2px, 2px 100%, 0% 2px, 2px 0%; background-position: 100% 0, 100% 0, 100% 100%, 0 100%; } /* 3. AŞAMA: Alt Çiziliyor + Sağ Siliniyor */ 40.1% { /* Sağ çizginin çapasını aşağı taşıyoruz */ background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } 60% { /* Sağ silindi, Alt sola doğru uzadı */ background-size: 0% 2px, 0% 100%, 100% 2px, 2px 0%; background-position: 100% 0, 100% 100%, 100% 100%, 0 100%; } /* 4. AŞAMA: Sol Çiziliyor + Alt Siliniyor */ 60.1% { /* Alt çizginin çapasını sola taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } 80% { /* Alt silindi, Sol yukarı uzadı */ background-size: 0% 2px, 0% 100%, 0% 2px, 2px 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 100%; } /* 5. AŞAMA: Sol Siliniyor (FİNAL) */ 80.1% { /* Sol çizginin çapasını yukarı taşıyoruz */ background-position: 100% 0, 100% 100%, 0 100%, 0 0; } 100% { /* Her şey silindi */ background-size: 0% 2px, 0% 100%, 0% 2px, 0% 100%; background-position: 100% 0, 100% 100%, 0 100%, 0 0; } }/* End custom CSS */