Onur Tutan · Blog

Blog

Markaların büyümeyi ne sandığı ile gerçekte büyümeyi neyin sağladığı arasındaki derin uçurum.

/* ══════════════════════════════════════════ ONUR TUTAN — BLOG LİSTESİ WordPress REST API ile gerçek yazılar Premium / Editorial / Cream zemin ══════════════════════════════════════════ */ #otb-wrap * { box-sizing: border-box; } #otb-wrap { --orange: #E8621A; --cream: #F3EFE6; --soft: #FAF8F3; --text: #141414; --muted: rgba(20,20,20,.54); --line: rgba(20,20,20,.09); --card-bg: #FFFFFF; font-family: 'Century Gothic','CenturyGothic','AppleGothic',sans-serif; background: var(--cream); padding: clamp(48px,7vw,100px) clamp(20px,5vw,72px) clamp(64px,9vw,120px); } /* ── Üst başlık ── */ .otb-header { max-width: 1280px; margin: 0 auto clamp(40px,6vw,72px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: clamp(24px,3.5vw,40px); } .otb-header-left .otb-eyebrow { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(20,20,20,.38); margin-bottom: 12px; } .otb-header-left h2 { font-size: clamp(32px,5vw,72px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; color: var(--text); margin: 0; } .otb-header-left h2 em { font-style: normal; color: var(--orange); } .otb-post-count { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,20,20,.3); white-space: nowrap; align-self: flex-end; padding-bottom: 4px; } /* ── Kategori filtresi ── */ .otb-filters { max-width: 1280px; margin: 0 auto clamp(32px,4.5vw,56px); display: flex; gap: 8px; flex-wrap: wrap; } .otb-filter-btn { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: background .25s, border-color .25s, color .25s; } .otb-filter-btn:hover, .otb-filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; } /* ══ GRID ══ İlk kart (featured) tam genişlik, sonrakiler 2 sütun → 3 sütun. 12 yazı: 1 büyük + 11 normal (son satır 2 kart) → Biz 12 yazı ilk grup, +6 lazy load yapıyoruz. */ .otb-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 24px); } /* Büyük kart — ilk yazı */ .otb-card.otb-featured { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--line); box-shadow: 0 8px 40px rgba(0,0,0,.07); text-decoration: none; color: inherit; transition: box-shadow .35s, transform .35s; } .otb-card.otb-featured:hover { box-shadow: 0 20px 60px rgba(0,0,0,.12); transform: translateY(-4px); } /* Orta kartlar — 2 sütun */ .otb-card.otb-mid { grid-column: span 6; border-radius: 16px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0,0,0,.05); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .35s, transform .35s; } .otb-card.otb-mid:hover { box-shadow: 0 16px 50px rgba(0,0,0,.1); transform: translateY(-3px); } /* Küçük kartlar — 4 sütun (3 yan yana) */ .otb-card.otb-small { grid-column: span 4; border-radius: 14px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.04); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .35s, transform .35s; } .otb-card.otb-small:hover { box-shadow: 0 12px 40px rgba(0,0,0,.09); transform: translateY(-2px); } /* ── Görsel ── */ .otb-card-img { position: relative; overflow: hidden; background: #e8e2d6; flex-shrink: 0; } /* Featured img */ .otb-card.otb-featured .otb-card-img { height: clamp(280px, 35vw, 500px); } /* Mid img */ .otb-card.otb-mid .otb-card-img { height: clamp(180px, 22vw, 280px); } /* Small img */ .otb-card.otb-small .otb-card-img { height: clamp(140px, 18vw, 220px); } .otb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .otb-card:hover .otb-card-img img { transform: scale(1.04); } /* Görsel yoksa placeholder */ .otb-img-ph { width: 100%; height: 100%; background: linear-gradient(135deg, #e4dfd5, #cec8bc); display: flex; align-items: center; justify-content: center; } .otb-img-ph span { font-size: clamp(28px, 4vw, 48px); opacity: .35; } /* Kategori badge üstte */ .otb-cat-badge { position: absolute; top: 14px; left: 14px; background: rgba(232,98,26,.9); color: #fff; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } /* ── İçerik ── */ .otb-card-body { padding: clamp(16px, 2.5vw, 28px); display: flex; flex-direction: column; flex: 1; } .otb-card.otb-featured .otb-card-body { justify-content: center; padding: clamp(28px, 4vw, 52px); } .otb-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .otb-card-date { font-size: 10px; letter-spacing: .14em; color: rgba(20,20,20,.35); text-transform: uppercase; } .otb-card-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,20,20,.2); } .otb-card-cat { font-size: 10px; letter-spacing: .14em; color: var(--orange); text-transform: uppercase; font-weight: 700; } .otb-card-title { font-size: clamp(15px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.025em; line-height: 1.22; color: var(--text); margin: 0 0 10px; } .otb-card.otb-featured .otb-card-title { font-size: clamp(22px, 2.8vw, 40px); margin-bottom: 14px; } .otb-card-excerpt { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.72; color: var(--muted); margin: 0 0 20px; /* Metin taşmasını engelle */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .otb-card.otb-small .otb-card-excerpt { -webkit-line-clamp: 2; } .otb-card-read { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: 700; } .otb-card-read svg { width: 14px; height: 14px; transition: transform .25s; flex-shrink: 0; } .otb-card:hover .otb-card-read svg { transform: translateX(4px); } /* ── DEVAMINI GÖR ── */ .otb-load-more-wrap { max-width: 1280px; margin: clamp(40px,5.5vw,64px) auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* İnce çizgi bölücü */ .otb-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent); position: relative; margin-bottom: 8px; } .otb-divider::after { content: ''; position: absolute; top: -1px; left: -60px; width: 60px; height: 3px; background: linear-gradient(to right, transparent, var(--orange) 50%, rgba(232,98,26,.4)); filter: blur(.3px); animation: divLine 4s ease-in-out infinite; } @keyframes divLine { 0% { left: -60px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% + 60px); opacity: 0; } } .otb-load-btn { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid rgba(20,20,20,.18); background: transparent; border-radius: 999px; padding: clamp(13px,1.8vh,17px) clamp(32px,3.5vw,48px); font-family: inherit; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text); cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s; } .otb-load-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); } .otb-load-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .otb-load-btn svg { width: 16px; height: 16px; transition: transform .3s; } .otb-load-btn:hover svg { transform: rotate(180deg); } .otb-load-btn.loading svg { animation: spin .8s linear infinite; } @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} } .otb-end-msg { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,20,20,.3); display: none; } /* ── Reveal animasyonu ── */ .otb-card { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease, box-shadow .35s, border-color .35s; } .otb-card.otb-in { opacity: 1; transform: translateY(0); } /* ── Skeleton yüklenirken ── */ .otb-skeleton { background: linear-gradient(90deg, #e8e2d6 25%, #f0ece4 50%, #e8e2d6 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* ── Responsive ── */ @media (max-width: 900px) { .otb-card.otb-featured { grid-template-columns: 1fr; grid-column: span 12; } .otb-card.otb-mid { grid-column: span 12; } .otb-card.otb-small { grid-column: span 6; } } @media (max-width: 560px) { .otb-card.otb-small { grid-column: span 12; } .otb-header { flex-direction: column; align-items: flex-start; } }

