*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:'DM Sans Variable',sans-serif;line-height:1.55}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope Variable',sans-serif;letter-spacing:-.055em;line-height:1.12}h1{font-size:clamp(3.4rem,7.5vw,6.9rem);font-weight:700}h2{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700}h3{font-size:1.35rem}em{font-style:normal;color:var(--link)}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.container{width:min(1200px,calc(100% - 48px));margin:auto}.skip{position:absolute;left:-9999px;top:8px;background:white;padding:10px;z-index:100}.skip:focus{left:8px}.site-header{background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:10}.header-inner{height:86px;display:flex;align-items:center;gap:42px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{font:800 27px 'Manrope Variable';letter-spacing:-.1em;border:2px solid var(--button-bg);width:51px;height:51px;display:grid;place-items:center}.brand-mark span,.footer-brand span{color:var(--link)}.brand-name{font:800 14px 'Manrope Variable';letter-spacing:.09em;line-height:1.35}.brand-name small{display:block;color:#7c8e8e;font:600 8px 'Manrope Variable';letter-spacing:.16em}.desktop-nav{display:flex;gap:28px;margin-left:auto;align-items:center;font-size:13px;font-weight:600}.desktop-nav a:hover,.text-link:hover{color:var(--link)}.header-contact{border:1px solid var(--button-bg);padding:12px 17px;font-size:12px;font-weight:700;white-space:nowrap}.header-contact span{margin-left:12px}.header-contact:hover{background:var(--button-bg);color:white}.mobile-menu{display:none}.hero{background:var(--hero-bg);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 44%;min-height:620px}.hero-copy{padding:105px 0 65px;position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--link);font-size:11px;letter-spacing:.18em;font-weight:800}.eyebrow-line{width:27px;height:1px;background:var(--link)}.hero h1{margin:34px 0 27px}.hero-copy>p{max-width:560px;color:var(--text-muted);font-size:18px;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:32px;margin-top:38px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--button-bg);color:white;padding:17px 22px;font-size:13px;font-weight:700;min-height:54px;transition:background .2s}.button:hover{background:var(--link)}.text-link{font-size:13px;font-weight:800;border-bottom:1px solid var(--link);padding-bottom:5px}.text-link span{margin-left:14px}.hero-art{background:var(--hero-art-bg);position:relative;overflow:hidden;margin-right:calc((min(1200px,100vw - 48px) - 100vw)/2)}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#b2cec120 1px,transparent 1px),linear-gradient(90deg,#b2cec120 1px,transparent 1px);background-size:42px 42px}.art-circle{position:absolute;border-radius:50%}.circle-one{width:430px;height:430px;left:7%;top:8%;background:var(--hero-circle-a)}.circle-two{width:280px;height:280px;left:35%;top:34%;border:70px solid var(--hero-circle-b);background:var(--hero-art-bg);box-shadow:0 0 0 45px var(--hero-circle-a)}.art-card{position:absolute;bottom:85px;left:6%;background:#fff;padding:22px 26px;width:205px;display:flex;justify-content:space-between;box-shadow:0 20px 45px #244d4340;color:var(--button-bg);font-size:11px;letter-spacing:.17em;font-weight:800}.art-line{position:absolute;width:280px;height:1px;background:#fff;transform:rotate(-40deg);left:37%;top:20%}.art-caption{position:absolute;right:30px;bottom:33px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.25em;color:var(--button-bg);font-weight:800}.hero-foot{height:57px;display:flex;justify-content:space-between;align-items:center;color:#6f8b80;font-size:11px;letter-spacing:.08em}.section{padding:110px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:47px}.section-heading h2{margin:18px 0 0}.section-heading>p{max-width:340px;color:var(--text-muted);margin-bottom:8px}.section-heading>.text-link{margin-bottom:12px}.expertise{background:white}.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}.expertise-grid>div{padding:40px 40px 10px 0}.expertise-grid>div+div{padding-left:40px;border-left:1px solid var(--border)}.expertise-icon{display:block;color:var(--link);font-size:40px;line-height:1;margin-bottom:32px}.expertise-grid h3{margin-bottom:13px}.expertise-grid p{color:var(--text-muted);font-size:14px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:white;border:1px solid var(--border);padding:28px;min-height:285px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #173f3920}.card-top{display:flex;justify-content:space-between;color:var(--link);font-size:10px;font-weight:800;letter-spacing:.15em}.card-top span:last-child{font-size:18px}.card-number{font-size:37px;line-height:1;color:var(--border-strong);margin-top:25px;font-weight:700}.card h3{margin:25px 0 12px}.card-number+h3{margin-top:17px}.card p{color:var(--text-muted);font-size:13px;line-height:1.65;flex:1}.card-link{font-size:12px;font-weight:800;color:var(--link);margin-top:20px}.card-link span{margin-left:10px}.training-band{background:var(--button-bg);color:#fff;padding:85px 0}.training-grid{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:100px}.training-grid h2{margin:20px 0 0}.training-grid em,.cta em{color:var(--text-on-dark-muted)}.training-grid p{font-size:17px;max-width:410px;color:var(--text-on-dark-muted);margin-bottom:25px}.eyebrow.light{color:var(--text-on-dark-muted)}.button-outline{border:1px solid var(--text-on-dark-muted);background:transparent}.articles-section{background:white}.about-strip{background:var(--surface-tinted);padding:95px 0}.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px}.about-grid h2{margin-bottom:20px}.about-grid p{max-width:560px;color:var(--text-muted)}.cta{background:var(--cta-bg);color:white;padding:85px 0}.cta-inner{display:flex;align-items:end;justify-content:space-between;gap:20px}.cta h2{margin:16px 0}.cta p{color:var(--text-on-dark-muted);margin:0}.button-light{background:white;color:var(--button-bg);white-space:nowrap}.button-light:hover{background:#d9ebe2;color:var(--button-bg)}.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:70px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px}.footer-brand{font:800 21px 'Manrope Variable';letter-spacing:.06em;color:white}.footer-grid p{max-width:350px;color:var(--footer-muted);font-size:13px;margin-top:18px}.footer-grid h3{color:white;font-size:13px;letter-spacing:0;margin-bottom:20px}.footer-grid a{display:block;color:var(--footer-muted);font-size:13px;margin-bottom:10px}.footer-grid a:hover{color:white}.footer-bottom{border-top:1px solid #315057;margin-top:55px;padding-top:20px;display:flex;justify-content:space-between;font-size:11px;color:#8fa9a8}.page-hero{padding:90px 0 70px;background:var(--surface-tinted)}.page-hero h1{font-size:clamp(3rem,6vw,5.3rem);max-width:840px;margin:20px 0}.page-hero p{font-size:18px;max-width:690px;color:var(--text-muted)}.content-grid{display:grid;grid-template-columns:1fr 280px;gap:70px;padding:80px 0}.prose{max-width:780px;font-size:17px;line-height:1.8}.prose h2{font-size:2rem;margin-top:2em}.prose h3{font-size:1.4rem;margin-top:1.6em}.prose a{text-decoration:underline;color:var(--link)}.prose pre{overflow:auto;background:var(--code-bg);color:white;padding:20px;font-size:13px}.prose img{max-width:100%;height:auto}.prose table{display:block;overflow:auto;border-collapse:collapse}.prose th,.prose td{border:1px solid var(--border);padding:8px}.aside-box{border-top:2px solid var(--link);padding-top:20px}.aside-box h3{font-size:13px;letter-spacing:.09em}.aside-box a{display:block;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}.crumbs{font-size:12px;color:var(--text-muted);margin-bottom:20px}.crumbs a{text-decoration:underline}.meta{font-size:12px;color:var(--text-muted);letter-spacing:.06em}.filter-links{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 40px}.filter-links a{border:1px solid var(--border);background:white;padding:9px 13px;font-size:12px}.filter-links a:hover{border-color:var(--link)}.search{display:flex;gap:8px;max-width:430px;margin:25px 0}.search input{flex:1;min-width:0;border:1px solid var(--border);padding:12px;font:inherit}.search button{background:var(--button-bg);color:white;border:0;padding:0 18px;cursor:pointer}.empty{padding:30px;border:1px dashed var(--border);color:var(--text-muted)}@media(max-width:1000px){.desktop-nav,.header-contact{display:none}.mobile-menu{display:block;margin-left:auto;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;font-size:25px}.mobile-menu nav{position:absolute;right:0;top:40px;width:230px;background:white;box-shadow:0 12px 30px #0002;padding:16px}.mobile-menu nav a{display:block;padding:9px}.hero-grid{grid-template-columns:1fr 40%}.hero-copy{padding-top:80px}.circle-one{left:-20%}.circle-two{left:8%}}@media(max-width:700px){.container{width:min(100% - 32px,1200px)}.header-inner{height:72px}.hero-grid{display:block}.hero-copy{padding:75px 0}.hero-art{height:280px;margin:0 -16px}.circle-one{width:260px;height:260px;left:20%;top:-30px}.circle-two{width:180px;height:180px;border-width:45px;left:46%;top:60px;box-shadow:0 0 0 25px var(--hero-circle-a)}.art-card{bottom:25px}.hero-foot{display:none}.hero-actions{flex-wrap:wrap;gap:22px}.section{padding:75px 0}.section-heading{display:block}.section-heading>p,.section-heading>.text-link{display:inline-block;margin-top:22px}.expertise-grid,.card-grid,.training-grid,.about-grid,.footer-grid,.content-grid{grid-template-columns:1fr}.expertise-grid>div,.expertise-grid>div+div{padding:28px 0;border-left:0;border-bottom:1px solid var(--border)}.training-grid,.about-grid,.content-grid{gap:30px}.cta-inner{display:block}.cta .button{margin-top:30px}.footer-grid{gap:25px}.footer-bottom{gap:10px;flex-wrap:wrap}.page-hero{padding:65px 0 45px}.content-grid{padding:50px 0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* ADR-005 semantic surface and interaction layer */
body{background:var(--canvas);color:var(--text-primary)}
.site-header,.expertise,.articles-section,.card,.art-card,.mobile-menu nav,.filter-links a{background:var(--surface);color:var(--text-primary)}
.brand-name small,.hero-foot,.meta,.crumbs{color:var(--text-muted)}
.brand-mark{border-color:var(--text-primary)}
.header-contact{border-color:var(--border-strong)}
.header-contact:hover{background:var(--button-bg);color:var(--button-text)}
.button,.search button{background:var(--button-bg);color:var(--button-text)}
.button:hover,.search button:hover{background:var(--button-hover);color:var(--button-text)}
.text-link,.prose a{color:var(--link)}
.text-link:hover,.desktop-nav a:hover{color:var(--link-hover)}
.card-top,.card-link,.eyebrow,.expertise-icon{color:var(--link)}
.hero-art{background:var(--hero-art-bg)}
.art-circle.circle-one{background:var(--hero-circle-a)}
.art-circle.circle-two{background:var(--hero-art-bg);border-color:var(--hero-circle-b);box-shadow:0 0 0 45px var(--hero-circle-a)}
.art-card{box-shadow:0 20px 45px var(--illustration-shadow)}
.art-grid{background-image:linear-gradient(var(--illustration-grid) 1px,transparent 1px),linear-gradient(90deg,var(--illustration-grid) 1px,transparent 1px)}
.training-band{background:var(--feature-bg);color:var(--text-on-dark)}
.training-grid em,.cta em{color:var(--text-on-dark-muted)}
.cta{background:var(--cta-bg);color:var(--cta-text)}
.button-light{background:var(--button-secondary-bg);color:var(--button-secondary-text)}
.button-light:hover{background:var(--surface-tinted);color:var(--text-primary)}
.site-footer{background:var(--footer-bg);color:var(--footer-text)}
.footer-brand,.footer-grid h3{color:var(--footer-text)}
.footer-grid a,.footer-grid p,.footer-bottom{color:var(--footer-muted)}
.prose pre{background:var(--code-bg);color:var(--code-text)}
.prose code:not(pre code){background:var(--surface-raised);color:var(--text-primary);padding:.12em .3em;border-radius:3px}
.prose th{background:var(--surface-raised)}
.prose th,.prose td{border-color:var(--border)}
.search input{background:var(--surface);color:var(--text-primary);border-color:var(--border-strong)}
.theme-choice{display:flex;align-items:center;flex-shrink:0}
.theme-choice select{width:94px;font-size:12px}
@media(max-width:1000px){.theme-choice{margin-left:auto}.mobile-menu{margin-left:0}}
@media(max-width:700px){.theme-choice select{width:80px}.art-circle.circle-two{box-shadow:0 0 0 25px var(--hero-circle-a)}}
.article-media{margin-top:34px}
.article-media picture,.article-media img{display:block;width:100%}
.article-media img{height:auto;aspect-ratio:16/9;object-fit:cover}
.article-visual{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;min-height:310px;background:var(--surface-tinted);border:1px solid var(--border);padding:clamp(25px,5vw,70px);display:flex;flex-direction:column;justify-content:space-between;color:var(--text-primary)}
.article-visual-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--illustration-grid) 1px,transparent 1px),linear-gradient(90deg,var(--illustration-grid) 1px,transparent 1px);background-size:46px 46px}
.article-visual-label{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--link)}
.article-visual-title{font-family:'Manrope Variable',sans-serif;font-size:clamp(28px,5vw,68px);line-height:1.1;font-weight:750;letter-spacing:-.05em;max-width:70%;position:relative;z-index:1}
.article-visual-mark{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--text-muted)}
.article-visual-shape{position:absolute;width:42%;aspect-ratio:1;right:-2%;top:15%;border:clamp(30px,6vw,90px) solid var(--visual-accent,var(--brand-teal));border-radius:50%;opacity:.65;transform:rotate(-22deg)}
.art-bilgi-guvenligi{--visual-accent:#176b75}.art-risk-yonetimi{--visual-accent:#a8673d}.art-is-surekliligi{--visual-accent:#3b7465}.art-denetim-ve-uyum{--visual-accent:#5670a0}.art-veri-koruma{--visual-accent:#795f92}.art-yapay-zeka{--visual-accent:#487e99}.art-yonetim-sistemleri{--visual-accent:#9b7450}.art-enerji-ve-ot-guvenligi{--visual-accent:#a46d4a}
.art-risk-yonetimi .article-visual-shape,.art-denetim-ve-uyum .article-visual-shape,.art-enerji-ve-ot-guvenligi .article-visual-shape{border-radius:12%;transform:rotate(38deg)}
.art-is-surekliligi .article-visual-shape,.art-yapay-zeka .article-visual-shape{border-style:double}
@media(max-width:700px){.article-visual{aspect-ratio:4/3;min-height:250px}.article-visual-title{max-width:80%}.article-visual-shape{right:-15%;width:65%;opacity:.35}}
@media(max-width:380px){.header-inner{gap:8px}.brand{gap:7px}.brand-mark{width:42px;height:42px;font-size:22px}.brand-name{font-size:11px}.brand-name small{font-size:7px}.theme-choice select{width:72px;padding:.4rem}.mobile-menu summary{font-size:22px}}
.article-visual{width:100%;min-width:0}.article-visual-title{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){.article-visual-shape{right:0;transform:none}}
@media(max-width:380px){.page-hero h1{overflow-wrap:anywhere}}
.card-number{color:var(--text-muted)}
.button,.header-contact,.search button{transition:none}
/* UI/UX refinement R1: shared editorial rhythm */
.container{width:min(1280px,calc(100% - 64px))}
.header-inner{height:92px;gap:24px}
.brand{gap:13px}
.brand-name{font-size:17px;letter-spacing:.015em;white-space:nowrap}
.brand-name small{font-size:8px;letter-spacing:.15em;margin-top:2px}
.desktop-nav{gap:clamp(14px,1.65vw,26px);font-size:14px;white-space:nowrap}
.desktop-nav a{padding:12px 0}
.header-contact{padding:12px 14px}
.hero-art{margin-right:calc((min(1280px,100vw - 64px) - 100vw)/2)}
.section-heading>p{max-width:420px}
.page-hero{padding:88px 0 76px}
.page-hero .container>p{max-width:740px}
.content-grid{grid-template-columns:minmax(0,1fr) 270px;gap:clamp(48px,6vw,90px)}
.prose{max-width:820px}
.content-grid>.aside-box{align-self:start;position:sticky;top:28px}
.cta{padding:112px 0}
.cta-inner{align-items:center;gap:clamp(30px,6vw,90px)}
.cta-copy{max-width:900px}
.cta h2{font-size:clamp(2.7rem,5vw,4.9rem);margin:22px 0 20px;line-height:1.1}
.cta p{font-size:17px;line-height:1.65;max-width:620px}
.cta .button{min-width:180px}
.footer-brand{letter-spacing:-.035em}
.about-hero{padding:76px 0}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(40px,7vw,110px);align-items:center}
.about-hero h1{margin-bottom:16px}
.about-hero .text-link{display:inline-block;margin-top:22px}
.portrait-placeholder{margin:0;max-width:440px;justify-self:end;width:100%}
.portrait-placeholder-art{aspect-ratio:4/5;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--hero-art-bg);border:1px solid var(--border)}
.portrait-placeholder-art:before{content:'';position:absolute;width:75%;aspect-ratio:1;border:1px solid var(--border-strong);border-radius:50%;top:10%;right:-22%}
.portrait-placeholder-art:after{content:'';position:absolute;width:58%;height:38%;border:1px solid var(--border-strong);border-radius:50% 50% 0 0;bottom:-12%;left:-11%}
.portrait-placeholder-art span{font:700 clamp(5rem,12vw,10rem) 'Manrope Variable',sans-serif;letter-spacing:-.14em;color:var(--link);opacity:.8;z-index:1}
.portrait-placeholder-art i{position:absolute;width:22%;height:1px;background:var(--brand-copper);transform:rotate(-35deg);top:28%;left:16%}
.portrait-placeholder figcaption{font-size:12px;color:var(--text-muted);padding-top:12px;letter-spacing:.04em}
.about-section{padding:86px 0;border-top:1px solid var(--border);background:var(--surface)}
.about-section-muted{background:var(--surface-tinted)}
.about-section-grid{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:clamp(35px,6vw,100px)}
.about-section h2{font-size:clamp(2.2rem,4vw,3.8rem);margin:14px 0 0}
.about-section-content{font-size:17px;line-height:1.75;max-width:780px}
.about-section-content .prose{font-size:inherit}
.about-section-content .prose h2:first-child{font-size:1.5rem;margin-top:0}
.about-section-content .prose h2{font-size:1.5rem;margin-top:1.6em}
.about-link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.about-link-grid a{display:flex;justify-content:space-between;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--border);font-size:14px;font-weight:700;color:var(--link)}
.about-link-grid a:hover{border-color:var(--link)}
.about-pending{border-left:3px solid var(--brand-copper);padding:12px 0 12px 22px;color:var(--text-muted)}
@media(max-width:1100px){.desktop-nav,.header-contact{display:none}.mobile-menu{display:block;margin-left:0;position:relative}.theme-choice{margin-left:auto}}
@media(max-width:700px){.container{width:min(100% - 32px,1280px)}.header-inner{height:74px;gap:14px}.brand-name{font-size:14px}.hero-art{margin:0 -16px}.content-grid{grid-template-columns:1fr;gap:34px}.content-grid>.aside-box{position:static}.cta{padding:76px 0}.cta h2{font-size:clamp(2.4rem,10vw,4rem)}.cta .button{margin-top:32px}.about-hero-grid,.about-section-grid{grid-template-columns:1fr}.about-hero{padding:55px 0}.portrait-placeholder{justify-self:start;max-width:370px}.portrait-placeholder-art{aspect-ratio:5/4}.about-section{padding:62px 0}.about-link-grid{grid-template-columns:1fr}}
@media(max-width:380px){.header-inner{gap:8px}.brand-name{font-size:12px}.brand-name small{font-size:7px}}
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-submenu{display:none;position:absolute;top:100%;left:0;min-width:200px;padding:8px 0;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 28px var(--illustration-shadow);z-index:30}
.nav-group:hover .nav-submenu,.nav-group:focus-within .nav-submenu{display:block}
.nav-submenu a{display:block;padding:8px 16px;font-size:13px;white-space:nowrap}
.mobile-sublink{padding-left:20px!important;font-size:12px;color:var(--text-muted)}
.brand-logo-wrap{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;overflow:hidden;border:1px solid var(--border)}
.brand-logo{width:100%;height:100%;object-fit:contain}
[data-theme="dark"] .brand-logo-light{display:none}
html:not([data-theme="dark"]) .brand-logo-dark{display:none}
.footer-socials{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.footer-socials a{display:inline-block;margin:0;font-size:12px;font-weight:700;text-decoration:underline}
.direct-answer-box{margin:0 0 28px;padding:22px 24px;background:var(--surface-tinted);border-left:4px solid var(--link);border-top:0}
.direct-answer-box h2{font-size:1.25rem;margin:0 0 10px;letter-spacing:-.02em}
.direct-answer-box p{margin:0;font-size:16px;line-height:1.7}
.faq-section{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--border)}
.faq-item{padding:14px 0;border-bottom:1px solid var(--border)}
.faq-item h3{margin:0 0 8px;font-size:1.15rem}
.faq-item p{margin:0}
.editorial-callout{margin:1.8em 0;padding:18px 22px;background:var(--surface-tinted);border:1px solid var(--border);border-left:4px solid var(--link);border-radius:var(--radius-md,8px)}
.editorial-callout.callout-info{border-left-color:var(--accent-petrol,#1f6f8b);background:var(--surface-tinted)}
.editorial-callout.callout-warning{border-left-color:#b76e1f}
.editorial-callout.callout-important{border-left-color:#b43c3c}
.editorial-callout.callout-caution{border-left-color:#c53030}
.editorial-callout.callout-tip{border-left-color:#2a7a5b}
.editorial-callout.callout-definition{border-left-color:#5670a0}
.editorial-callout.callout-direct-answer{border-left-color:var(--link);background:var(--surface-raised)}
.callout-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.callout-icon{flex-shrink:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.callout-info .callout-icon{color:var(--accent-petrol,#1f6f8b)}
.callout-warning .callout-icon{color:#b76e1f}
.callout-important .callout-icon{color:#b43c3c}
.callout-caution .callout-icon{color:#c53030}
.callout-tip .callout-icon{color:#2a7a5b}
.callout-badge{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link);background:var(--surface);padding:3px 8px;border:1px solid var(--border);border-radius:4px}
.callout-info .callout-badge{color:var(--accent-petrol,#1f6f8b);border-color:var(--border)}
.callout-warning .callout-badge{color:#b76e1f;border-color:rgba(183,110,31,0.25)}
.callout-important .callout-badge{color:#b43c3c;border-color:rgba(180,60,60,0.25)}
.callout-caution .callout-badge{color:#c53030;border-color:rgba(197,48,48,0.25)}
.callout-tip .callout-badge{color:#2a7a5b;border-color:rgba(42,122,91,0.25)}
.callout-body{font-size:15px;line-height:1.65;color:var(--text-body,var(--text))}
.callout-body p:last-child{margin-bottom:0}
.editorial-toc{margin:1.6em 0;padding:18px 22px;background:var(--surface-tinted);border:1px solid var(--border);border-top:2px solid var(--link)}
.editorial-toc h3{margin:0 0 10px;font-size:12px;letter-spacing:.14em}
.toc-list{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.toc-list a{display:inline;padding:0;border:0;font-size:14px}
.toc-level-3{margin-left:16px}
.toc-level-4{margin-left:32px}
.article-figure{margin:1.8em 0}
.article-figure img{display:block;width:100%;height:auto}
.article-figure.align-center{margin-left:auto;margin-right:auto;text-align:center}
.article-figure.align-left{margin-right:auto}
.article-figure.align-right{margin-left:auto}
.article-figure.width-50pct,.article-figure.width-narrow{max-width:50%}
.article-figure.width-75pct,.article-figure.width-wide{max-width:75%}
.article-figure figcaption{margin-top:8px;font-size:13px;color:var(--text-muted);line-height:1.5}
.prose table caption{caption-side:top;text-align:left;font-size:13px;font-weight:700;color:var(--text-muted);padding-bottom:8px}
.task-list-item{list-style:none;margin-left:-1.2em}
.task-list-item input[type="checkbox"]{margin-right:8px}
.editorial-callout.callout-steps{border-left-color:#1f6f8b;background:var(--surface-tinted)}
.faq-accordion-item{padding:0;border-bottom:1px solid var(--border)}
.faq-accordion-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;cursor:pointer;list-style:none;user-select:none}
.faq-accordion-summary::-webkit-details-marker{display:none}
.faq-accordion-summary h3{margin:0;font-size:1.12rem;line-height:1.45}
.faq-accordion-summary:after{content:'+';font:700 18px/1 'Manrope Variable',sans-serif;color:var(--link);flex-shrink:0}
.faq-accordion-item[open]>.faq-accordion-summary:after{content:'−'}
.faq-accordion-summary:focus-visible{outline:2px solid var(--link);outline-offset:4px}
.faq-accordion-panel{padding:0 0 16px;color:var(--text)}
.faq-accordion-panel p{margin:0;line-height:1.7}
.source-reference-section{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--border)}
.source-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.source-section-head h2{margin:0}
.source-verification-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border:1px solid var(--border);background:var(--surface-tinted);color:var(--text-muted)}
.source-verification-badge.status-verified{border-color:#2a7a5b;color:#2a7a5b}
.source-verification-badge.status-partially_verified{border-color:#b76e1f;color:#b76e1f}
.source-verification-badge.status-needs_review{border-color:#b43c3c;color:#b43c3c}
.training-curriculum-section{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--border)}
.curriculum-module-list{display:grid;gap:16px;margin-top:16px}
.curriculum-module-card{padding:20px 22px;background:var(--surface-tinted);border:1px solid var(--border);border-left:4px solid var(--link)}
.curriculum-module-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.curriculum-module-head h3{margin:0;font-size:1.15rem;flex:1 1 auto}
.module-badge{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link);background:var(--surface);padding:3px 8px;border:1px solid var(--border)}
.module-duration{font-size:12px;font-weight:700;color:var(--text-muted);background:var(--surface);padding:3px 8px;border:1px solid var(--border)}
.module-subblock{margin-top:10px;font-size:15px}
.module-subblock ul{margin:6px 0 0;padding-left:20px}
.training-summary-list{margin:12px 0 16px;display:grid;gap:10px}
.training-summary-list div{padding-bottom:8px;border-bottom:1px solid var(--border)}
.training-summary-list dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.training-summary-list dd{margin:0;font-size:14px;font-weight:600;color:var(--text)}
@media(max-width:700px){.article-figure.width-50pct,.article-figure.width-75pct,.article-figure.width-narrow,.article-figure.width-wide{max-width:100%}}
/* ==========================================================================
BEK-WEB Corporate Article Experience R2.1 (Authoritative Editorial System)
Corporate Palette: Navy (#142638) · Teal (#176B75) · Copper (#C58C58) · Ivory (#F6F4F0)
========================================================================== */
/* 1. Article Hero & Fluid Typography */
.article-hero {
background: var(--surface-tinted);
border-bottom: 1px solid var(--border);
padding: clamp(32px, 4.5vw, 54px) 0 clamp(24px, 3.5vw, 42px);
}
.article-eyebrow-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 10px 0 16px;
}
.article-category-tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-teal);
background: var(--surface);
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 2px;
text-decoration: none;
}
.article-category-tag:hover {
border-color: var(--brand-teal);
color: var(--brand-teal);
}
.article-pattern-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-copper);
background: var(--surface);
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 2px;
}
.article-h1 {
font-family: 'Manrope Variable', sans-serif;
font-size: clamp(1.9rem, 3.4vw, 2.85rem);
line-height: 1.18;
letter-spacing: -.035em;
color: var(--brand-primary);
margin: 0 0 16px;
max-width: 960px;
font-weight: 750;
overflow-wrap: break-word;
}
.article-standfirst {
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.68;
color: var(--text-muted);
max-width: 820px;
margin: 0 0 22px;
font-weight: 400;
}
.article-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
font-size: 13px;
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 16px;
margin-top: 6px;
}
.article-meta-author .meta-name {
color: var(--text-primary);
font-weight: 700;
margin-left: 4px;
}
.article-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-meta-item .meta-label {
color: var(--text-muted);
}
.article-meta-item.meta-reviewer {
color: var(--brand-teal);
font-weight: 600;
}
/* 2. Responsive Article Cover & Typography-First Divider */
.article-cover-container {
margin-top: clamp(24px, 3.5vw, 36px);
}
.article-cover-figure {
margin: 0;
width: 100%;
}
.article-cover-picture, .article-cover-img {
display: block;
width: 100%;
}
.article-cover-img {
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
border: 1px solid var(--border);
box-shadow: 0 12px 30px rgba(20, 38, 56, 0.05);
}
.article-cover-caption {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
text-align: left;
line-height: 1.45;
}
.article-hero-divider {
height: 1px;
background: var(--border);
margin: 0;
}
/* 3. Table of Contents Component (Minimal Corporate Sticky) */
.article-sidebar {
height: 100%;
min-height: 100%;
}
.article-sidebar-sticky {
position: sticky;
top: 32px;
max-height: calc(100vh - 64px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(20, 38, 56, 0.15) transparent;
}
.article-toc {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}
.toc-collapsible {
border: none;
}
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
list-style: none;
cursor: default;
}
.toc-header::-webkit-details-marker {
display: none;
}
.toc-header-main {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.toc-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-primary);
text-transform: uppercase;
margin: 0;
}
.toc-current-context {
display: none;
font-size: 11px;
font-weight: 600;
color: var(--brand-teal);
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article-sidebar-sticky.is-near-end .toc-current-context {
display: inline-block;
}
.toc-toggle-icon {
display: none;
}
.toc-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13.5px;
line-height: 1.45;
}
.toc-item.toc-depth-3 {
padding-left: 12px;
font-size: 12.5px;
}
.toc-link {
display: block;
padding: 4px 0 4px 10px;
color: var(--text-muted);
text-decoration: none;
border-left: 2px solid transparent;
transition: color .15s, border-color .15s, background-color .15s;
border-radius: 0 2px 2px 0;
}
.toc-link:hover {
color: var(--brand-teal);
}
.toc-link.is-active {
color: var(--text-primary);
font-weight: 750;
border-left-color: var(--brand-teal);
background: var(--surface-raised);
}
/* R4.2 Contextual Sticky Sidebar Recommendations */
.sidebar-recommendations {
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
pointer-events: none;
transform: translateY(6px);
transition: max-height .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease, transform .25s ease, visibility .25s;
margin-top: 0;
}
.article-sidebar-sticky.is-near-end .sidebar-recommendations {
max-height: 600px;
opacity: 1;
overflow: visible;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) {
.sidebar-recommendations {
transition: none !important;
transform: none !important;
}
}
.sidebar-rec-header {
margin-bottom: 12px;
}
.sidebar-rec-eyebrow {
font-family: 'Manrope Variable', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-teal);
text-transform: uppercase;
display: block;
}
.sidebar-rec-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sidebar-rec-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 2px;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
overflow: hidden;
}
.sidebar-rec-card:hover {
border-color: var(--brand-teal);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 38, 56, 0.05);
}
.sidebar-rec-card-link {
display: block;
padding: 12px;
color: inherit;
text-decoration: none;
}
.sidebar-rec-card-link:focus-visible {
outline: 2px solid var(--brand-teal);
outline-offset: 2px;
}
.sidebar-rec-thumb-wrap {
aspect-ratio: 16/9;
max-height: 72px;
overflow: hidden;
border-radius: 2px;
margin-bottom: 8px;
background: var(--surface-raised);
}
.sidebar-rec-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-rec-card-category {
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
color: var(--brand-teal);
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.sidebar-rec-card-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
margin: 0 0 8px;
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-rec-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--text-muted);
}
.sidebar-rec-action {
font-weight: 700;
color: var(--brand-teal);
}
.sidebar-rec-card:hover .sidebar-rec-action {
text-decoration: underline;
}
/* Compact TOC state in near-end */
.article-sidebar-sticky.is-near-end .toc-collapsible.is-compact-closed .toc-items {
display: none;
}
.article-sidebar-sticky.is-near-end .toc-collapsible.is-compact-closed .toc-toggle-icon {
display: inline-block;
font-size: 10px;
color: var(--brand-teal);
cursor: pointer;
}
.article-sidebar-sticky.is-near-end .toc-collapsible.is-compact-closed .toc-toggle-icon:after {
content: '▼';
}
.article-sidebar-sticky.is-near-end .toc-collapsible .toc-items {
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
}
/* 4. Historical Edition Notice Component */
.historical-edition-notice {
margin: 0 0 2em;
padding: 14px 18px;
background: rgba(197, 140, 88, 0.04);
border: none;
border-left: 3px solid var(--brand-copper);
border-radius: 0 2px 2px 0;
}
.historical-notice-badge {
display: block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-copper);
text-transform: uppercase;
margin-bottom: 6px;
}
.historical-notice-content p {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--text-primary);
}
.historical-notice-newer {
margin-top: 8px;
font-size: 13px;
font-weight: 600;
}
.historical-newer-link {
color: var(--brand-teal);
text-decoration: underline;
font-weight: 700;
margin-left: 4px;
}
/* 5. Direct Answer Card (AEO Highlight) */
.direct-answer-card {
margin: 0 0 2em;
padding: 16px 20px;
background: rgba(23, 107, 117, 0.03);
border: none;
border-left: 3px solid var(--brand-teal);
border-radius: 0 2px 2px 0;
box-shadow: none;
}
.direct-answer-header {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 6px;
}
.direct-answer-badge {
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
color: var(--brand-teal);
text-transform: uppercase;
}
.direct-answer-question {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.15rem;
font-weight: 750;
margin: 0;
color: var(--brand-primary);
}
.direct-answer-text {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: var(--text-primary);
}
/* Article Takeaways */
.article-takeaways-card {
margin: 0 0 2em;
padding: 16px 20px;
background: #FAF9F6;
border: 1px solid rgba(20, 38, 56, 0.07);
border-left: 3px solid var(--brand-navy, #142638);
border-radius: 0 2px 2px 0;
}
.takeaways-header {
margin-bottom: 8px;
}
.takeaways-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-navy, #142638);
margin: 0;
}
.takeaways-list {
margin: 0;
padding-left: 18px;
font-size: 15px;
line-height: 1.65;
color: var(--text-primary);
}
/* 6. Professional Article Reading Typography */
.prose {
max-width: 720px;
font-size: 17px;
line-height: 1.78;
color: var(--text-primary);
}
.prose h2 {
font-family: 'Manrope Variable', sans-serif;
font-size: clamp(1.45rem, 2.2vw, 1.85rem);
line-height: 1.25;
letter-spacing: -.03em;
margin-top: 2.2em;
margin-bottom: 0.6em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--border);
color: var(--brand-primary);
font-weight: 750;
}
.prose h3 {
font-family: 'Manrope Variable', sans-serif;
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 1.35;
letter-spacing: -.02em;
margin-top: 1.8em;
margin-bottom: 0.5em;
color: var(--brand-primary);
font-weight: 700;
}
.prose h4 {
font-size: 1.1rem;
line-height: 1.4;
margin-top: 1.4em;
margin-bottom: 0.4em;
font-weight: 700;
color: var(--text-primary);
}
.prose p {
margin-top: 0;
margin-bottom: 1.35em;
font-size: 17px;
line-height: 1.8;
}
/* Responsive Table Wrapper & Full Comparison Preservation */
.prose table, .table-responsive table {
display: table;
width: 100%;
border-collapse: collapse;
margin: 1.8em 0;
font-size: 14px;
background: var(--surface);
border: 1px solid var(--border);
}
.table-wrap, .table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.8em 0;
border: 1px solid var(--border);
}
.table-wrap table, .table-responsive table {
margin: 0;
border: none;
}
.prose th {
background: var(--surface-raised);
color: var(--brand-primary);
font-weight: 750;
font-size: 13.5px;
padding: 12px 14px;
text-align: left;
border: 1px solid var(--border);
letter-spacing: .02em;
}
.prose td {
padding: 12px 14px;
border: 1px solid var(--border);
font-size: 14px;
line-height: 1.6;
vertical-align: top;
}
.prose tr:nth-child(even) {
background: var(--surface-tinted);
}
/* Figures & Technical Diagrams (contain-fit to prevent clipping) */
.article-figure {
margin: 2em 0;
border: 1px solid var(--border);
background: var(--surface);
padding: 16px;
border-radius: 2px;
}
.article-figure img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
margin: 0 auto;
}
.article-figure figcaption {
margin-top: 10px;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.5;
text-align: center;
}
/* 7. FAQ Accordion Component */
.article-faq-section {
margin-top: 2.8em;
padding-top: 1.8em;
border-top: 1px solid var(--border);
}
.faq-section-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.faq-section-badge {
font-size: 12px;
font-weight: 800;
color: var(--brand-teal);
border: 1px solid var(--border);
width: 22px;
height: 22px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: var(--surface);
}
.faq-section-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.45rem;
font-weight: 750;
margin: 0;
color: var(--brand-primary);
}
.faq-accordion-item {
border-bottom: 1px solid var(--border);
padding: 0;
}
.faq-accordion-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
cursor: pointer;
list-style: none;
user-select: none;
}
.faq-question-text {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: var(--text-primary);
line-height: 1.4;
}
.faq-accordion-summary:after {
content: '+';
font: 700 20px/1 'Manrope Variable', sans-serif;
color: var(--brand-teal);
flex-shrink: 0;
}
.faq-accordion-item[open] > .faq-accordion-summary:after {
content: '−';
}
.faq-accordion-content {
padding: 0 0 20px;
font-size: 15.5px;
line-height: 1.75;
color: var(--text-primary);
}
.faq-accordion-content p {
margin: 0;
}
/* 8. Sources & References Component */
.article-sources-section {
margin-top: 2.8em;
padding-top: 1.8em;
border-top: 1px solid var(--border);
}
.sources-header {
margin-bottom: 8px;
}
.sources-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.35rem;
font-weight: 750;
margin: 0;
color: var(--brand-primary);
}
.sources-intro {
font-size: 14px;
color: var(--text-muted);
margin: 0 0 16px;
}
.sources-card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.source-card-item {
display: flex;
gap: 12px;
padding: 10px 0;
background: transparent;
border: none;
border-bottom: 1px solid rgba(20, 38, 56, 0.06);
font-size: 14px;
}
.source-number {
font-family: 'Manrope Variable', monospace;
font-weight: 700;
color: var(--brand-teal);
font-size: 13px;
flex-shrink: 0;
padding-top: 1px;
}
.source-card-body {
flex: 1;
min-width: 0;
}
.source-item-title {
font-size: 14.5px;
font-weight: 650;
margin: 0 0 3px;
}
.source-external-link {
color: var(--brand-primary);
text-decoration: none;
}
.source-external-link:hover {
color: var(--brand-teal);
text-decoration: underline;
}
.source-item-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 12px;
color: var(--text-muted);
}
.source-publisher {
font-weight: 600;
color: var(--text-primary);
}
.source-edition-pill {
background: var(--surface-raised);
border: 1px solid var(--border);
padding: 1px 7px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
}
.source-url-text {
word-break: break-all;
opacity: .8;
}
/* 9. Author Attribution Component */
.article-author-card {
display: flex;
gap: 16px;
align-items: center;
margin-top: 2.2em;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--brand-teal);
border-radius: 0 2px 2px 0;
box-shadow: none;
}
.author-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--brand-teal);
color: #FFFFFF;
display: grid;
place-items: center;
flex-shrink: 0;
font-weight: 800;
font-size: 13px;
letter-spacing: -.03em;
}
.author-card-details {
flex: 1;
min-width: 0;
}
.author-card-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
margin: 0 0 2px 0;
}
.author-badge {
font-size: 9px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-teal);
display: inline-block;
margin: 0;
text-transform: uppercase;
}
.article-author-card .author-name {
font-family: 'Manrope Variable', sans-serif;
font-size: 1rem !important;
font-weight: 750 !important;
margin: 0 !important;
line-height: 1.2 !important;
color: var(--text-primary);
}
.article-author-card .author-role {
font-size: 11.5px;
font-weight: 600;
color: var(--text-muted);
margin: 0;
line-height: 1.2;
}
.article-author-card .author-bio,
.article-author-card p {
font-size: 13px !important;
line-height: 1.45 !important;
color: var(--text-muted);
margin: 0 0 6px 0 !important;
}
.author-links {
display: flex;
gap: 14px;
font-size: 12px;
font-weight: 700;
margin: 0;
}
.author-link {
color: var(--brand-teal);
text-decoration: none;
}
.author-link:hover {
text-decoration: underline;
}
/* 10. Related Articles Section */
.related-articles-section {
padding: clamp(48px, 6vw, 72px) 0;
background: var(--surface-tinted);
border-top: 1px solid var(--border);
}
.related-header {
margin-bottom: 28px;
}
.related-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
color: var(--brand-teal);
}
.related-title {
font-family: 'Manrope Variable', sans-serif;
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
font-weight: 750;
margin: 4px 0 0;
color: var(--text-primary);
}
.related-grid {
display: grid;
gap: 24px;
}
.related-grid[data-count="1"],
.related-grid.count-1 {
grid-template-columns: minmax(0, 480px);
max-width: 480px;
margin: 0 auto;
}
.related-grid[data-count="2"],
.related-grid.count-2 {
grid-template-columns: repeat(2, minmax(0, 420px));
max-width: 860px;
margin: 0 auto;
}
.related-grid[data-count="3"],
.related-grid.count-3,
.related-grid:not([data-count]) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 960px) {
.related-grid[data-count="3"],
.related-grid.count-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.related-grid,
.related-grid[data-count="1"],
.related-grid[data-count="2"],
.related-grid[data-count="3"],
.related-grid.count-1,
.related-grid.count-2,
.related-grid.count-3 {
grid-template-columns: 1fr;
max-width: 100%;
}
}
.related-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 2px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.related-card:hover {
transform: translateY(-2px);
border-color: var(--brand-teal);
box-shadow: 0 8px 24px var(--illustration-shadow, rgba(20, 38, 56, 0.08));
}
.related-card.no-image {
border-top: 3px solid var(--brand-teal);
}
.related-thumb-wrap {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--surface-raised);
border-bottom: 1px solid var(--border);
}
.related-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-thumb-accent {
display: none;
}
.related-card-body {
padding: 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.related-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.related-card-category {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
color: var(--brand-teal);
}
.related-reading-time {
font-size: 11.5px;
color: var(--text-muted);
}
.related-card-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.15rem;
font-weight: 750;
line-height: 1.35;
margin: 0 0 10px;
color: var(--text-primary);
}
.related-card-link {
color: inherit;
text-decoration: none;
}
.related-card-link:hover {
color: var(--brand-teal);
}
.related-card-desc {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-read-more {
font-size: 12.5px;
font-weight: 800;
color: var(--brand-teal);
text-decoration: none;
align-self: flex-start;
margin-top: auto;
}
.related-read-more:hover {
text-decoration: underline;
}
/* R4.2 Desktop Deduplication: Hide bottom related section on desktop (> 960px) */
@media (min-width: 961px) {
.article-bottom-related,
.related-articles-section {
display: none !important;
}
}
/* 11. Responsive Overrides for Mobile & Tablet */
@media(max-width: 960px) {
.sidebar-recommendations {
display: none !important;
}
.article-bottom-related,
.related-articles-section {
display: block !important;
padding: 36px 0 44px;
}
.content-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.article-content-grid {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 0 48px 0;
}
.article-content-grid > .prose {
display: contents;
}
.article-lead-block {
order: 1;
width: 100%;
}
.article-sidebar {
order: 2;
width: 100%;
margin-bottom: 6px;
}
.article-body-content {
order: 3;
width: 100%;
}
.article-takeaways-card {
padding: 12px 16px;
margin: 14px 0 20px 0;
}
.takeaways-header {
margin-bottom: 6px;
}
.takeaways-list {
padding-left: 18px;
font-size: 14.5px;
line-height: 1.55;
}
.takeaways-list li + li {
margin-top: 4px;
}
.article-sidebar-sticky {
position: static;
max-height: none;
overflow-y: visible;
}
.article-toc {
position: static;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 2px;
padding: 12px 16px;
margin-bottom: 12px;
max-height: none;
}
.toc-collapsible summary {
cursor: pointer;
}
.toc-header {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.toc-toggle-icon {
display: inline-block;
font-size: 10px;
color: var(--brand-teal);
transition: transform 0.2s ease;
}
.toc-toggle-icon:after {
content: '▼';
}
.toc-collapsible[open] .toc-toggle-icon {
transform: rotate(180deg);
}
.toc-collapsible[open] .toc-header {
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.article-author-card {
flex-direction: column;
gap: 12px;
padding: 16px;
}
}
@media(max-width: 700px) {
.article-h1 {
font-size: clamp(1.75rem, 6.5vw, 2.2rem);
}
.article-meta-row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
}
.prose {
font-size: 16px;
max-width: 100%;
overflow-x: hidden;
}
.table-wrap {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.prose table {
font-size: 13px;
}
.prose th, .prose td {
padding: 9px 10px;
}
}
/* ==========================================================================
BEK-WEB Article Experience R3 — Editorial Discovery & Reader Journey
========================================================================== */
/* Reading Progress Bar (Fixed Top) */
.reading-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--brand-teal, #176B75);
z-index: 100;
width: 0;
transition: width 50ms linear;
pointer-events: none;
}
/* Compact Article Sharing Controls */
.article-meta-sharing {
margin-left: auto;
display: flex;
align-items: center;
}
.article-sharing-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
background: transparent;
border: none;
}
.sharing-actions {
display: flex;
align-items: center;
gap: 6px;
}
.sharing-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 4px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
text-decoration: none !important;
transition: all 0.15s ease;
flex-shrink: 0;
box-sizing: border-box;
}
.sharing-btn:hover:not(:disabled) {
color: var(--brand-teal);
border-color: var(--brand-teal);
background: var(--surface-raised);
}
.sharing-btn:focus-visible {
outline: 2px solid var(--brand-teal);
outline-offset: 2px;
}
.sharing-disabled-btn {
opacity: 0.65;
cursor: not-allowed;
}
.sharing-disabled-btn:hover {
border-color: var(--border);
color: var(--text-muted);
background: var(--surface);
}
.sharing-btn-copy.copy-success {
background: var(--status-success-bg, #e3f2e9);
border-color: var(--status-success-text, #185438);
color: var(--status-success-text, #185438);
}
.sharing-svg {
flex-shrink: 0;
width: 15px;
height: 15px;
}
.preview-sharing-help {
display: none;
}
/* Article Series and Edition Navigation */
.article-series-nav {
margin: 36px 0;
}
.series-nav-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.series-nav-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
background: var(--surface, #FFF);
border: 1px solid var(--border);
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.series-nav-card:hover {
border-color: var(--brand-teal);
box-shadow: 0 4px 14px rgba(20, 38, 56, 0.05);
}
.series-nav-direction {
font-family: 'Manrope Variable', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--brand-copper, #C58C58);
text-transform: uppercase;
}
.series-nav-next {
text-align: right;
}
.series-nav-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--brand-navy, #142638);
line-height: 1.4;
}
.series-nav-placeholder {
visibility: hidden;
}
/* Contextual Service & Training Recommendation */
.article-service-recommendation {
margin: 36px 0;
padding: 20px 22px;
background: #FAF9F6;
border: 1px solid var(--border);
border-left: 3px solid var(--brand-copper, #C58C58);
border-radius: 0 2px 2px 0;
}
.recommendation-header {
margin-bottom: 12px;
}
.recommendation-heading {
font-family: 'Manrope Variable', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--brand-copper, #C58C58);
text-transform: uppercase;
margin: 0;
}
.recommendation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.recommendation-card {
background: #FFF;
border: 1px solid var(--border);
border-radius: 2px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.recommendation-type {
font-family: 'Manrope Variable', sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--brand-teal, #176B75);
}
.recommendation-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 15px;
font-weight: 700;
margin: 0;
line-height: 1.35;
}
.recommendation-link {
color: var(--brand-navy, #142638);
text-decoration: none;
}
.recommendation-link:hover {
color: var(--brand-teal, #176B75);
text-decoration: underline;
}
.recommendation-desc {
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0;
flex-grow: 1;
}
.recommendation-meta {
display: flex;
gap: 12px;
font-size: 12px;
color: #64748B;
margin-top: 4px;
}
.recommendation-action {
margin-top: 6px;
}
.recommendation-button {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--brand-teal, #176B75);
text-decoration: none;
}
.recommendation-button:hover {
color: var(--brand-copper, #C58C58);
}
/* Article Conclusion Area & Unified Professional CTA */
.article-conclusion-area {
padding: 44px 0 24px;
}
.article-conclusion-container {
max-width: 860px;
margin: 0 auto;
}
.article-closing-cta {
margin: 0;
}
.closing-cta-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--brand-teal);
color: var(--text-primary);
padding: 26px 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
border-radius: 0 3px 3px 0;
box-shadow: none;
}
.article-closing-cta[data-cta-variant="audit"] .closing-cta-card {
border-left-color: var(--brand-teal);
}
.article-closing-cta[data-cta-variant="assessment"] .closing-cta-card {
border-left-color: var(--brand-copper);
}
.closing-cta-badge {
font-family: 'Manrope Variable', sans-serif;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--brand-teal);
text-transform: uppercase;
display: block;
margin-bottom: 6px;
}
.article-closing-cta[data-cta-variant="assessment"] .closing-cta-badge {
color: var(--brand-copper);
}
.closing-cta-title {
font-family: 'Manrope Variable', sans-serif;
font-size: 1.25rem;
font-weight: 750;
color: var(--text-primary);
margin: 0 0 6px 0;
line-height: 1.3;
}
.closing-cta-description {
font-size: 14px;
color: var(--text-muted);
margin: 0;
line-height: 1.55;
max-width: 540px;
}
.closing-cta-secondary {
margin-top: 10px;
font-size: 13px;
color: var(--text-muted);
}
.closing-cta-secondary-label {
font-weight: 600;
}
.closing-cta-secondary-link {
color: var(--brand-teal);
text-decoration: underline;
font-weight: 600;
margin-left: 4px;
}
.closing-cta-action {
flex-shrink: 0;
}
.closing-cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--button-bg);
color: var(--button-text) !important;
font-family: 'Manrope Variable', sans-serif;
font-size: 13.5px;
font-weight: 700;
padding: 12px 22px;
text-decoration: none !important;
border-radius: 3px;
white-space: nowrap;
transition: background 0.15s, transform 0.15s;
}
.closing-cta-button:hover {
background: var(--button-hover);
color: var(--button-text) !important;
transform: translateY(-1px);
}
@media (max-width: 800px) {
.closing-cta-card {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 22px 20px;
}
.closing-cta-action {
width: 100%;
}
.closing-cta-button {
width: 100%;
justify-content: center;
}
}
/* Floating Back To Top Button */
.back-to-top {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 95;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand-navy, #142638);
color: #FFF;
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(20, 38, 56, 0.22);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s, background 0.15s;
}
.back-to-top.visible {
opacity: 0.95;
pointer-events: auto;
}
.back-to-top:hover {
opacity: 1;
background: var(--brand-teal, #176B75);
transform: translateY(-2px);
}
/* Mobile Collapsible TOC */
.toc-collapsible summary {
list-style: none;
cursor: default;
}
.toc-collapsible summary::-webkit-details-marker {
display: none;
}
.toc-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.toc-toggle-icon {
display: none;
}
/* Related card meta enhancement */
.related-card-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.related-reading-time,
.related-card-date {
color: var(--muted, #64748b);
font-weight: 500;
}
@media (max-width: 768px) {
.series-nav-grid {
grid-template-columns: 1fr;
}
.series-nav-next {
text-align: left;
}
.series-nav-placeholder {
display: none;
}
.closing-cta-card {
flex-direction: column;
align-items: flex-start;
padding: 24px 20px;
}
.closing-cta-button {
width: 100%;
justify-content: center;
}
.article-sharing-bar {
flex-direction: column;
align-items: flex-start;
}
.back-to-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}
/* ==========================================================================
BEK-WEB R3.1: Compact Category-Based Article Covers & Image-Free Header
========================================================================== */
.article-compact-header {
position: relative;
width: 100%;
}
/* Category Cover Banner */
.article-compact-header {
width: 100%;
}
.article-compact-header.cover-category {
position: relative;
overflow: hidden;
padding: 36px 0 32px 0;
min-height: 220px;
display: flex;
align-items: center;
color: #ffffff;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.category-cover-texture {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image:
radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 32px 32px, 48px 48px;
}
.article-compact-header .container {
width: min(1280px, calc(100% - 64px));
margin-inline: auto;
}
.article-compact-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 820px;
}
.crumbs-light {
margin-bottom: 12px;
}
.crumbs-light a {
color: #94a3b8;
text-decoration: none;
font-size: 13px;
}
.crumbs-light a:hover {
color: #ffffff;
}
.crumbs-light .crumb-separator {
color: #64748b;
margin: 0 6px;
}
.article-category-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.15);
color: #f8fafc;
border: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.article-category-badge:hover {
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
.article-pattern-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
margin-left: 6px;
}
.article-compact-h1 {
font-size: clamp(1.65rem, 2.5vw, 2.25rem);
font-weight: 800;
line-height: 1.25;
color: #ffffff;
margin: 14px 0 12px 0;
word-wrap: break-word;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.article-compact-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
color: #cbd5e1;
margin-top: 10px;
}
.article-compact-meta strong {
color: #ffffff;
}
.article-compact-meta .meta-dot {
color: #64748b;
}
.article-compact-meta .inline-sharing {
margin-left: auto;
}
/* Category Specific Backgrounds */
.cover-cat-bilgi-guvenligi {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-bottom: 3px solid #2563eb;
}
.cover-cat-risk-yonetimi {
background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
border-bottom: 3px solid #d97706;
}
.cover-cat-is-surekliligi {
background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
border-bottom: 3px solid #10b981;
}
.cover-cat-denetim-ve-uyum {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
border-bottom: 3px solid #818cf8;
}
.cover-cat-veri-koruma {
background: linear-gradient(135deg, #042f2e 0%, #134e4a 100%);
border-bottom: 3px solid #14b8a6;
}
.cover-cat-yonetim-sistemleri {
background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
border-bottom: 3px solid #94a3b8;
}
.cover-cat-yapay-zeka {
background: linear-gradient(135deg, #2e1065 0%, #3b0764 100%);
border-bottom: 3px solid #a855f7;
}
.cover-cat-enerji-ve-ot-guvenligi {
background: linear-gradient(135deg, #083344 0%, #164e63 100%);
border-bottom: 3px solid #06b6d4;
}
/* NONE (Image-Free) Mode */
.article-compact-header.cover-none {
padding: 34px 0 20px 0;
background: transparent;
border-bottom: 1px solid var(--border);
}
.article-compact-header.cover-none .crumbs {
margin-bottom: 12px;
}
.article-compact-header.cover-none .crumbs a {
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
}
.article-compact-header.cover-none .crumbs a:hover {
color: var(--link);
}
.article-compact-header.cover-none .crumbs .crumb-separator {
color: var(--border-strong, #94a3b8);
margin: 0 6px;
}
.article-compact-header.cover-none .article-eyebrow-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.article-category-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 4px;
background: var(--surface-raised);
color: var(--brand-primary);
border: 1px solid var(--border);
text-decoration: none;
}
.article-category-tag:hover {
background: var(--surface);
border-color: var(--brand-primary);
}
.article-pattern-tag {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
background: var(--surface-raised);
color: var(--text-muted);
}
.article-compact-header.cover-none .article-h1 {
font-size: clamp(2rem, 3.2vw, 2.75rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.035em;
color: var(--brand-primary);
margin: 12px 0 16px 0;
overflow-wrap: break-word;
}
.article-compact-header.cover-none .article-standfirst {
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 20px 0;
}
.article-compact-header.cover-none .article-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
font-size: 13px;
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: 6px;
}
.article-compact-header.cover-none .article-meta-sharing {
margin-left: auto;
}
/* Article Grid & Lead Spacing */
.article-content-grid {
padding: 36px 0 64px 0;
}
.article-hero-divider {
display: none;
}
.article-lead-block {
margin-bottom: 24px;
}
.article-summary-lead {
font-size: 1.12rem;
line-height: 1.68;
color: var(--text-primary);
margin: 0 0 16px 0;
}
.article-geo-lead {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 16px 0;
}
.article-takeaways-card {
margin: 18px 0 24px 0;
}
/* Responsive Limits & Typography */
@media (max-width: 1023px) {
.article-compact-header.cover-category {
padding: 28px 0 24px 0;
min-height: 180px;
max-height: 240px;
}
}
@media (max-width: 767px) {
.article-compact-header.cover-category {
padding: 24px 0 20px 0;
min-height: 140px;
max-height: 220px;
}
.article-compact-header.cover-none {
padding: 24px 0 18px 0;
}
.article-compact-header .container {
width: min(100% - 32px, 1280px);
}
.article-h1,
.article-compact-h1,
.article-compact-header.cover-none .article-h1 {
font-size: clamp(1.6rem, 5.2vw, 2.1rem);
line-height: 1.22;
letter-spacing: -0.025em;
font-weight: 750;
margin: 12px 0 14px 0;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.article-compact-header.cover-none .article-standfirst {
font-size: 0.98rem;
line-height: 1.55;
margin: 0 0 16px 0;
}
.article-compact-header.cover-none .article-meta-row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding-top: 12px;
font-size: 13px;
line-height: 1.4;
}
.article-compact-header.cover-none .article-meta-author,
.article-compact-header.cover-none .article-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.article-compact-header.cover-none .article-meta-sharing {
margin-left: auto;
width: auto;
margin-top: 0;
display: inline-flex;
align-items: center;
}
.article-compact-meta {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.article-compact-meta .meta-dot {
display: inline;
}
.article-compact-meta .inline-sharing {
margin-left: auto;
width: auto;
margin-top: 0;
}
}
@media (max-width: 380px) {
.article-h1,
.article-compact-h1,
.article-compact-header.cover-none .article-h1 {
font-size: 1.45rem;
line-height: 1.24;
}
.article-category-badge,
.article-category-tag {
font-size: 10px;
padding: 2px 6px;
}
}
/* ==========================================================================
BEK-WEB R5-B.2.3 R4 — PREMIUM SOFT TECH DESIGN CONSOLIDATION
Palette 05: Petrol Mavisi & Titanyum
Applied across entire public website & publisher HTML
========================================================================== */
:root {
color-scheme: light;
/* Approved Base Palette 05: Petrol Mavisi & Titanyum (Light) */
--bg-main: #F5F8F9;
--bg-secondary: #E3ECF0;
--accent-petrol: #197C8B;
--accent-petrol-hover: #125E6A;
--accent-petrol-light: #EBF4F6;
--accent-petrol-border: #BCD5DC;
--slate-titanium: #3A5360;
--slate-titanium-muted: #4F6A78;
--navy-deep: #162D3A;
--navy-deep-surface: #1C3646;
/* Surfaces & Dividers */
--surface-white: #FFFFFF;
--border-subtle: #E2EBEF;
--border-regular: #CBD7DC;
--border-strong: #8EA4AF;
/* Typography Colors (High Contrast WCAG AAA) */
--text-heading: #162D3A;
--text-body: #1E3442;
--text-muted: #3A5360;
--text-on-dark: #F5F8F9;
--text-on-dark-muted: #B8CBD4;
/* Mandatory Soft Radii System */
--radius-sm: 8px; /* Badges, tags, pills, mini buttons */
--radius-md: 12px; /* Primary/secondary buttons, form inputs, selects */
--radius-lg: 16px; /* Cards, callouts, sub-panels */
--radius-xl: 20px; /* Hero compositions, feature containers */
--radius-table: 14px; /* Tables outer container */
/* Elevation */
--shadow-soft: 0 4px 18px rgba(22, 45, 58, 0.04);
--shadow-hover: 0 8px 26px rgba(22, 45, 58, 0.08);
/* Semantic Compatibility Mappings */
--brand-primary: #162D3A;
--brand-teal: #197C8B;
--brand-copper: #3A5360;
--brand-slate: #3A5360;
--canvas: #F5F8F9;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-tinted: #EBF4F6;
--text-primary: #1E3442;
--link: #197C8B;
--link-hover: #125E6A;
--border: #CBD7DC;
--focus-ring: #197C8B;
--button-bg: #197C8B;
--button-text: #FFFFFF;
--button-hover: #125E6A;
--button-secondary-bg: #FFFFFF;
--button-secondary-text: #162D3A;
--feature-bg: #162D3A;
--hero-bg: #F5F8F9;
--hero-art-bg: #E3ECF0;
--hero-circle-a: #BCD5DC;
--hero-circle-b: #197C8B;
--footer-bg: #162D3A;
--footer-text: #F5F8F9;
--footer-muted: #B8CBD4;
--cta-bg: #162D3A;
--cta-text: #FFFFFF;
--code-bg: #162D3A;
--code-text: #F5F8F9;
--status-success-bg: #E8F5F1;
--status-success-text: #135A3D;
--status-warning-bg: #FEF6E9;
--status-warning-text: #7C4A11;
--status-error-bg: #FDF0EE;
--status-error-text: #962820;
--status-info-bg: #EBF4F6;
--status-info-text: #125E6A;
/* Transitions */
--transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"] {
color-scheme: dark;
/* Approved Base Palette 05: Petrol Mavisi & Titanyum (Dark) */
--bg-main: #0E1A22;
--bg-secondary: #162B37;
--accent-petrol: #2CB5C8;
--accent-petrol-hover: #4ED3E4;
--accent-petrol-light: #132733;
--accent-petrol-border: #245266;
--slate-titanium: #9BB0BD;
--slate-titanium-muted: #7E96A4;
--navy-deep: #F5F8F9;
--navy-deep-surface: #12222D;
/* Surfaces & Dividers */
--surface-white: #142430;
--border-subtle: #1C3342;
--border-regular: #27475A;
--border-strong: #3D677F;
/* Typography Colors (High Contrast WCAG AAA) */
--text-heading: #F5F8F9;
--text-body: #D4E2E8;
--text-muted: #9BB0BD;
--text-on-dark: #F5F8F9;
--text-on-dark-muted: #B8CBD4;
/* Shadows */
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.55);
/* Semantic Compatibility Mappings */
--brand-primary: #F5F8F9;
--brand-teal: #2CB5C8;
--brand-copper: #9BB0BD;
--brand-slate: #9BB0BD;
--canvas: #0E1A22;
--surface: #142430;
--surface-raised: #1A2F3D;
--surface-tinted: #132733;
--text-primary: #D4E2E8;
--link: #2CB5C8;
--link-hover: #4ED3E4;
--border: #27475A;
--focus-ring: #2CB5C8;
--button-bg: #2CB5C8;
--button-text: #0E1A22;
--button-hover: #4ED3E4;
--button-secondary-bg: #142430;
--button-secondary-text: #F5F8F9;
--feature-bg: #162B37;
--hero-bg: #0E1A22;
--hero-art-bg: #142430;
--hero-circle-a: #1A2F3D;
--hero-circle-b: #2CB5C8;
--footer-bg: #091319;
--footer-text: #F5F8F9;
--footer-muted: #9BB0BD;
--cta-bg: #142430;
--cta-text: #F5F8F9;
--code-bg: #091319;
--code-text: #F5F8F9;
--status-success-bg: #133829;
--status-success-text: #96E2C0;
--status-warning-bg: #3E2B14;
--status-warning-text: #FFD494;
--status-error-bg: #441A18;
--status-error-text: #FFA59E;
--status-info-bg: #163645;
--status-info-text: #8ED4E2;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg-main: #0E1A22;
--bg-secondary: #162B37;
--accent-petrol: #2CB5C8;
--accent-petrol-hover: #4ED3E4;
--accent-petrol-light: #132733;
--accent-petrol-border: #245266;
--slate-titanium: #9BB0BD;
--slate-titanium-muted: #7E96A4;
--navy-deep: #F5F8F9;
--navy-deep-surface: #12222D;
--surface-white: #142430;
--border-subtle: #1C3342;
--border-regular: #27475A;
--border-strong: #3D677F;
--text-heading: #F5F8F9;
--text-body: #D4E2E8;
--text-muted: #9BB0BD;
--text-on-dark: #F5F8F9;
--text-on-dark-muted: #B8CBD4;
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.55);
--brand-primary: #F5F8F9;
--brand-teal: #2CB5C8;
--brand-copper: #9BB0BD;
--brand-slate: #9BB0BD;
--canvas: #0E1A22;
--surface: #142430;
--surface-raised: #1A2F3D;
--surface-tinted: #132733;
--text-primary: #D4E2E8;
--link: #2CB5C8;
--link-hover: #4ED3E4;
--border: #27475A;
--focus-ring: #2CB5C8;
--button-bg: #2CB5C8;
--button-text: #0E1A22;
--button-hover: #4ED3E4;
--button-secondary-bg: #142430;
--button-secondary-text: #F5F8F9;
--feature-bg: #162B37;
--hero-bg: #0E1A22;
--hero-art-bg: #142430;
--hero-circle-a: #1A2F3D;
--hero-circle-b: #2CB5C8;
--footer-bg: #091319;
--footer-text: #F5F8F9;
--footer-muted: #9BB0BD;
--cta-bg: #142430;
--cta-text: #F5F8F9;
--code-bg: #091319;
--code-text: #F5F8F9;
--status-success-bg: #133829;
--status-success-text: #96E2C0;
--status-warning-bg: #3E2B14;
--status-warning-text: #FFD494;
--status-error-bg: #441A18;
--status-error-text: #FFA59E;
--status-info-bg: #163645;
--status-info-text: #8ED4E2;
}
}
/* Global Canvas & Typography */
body {
background: var(--bg-main) !important;
color: var(--text-body) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-heading) !important;
letter-spacing: -0.02em;
}
/* Accessible Focus States */
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--accent-petrol) !important;
outline-offset: 2px !important;
}
/* Shared Header Refinement */
.site-header {
background: var(--surface-white) !important;
border-bottom: 1px solid var(--border-subtle) !important;
box-shadow: 0 1px 3px rgba(22, 45, 58, 0.03);
}
.brand-mark {
border-radius: var(--radius-sm) !important;
border: 2px solid var(--accent-petrol) !important;
color: var(--accent-petrol) !important;
transition: all var(--transition-fast);
}
.brand-name {
color: var(--text-heading) !important;
font-weight: 800;
}
.brand-name small {
color: var(--slate-titanium) !important;
font-weight: 600;
}
.desktop-nav a {
color: var(--text-heading) !important;
font-weight: 600;
transition: color var(--transition-fast);
}
.desktop-nav a:hover {
color: var(--accent-petrol) !important;
}
.header-contact {
border-radius: var(--radius-md) !important;
background: var(--accent-petrol) !important;
border: 1px solid var(--accent-petrol) !important;
color: #FFFFFF !important;
font-weight: 700;
transition: all var(--transition-fast) !important;
padding: 10px 18px !important;
}
:root[data-theme="dark"] .header-contact {
color: #0E1A22 !important;
font-weight: 800;
}
.header-contact:hover {
background: var(--accent-petrol-hover) !important;
border-color: var(--accent-petrol-hover) !important;
color: #FFFFFF !important;
transform: translateY(-1px);
}
:root[data-theme="dark"] .header-contact:hover {
color: #0E1A22 !important;
}
/* Modern Premium Theme Toggle Button */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
border-radius: var(--radius-sm, 8px) !important;
border: 1px solid var(--border-regular) !important;
background-color: var(--surface-white) !important;
color: var(--text-heading) !important;
cursor: pointer;
position: relative;
transition: border-color var(--transition-fast, 180ms ease),
background-color var(--transition-fast, 180ms ease),
color var(--transition-fast, 180ms ease),
transform var(--transition-fast, 180ms ease),
box-shadow var(--transition-fast, 180ms ease) !important;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(22, 45, 58, 0.04);
}
.theme-toggle:hover {
border-color: var(--accent-petrol) !important;
color: var(--accent-petrol) !important;
background-color: var(--bg-secondary) !important;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(25, 124, 139, 0.12);
}
.theme-toggle:active {
transform: translateY(0) scale(0.95);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--accent-petrol) !important;
outline-offset: 2px !important;
}
.theme-toggle-icon {
width: 18px;
height: 18px;
display: block;
stroke: currentColor;
stroke-width: 2;
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
pointer-events: none;
}
/* Light Mode: Sun is active, Moon is hidden */
.theme-toggle .theme-icon-sun {
display: block;
opacity: 1;
transform: scale(1) rotate(0deg);
}
.theme-toggle .theme-icon-moon {
display: none;
opacity: 0;
transform: scale(0.7) rotate(-90deg);
}
/* Dark Mode: Moon is active, Sun is hidden */
:root[data-theme="dark"] .theme-toggle .theme-icon-sun {
display: none;
opacity: 0;
transform: scale(0.7) rotate(90deg);
}
:root[data-theme="dark"] .theme-toggle .theme-icon-moon {
display: block;
opacity: 1;
transform: scale(1) rotate(0deg);
color: var(--accent-petrol);
}
:root[data-theme="dark"] .theme-toggle {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .theme-toggle:hover {
box-shadow: 0 2px 8px rgba(44, 181, 200, 0.2);
}
@media (max-width: 1000px) {
.theme-toggle {
margin-left: auto;
}
}
/* Theme Selector Control */
.theme-choice {
display: flex;
align-items: center;
flex-shrink: 0;
}
.theme-choice select,
[data-theme-select] {
appearance: none;
-webkit-appearance: none;
background-color: var(--surface-white) !important;
color: var(--text-heading) !important;
border: 1px solid var(--border-regular) !important;
border-radius: var(--radius-sm) !important;
padding: 6px 28px 6px 10px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233A5360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: all var(--transition-fast);
}
:root[data-theme="dark"] .theme-choice select,
:root[data-theme="dark"] [data-theme-select] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4E2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.theme-choice select:focus-visible,
[data-theme-select]:focus-visible {
outline: 2px solid var(--accent-petrol) !important;
outline-offset: 2px !important;
}
/* Mobile Menu */
.mobile-menu summary {
border-radius: var(--radius-sm);
color: var(--text-heading) !important;
}
.mobile-menu nav {
background: var(--surface-white) !important;
border-radius: var(--radius-md) !important;
border: 1px solid var(--border-subtle) !important;
box-shadow: var(--shadow-hover) !important;
}
.mobile-menu nav a {
color: var(--text-heading) !important;
}
.mobile-menu nav a:hover {
color: var(--accent-petrol) !important;
background: var(--bg-secondary) !important;
}
/* Button & Interactive Control System */
.button,
button.btn-primary,
a.button {
border-radius: var(--radius-md) !important;
background: var(--accent-petrol) !important;
border: 1px solid var(--accent-petrol) !important;
color: #FFFFFF !important;
font-weight: 700;
transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
:root[data-theme="dark"] .button,
:root[data-theme="dark"] button.btn-primary,
:root[data-theme="dark"] a.button {
color: #0E1A22 !important;
font-weight: 800 !important;
}
.button:hover,
button.btn-primary:hover,
a.button:hover {
background: var(--accent-petrol-hover) !important;
border-color: var(--accent-petrol-hover) !important;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25, 124, 139, 0.25);
}
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] button.btn-primary:hover,
:root[data-theme="dark"] a.button:hover {
color: #0E1A22 !important;
}
.button-light,
.button-outline,
.btn-secondary {
border-radius: var(--radius-md) !important;
background: var(--surface-white) !important;
border: 1px solid var(--border-regular) !important;
color: var(--text-heading) !important;
font-weight: 600;
transition: all var(--transition-fast) !important;
}
.button-light:hover,
.button-outline:hover,
.btn-secondary:hover {
background: var(--bg-secondary) !important;
border-color: var(--accent-petrol-border) !important;
color: var(--accent-petrol) !important;
transform: translateY(-1px);
}
/* Form Controls & Inputs */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea,
.search input {
border-radius: var(--radius-md) !important;
border: 1px solid var(--border-regular) !important;
background: var(--surface-white) !important;
color: var(--text-body) !important;
padding: 12px 16px !important;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input::placeholder,
textarea::placeholder,
.search input::placeholder {
color: var(--text-muted) !important;
}
input:focus,
select:focus,
textarea:focus,
.search input:focus {
border-color: var(--accent-petrol) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(25, 124, 139, 0.18) !important;
}
:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.65 !important;
cursor: not-allowed !important;
}
/* Cards & Content Surfaces */
.card,
.service-card,
.training-card,
.article-card,
.closing-cta-card,
.direct-answer-card,
.article-author-card,
.timeline-card,
.strip-card,
.advisory-focus-card,
.lead-paper-card {
border-radius: var(--radius-lg) !important;
border: 1px solid var(--border-subtle) !important;
background: var(--surface-white) !important;
box-shadow: var(--shadow-soft) !important;
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal) !important;
}
.card:hover,
.service-card:hover,
.article-card:hover,
.training-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-hover) !important;
border-color: var(--accent-petrol-border) !important;
}
.card h2, .card h3,
.service-card h2, .service-card h3,
.training-card h2, .training-card h3,
.article-card h2, .article-card h3 {
color: var(--text-heading) !important;
}
.card p,
.service-card p,
.training-card p,
.article-card p {
color: var(--text-body) !important;
}
/* Tags, Badges & Pills */
.eyebrow,
.article-category-tag,
.article-category-badge,
.tag,
.filter-links a,
.badge,
.hero-badge,
.direct-answer-badge,
.focus-badge {
border-radius: var(--radius-sm) !important;
transition: all var(--transition-fast);
}
.filter-links a {
border: 1px solid var(--border-regular) !important;
background: var(--surface-white) !important;
color: var(--text-muted) !important;
font-weight: 500;
}
.filter-links a:hover,
.filter-links a.active {
background: var(--accent-petrol) !important;
border-color: var(--accent-petrol) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .filter-links a:hover,
:root[data-theme="dark"] .filter-links a.active {
color: #0E1A22 !important;
font-weight: 800 !important;
}
/* Article Hero & Compact Header Readability */
.article-compact-header.cover-none {
background: transparent !important;
border-bottom: 1px solid var(--border-subtle) !important;
}
.article-compact-header.cover-none .crumbs a,
.crumbs a {
color: var(--text-muted) !important;
font-weight: 500 !important;
}
.article-compact-header.cover-none .crumbs a:hover,
.crumbs a:hover {
color: var(--accent-petrol) !important;
text-decoration: underline !important;
}
.article-compact-header.cover-none .crumbs .crumb-separator,
.crumb-separator {
color: var(--border-strong) !important;
}
.article-compact-header.cover-none .article-h1,
.article-compact-h1 {
color: var(--text-heading) !important;
}
.article-standfirst {
color: var(--text-muted) !important;
font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important;
line-height: 1.68 !important;
}
.article-summary-lead,
.article-geo-lead {
color: var(--text-body) !important;
font-size: 1.05rem !important;
line-height: 1.7 !important;
}
.article-summary-lead strong,
.article-geo-lead strong {
color: var(--text-heading) !important;
}
.article-meta-row {
color: var(--text-muted) !important;
border-top: 1px solid var(--border-subtle) !important;
}
.article-meta-row .meta-label {
color: var(--text-muted) !important;
}
.article-meta-row .meta-name {
color: var(--text-heading) !important;
}
.article-meta-row time,
.article-meta-row span {
color: var(--text-body) !important;
}
.article-meta-item.meta-reviewer {
color: var(--accent-petrol) !important;
}
/* Direct Answer Card */
.direct-answer-card {
border-radius: var(--radius-lg) !important;
background: var(--accent-petrol-light) !important;
border: 1px solid var(--accent-petrol-border) !important;
padding: 20px 24px !important;
margin: 20px 0 !important;
}
.direct-answer-badge {
background: var(--accent-petrol) !important;
color: #FFFFFF !important;
font-size: 11px !important;
padding: 3px 8px !important;
font-weight: 700 !important;
}
:root[data-theme="dark"] .direct-answer-badge {
color: #0E1A22 !important;
}
.direct-answer-question {
color: var(--text-heading) !important;
}
.direct-answer-text {
color: var(--text-body) !important;
font-size: 16px !important;
line-height: 1.7 !important;
}
/* Takeaways Card */
.article-takeaways-card {
border-radius: var(--radius-lg) !important;
background: var(--bg-secondary) !important;
border: 1px solid var(--border-regular) !important;
border-left: 4px solid var(--accent-petrol) !important;
box-shadow: var(--shadow-soft) !important;
}
.takeaways-title {
color: var(--text-heading) !important;
font-weight: 800 !important;
}
.takeaways-list {
color: var(--text-body) !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
.takeaways-list li {
color: var(--text-body) !important;
}
/* Table of Contents */
.toc-title {
color: var(--text-heading) !important;
font-weight: 800 !important;
}
.toc-link {
color: var(--text-muted) !important;
font-weight: 500 !important;
transition: all var(--transition-fast) !important;
}
.toc-link:hover {
color: var(--accent-petrol) !important;
background: var(--bg-secondary) !important;
}
.toc-link.is-active {
color: var(--text-heading) !important;
font-weight: 700 !important;
border-left: 2px solid var(--accent-petrol) !important;
background: var(--bg-secondary) !important;
}
/* Author Card */
.article-author-card {
border-radius: var(--radius-lg) !important;
padding: 28px !important;
margin-top: 40px !important;
background: var(--surface-white) !important;
border: 1px solid var(--border-subtle) !important;
}
.author-card-avatar {
background: var(--accent-petrol) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .author-card-avatar {
color: #0E1A22 !important;
}
.article-author-card .author-name {
color: var(--text-heading) !important;
}
.article-author-card .author-role {
color: var(--accent-petrol) !important;
font-weight: 600 !important;
}
.article-author-card .author-bio,
.article-author-card p {
color: var(--text-body) !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
.author-link {
color: var(--accent-petrol) !important;
}
.author-link:hover {
color: var(--accent-petrol-hover) !important;
}
/* Closing CTA Card */
.closing-cta-card {
background: var(--surface-white) !important;
border: 1px solid var(--border-regular) !important;
}
.closing-cta-card h2,
.closing-cta-card h3 {
color: var(--text-heading) !important;
}
.closing-cta-card p {
color: var(--text-body) !important;
}
/* Editorial Reading Layout & Prose */
.prose {
max-width: 760px !important;
color: var(--text-body) !important;
font-size: 17px !important;
line-height: 1.75 !important;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
color: var(--text-heading) !important;
}
.prose strong {
color: var(--text-heading) !important;
}
.prose a {
color: var(--accent-petrol) !important;
text-decoration: underline !important;
text-decoration-color: var(--accent-petrol-border) !important;
transition: color var(--transition-fast);
}
.prose a:hover {
color: var(--accent-petrol-hover) !important;
}
/* Soft Tech Table Standards */
.table-wrap,
.table-responsive {
border-radius: var(--radius-table) !important;
border: 1px solid var(--border-regular) !important;
background: var(--surface-white) !important;
overflow-x: auto !important;
margin: 2em 0 !important;
box-shadow: var(--shadow-soft);
}
.table-wrap table,
.table-responsive table,
.prose table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: none !important;
margin: 0 !important;
display: table !important;
}
.prose table th,
.table-wrap table th {
background: var(--bg-secondary) !important;
color: var(--text-heading) !important;
font-weight: 700 !important;
padding: 14px 18px !important;
text-align: left !important;
border-bottom: 1px solid var(--border-regular) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
font-size: 14px !important;
letter-spacing: 0.01em !important;
}
.prose table td,
.table-wrap table td {
padding: 13px 18px !important;
border-bottom: 1px solid var(--border-subtle) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
font-size: 14.5px !important;
color: var(--text-body) !important;
}
.prose table tbody tr:nth-child(even),
.table-wrap table tbody tr:nth-child(even) {
background: var(--bg-main) !important;
}
.prose table tbody tr:last-child td,
.table-wrap table tbody tr:last-child td {
border-bottom: none !important;
}
/* Site Footer */
.site-footer {
background: var(--footer-bg) !important;
color: var(--footer-text) !important;
border-top: 1px solid var(--border-subtle) !important;
padding: 68px 0 28px !important;
}
.footer-brand {
color: #FFFFFF !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
.footer-brand span {
color: var(--accent-petrol) !important;
}
.footer-grid h3 {
color: #FFFFFF !important;
font-weight: 700 !important;
}
.footer-grid a {
color: var(--footer-muted) !important;
transition: color var(--transition-fast);
}
.footer-grid a:hover {
color: #FFFFFF !important;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
color: var(--footer-muted) !important;
}
.footer-linkedin-link {
border-radius: var(--radius-sm) !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #FFFFFF !important;
transition: all var(--transition-fast) !important;
}
.footer-linkedin-link:hover {
background: var(--accent-petrol) !important;
border-color: var(--accent-petrol) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .footer-linkedin-link:hover {
color: #0E1A22 !important;
}
/* CTA Section Soft Tech */
.cta {
background: var(--navy-deep) !important;
border-radius: var(--radius-xl) !important;
margin: 48px auto !important;
width: min(1200px, calc(100% - 48px)) !important;
padding: 64px 48px !important;
}
:root[data-theme="dark"] .cta {
background: var(--surface-white) !important;
border: 1px solid var(--border-regular) !important;
}
.cta h2 {
color: #FFFFFF !important;
}
:root[data-theme="dark"] .cta h2 {
color: var(--text-heading) !important;
}
.cta p {
color: var(--text-on-dark-muted) !important;
}
:root[data-theme="dark"] .cta p {
color: var(--text-body) !important;
}
.cta .button-light {
background: var(--accent-petrol) !important;
border-color: var(--accent-petrol) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .cta .button-light {
color: #0E1A22 !important;
font-weight: 800 !important;
}
.cta .button-light:hover {
background: var(--accent-petrol-hover) !important;
border-color: var(--accent-petrol-hover) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .cta .button-light:hover {
color: #0E1A22 !important;
}
/* Mobile & Responsive Fluidity */
@media (max-width: 768px) {
.cta {
padding: 40px 24px !important;
border-radius: var(--radius-lg) !important;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ===================================================================
BEK-WEB R5-B.2.6 — SITE-WIDE SEARCH SYSTEM (PALETTE 05 SOFT TECH)
=================================================================== */
/* Header Search Toggle Button */
.search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
border-radius: var(--radius-sm, 8px) !important;
border: 1px solid var(--border-regular) !important;
background-color: var(--surface-white) !important;
color: var(--text-heading) !important;
cursor: pointer;
position: relative;
transition: border-color var(--transition-fast, 180ms ease),
background-color var(--transition-fast, 180ms ease),
color var(--transition-fast, 180ms ease),
transform var(--transition-fast, 180ms ease),
box-shadow var(--transition-fast, 180ms ease) !important;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(22, 45, 58, 0.04);
}
.search-toggle:hover {
border-color: var(--accent-petrol) !important;
color: var(--accent-petrol) !important;
background-color: var(--bg-secondary) !important;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(25, 124, 139, 0.12);
}
.search-toggle:active {
transform: translateY(0) scale(0.95);
}
.search-toggle:focus-visible {
outline: 2px solid var(--accent-petrol) !important;
outline-offset: 2px !important;
}
:root[data-theme="dark"] .search-toggle {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .search-toggle:hover {
box-shadow: 0 2px 8px rgba(44, 181, 200, 0.2);
}
@media (max-width: 1000px) {
.search-toggle {
margin-left: auto;
}
}
/* Search Modal Dialog */
.search-dialog {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: none;
padding: 0;
background: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: clamp(40px, 12vh, 100px);
z-index: 1000;
overflow: hidden;
}
.search-dialog:not([open]) {
display: none;
}
.search-dialog::backdrop {
background: rgba(14, 26, 34, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
body.search-modal-open {
overflow: hidden;
}
.search-dialog-box {
width: min(680px, calc(100% - 32px));
max-height: calc(100vh - 120px);
background: var(--surface-white);
border: 1px solid var(--border-regular);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 20px 48px rgba(22, 45, 58, 0.18), 0 4px 12px rgba(22, 45, 58, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
animation: searchDialogPop 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes searchDialogPop {
from {
opacity: 0;
transform: scale(0.96) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.search-dialog-header {
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-white);
}
.search-input-wrap {
flex: 1;
display: flex;
align-items: center;
position: relative;
background: var(--bg-main);
border: 1px solid var(--border-regular);
border-radius: var(--radius-md, 10px);
padding: 0 12px;
transition: border-color var(--transition-fast);
}
.search-input-wrap:focus-within {
border-color: var(--accent-petrol);
box-shadow: 0 0 0 3px rgba(25, 124, 139, 0.15);
}
.search-input-icon {
color: var(--slate-titanium);
flex-shrink: 0;
margin-right: 10px;
}
.search-input {
flex: 1;
height: 44px;
border: none;
background: transparent;
color: var(--text-heading);
font-family: inherit;
font-size: 15px;
outline: none;
min-width: 0;
}
.search-input::placeholder {
color: var(--text-muted);
}
.search-clear-btn {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px 8px;
font-size: 14px;
border-radius: var(--radius-sm);
}
.search-clear-btn:hover {
color: var(--text-heading);
}
.search-close-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--radius-sm, 8px);
border: 1px solid var(--border-regular);
background: var(--bg-main);
color: var(--text-heading);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all var(--transition-fast);
}
.search-close-btn:hover {
border-color: var(--accent-petrol);
color: var(--accent-petrol);
background: var(--bg-secondary);
}
.search-close-key {
font-family: monospace;
font-size: 11px;
background: var(--surface-white);
border: 1px solid var(--border-subtle);
padding: 2px 5px;
border-radius: 4px;
}
/* Filter Pills */
.search-filter-pills {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--bg-main);
border-bottom: 1px solid var(--border-subtle);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.filter-pill {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border-regular);
background: var(--surface-white);
color: var(--text-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 6px;
}
.filter-pill:hover {
border-color: var(--accent-petrol);
color: var(--accent-petrol);
}
.filter-pill.active {
background: var(--accent-petrol);
border-color: var(--accent-petrol);
color: #FFFFFF !important;
}
.filter-count {
font-size: 11px;
opacity: 0.85;
}
/* Modal Results List */
.search-dialog-body {
flex: 1;
overflow-y: auto;
padding: 8px 0;
max-height: 420px;
}
.search-results-list {
display: flex;
flex-direction: column;
}
.search-result-item {
position: relative;
transition: background-color var(--transition-fast);
}
.search-result-link {
display: block;
padding: 14px 20px;
text-decoration: none;
color: inherit;
border-left: 3px solid transparent;
transition: all var(--transition-fast);
}
.search-result-item.is-active .search-result-link,
.search-result-link:hover {
background: var(--bg-secondary);
border-left-color: var(--accent-petrol);
}
.search-result-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.search-result-badge,
.search-card-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge-articles {
background: #E8F4F8;
color: #0E6273;
}
.badge-services {
background: #EBF3EA;
color: #276738;
}
.badge-training {
background: #F8F0E5;
color: #9C580E;
}
.badge-resources {
background: #F0EBF8;
color: #5D3799;
}
.badge-pages {
background: #EAEFF2;
color: #375362;
}
:root[data-theme="dark"] .badge-articles { background: #133945; color: #6FD3E3; }
:root[data-theme="dark"] .badge-services { background: #153B23; color: #7EE09B; }
:root[data-theme="dark"] .badge-training { background: #422912; color: #F5B971; }
:root[data-theme="dark"] .badge-resources { background: #2B1D45; color: #C5A4F9; }
:root[data-theme="dark"] .badge-pages { background: #21333D; color: #9ABECF; }
.search-result-category,
.search-card-category {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.search-result-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--text-heading);
line-height: 1.35;
}
.search-result-excerpt {
margin: 0;
font-size: 13px;
color: var(--text-body);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Highlighted Matches */
.search-highlight {
background: rgba(25, 124, 139, 0.16);
color: var(--accent-petrol);
font-weight: 700;
padding: 1px 3px;
border-radius: 3px;
}
:root[data-theme="dark"] .search-highlight {
background: rgba(44, 181, 200, 0.25);
color: #6FD3E3;
}
/* Callout Box Dark Theme Refinements */
:root[data-theme="dark"] .editorial-callout {
background: var(--surface-tinted);
border-color: var(--border);
}
:root[data-theme="dark"] .editorial-callout.callout-info {
border-left-color: #38bdf8;
background: var(--surface-tinted);
}
:root[data-theme="dark"] .callout-info .callout-icon {
color: #38bdf8;
}
:root[data-theme="dark"] .callout-info .callout-badge {
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.3);
background: var(--surface-raised);
}
:root[data-theme="dark"] .callout-warning .callout-badge {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.3);
background: var(--surface-raised);
}
:root[data-theme="dark"] .callout-warning .callout-icon {
color: #fbbf24;
}
:root[data-theme="dark"] .callout-important .callout-badge {
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
background: var(--surface-raised);
}
:root[data-theme="dark"] .callout-important .callout-icon {
color: #f87171;
}
:root[data-theme="dark"] .callout-caution .callout-badge {
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
background: var(--surface-raised);
}
:root[data-theme="dark"] .callout-caution .callout-icon {
color: #f87171;
}
:root[data-theme="dark"] .callout-tip .callout-badge {
color: #4ade80;
border-color: rgba(74, 222, 128, 0.3);
background: var(--surface-raised);
}
:root[data-theme="dark"] .callout-tip .callout-icon {
color: #4ade80;
}
:root[data-theme="dark"] .callout-body {
color: var(--text);
}
/* Empty State & Suggestion Chips */
.search-empty-state {
padding: 32px 24px;
text-align: center;
}
.search-empty-title {
font-size: 16px;
font-weight: 700;
color: var(--text-heading);
margin: 0 0 6px;
}
.search-empty-hint {
font-size: 14px;
color: var(--text-muted);
margin: 0 0 16px;
}
.search-suggest-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.suggest-chip {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border-regular);
background: var(--bg-main);
color: var(--accent-petrol);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
}
.suggest-chip:hover {
background: var(--accent-petrol);
border-color: var(--accent-petrol);
color: #FFFFFF !important;
}
/* Modal Footer */
.search-dialog-footer {
padding: 12px 20px;
border-top: 1px solid var(--border-subtle);
background: var(--bg-main);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
}
.search-shortcuts-guide {
display: flex;
align-items: center;
gap: 14px;
}
.search-shortcuts-guide kbd {
font-family: monospace;
font-size: 11px;
background: var(--surface-white);
border: 1px solid var(--border-subtle);
padding: 2px 5px;
border-radius: 4px;
margin-right: 3px;
}
.search-view-all-link {
font-weight: 700;
color: var(--accent-petrol);
text-decoration: none;
}
.search-view-all-link:hover {
text-decoration: underline;
}
/* Dedicated /arama/ Results Page Styles */
.search-page-hero {
padding: 64px 0 44px;
background: linear-gradient(135deg, var(--surface-white) 0%, var(--accent-petrol-light) 100%);
border-bottom: 1px solid var(--border-subtle);
}
.search-page-form {
margin-top: 28px;
max-width: 680px;
}
.search-page-input-wrap {
display: flex;
align-items: center;
background: var(--surface-white);
border: 2px solid var(--border-regular);
border-radius: var(--radius-md, 10px);
padding: 4px 6px 4px 16px;
box-shadow: 0 4px 12px rgba(22, 45, 58, 0.05);
transition: border-color var(--transition-fast);
}
.search-page-input-wrap:focus-within {
border-color: var(--accent-petrol);
}
.search-page-input {
flex: 1;
height: 46px;
border: none;
background: transparent;
font-size: 16px;
color: var(--text-heading);
outline: none;
}
.button-search {
padding: 12px 24px;
border-radius: var(--radius-sm, 8px);
font-weight: 700;
min-height: 44px;
}
.search-results-header {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.search-summary-text {
font-size: 16px;
font-weight: 700;
color: var(--text-heading);
}
.search-page-results-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.search-card {
padding: 24px 28px;
background: var(--surface-white);
border: 1px solid var(--border-regular);
border-radius: var(--radius-md, 12px);
box-shadow: 0 2px 6px rgba(22, 45, 58, 0.03);
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-card:hover {
transform: translateY(-2px);
border-color: var(--accent-petrol);
box-shadow: 0 6px 18px rgba(25, 124, 139, 0.08);
}
.search-card-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.search-card-title {
margin: 0 0 10px;
font-size: 20px;
font-weight: 800;
line-height: 1.35;
}
.search-card-title a {
color: var(--text-heading);
text-decoration: none;
}
.search-card-title a:hover {
color: var(--accent-petrol);
}
.search-card-excerpt {
margin: 0 0 16px;
font-size: 15px;
color: var(--text-body);
line-height: 1.65;
}
.search-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border-subtle);
padding-top: 14px;
}
.search-card-action {
font-size: 14px;
font-weight: 700;
color: var(--accent-petrol);
text-decoration: none;
}
.search-card-action:hover {
text-decoration: underline;
}
.search-card-url {
font-size: 12px;
font-family: monospace;
color: var(--text-muted);
}
.search-page-empty {
padding: 60px 20px;
text-align: center;
}
.empty-state-box {
max-width: 540px;
margin: 0 auto;
padding: 36px 30px;
background: var(--surface-white);
border: 1px dashed var(--border-regular);
border-radius: var(--radius-lg, 16px);
}
.empty-state-box h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 800;
}
.empty-state-box p {
margin: 0 0 20px;
color: var(--text-muted);
font-size: 14.5px;
}
@media (max-width: 768px) {
.search-dialog {
padding-top: 0;
align-items: flex-end;
}
.search-dialog-box {
width: 100%;
max-height: 85vh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.search-shortcuts-guide {
display: none;
}
.search-page-input-wrap {
flex-direction: column;
padding: 12px;
gap: 10px;
}
.search-page-input {
width: 100%;
}
.button-search {
width: 100%;
justify-content: center;
}
.search-card {
padding: 20px;
}
.search-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}