Sedef | Creative Director · Designer

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Sedef &#124; Creative Director · Designer · Motion Artist</title>
	<link>https://sedefaydogan.com</link>
	<description>Sedef &#124; Creative Director · Designer · Motion Artist</description>
	<pubDate>Tue, 24 Mar 2026 12:13:24 +0000</pubDate>
	<generator>https://sedefaydogan.com</generator>
	<language>en</language>
	
		
	<item>
		<title>intro</title>
				
		<link>https://sedefaydogan.com/intro</link>

		<pubDate>Tue, 24 Mar 2026 11:00:15 +0000</pubDate>

		<dc:creator>Sedef &#124; Creative Director · Designer · Motion Artist</dc:creator>

		<guid isPermaLink="true">https://sedefaydogan.com/intro</guid>

		<description>

  
    Sedef
    I direct. I design. I animate.
  

  .works-wrap { 
    padding-top: 0 !important; 
    margin-top: -20vh !important; /* Görseli biraz daha yukarı çekmek için */
  }

  .scroll-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    /* GÜNCELLEME: Butonu sayfa altına yaklaştırmak için negatif değer verdik */
    bottom: -30px; 
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 100px;
    overflow: visible;
    z-index: 999;
  }

  /* Üstteki Ok (Hoverda gelen) */
  .scroll-btn .arrow-top {
    position: absolute;
    top: -40px; /* Daha yukarıdan başlasın */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.35s ease, top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* WORKS Yazısı */
  .scroll-btn .scroll-label {
    font-size: 1.0em;
    text-transform: uppercase;
    color: #000000;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-weight: 400;
  }

  /* Alttaki Ok (Varsayılan duran) */
  .scroll-btn .arrow-bottom {
    position: absolute;
    top: 50px; /* Yazıyla arayı açtık (Ferahlık) */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* --- HOVER DURUMU --- */
  
  .scroll-btn:hover .scroll-label { 
    top: 40px; 
  }
  
  .scroll-btn:hover .arrow-bottom { 
    opacity: 0; 
    top: 75px; 
  }
  
  .scroll-btn:hover .arrow-top { 
    opacity: 1; 
    top: 0px; /* Yazı 50px'e indiği için ok -5px'te kafaya binmeden durur */
  }
  

    WORKS
    
    
</description>
		
	</item>
		
		
	<item>
		<title>selected works</title>
				
		<link>https://sedefaydogan.com/selected-works</link>

		<pubDate>Tue, 24 Mar 2026 12:13:24 +0000</pubDate>

		<dc:creator>Sedef &#124; Creative Director · Designer · Motion Artist</dc:creator>

		<guid isPermaLink="true">https://sedefaydogan.com/selected-works</guid>

		<description>
	
	
/* --- 1. ANA SAYFA VE PROJE DİZİLİMİ --- */
.works-wrap { 
    width: 100%; 
    padding: 0 0 100px; 
    font-family: inherit; 
}

.project { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: 0 auto 60px; 
    width: 100%; 
    opacity: 1 !important; 
}

/* --- 2. THUMBNAIL VE BÜYÜME EFEKTİ (NETLİK AYARLARI) --- */
.thumb-wrap { 
    transform: scale(0.65); 
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1); 
    transform-origin: center center; 
    cursor: pointer; 
    text-decoration: none; 
    display: block;
    opacity: 1 !important; 
    will-change: transform; 
    -webkit-font-smoothing: antialiased;
}

.thumb-wrap.active { transform: scale(1); opacity: 1 !important; }

.thumb { 
    display: block; 
    object-fit: cover; 
    border: none; 
    width: 100%;
    opacity: 1 !important; 
    filter: brightness(1) contrast(1) saturate(1) !important; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast; 
    transform: translateZ(0); 
}

.thumb.fmt-landscape { width: min(680px, 85vw); height: 480px; }
.thumb.fmt-portrait { width: min(320px, 52vw); height: 480px; }
.thumb.fmt-square { width: min(480px, 68vw); height: 480px; }

/* --- 3. YAZI ALANLARI (CAPTION) --- */
.caption { 
    margin-top: 18px; 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    border-top: 0.5px solid #000; 
    padding-top: 10px; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; 
}

.project.visible .caption { opacity: 1; transform: translateY(0); }
.caption-col { padding-right: 12px; text-align: left; }
.caption-overline { 
    font-family: "Geist Mono Variable", sans-serif; 
    font-weight: 400; font-size: 10px; line-height: 1.1; letter-spacing: 0.14em; 
    text-transform: uppercase; color: #999; display: block; margin-bottom: 4px; 
}
.caption-value { 
    font-family: "Geist Mono Variable", sans-serif; 
    font-weight: 400; font-size: 12px; line-height: 1.2; color: rgba(0, 0, 0, 0.85); 
}

/* --- 4. OVERLAY SİSTEMİ (ALTTAN KAYAN PANEL) --- */
.project-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; visibility: hidden; pointer-events: none;
}

.project-overlay:target { visibility: visible; pointer-events: auto; }

.overlay-backdrop-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.5s ease;
}
.project-overlay:target .overlay-backdrop-layer { opacity: 1; }