Marka · Strateji · Büyüme

Her Düşünce
Bir Sistem.

Yazılar yüklenemedi. Lütfen sayfayı yenileyin.

'; }) .finally(function(){ loadBtn.classList.remove('loading'); loadBtn.disabled = false; }); } /* ══ KART RENDER ══ */ function renderPosts(posts){ posts.forEach(function(post, idx){ var card; if(firstLoad && idx === 0){ card = buildFeaturedCard(post); } else if(firstLoad && (idx === 1 || idx === 2)){ card = buildMidCard(post); } else { card = buildSmallCard(post); } grid.appendChild(card); /* Staggered reveal */ setTimeout(function(){ card.classList.add('otb-in'); }, idx * 55); }); /* Lazy img gözlemcisi */ observeImages(); } /* Featured kart */ function buildFeaturedCard(post){ var a = document.createElement('a'); a.href = post.link; a.className = 'otb-card otb-featured'; a.innerHTML = buildImgHtml(post, true) + buildBodyHtml(post, true); return a; } /* Mid kart */ function buildMidCard(post){ var a = document.createElement('a'); a.href = post.link; a.className = 'otb-card otb-mid'; a.innerHTML = buildImgHtml(post) + buildBodyHtml(post); return a; } /* Small kart */ function buildSmallCard(post){ var a = document.createElement('a'); a.href = post.link; a.className = 'otb-card otb-small'; a.innerHTML = buildImgHtml(post) + buildBodyHtml(post); return a; } /* Görsel HTML */ function buildImgHtml(post, featured){ var imgSrc = ''; var altText = decodeHtml(post.title.rendered); if(post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]){ var media = post._embedded['wp:featuredmedia'][0]; /* Orta boyut önce, yoksa büyük */ if(media.media_details && media.media_details.sizes){ var sizes = media.media_details.sizes; imgSrc = (sizes.medium_large && sizes.medium_large.source_url) || (sizes.large && sizes.large.source_url) || media.source_url; } else { imgSrc = media.source_url || ''; } } /* Kategori badge */ var catName = ''; if(post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]){ catName = post._embedded['wp:term'][0][0].name; } var badge = catName ? '' + escHtml(catName) + '' : ''; var imgContent = imgSrc ? '

