/* ========================================================================== Banu Anka — site stilleri Referans: kevinfrancisgray.com yapısı (Squarespace "Wells" benzeri düzen) ========================================================================== */ :root{ --bg:#595959; --content:1200px; --fg:#ffffff; --rule:rgba(255,255,255,.32); --muted:rgba(255,255,255,.72); --pad:50px; --gap:16px; --font:'futura-pt','Jost','Century Gothic','Avenir Next',Helvetica,Arial,sans-serif; --nav-fs:11px; --nav-ls:2px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:15px; font-weight:300; letter-spacing:.5px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} p{margin:0 0 1em} hr{border:0;border-top:1px solid var(--rule);margin:60px 0} ::selection{background:#fff;color:var(--bg)} /* -------------------------------------------------------------------------- Dil (TR / EN) Aktif dil ile belirlenir; 'deki küçük script sayfa çizilmeden önce ayarlar, böylece iki dil birden görünüp zıplamaz. -------------------------------------------------------------------------- */ html[data-lang="tr"] [data-lang="en"], html[data-lang="en"] [data-lang="tr"]{display:none !important} .lang-switch{ display:flex;align-items:center;gap:5px; font-size:var(--nav-fs);font-weight:500;letter-spacing:var(--nav-ls); margin-left:4px; } .lang-switch button{ padding:0 0 2px;margin:0;border:0;border-bottom:1px solid transparent; background:none;color:inherit;cursor:pointer; font:inherit;letter-spacing:inherit; opacity:.5;transition:opacity .2s ease,border-color .2s ease; } .lang-switch button:hover{opacity:1} .lang-switch .sep{opacity:.4} html[data-lang="tr"] .lang-switch [data-set-lang="tr"], html[data-lang="en"] .lang-switch [data-set-lang="en"]{ opacity:1;border-bottom-color:currentColor; } /* Kapak sayfasındaki switcher menü satırıyla aynı ölçüde */ .cover-nav .lang-switch{ font-size:15px;letter-spacing:2.25px; margin:9px 0 0; } /* Mobil menüdeki switcher */ .mobile-menu .lang-switch{ font-size:18px;letter-spacing:2px;margin:10px 0 0; } /* -------------------------------------------------------------------------- İç sayfa düzeni -------------------------------------------------------------------------- */ .canvas{padding:var(--pad)} /* Üst menü tam genişlikte kalır; içerik 1200px'de sınırlanıp ortalanır. (kevinfrancisgray.com da böyle: 1440px'de içerik 1200, kenarlarda 120px) */ .canvas > main{max-width:var(--content);margin:0 auto} .site-header{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:100px; } .logo{ font-size:var(--nav-fs); font-weight:500; letter-spacing:3.3px; white-space:nowrap; } .main-nav{display:flex;align-items:center;gap:20px} .main-nav a{ font-size:var(--nav-fs); font-weight:500; letter-spacing:var(--nav-ls); line-height:1.5; padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .2s ease,opacity .2s ease; } .main-nav a:hover{border-bottom-color:var(--rule)} .main-nav a.is-active{border-bottom-color:var(--fg)} .nav-icon{display:flex;align-items:center;opacity:.9;transition:opacity .2s ease} .nav-icon:hover{opacity:1} .nav-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4} /* Hamburger (yalnız mobil) */ .burger{ display:none; width:26px;height:18px; padding:0;margin:0;border:0;background:none;color:inherit;cursor:pointer; position:relative; } .burger span{ position:absolute;left:0;right:0;height:1px;background:currentColor; transition:transform .25s ease,opacity .25s ease; } .burger span:nth-child(1){top:2px} .burger span:nth-child(2){top:8px} .burger span:nth-child(3){top:14px} .is-menu-open .burger{ position:fixed; top:calc(var(--pad) + 2px); right:var(--pad); z-index:90; } .is-menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .is-menu-open .burger span:nth-child(2){opacity:0} .is-menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:80; background:var(--bg); padding:100px var(--pad) var(--pad); display:flex;flex-direction:column;gap:26px; opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease; } .is-menu-open .mobile-menu{opacity:1;visibility:visible} .is-menu-open{overflow:hidden} .mobile-menu a{ font-size:18px;font-weight:500;letter-spacing:2px; } /* -------------------------------------------------------------------------- Tipografi — sayfa içeriği -------------------------------------------------------------------------- */ .page-title{ margin:0 0 34px; font-size:28px; font-weight:400; letter-spacing:1.5px; line-height:1.2; } .section-title{ margin:0 0 14px; font-size:28px; font-weight:400; letter-spacing:1.5px; line-height:1.2; } .series-title{ margin:0 0 18px; font-size:18px; font-weight:400; letter-spacing:2px; } .body-text{font-size:15px;line-height:1.55;letter-spacing:.5px} .body-text a{border-bottom:1px solid var(--rule)} .body-text a:hover{border-bottom-color:var(--fg)} .small{font-size:13px;letter-spacing:.5px} .muted{color:var(--muted)} /* -------------------------------------------------------------------------- WORKS — satır tabanlı ızgara -------------------------------------------------------------------------- */ .series{margin-bottom:70px} .grid{display:flex;flex-direction:column;gap:var(--gap)} .grid-row{display:flex;gap:var(--gap);align-items:flex-start} .tile-filler{min-width:0;pointer-events:none} .tile{display:block;position:relative;overflow:hidden;cursor:pointer;min-width:0} .tile img{width:100%;transition:opacity .35s ease} .tile img:not(.loaded){opacity:0} .tile:hover img{opacity:.82} /* -------------------------------------------------------------------------- NEWS -------------------------------------------------------------------------- */ .news-entry{padding-bottom:10px} .news-entry + .news-entry{border-top:1px solid var(--rule);padding-top:60px;margin-top:60px} .intro-title{font-size:16px;font-weight:500;letter-spacing:.6px;margin:0 0 10px} .news-meta{margin-bottom:26px} .news-artist{font-size:15px;letter-spacing:.5px;margin:0 0 14px} .news-title{font-size:20px;font-weight:400;letter-spacing:2px;margin:0 0 12px} .news-place{font-size:15px;letter-spacing:.5px;margin:0 0 6px} .news-credit{margin-top:18px;font-size:13px;letter-spacing:.5px;color:var(--muted)} /* -------------------------------------------------------------------------- Eser sayfası (work.html) -------------------------------------------------------------------------- */ .work-back{ display:inline-block;margin-bottom:26px; font-size:11px;font-weight:500;letter-spacing:2px; padding-bottom:3px;border-bottom:1px solid transparent; transition:border-color .2s ease; } .work-back:hover{border-bottom-color:var(--fg)} .work-collection{ margin:8px 0 0; font-size:13px;letter-spacing:1px;color:var(--muted); } .work-meta{margin:20px 0 0} .work-meta p{margin:0;line-height:1.55} .work-image{display:block;margin-top:34px;max-width:560px} .work-image img{width:100%;height:auto} .work-image:hover img{opacity:.88;transition:opacity .25s ease} @media (max-width:767px){ .work-image{margin-top:26px;max-width:100%} } /* Sergi kataloğu bağlantısı ve sergi yazısı */ .doc-link{ display:inline-block;margin-top:22px; font-size:11px;font-weight:500;letter-spacing:2px; padding:9px 18px;border:1px solid rgba(255,255,255,.5); transition:background-color .2s ease,border-color .2s ease; } .doc-link:hover{background:rgba(255,255,255,.14);border-color:#fff} .essay{margin-top:26px;max-width:900px} .essay p{font-size:15px;line-height:1.6;letter-spacing:.4px;margin:0 0 1em} .essay .essay-author{ font-size:13px;letter-spacing:.5px;color:var(--muted);margin:0 0 4px; } /* Tam metin sayfası (text.html) */ .essay-byline{ margin:6px 0 0;font-size:13px;letter-spacing:.5px;color:var(--muted); } /* Yazının dili sitenin diliyle aynıysa uyarı gizlenir. */ .essay-note{ margin:16px 0 0; font-size:12px;letter-spacing:.5px;color:var(--muted); border-left:1px solid var(--rule);padding-left:12px;max-width:760px; } html[data-lang="tr"] .essay-note.lang-only-tr, html[data-lang="en"] .essay-note.lang-only-en{display:none} .essay-full{margin-top:38px;max-width:760px} .essay-full p{font-size:15px;line-height:1.7;letter-spacing:.4px;margin:0 0 1.3em} .essay-full .essay-head{ margin:2.2em 0 .9em; font-size:16px;font-weight:500;letter-spacing:.8px;line-height:1.4; } .essay-full .essay-quote{ white-space:pre-line; /* şiirin satır sonları korunsun */ margin:0 0 1.3em;padding-left:22px; border-left:1px solid var(--rule); color:var(--muted); } .slideshow{position:relative} .slideshow-stage{position:relative;height:min(72vh,640px)} .slideshow-stage img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity .6s ease; } .slideshow-stage img.is-current{opacity:1} .ss-btn{ position:absolute;top:50%;transform:translateY(-50%); width:54px;height:54px;border:0;background:none;color:#fff;cursor:pointer; opacity:.65;transition:opacity .2s ease;z-index:2; } .ss-btn:hover{opacity:1} .ss-prev{left:6px} .ss-next{right:6px} .ss-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3} .ss-count{ position:absolute;right:14px;bottom:12px;z-index:2; font-size:11px;letter-spacing:1.5px;color:var(--muted); } /* -------------------------------------------------------------------------- BIO -------------------------------------------------------------------------- */ .cv-block{margin-bottom:44px} .cv-year{margin:26px 0 10px;font-size:15px;font-weight:500;letter-spacing:1px} .cv-list{margin:0;padding:0;list-style:none} .cv-list li{margin-bottom:14px;max-width:900px} /* Uzun düz metin satırları okunaklı kalsın (sergi satırlarıyla aynı sınır). */ .cv-block .body-text p{max-width:900px} /* -------------------------------------------------------------------------- CONTACT -------------------------------------------------------------------------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; align-items:start; } .contact-group{margin-bottom:26px} .contact-group p{margin:0} .contact-group a{border-bottom:1px solid var(--rule)} .contact-group a:hover{border-bottom-color:var(--fg)} .site-footer{margin-top:120px;font-size:13px;letter-spacing:.5px} /* -------------------------------------------------------------------------- COVER (ana sayfa) -------------------------------------------------------------------------- */ body.cover{overflow:hidden;background:#999} .cover-slides{position:fixed;inset:0;z-index:0} .cover-slides img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.1s ease-in-out; } .cover-slides img.is-current{opacity:1} /* Kapak görselleri açık renkli olabiliyor (ör. galeri iç mekân fotoğrafı); beyaz yazının okunması için sol tarafa çok hafif bir karartma. Koyu görsellerde neredeyse fark edilmiyor. İstenmezse bu blok silinebilir. */ .cover-scrim{ position:fixed;inset:0;z-index:1;pointer-events:none; background:linear-gradient(95deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 28%, rgba(0,0,0,0) 58%); } .cover-inner{ position:relative;z-index:2; height:100vh;height:100dvh; display:flex;flex-direction:column;justify-content:center; padding:0 60px; } .cover-title{ margin:0 0 26px; font-size:20px;font-weight:400;letter-spacing:2px; line-height:1; } .cover-nav{ display:flex; flex-direction:column; /* başlıklar alt alta */ align-items:flex-start; /* her bağlantı kendi metni kadar geniş olsun */ gap:11px; } .cover-nav a{ font-size:15px;font-weight:400;letter-spacing:2.25px; padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s ease; } .cover-nav a:hover{border-bottom-color:#fff} .cover-social{ position:absolute;left:60px;bottom:52px;z-index:2; width:26px;height:26px;border:1px solid rgba(255,255,255,.85);border-radius:50%; display:flex;align-items:center;justify-content:center; opacity:.9;transition:opacity .2s ease; } .cover-social:hover{opacity:1} .cover-social svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3} /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width:1024px){ :root{--pad:34px} .site-header{padding-bottom:70px} .contact-grid{grid-template-columns:1fr 1fr;gap:34px} } @media (max-width:767px){ :root{--pad:22px;--gap:10px} .main-nav{display:none} .burger{display:block} .site-header{padding-bottom:52px} .page-title,.section-title{font-size:22px} .series-title{font-size:15px} .series{margin-bottom:46px} .slideshow-stage{height:56vh} .lb-prev{left:-6px} .lb-next{right:-6px} .contact-grid{grid-template-columns:1fr;gap:30px} .site-footer{margin-top:60px} .cover-inner{padding:0 24px} .cover-title{font-size:16px;letter-spacing:1.6px} .cover-nav{gap:13px} .cover-nav a{font-size:13px} .cover-nav .lang-switch{ margin:8px 0 0; font-size:13px;letter-spacing:2px; } .cover-social{left:24px;bottom:32px} }