.overlay-content-panel {
    position: absolute; bottom: 0; left: 0; width: 100%; 
    height: 88vh; 
    background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px;
    transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden; box-shadow: 0 -15px 50px rgba(0,0,0,0.15);
}
.project-overlay:target .overlay-content-panel { transform: translateY(0); }

/* --- YÜZEN (FLOATING) CLOSE BUTONU --- */
.overlay-close-bar {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    z-index: 100001; display: flex; flex-direction: column; align-items: center;
    text-decoration: none; background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px; border-radius: 40px; gap: 2px; cursor: pointer;
}

.collapse-arrow { color: #999; transition: transform 0.3s ease; }
.overlay-close-bar:hover .collapse-arrow { transform: translateY(3px); }

.close-label { 
    font-family: "Monument Grotesk Mono Variable", sans-serif; 
    font-size: 9px; letter-spacing: 0.15em; color: #999; text-transform: uppercase; 
}

/* Iframe Alanı */
.project-frame-container { 
    width: 100%; height: 100%; border: none; 
}

/* --- 5. MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
  .thumb { height: auto !important; max-height: none !important; width: 85vw !important; }
  .caption { grid-template-columns: 1fr; width: 85vw !important; gap: 10px; }
  
  /* MOBİLDE İFRAME BOYUTUNU %85 YAPAN KRİTİK SATIR: */
  .overlay-content-panel { 
    height: 80vh !important; 
  }
}

html:has(.project-overlay:target) { overflow: hidden; }


      &#60;img class="thumb fmt-landscape" src="https://freight.cargo.site/t/original/i/15addd16d7b280cac09e910bfb6261655e0c22076fc452f32dedc6bbaa903e63/Header_Microsite_Allegris_Perfect-Match_LHG.jpg" alt="Lufthansa Allegris B2B microsite UI/UX design &#124; Interaktives Interface-Design für Lufthansa Allegris"&#62;
      
        ProjectAllegris: The Perfect Match
        ClientLufthansa Group
        RoleArt Direction, Product Design, Motion Design
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-square" src="https://freight.cargo.site/t/original/i/af3c0758ad2fdb014ef3318ae3228c4d5fb09804a41ec7fcfbaf9c91417b7310/sartorius-campaign-visual-metaphor-global-breakthrough.jpg" alt="Sartorius campaign illustration of a hand holding a syringe with a world-shaped drop, symbolizing a scientific breakthrough &#124; Sartorius Kampagnen-Illustration einer Hand mit einer Spritze und einem weltförmigen Tropfen als Symbol für einen wissenschaftlichen Durchbruch."&#62;
      
       ProjectWhen The World Counts On You
        ClientSartorius
        RoleCreative Lead, Art Direction, Project Management
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-landscape" src="https://freight.cargo.site/t/original/i/36b9e3e5a064169712d44da8bbab9dd9a50820aece73bfcf4366c7a710dc3f10/alpamayo-industrial-hero-data-flow-3.jpg" alt="Abstract illustration collage from the Alpamayo sales deck visualizing industrial performance and data-driven impact &#124; Abstrakte Illustrations-Collage aus dem Alpamayo Sales-Deck zur Visualisierung industrieller Leistung und datengesteuerter Auswirkungen."&#62;
      
        ProjectAutonomous Industrial Intelligence
        ClientAlpamayo
        RoleArt Direction, Brand Identity, Information Design
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-portrait" src="https://freight.cargo.site/t/original/i/6e34d3d1fb2b635d0c5956002f81e453be6dc5ec0073d900329bb5d649328431/lufthansa-newsletter-world-responsive-ui-design.jpg" alt="Responsive UI design of the Lufthansa newsletter world displayed on desktop and mobile screens &#124; Responsives UI-Design der Lufthansa Newsletter-Welt auf Desktop- und Mobil-Bildschirmen."&#62;
      
        ProjectNewsletter World Redesign
        ClientLufthansa
        Role

Creative Lead, Art Direction, UI/UX Design
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-landscape" src="https://freight.cargo.site/t/original/i/f13333e058ffb3371593d395caad5fc77f96dd2284abc06ffc84addfff05d1db/mia-ai-unified-visual-logic-mockup-3x2.jpg" alt="Visual framework for mia featuring the brand color palette and a social media story designed with modular templates &#124; Visuelles Framework für mia mit der Marken-Farbpalette und einer Social-Media-Story, gestaltet mit modularen Templates."&#62;
      
        Projectmia: Product Launch
        ClientAureliaX
        RoleArt Direction, Motion &#38;amp; Social Media Design
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-square" src="https://freight.cargo.site/t/original/i/d93dd083409e1bb65ed97090c6be8ce7f3a64cd22d6f6ebbc83bc17ff86829c9/TGGS_keyvisual_DE_blue.png" alt="Lufthansa Giving Gift Shop charity campaign key visual &#124; Integriertes Kampagnen-Branding für den Lufthansa Giving Gift Shop."&#62;
      
        ProjectThe Giving Gift Shop
        ClientLufthansa + help alliance
        Role