' : '

✍️

'; return '

' + imgContent + badge + '

'; } /* Gövde HTML */ function buildBodyHtml(post, featured){ var date = new Date(post.date); var dateStr = date.toLocaleDateString('tr-TR', { day:'numeric', month:'long', year:'numeric' }); var catName = ''; if(post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]){ catName = post._embedded['wp:term'][0][0].name; } var excerpt = ''; if(post.excerpt && post.excerpt.rendered){ var tmp = document.createElement('div'); tmp.innerHTML = post.excerpt.rendered; excerpt = tmp.textContent || tmp.innerText || ''; excerpt = excerpt.trim().replace(/\[…\]/g,'…'); } var title = decodeHtml(post.title.rendered); return '

' + '

' + '' + dateStr + '' + (catName ? '' + escHtml(catName) + '' : '') + '

' + '

' + escHtml(title) + '

' + (excerpt ? '

' + escHtml(excerpt) + '

' : '') + 'Oku ' + '' + '' + '

'; } /* ══ LAZY IMAGE ══ */ var imgObserver; function observeImages(){ if(!imgObserver){ imgObserver = new IntersectionObserver(function(entries){ entries.forEach(function(entry){ if(entry.isIntersecting){ var img = entry.target; if(img.dataset.src){ img.src = img.dataset.src; delete img.dataset.src; imgObserver.unobserve(img); } } }); }, {rootMargin:'200px'}); } grid.querySelectorAll('img[data-src]').forEach(function(img){ imgObserver.observe(img); }); } /* ══ SKELETON ══ */ function showSkeletons(count){ for(var i = 0; i < count; i++){ var div = document.createElement('div'); var cls = firstLoad && i===0 ? 'otb-card otb-featured' : firstLoad && i<3 ? 'otb-card otb-mid' : 'otb-card otb-small'; div.className = cls + ' otb-skeleton-card'; div.style.cssText = 'border-radius:16px;overflow:hidden;background:#f0ece4;'; var ph = document.createElement('div'); ph.className = 'otb-skeleton'; ph.style.cssText = 'height:' + (firstLoad&&i===0?'320px':firstLoad&&i<3?'220px':'180px') + ';'; var body = document.createElement('div'); body.style.cssText = 'padding:20px;display:flex;flex-direction:column;gap:10px;'; body.innerHTML = '

' + '

'; div.appendChild(ph); div.appendChild(body); grid.appendChild(div); } } function clearSkeletons(){ grid.querySelectorAll('.otb-skeleton-card').forEach(function(el){ el.remove(); }); } /* ══ MORE BUTTON ══ */ function updateMoreBtn(){ moreWrap.style.display = 'flex'; if(loadedPosts >= totalPosts){ loadBtn.style.display = 'none'; endMsg.style.display = 'block'; } else { loadBtn.style.display = 'inline-flex'; endMsg.style.display = 'none'; } } loadBtn.addEventListener('click', function(){ loadPosts(); }); /* ══ YARDIMCI FONKSİYONLAR ══ */ function escHtml(str){ return String(str) .replace(/&/g,'&') .replace(//g,'>') .replace(/"/g,'"'); } function decodeHtml(str){ var txt = document.createElement('textarea'); txt.innerHTML = str; return txt.value; } /* ══ BAŞLAT ══ */ loadPosts(); })();