Art Direction, Motion&#38;nbsp;Design, Brand&#38;nbsp;Design, Product&#38;nbsp;Photography


    PROJECT INDEX
  

      &#60;img class="thumb fmt-landscape" src="https://freight.cargo.site/t/original/i/ac6dc2c487d8197b060862dfef1e9fd30f141c0a5765127552424a4d601d731a/lufthansa-allegris-atmospheric-launch-visual_thumbnail.jpg" alt="Emotive campaign visual for Lufthansa Allegris featuring a woman amidst a serene cloudy sky &#124; Emotionales Kampagnen-Visual für Lufthansa Allegris mit einer Frau vor einem ruhigen Wolkenhimmel."&#62;
      
        ProjectAllegris: Ready for Takeoff
        ClientLufthansa + Lufthansa&#38;nbsp;Group
        RoleCreative&#38;nbsp;Lead, Art&#38;nbsp;Direction
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-portrait" src="https://freight.cargo.site/t/original/i/2475f9607e478ac824206bf661550fde165abdacc3452ce8df65e1880d101d14/lufthansa-onboard-delights-summer-intercontinental-keyvisual.jpg" alt="Lufthansa Onboard Delights summer menu key visual for intercontinental routes featuring premium offerings &#124; Lufthansa Onboard Delights Sommer-Menü Key Visual für interkontinentale Strecken mit Fokus auf Premium-Angeboten."&#62;
      
        ProjectOnboard Delights
        ClientLufthansa
        RoleArt&#38;nbsp;Direction, Illustration, Motion&#38;nbsp;Design
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-square" src="https://freight.cargo.site/t/original/i/45b6181587cc077c7f43177c78dd368387e94a67a020f90ec9c4a12de62a5bfa/lufthansa-dialogue-preflight-communication.jpg" alt="Aerial view of a peaceful sky from an airplane window representing the Lufthansa passenger journey &#124; Luftaufnahme eines ruhigen Himmels aus einem Flugzeugfenster, die das Lufthansa Reiseerlebnis repräsentiert."&#62;
      
        ProjectDialogue &#38;amp; Preflight Communication
        ClientLufthansa + Lufthansa Group
        RoleArt&#38;nbsp;Direction, Graphic&#38;nbsp;Design, Motion&#38;nbsp;Design, Illustration
      
    
    PROJECT INDEX
  

      &#60;img class="thumb fmt-landscape" src="https://freight.cargo.site/t/original/i/f238938823fae30c7c07be052801c6c1272fe318710e1268068194fd942a8018/baileys-social-media-design-framework-cover.jpg" alt="Three mobile screens showcasing Baileys social media designs overlaid on an influencer photo shoot &#124; Drei Smartphone-Bildschirme mit Baileys Social-Media-Designs über einem Influencer-Fotoshooting."&#62;
      
        ProjectBaileys: Whisk Up Love
        ClientBaileys (Diageo)
        RoleArt Direction, Visual Content Creation, Motion Design

      
    PROJECT INDEX
  

var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    var tw = entry.target.querySelector(".thumb-wrap");
    if (entry.isIntersecting &#38;&#38; entry.intersectionRatio &#62;= 0.45) {
      tw.classList.add("active");
      entry.target.classList.add("visible");
    } else {
      tw.classList.remove("active");
      entry.target.classList.remove("visible");
    }
  });
}, { threshold: [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1], // Daha fazla basamak ekledik, geçiş yumuşar
  rootMargin: "0px 0px -2% 0px" });

document.querySelectorAll(".project").forEach(function(p) { observer.observe(p); });

// 1. PROJEYİ KAPATMA VE SIFIRLAMA
function closeProject(e) {
    if (e) e.preventDefault();
    
    // URL'deki #p1 kısmını değiştirerek CSS :target'ı bozar ve pencereyi kapatır
    window.location.hash = "close"; 
    
    // Pencere aşağı kayarken (0.6s) kullanıcı ana sayfayı görmeye başlar
    // Iframe resetleme işlemini arkada sessizce 0.6 saniye sonra yaparız
    setTimeout(() =&#62; {
        document.querySelectorAll('.project-frame-container').forEach(iframe =&#62; {
            const currentSrc = iframe.src;
            iframe.src = ''; 
            iframe.src = currentSrc;
        });
    }, 600); 
}

// 2. ANA SAYFA KLAVYE DİNLEYİCİ (Oklar ve Esc)
document.addEventListener('keydown', function(e) {
    // Eğer bir proje açıksa (URL'de #p1 gibi bir hedef varsa)
    if (window.location.hash.includes('p')) {
        const activeIframe = document.querySelector(window.location.hash + ' iframe');
        if (activeIframe) {
            if (e.key === 'ArrowRight') activeIframe.contentWindow.postMessage('next', '*');
            if (e.key === 'ArrowLeft') activeIframe.contentWindow.postMessage('prev', '*');
            if (e.key === 'Escape') closeProject();
        }
    }
});

// 3. IFRAME'DEN GELEN KAPATMA SİNYALİNİ AL (Esc tuşu için)
window.addEventListener('message', function(e) {
    if (e.data === 'triggerClose') closeProject();
});
</description>
		
	</item>
		
	</channel>
</rss>